DSS-1043: Textareas replaced with Editor components for: bulk-notice,…

… bulk-takedown, notice, takedown and compliance-order pages
bcgov · Nov 25, 2024 · d81692b · d81692b
1 parent ee4206b
commit d81692b
Show file tree

Hide file tree

Showing 13 changed files with 195 additions and 41 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -26,6 +26,7 @@
         "ol": "^8.2.0",
         "primeicons": "^6.0.1",
         "primeng": "^17.11.0",
+        "quill": "^2.0.2",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.4"

diff --git a/.../src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.html b/.../src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.html
@@ -136,11 +136,23 @@ <h4>All fields are required except where stated.</h4>
                 <label for="comment">Add additional comments to all Notices to selected listings (optional)</label>
             </div>
             <div class="form-group-row-col">
-                <textarea #textarea rows="5" cols="30" maxlength="2000" class="wide custom-details"
-                    formControlName="comment" placeholder="Optional" pInputTextarea id="comment"
-                    name="comment"></textarea>
-                <span class="limit-text" [class.almost-limit-text]="textarea.value.length > 1950"
-                    [class.limited-text]="textarea.value.length > 1999">{{textarea.value.length}}/2000</span>
+
+                <p-editor (onTextChange)="onEditorChanged($event)" appendTo="body" #textarea id="comment" name="comment"
+                    placeholder="Optional" formControlName="comment" [style]="{ height: '320px' }">
+                    <ng-template pTemplate="header">
+                        <span class="ql-formats">
+                            <button type="button" class="ql-bold" aria-label="Bold"></button>
+                            <button type="button" class="ql-italic" aria-label="Italic"></button>
+                            <button type="button" class="ql-underline" aria-label="Underline"></button>
+                            <button type="button" class="ql-link" aria-label="Link"></button>
+                            <button class="ql-list" value="ordered" aria-label="List Ordered"></button>
+                            <button class="ql-list" value="bullet" aria-label="List Bullet"></button>
+                        </span>
+                    </ng-template>
+                </p-editor>
+                <span class="limit-text" [class.almost-limit-text]="(commentControl.getRawValue() || '').length > 1950"
+                    [class.limited-text]="(commentControl.getRawValue() || '').length > 1999">{{(commentControl.getRawValue()
+                    || '').length}}/2000</span>
             </div>
         </div>
     </p-panel>

diff --git a/...nd/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.ts b/...nd/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.ts
@@ -20,6 +20,7 @@ import { ComplianceNoticeBulk } from '../../../common/models/compliance-notice';
 import { OverlayPanelModule } from 'primeng/overlaypanel';
 import { GlobalLoaderService } from '../../../common/services/global-loader.service';
 import { ListingTableRow } from '../../../common/models/listing-table-row';
+import { EditorModule, EditorTextChangeEvent } from 'primeng/editor';
 
 @Component({
   selector: 'app-bulk-compliance-notice',
@@ -37,6 +38,7 @@ import { ListingTableRow } from '../../../common/models/listing-table-row';
     ReactiveFormsModule,
     FormsModule,
     OverlayPanelModule,
+    EditorModule,
   ],
   templateUrl: './bulk-compliance-notice.component.html',
   styleUrl: './bulk-compliance-notice.component.scss'
@@ -62,6 +64,9 @@ export class BulkComplianceNoticeComponent implements OnInit {
   public get lgContactEmailControl(): AbstractControl {
     return this.myForm.controls['lgContactEmail'];
   }
+  public get commentControl(): AbstractControl {
+    return this.myForm.controls['comment'];
+  }
 
   constructor(private fb: FormBuilder,
     private messageHandlerService: ErrorHandlingService,
@@ -93,6 +98,10 @@ export class BulkComplianceNoticeComponent implements OnInit {
       });
   }
 
+  onEditorChanged(_: EditorTextChangeEvent): void {
+    this.commentControl.updateValueAndValidity();
+  }
+
   onSort(property: keyof ListingDetailsWithHostCheckboxExtension): void {
     if (this.sort) {
       if (this.sort.prop === property) {

diff --git a/...nd/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.html b/...nd/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.html
@@ -116,19 +116,29 @@ <h4>Takedown Requests for each platform are aggregated into a CSV file and sent
 
         <div class="form-group-row">
             <div class="form-group-row-col">
-                <label for="customDetailTxt">Provide details of the request</label>
+                <label for="customDetailTxt">Provide details of the request
+                    <strong>{{isWithStandardDetailControl.value?' (Optional)':''}}</strong></label>
             </div>
             <div class="form-group-row-col">
-                <textarea #textarea rows="5" cols="30" maxlength="2000" class="wide custom-details"
-                    formControlName="customDetailTxt"
-                    placeholder="{{isWithStandardDetailControl.value?'Optional':'Required'}}" pInputTextarea
-                    id="customDetailTxt" name="customDetailTxt"></textarea>
-                <span class="limit-text" [class.almost-limit-text]="textarea.value.length > 1950"
-                    [class.limited-text]="textarea.value.length > 1999">{{textarea.value.length}}/2000</span>
+                <p-editor (onTextChange)="onEditorChanged($event)" appendTo="body" #textarea id="customDetailTxt"
+                    name="customDetailTxt" formControlName="customDetailTxt" [style]="{ height: '320px' }">
+                    <ng-template pTemplate="header">
+                        <span class="ql-formats">
+                            <button type="button" class="ql-bold" aria-label="Bold"></button>
+                            <button type="button" class="ql-italic" aria-label="Italic"></button>
+                            <button type="button" class="ql-underline" aria-label="Underline"></button>
+                            <button type="button" class="ql-link" aria-label="Link"></button>
+                            <button class="ql-list" value="ordered" aria-label="List Ordered"></button>
+                            <button class="ql-list" value="bullet" aria-label="List Bullet"></button>
+                        </span>
+                    </ng-template>
+                </p-editor>
+                <span class="limit-text" [class.almost-limit-text]="(commentControl.getRawValue() || '').length > 1950"
+                    [class.limited-text]="(commentControl.getRawValue() || '').length > 1999">{{(commentControl.getRawValue()
+                    || '').length}}/2000</span>
             </div>
-            <div class="form-group-row-col validation-errors"
-                *ngIf="!customDetailTxtControl.pristine && customDetailTxtControl.errors">
-                <small id="customDetailTxtError" *ngIf="customDetailTxtControl.errors?.['required']">Details of the
+            <div class="form-group-row-col validation-errors" *ngIf="!commentControl.pristine && commentControl.errors">
+                <small id="customDetailTxtError" *ngIf="commentControl.errors?.['required']">Details of the
                     request
                     are required</small>
             </div>

diff --git a/...tend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.ts b/...tend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.ts
@@ -18,6 +18,7 @@ import { validateEmailListString } from '../../../common/consts/validators.const
 import { ErrorHandlingService } from '../../../common/services/error-handling.service';
 import { GlobalLoaderService } from '../../../common/services/global-loader.service';
 import { ListingTableRow } from '../../../common/models/listing-table-row';
+import { EditorModule, EditorTextChangeEvent } from 'primeng/editor';
 
 @Component({
   selector: 'app-bulk-takedown-request',
@@ -33,6 +34,7 @@ import { ListingTableRow } from '../../../common/models/listing-table-row';
     DialogModule,
     ChipsModule,
     ReactiveFormsModule,
+    EditorModule,
   ],
   templateUrl: './bulk-takedown-request.component.html',
   styleUrl: './bulk-takedown-request.component.scss'
@@ -62,7 +64,7 @@ export class BulkTakedownRequestComponent implements OnInit {
   public get isWithStandardDetailControl(): AbstractControl {
     return this.myForm.controls['isWithStandardDetail'];
   }
-  public get customDetailTxtControl(): AbstractControl {
+  public get commentControl(): AbstractControl {
     return this.myForm.controls['customDetailTxt'];
   }
 
@@ -93,6 +95,10 @@ export class BulkTakedownRequestComponent implements OnInit {
       });
   }
 
+  onEditorChanged(_: EditorTextChangeEvent): void {
+    this.commentControl.updateValueAndValidity();
+  }
+
   onSort(property: keyof ListingDetails): void {
     if (this.sort) {
       if (this.sort.prop === property) {
@@ -149,11 +155,11 @@ export class BulkTakedownRequestComponent implements OnInit {
 
   onWithStandardDetailChanged(value: CheckboxChangeEvent): void {
     if (value.checked)
-      this.customDetailTxtControl.removeValidators([Validators.required]);
+      this.commentControl.removeValidators([Validators.required]);
     else
-      this.customDetailTxtControl.addValidators([Validators.required]);
+      this.commentControl.addValidators([Validators.required]);
 
-    this.customDetailTxtControl.updateValueAndValidity();
+    this.commentControl.updateValueAndValidity();
     this.myForm.updateValueAndValidity();
   }
 

diff --git a/frontend/src/app/features/components/compliance-notice/compliance-notice.component.html b/frontend/src/app/features/components/compliance-notice/compliance-notice.component.html
@@ -129,15 +129,26 @@
                 <label for="comment">Add Additional Comments to Email (Optional)</label>
             </div>
             <div class="form-group-row-col">
-                <textarea #textarea rows="5" cols="30" maxlength="2000" class="full-width-text-field" pInputTextarea
-                    id="comment" name="comment" placeholder="Enter Additional Comment Here..."></textarea>
-                <span class="limit-text" [class.almost-limit-text]="textarea.value.length > 1950"
-                    [class.limited-text]="textarea.value.length > 1999">{{textarea.value.length}}/2000</span>
+                <p-editor appendTo="body" id="comment" name="comment" [(ngModel)]="comment"
+                    placeholder="Enter Additional Comment Here..." [style]="{ height: '320px' }">
+                    <ng-template pTemplate="header">
+                        <span class="ql-formats">
+                            <button type="button" class="ql-bold" aria-label="Bold"></button>
+                            <button type="button" class="ql-italic" aria-label="Italic"></button>
+                            <button type="button" class="ql-underline" aria-label="Underline"></button>
+                            <button type="button" class="ql-link" aria-label="Link"></button>
+                            <button class="ql-list" value="ordered" aria-label="List Ordered"></button>
+                            <button class="ql-list" value="bullet" aria-label="List Bullet"></button>
+                        </span>
+                    </ng-template>
+                </p-editor>
+                <span class="limit-text" [class.almost-limit-text]="comment.length > 1950"
+                    [class.limited-text]="comment.length > 1999">{{comment.length}}/2000</span>
             </div>
         </div>
     </div>
     <div class="actions">
-        <button pButton id="submit-dialog-btn" (click)="onSubmit(textarea.value,textarea)">Submit</button>
+        <button pButton id="submit-dialog-btn" (click)="onSubmit(comment)">Submit</button>
         <button pButton id="cancel-dialog-btn" class="outline-btn" (click)="onPreviewClose()">Cancel</button>
     </div>
 </p-dialog>
diff --git a/frontend/src/app/features/components/compliance-notice/compliance-notice.component.ts b/frontend/src/app/features/components/compliance-notice/compliance-notice.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { DropdownModule } from 'primeng/dropdown';
 import { InputTextModule } from 'primeng/inputtext';
 import { InputTextareaModule } from 'primeng/inputtextarea';
@@ -21,12 +21,14 @@ import { Router } from '@angular/router';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { GlobalLoaderService } from '../../../common/services/global-loader.service';
 import { ErrorHandlingService } from '../../../common/services/error-handling.service';
+import { EditorModule, EditorTextChangeEvent } from 'primeng/editor';
 
 @Component({
   selector: 'app-compliance-notice',
   standalone: true,
   imports: [
     ReactiveFormsModule,
+    FormsModule,
     CommonModule,
     DropdownModule,
     InputTextModule,
@@ -39,6 +41,7 @@ import { ErrorHandlingService } from '../../../common/services/error-handling.se
     TooltipModule,
     InputMaskModule,
     ButtonModule,
+    EditorModule,
   ],
   templateUrl: './compliance-notice.component.html',
   styleUrl: './compliance-notice.component.scss'
@@ -52,6 +55,7 @@ export class ComplianceNoticeComponent implements OnInit {
   previewText = 'No preview'
 
   messages = new Array<Message>();
+  comment = '';
 
   public get platformIdControl(): AbstractControl {
     return this.myForm.controls['platformId'];
@@ -127,7 +131,7 @@ export class ComplianceNoticeComponent implements OnInit {
     }
   }
 
-  onSubmit(comment: string, textAreaElement: HTMLTextAreaElement): void {
+  onSubmit(comment: string): void {
     this.messages = [];
 
     if (this.myForm.valid) {
@@ -147,7 +151,7 @@ export class ComplianceNoticeComponent implements OnInit {
             this.myForm.reset();
             this.initForm();
             this.onPreviewClose();
-            this.cleanupPopupComment(textAreaElement);
+            this.comment = '';
             this.loaderService.loadingEnd();
             this.cd.detectChanges();
           }

diff --git a/frontend/src/app/features/components/delisting-request/delisting-request.component.html b/frontend/src/app/features/components/delisting-request/delisting-request.component.html
@@ -85,15 +85,28 @@ <h4>Add Details of your request</h4>
 
     <div class="form-group-row">
         <div class="form-group-row-col">
-            <label for="customDetailTxt">Provide details of the request</label>
+            <label for="customDetailTxt">Provide details of the request
+                <strong>{{isWithStandardDetailControl.value?'(Optional)':''}}</strong></label>
         </div>
         <div class="form-group-row-col">
-            <textarea #textarea rows="5" cols="30" maxlength="2000" class="customDetail-txa"
-                formControlName="customDetailTxt"
-                placeholder="{{isWithStandardDetailControl.value?'Optional':'Required'}}" pInputTextarea
-                id="customDetailTxt" name="customDetailTxt"></textarea>
-            <span class="limit-text" [class.almost-limit-text]="textarea.value.length > 1950"
-                [class.limited-text]="textarea.value.length > 1999">{{textarea.value.length}}/2000</span>
+            <p-editor (onTextChange)="onEditorChanged($event)" appendTo="body" id="comment" name="comment"
+                placeholder="Enter Additional Comment Here..." formControlName="customDetailTxt"
+                [style]="{ height: '320px' }">
+                <ng-template pTemplate="header">
+                    <span class="ql-formats">
+                        <button type="button" class="ql-bold" aria-label="Bold"></button>
+                        <button type="button" class="ql-italic" aria-label="Italic"></button>
+                        <button type="button" class="ql-underline" aria-label="Underline"></button>
+                        <button type="button" class="ql-link" aria-label="Link"></button>
+                        <button class="ql-list" value="ordered" aria-label="List Ordered"></button>
+                        <button class="ql-list" value="bullet" aria-label="List Bullet"></button>
+                    </span>
+                </ng-template>
+            </p-editor>
+            <span class="limit-text"
+                [class.almost-limit-text]="(customDetailTxtControl.getRawValue() || '').length > 1950"
+                [class.limited-text]="(customDetailTxtControl.getRawValue() || '').length > 1999">{{(customDetailTxtControl.getRawValue()
+                || '').length}}/2000</span>
         </div>
         <div class="form-group-row-col validation-errors"
             *ngIf="!customDetailTxtControl.pristine && customDetailTxtControl.errors">