From a9d17d7e4f19e1543ea1179702dde8cc60fed186 Mon Sep 17 00:00:00 2001
From: Oleksandr Bohuslavskyi <o.bohuslavskyi@dxc.com>
Date: Wed, 27 Nov 2024 17:07:37 -0600
Subject: [PATCH] DSS-1043: revert takedown request editor

---
 .../bulk-takedown-request.component.html      | 30 +++++++------------
 .../bulk-takedown-request.component.ts        | 14 +++------
 .../delisting-request.component.html          | 27 +++++------------
 .../delisting-request.component.ts            |  6 ----
 4 files changed, 21 insertions(+), 56 deletions(-)

diff --git a/frontend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.html b/frontend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.html
index d7de89dc..3094dd9b 100644
--- a/frontend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.html
+++ b/frontend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.html
@@ -116,29 +116,19 @@ <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
-                    <strong>{{isWithStandardDetailControl.value?' (Optional)':''}}</strong></label>
+                <label for="customDetailTxt">Provide details of the request</label>
             </div>
             <div class="form-group-row-col">
-                <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>
+                <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>
             </div>
-            <div class="form-group-row-col validation-errors" *ngIf="!commentControl.pristine && commentControl.errors">
-                <small id="customDetailTxtError" *ngIf="commentControl.errors?.['required']">Details of the
+            <div class="form-group-row-col validation-errors"
+                *ngIf="!customDetailTxtControl.pristine && customDetailTxtControl.errors">
+                <small id="customDetailTxtError" *ngIf="customDetailTxtControl.errors?.['required']">Details of the
                     request
                     are required</small>
             </div>
diff --git a/frontend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.ts b/frontend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.ts
index dfc76a6e..09c8f740 100644
--- a/frontend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.ts
+++ b/frontend/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.ts
@@ -18,7 +18,6 @@ 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',
@@ -34,7 +33,6 @@ import { EditorModule, EditorTextChangeEvent } from 'primeng/editor';
     DialogModule,
     ChipsModule,
     ReactiveFormsModule,
-    EditorModule,
   ],
   templateUrl: './bulk-takedown-request.component.html',
   styleUrl: './bulk-takedown-request.component.scss'
@@ -64,7 +62,7 @@ export class BulkTakedownRequestComponent implements OnInit {
   public get isWithStandardDetailControl(): AbstractControl {
     return this.myForm.controls['isWithStandardDetail'];
   }
-  public get commentControl(): AbstractControl {
+  public get customDetailTxtControl(): AbstractControl {
     return this.myForm.controls['customDetailTxt'];
   }
 
@@ -95,10 +93,6 @@ export class BulkTakedownRequestComponent implements OnInit {
       });
   }
 
-  onEditorChanged(_: EditorTextChangeEvent): void {
-    this.commentControl.updateValueAndValidity();
-  }
-
   onSort(property: keyof ListingDetails): void {
     if (this.sort) {
       if (this.sort.prop === property) {
@@ -155,11 +149,11 @@ export class BulkTakedownRequestComponent implements OnInit {
 
   onWithStandardDetailChanged(value: CheckboxChangeEvent): void {
     if (value.checked)
-      this.commentControl.removeValidators([Validators.required]);
+      this.customDetailTxtControl.removeValidators([Validators.required]);
     else
-      this.commentControl.addValidators([Validators.required]);
+      this.customDetailTxtControl.addValidators([Validators.required]);
 
-    this.commentControl.updateValueAndValidity();
+    this.customDetailTxtControl.updateValueAndValidity();
     this.myForm.updateValueAndValidity();
   }
 
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
index 7ec0071d..5fa1855f 100644
--- 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,28 +85,15 @@ <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
-                <strong>{{isWithStandardDetailControl.value?'(Optional)':''}}</strong></label>
+            <label for="customDetailTxt">Provide details of the request</label>
         </div>
         <div class="form-group-row-col">
-            <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>
+            <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>
         </div>
         <div class="form-group-row-col validation-errors"
             *ngIf="!customDetailTxtControl.pristine && customDetailTxtControl.errors">
diff --git a/frontend/src/app/features/components/delisting-request/delisting-request.component.ts b/frontend/src/app/features/components/delisting-request/delisting-request.component.ts
index c6076423..3bc588a0 100644
--- a/frontend/src/app/features/components/delisting-request/delisting-request.component.ts
+++ b/frontend/src/app/features/components/delisting-request/delisting-request.component.ts
@@ -22,7 +22,6 @@ import { InputNumberModule } from 'primeng/inputnumber';
 import { GlobalLoaderService } from '../../../common/services/global-loader.service';
 import { forkJoin } from 'rxjs';
 import { ErrorHandlingService } from '../../../common/services/error-handling.service';
-import { EditorModule, EditorTextChangeEvent } from 'primeng/editor';
 
 @Component({
   selector: 'app-delisting-request',
@@ -41,7 +40,6 @@ import { EditorModule, EditorTextChangeEvent } from 'primeng/editor';
     TooltipModule,
     ButtonModule,
     ToastModule,
-    EditorModule,
   ],
   templateUrl: './delisting-request.component.html',
   styleUrl: './delisting-request.component.scss'
@@ -153,10 +151,6 @@ export class DelistingRequestComponent implements OnInit {
     }
   }
 
-  onEditorChanged(_: EditorTextChangeEvent): void {
-    this.customDetailTxtControl.updateValueAndValidity();
-  }
-
   onPreviewClose(): void {
     this.isPreviewVisible = false;
   }