From d81692bc7f96243d7c59c25cec7ed99754afefde Mon Sep 17 00:00:00 2001 From: Oleksandr Bohuslavskyi Date: Mon, 25 Nov 2024 17:54:21 -0600 Subject: [PATCH] DSS-1043: Textareas replaced with Editor components for: bulk-notice, bulk-takedown, notice, takedown and compliance-order pages --- frontend/package-lock.json | 58 +++++++++++++++++++ frontend/package.json | 1 + .../bulk-compliance-notice.component.html | 22 +++++-- .../bulk-compliance-notice.component.ts | 9 +++ .../bulk-takedown-request.component.html | 30 ++++++---- .../bulk-takedown-request.component.ts | 14 +++-- .../compliance-notice.component.html | 21 +++++-- .../compliance-notice.component.ts | 10 +++- .../delisting-request.component.html | 27 ++++++--- .../delisting-request.component.ts | 6 ++ .../send-compliance-order.component.html | 26 ++++++--- .../send-compliance-order.component.ts | 6 ++ frontend/src/styles.scss | 6 ++ 13 files changed, 195 insertions(+), 41 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4c7c7f49..5531dc66 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -23,6 +23,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" @@ -5406,6 +5407,11 @@ "dev": true, "license": "MIT" }, + "node_modules/fast-diff": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", + "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==" + }, "node_modules/fast-glob": { "version": "3.3.1", "dev": true, @@ -7353,11 +7359,26 @@ "dev": true, "license": "MIT" }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, + "node_modules/lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "dev": true, "license": "MIT" }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "node_modules/lodash.isfinite": { "version": "3.3.2", "dev": true, @@ -8535,6 +8556,11 @@ "dev": true, "license": "(MIT AND Zlib)" }, + "node_modules/parchment": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz", + "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==" + }, "node_modules/parent-module": { "version": "1.0.1", "dev": true, @@ -9100,6 +9126,38 @@ "version": "2.0.0", "license": "ISC" }, + "node_modules/quill": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.2.tgz", + "integrity": "sha512-QfazNrhMakEdRG57IoYFwffUIr04LWJxbS/ZkidRFXYCQt63c1gK6Z7IHUXMx/Vh25WgPBU42oBaNzQ0K1R/xw==", + "dependencies": { + "eventemitter3": "^5.0.1", + "lodash-es": "^4.17.21", + "parchment": "^3.0.0", + "quill-delta": "^5.1.0" + }, + "engines": { + "npm": ">=8.2.3" + } + }, + "node_modules/quill-delta": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz", + "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==", + "dependencies": { + "fast-diff": "^1.3.0", + "lodash.clonedeep": "^4.5.0", + "lodash.isequal": "^4.5.0" + }, + "engines": { + "node": ">= 12.0.0" + } + }, + "node_modules/quill/node_modules/eventemitter3": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==" + }, "node_modules/randombytes": { "version": "2.1.0", "dev": true, diff --git a/frontend/package.json b/frontend/package.json index cf57dacd..ae785897 100644 --- 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/frontend/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.html b/frontend/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.html index 8814cf60..a97e1b80 100644 --- a/frontend/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.html +++ b/frontend/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.html @@ -136,11 +136,23 @@

All fields are required except where stated.

- - {{textarea.value.length}}/2000 + + + + + + + + + + + + + + {{(commentControl.getRawValue() + || '').length}}/2000
diff --git a/frontend/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.ts b/frontend/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.ts index 81d3e7b6..c70f7c8c 100644 --- a/frontend/src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.ts +++ b/frontend/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/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 3094dd9b..d7de89dc 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,19 +116,29 @@

Takedown Requests for each platform are aggregated into a CSV file and sent
- +
- - {{textarea.value.length}}/2000 + + + + + + + + + + + + + {{(commentControl.getRawValue() + || '').length}}/2000
-
- Details of the +
+ Details of the request are required
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 09c8f740..dfc76a6e 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,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 index 36aa1382..b015a8b8 100644 --- 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 @@
- - {{textarea.value.length}}/2000 + + + + + + + + + + + + + {{comment.length}}/2000
- +
\ No newline at end of file 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 index 82669f01..934b5928 100644 --- 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(); + 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 index 5fa1855f..7ec0071d 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,15 +85,28 @@

Add Details of your request

- +
- - {{textarea.value.length}}/2000 + + + + + + + + + + + + + {{(customDetailTxtControl.getRawValue() + || '').length}}/2000
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 3bc588a0..c6076423 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,6 +22,7 @@ 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', @@ -40,6 +41,7 @@ import { ErrorHandlingService } from '../../../common/services/error-handling.se TooltipModule, ButtonModule, ToastModule, + EditorModule, ], templateUrl: './delisting-request.component.html', styleUrl: './delisting-request.component.scss' @@ -151,6 +153,10 @@ export class DelistingRequestComponent implements OnInit { } } + onEditorChanged(_: EditorTextChangeEvent): void { + this.customDetailTxtControl.updateValueAndValidity(); + } + onPreviewClose(): void { this.isPreviewVisible = false; } diff --git a/frontend/src/app/features/components/send-compliance-order/send-compliance-order.component.html b/frontend/src/app/features/components/send-compliance-order/send-compliance-order.component.html index 595d0741..846c7522 100644 --- a/frontend/src/app/features/components/send-compliance-order/send-compliance-order.component.html +++ b/frontend/src/app/features/components/send-compliance-order/send-compliance-order.component.html @@ -97,11 +97,22 @@

Send a message to all hosts of the listings selected below. All fields are r

- - {{textarea.value.length}}/3800 + + + + + + + + + + + + + {{(commentControl.getRawValue() + || '').length}}/3800
@@ -138,8 +149,9 @@

Send a message to all hosts of the listings selected below. All fields are r
- +
diff --git a/frontend/src/app/features/components/send-compliance-order/send-compliance-order.component.ts b/frontend/src/app/features/components/send-compliance-order/send-compliance-order.component.ts index ebbe9974..93136937 100644 --- a/frontend/src/app/features/components/send-compliance-order/send-compliance-order.component.ts +++ b/frontend/src/app/features/components/send-compliance-order/send-compliance-order.component.ts @@ -20,6 +20,7 @@ import { validateEmailListString } from '../../../common/consts/validators.const import { TooltipOptions } from 'primeng/api'; import { ComplianceOrder } from '../../../common/models/compliance-order'; import { ComplianceService } from '../../../common/services/compliance.service'; +import { EditorModule, EditorTextChangeEvent } from 'primeng/editor'; @Component({ selector: 'app-send-compliance-order', @@ -38,6 +39,7 @@ import { ComplianceService } from '../../../common/services/compliance.service'; ReactiveFormsModule, FormsModule, OverlayPanelModule, + EditorModule, ], templateUrl: './send-compliance-order.component.html', styleUrl: './send-compliance-order.component.scss' @@ -157,6 +159,10 @@ export class SendComplianceOrderComponent implements OnInit { }); } + onEditorChanged(_: EditorTextChangeEvent): void { + this.commentControl.updateValueAndValidity(); + } + cancel(): void { this.searchStateService.selectedListings = []; this.router.navigateByUrl(this.returnUrl); diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index d9e261a5..73140de7 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,6 +1,8 @@ @import 'primeng/resources/themes/lara-light-blue/theme.css'; @import 'primeng/resources/primeng.css'; @import "primeicons/primeicons.css"; +@import "../node_modules/quill/dist/quill.core.css"; +@import "../node_modules/quill/dist/quill.snow.css"; @font-face { font-family: 'BcSans-regular'; @@ -623,4 +625,8 @@ body { } } } +} + +.ql-tooltip { + left: 1rem !important; } \ No newline at end of file