From 8e8c07a60ed7dd2467695bb1dfe4e2a0d84fd225 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Wed, 6 Jul 2022 02:08:53 +0300 Subject: [PATCH] RED-4247 - fixed found issues: - disabled watermarks can not be selected anymore on dossier create/edit and now user know if the watermark is disabled; - table is now sortable; - save button disappear now at first save; - fixed checkbox text; --- .../dossier-watermark-selector.component.html | 37 ++++++++ .../dossier-watermark-selector.component.scss | 24 ++++++ .../dossier-watermark-selector.component.ts | 85 +++++++++++++++++++ .../option-watermark.model.ts | 14 +++ .../watermark-screen.component.ts | 1 + .../watermarks-listing-screen.component.ts | 8 +- .../src/app/modules/icons/icons.module.ts | 1 + ...it-dossier-download-package.component.html | 42 ++------- ...edit-dossier-download-package.component.ts | 26 +----- .../add-dossier-dialog.component.html | 37 +------- .../add-dossier-dialog.component.ts | 37 +++----- .../src/app/modules/shared/shared.module.ts | 3 +- apps/red-ui/src/assets/i18n/de.json | 13 ++- apps/red-ui/src/assets/i18n/en.json | 9 +- .../src/assets/icons/general/warning.svg | 1 + 15 files changed, 204 insertions(+), 134 deletions(-) create mode 100644 apps/red-ui/src/app/components/dossier-watermark-selector/dossier-watermark-selector.component.html create mode 100644 apps/red-ui/src/app/components/dossier-watermark-selector/dossier-watermark-selector.component.scss create mode 100644 apps/red-ui/src/app/components/dossier-watermark-selector/dossier-watermark-selector.component.ts create mode 100644 apps/red-ui/src/app/components/dossier-watermark-selector/option-watermark.model.ts create mode 100644 apps/red-ui/src/assets/icons/general/warning.svg diff --git a/apps/red-ui/src/app/components/dossier-watermark-selector/dossier-watermark-selector.component.html b/apps/red-ui/src/app/components/dossier-watermark-selector/dossier-watermark-selector.component.html new file mode 100644 index 000000000..de078ba1e --- /dev/null +++ b/apps/red-ui/src/app/components/dossier-watermark-selector/dossier-watermark-selector.component.html @@ -0,0 +1,37 @@ +
+
+ + {{ 'dossier-watermark-selector.watermark' | translate }} + + + + + {{ selectedWatermark(watermarkId, watermarks).name }} + + + + {{ watermark.name }} + + +
+ +
+ + {{ 'dossier-watermark-selector.preview' | translate }} + + + + + {{ selectedWatermark(previewWatermarkId, watermarks).name }} + + + + {{ watermark.name }} + + +
+
diff --git a/apps/red-ui/src/app/components/dossier-watermark-selector/dossier-watermark-selector.component.scss b/apps/red-ui/src/app/components/dossier-watermark-selector/dossier-watermark-selector.component.scss new file mode 100644 index 000000000..a383c5123 --- /dev/null +++ b/apps/red-ui/src/app/components/dossier-watermark-selector/dossier-watermark-selector.component.scss @@ -0,0 +1,24 @@ +.container { + margin-top: 14px; + + .watermark { + width: 300px; + max-width: 300px; + + mat-select { + margin-left: 22px; + + mat-select-trigger, + mat-option { + display: flex; + align-items: center; + gap: 18px; + } + + span { + text-overflow: ellipsis; + overflow: hidden; + } + } + } +} diff --git a/apps/red-ui/src/app/components/dossier-watermark-selector/dossier-watermark-selector.component.ts b/apps/red-ui/src/app/components/dossier-watermark-selector/dossier-watermark-selector.component.ts new file mode 100644 index 000000000..b84a9d792 --- /dev/null +++ b/apps/red-ui/src/app/components/dossier-watermark-selector/dossier-watermark-selector.component.ts @@ -0,0 +1,85 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Observable } from 'rxjs'; +import { IWatermark } from '@red/domain'; +import { WatermarkService } from '../../services/entity-services/watermark.service'; +import { mapEach, Required } from '@iqser/common-ui'; +import { OptionWatermark } from '@components/dossier-watermark-selector/option-watermark.model'; +import { map, tap } from 'rxjs/operators'; + +const DocumentTypes = { + REDACTED: 'REDACTED', + PREVIEW: 'PREVIEW', +} as const; +type DocumentType = keyof typeof DocumentTypes; + +export interface UpdateWatermarkIdsEvent { + watermarkId: string | null; + previewWatermarkId: string | null; +} + +@Component({ + selector: 'redaction-dossier-watermark-selector', + templateUrl: './dossier-watermark-selector.component.html', + styleUrls: ['./dossier-watermark-selector.component.scss'], +}) +export class DossierWatermarkSelectorComponent implements OnInit { + @Input() @Required() dossierTemplateId!: string; + @Input() watermarkId: string | null; + @Input() previewWatermarkId: string | null; + @Output() readonly idsUpdate = new EventEmitter(); + + #oldWatermarkId: string | null; + #oldPreviewWatermarkId: string | null; + + watermarks$: Observable; + + readonly documentTypes = DocumentTypes; + + constructor(private readonly _watermarkService: WatermarkService) {} + + ngOnInit(): void { + this.watermarks$ = this._watermarkService.getWatermarks(this.dossierTemplateId).pipe( + map((watermarks: IWatermark[]) => watermarks.sort(this.sortByStatusFn)), + mapEach((watermark: IWatermark) => new OptionWatermark(watermark)), + tap((watermarks: OptionWatermark[]) => (this.#oldWatermarkId = watermarks[0].id)), + tap((watermarks: OptionWatermark[]) => (this.#oldPreviewWatermarkId = watermarks[0].id)), + ); + } + + sortByStatusFn = (a, b) => { + if (a.enabled === b.enabled) { + return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1; + } + return a.enabled ? -1 : 1; + }; + + toggleWatermarkSelection(checked: boolean, documentType: DocumentType): void { + if (checked) { + if (documentType === DocumentTypes.REDACTED) { + this.watermarkId = this.#oldWatermarkId; + } else { + this.previewWatermarkId = this.#oldPreviewWatermarkId; + } + } else { + if (documentType === DocumentTypes.REDACTED) { + this.#oldWatermarkId = this.watermarkId; + this.watermarkId = null; + } else { + this.#oldPreviewWatermarkId = this.previewWatermarkId; + this.previewWatermarkId = null; + } + } + this.emitNewValues(); + } + + emitNewValues(): void { + this.idsUpdate.emit({ + watermarkId: this.watermarkId, + previewWatermarkId: this.previewWatermarkId, + }); + } + + selectedWatermark(id: string, watermarks: OptionWatermark[]): OptionWatermark { + return watermarks.find(watermark => watermark.id === id); + } +} diff --git a/apps/red-ui/src/app/components/dossier-watermark-selector/option-watermark.model.ts b/apps/red-ui/src/app/components/dossier-watermark-selector/option-watermark.model.ts new file mode 100644 index 000000000..98656a261 --- /dev/null +++ b/apps/red-ui/src/app/components/dossier-watermark-selector/option-watermark.model.ts @@ -0,0 +1,14 @@ +import { IWatermark } from '@red/domain'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; + +export class OptionWatermark { + id!: string; + name!: string; + enabled!: boolean; + + constructor(watermark: IWatermark) { + this.id = watermark.id; + this.name = watermark.enabled ? watermark.name : `${_('disabled')} - ${watermark.name}`; + this.enabled = watermark.enabled; + } +} diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts index 164ca9f7b..1f9b1ec78 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts @@ -137,6 +137,7 @@ export class WatermarkScreenComponent implements OnInit { this._watermark.dossierTemplateId = this.#dossierTemplateId; this.form.setValue({ ...watermark }); this._loadViewer(); + this._changeDetectorRef.markForCheck(); }), ); } diff --git a/apps/red-ui/src/app/modules/admin/screens/watermarks-listing/watermarks-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermarks-listing/watermarks-listing-screen.component.ts index 9aa05c702..bed1458e0 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermarks-listing/watermarks-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/watermarks-listing/watermarks-listing-screen.component.ts @@ -31,11 +31,11 @@ export class WatermarksListingScreenComponent extends ListingComponent[] = [ - { label: _('watermarks-listing.table-col-names.name'), width: '2fr' }, - { label: _('watermarks-listing.table-col-names.status'), class: 'flex-center' }, + { label: _('watermarks-listing.table-col-names.name'), sortByKey: 'searchKey', width: '2fr' }, + { label: _('watermarks-listing.table-col-names.status'), sortByKey: 'enabled', class: 'flex-center' }, { label: _('watermarks-listing.table-col-names.created-by'), class: 'user-column' }, - { label: _('watermarks-listing.table-col-names.created-on') }, - { label: _('watermarks-listing.table-col-names.modified-on') }, + { label: _('watermarks-listing.table-col-names.created-on'), sortByKey: 'dateAdded' }, + { label: _('watermarks-listing.table-col-names.modified-on'), sortByKey: 'dateModified' }, ]; readonly tableHeaderLabel: string = _('watermarks-listing.table-header.title'); diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts index bb2e7eff9..c59924305 100644 --- a/apps/red-ui/src/app/modules/icons/icons.module.ts +++ b/apps/red-ui/src/app/modules/icons/icons.module.ts @@ -74,6 +74,7 @@ export class IconsModule { 'user', 'visibility', 'visibility-off', + 'warning', ]; for (const icon of icons) { diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.html index c220c11c8..ffd39571b 100644 --- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.html +++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.html @@ -15,41 +15,13 @@ > - -
- - {{ 'add-dossier-dialog.form.watermark' | translate }} - - - - - {{ watermark.name }} - - - -
- -
- - {{ 'add-dossier-dialog.form.preview' | translate }} - - - - - {{ watermark.name }} - - - -
- + + diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts index d3be1d2c8..bf59624f4 100644 --- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts +++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts @@ -8,6 +8,7 @@ import { PermissionsService } from '@services/permissions.service'; import { firstValueFrom } from 'rxjs'; import { DossiersService } from '@services/dossiers/dossiers.service'; import { WatermarkService } from '@services/entity-services/watermark.service'; +import { UpdateWatermarkIdsEvent } from '@components/dossier-watermark-selector/dossier-watermark-selector.component'; @Component({ selector: 'redaction-edit-dossier-download-package', @@ -23,9 +24,6 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS }), ); availableReportTypes: IReportTemplate[] = []; - watermarks: IWatermark[] = []; - oldWatermarkId: string; - oldPreviewWatermarkID: string; @Input() dossier: Dossier; @@ -34,7 +32,6 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS private readonly _reportTemplateController: ReportTemplateService, private readonly _formBuilder: UntypedFormBuilder, private readonly _permissionsService: PermissionsService, - private readonly _watermarkService: WatermarkService, ) {} get reportTypesLength() { @@ -92,10 +89,6 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS if (!this._permissionsService.canEditDossier(this.dossier)) { this.form.disable(); } - - this.watermarks = await firstValueFrom(this._watermarkService.getWatermarks(dossierTemplateId)); - this.oldWatermarkId = this.form.get('watermarkId').value || this.watermarks[0]?.id; - this.oldPreviewWatermarkID = this.form.get('previewWatermarkId').value || this.watermarks[0]?.id; } async save(): EditDossierSaveResult { @@ -137,19 +130,8 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS ); } - isWatermarkEnabled(key: string): boolean { - return this.form.get(key).value; - } - - enableDisableWatermark(checked: boolean, key: string): void { - let oldValue: string; - if (key === 'watermarkId') { - this.oldWatermarkId = !checked ? this.form.get(key).value : this.oldWatermarkId; - oldValue = this.oldWatermarkId; - } else { - this.oldPreviewWatermarkID = !checked ? this.form.get(key).value : this.oldPreviewWatermarkID; - oldValue = this.oldPreviewWatermarkID; - } - this.form.get(key).setValue(checked ? oldValue : null); + updateWatermarkIds(event: UpdateWatermarkIdsEvent) { + this.form.get('watermarkId').setValue(event.watermarkId); + this.form.get('previewWatermarkId').setValue(event.previewWatermarkId); } } diff --git a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html index 3564cc418..7a661dc1c 100644 --- a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html +++ b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html @@ -47,41 +47,8 @@ > - -
- - {{ 'add-dossier-dialog.form.watermark' | translate }} - - - - - {{ watermark.name }} - - - -
- -
- - {{ 'add-dossier-dialog.form.preview' | translate }} - - - - - {{ watermark.name }} - - - -
- + +
diff --git a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts index d156b069c..ea1b16778 100644 --- a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts +++ b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts @@ -1,6 +1,6 @@ import { Component, Inject, Injector, OnInit } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { DOSSIER_TEMPLATE_ID, DownloadFileType, IDossierRequest, IDossierTemplate, IReportTemplate, IWatermark } from '@red/domain'; +import { DOSSIER_TEMPLATE_ID, DownloadFileType, IDossierRequest, IDossierTemplate, IReportTemplate } from '@red/domain'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { downloadTypesTranslations } from '@translations/download-types-translations'; import { BaseDialogComponent, IconButtonTypes, LoadingService, SaveOptions } from '@iqser/common-ui'; @@ -11,7 +11,7 @@ import { firstValueFrom } from 'rxjs'; import dayjs from 'dayjs'; import { Router } from '@angular/router'; import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service'; -import { WatermarkService } from '@services/entity-services/watermark.service'; +import { UpdateWatermarkIdsEvent } from '@components/dossier-watermark-selector/dossier-watermark-selector.component'; interface DialogData { readonly dossierTemplateId?: string; @@ -33,9 +33,7 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On ); dossierTemplates: IDossierTemplate[]; availableReportTypes = []; - watermarks: IWatermark[] = []; - oldWatermarkId: string; - oldPreviewWatermarkID: string; + dossierTemplateId: string; constructor( private readonly _activeDossiersService: ActiveDossiersService, @@ -45,7 +43,6 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On private readonly _router: Router, private readonly _dialogService: DossiersDialogService, private readonly _loadingService: LoadingService, - private readonly _watermarkService: WatermarkService, protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) readonly data: DialogData, @@ -73,15 +70,17 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On } async ngOnInit(): Promise { - const dossierTemplateId = this.form.get('dossierTemplateId').value; - await this.dossierTemplateChanged(dossierTemplateId); - this.watermarks = await firstValueFrom(this._watermarkService.getWatermarks(dossierTemplateId)); - this.oldWatermarkId = this.watermarks[0]?.id; - this.oldPreviewWatermarkID = this.watermarks[0]?.id; + this.dossierTemplateId = this.form.get('dossierTemplateId').value; + await this.dossierTemplateChanged(this.dossierTemplateId); } reportTemplateValueMapper = (reportTemplate: IReportTemplate) => reportTemplate.templateId; + updateWatermarkIds(event: UpdateWatermarkIdsEvent) { + this.form.get('watermarkId').setValue(event.watermarkId); + this.form.get('previewWatermarkId').setValue(event.previewWatermarkId); + } + async save(options?: SaveOptions) { this._loadingService.start(); const savedDossier = await firstValueFrom(this._activeDossiersService.createOrUpdate(this._formToObject())); @@ -168,20 +167,4 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On previewWatermarkId: this.form.get('previewWatermarkId').value, }; } - - isWatermarkEnabled(key: string): boolean { - return !!this.form.get(key).value; - } - - enableDisableWatermark(checked: boolean, key: string): void { - let oldValue: string; - if (key === 'watermarkId') { - this.oldWatermarkId = !checked ? this.form.get(key).value : this.oldWatermarkId; - oldValue = this.oldWatermarkId; - } else { - this.oldPreviewWatermarkID = !checked ? this.form.get(key).value : this.oldPreviewWatermarkID; - oldValue = this.oldPreviewWatermarkID; - } - this.form.get(key).setValue(checked ? oldValue : null); - } } diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts index 4dbf5004b..2107a41bc 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -35,6 +35,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { RouterModule } from '@angular/router'; import { AddDossierDialogComponent } from '@shared/dialogs/add-dossier-dialog/add-dossier-dialog.component'; import { SharedDialogService } from '@shared/services/dialog.service'; +import { DossierWatermarkSelectorComponent } from '@components/dossier-watermark-selector/dossier-watermark-selector.component'; const buttons = [FileDownloadBtnComponent, UserButtonComponent]; @@ -57,7 +58,7 @@ const components = [ FileNameColumnComponent, DossiersTypeSwitchComponent, AddDossierDialogComponent, - + DossierWatermarkSelectorComponent, ...buttons, ]; diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index cd2b9161f..5382fc037 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -27,12 +27,10 @@ "label": "Dossier-Name", "placeholder": "Geben Sie einen Namen ein." }, - "preview": "", "template": { "label": "Dossier-Vorlage", "placeholder": "" - }, - "watermark": "Geschwärzte Dokumente mit Wasserzeichen versehen" + } }, "header-new": "Dossier erstellen" }, @@ -98,11 +96,7 @@ "name-placeholder": "", "rank": "", "rank-placeholder": "", - "recommendation-color": "", - "recommendation-color-placeholder": "", "redaction": "", - "skipped-color": "", - "skipped-color-placeholder": "", "technical-name": "", "technical-name-hint": "" }, @@ -705,6 +699,7 @@ "title": "Es ist kein Zertifikat für die digitale Signatur konfiguriert. Laden Sie ein PCKS#12-Zertifikat hoch, um Ihre geschwärzten Dokumente zu signieren." } }, + "disabled": "", "document-info": { "save": "Dokumenteninformation speichern", "title": "Datei-Attribute anlegen" @@ -995,6 +990,10 @@ "incomplete": "" } }, + "dossier-watermark-selector": { + "preview": "", + "watermark": "" + }, "dossiers-type-switch": { "active": "", "archive": "" diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 28d71da17..279edf612 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -27,12 +27,10 @@ "label": "Dossier Name", "placeholder": "Enter Name" }, - "preview": "Watermark application on preview documents", "template": { "label": "Dossier Template", "placeholder": "Choose Dossier Template" - }, - "watermark": "Watermark application on redacted documents" + } }, "header-new": "Create Dossier" }, @@ -701,6 +699,7 @@ "title": "No Digital Signature Certificate.
For signing redacted documents please configure a certificate." } }, + "disabled": "disabled", "document-info": { "save": "Save Document Info", "title": "Enter File Attributes" @@ -991,6 +990,10 @@ "incomplete": "Incomplete" } }, + "dossier-watermark-selector": { + "preview": "Watermark application on preview documents", + "watermark": "Watermark application on watermark documents" + }, "dossiers-type-switch": { "active": "Active", "archive": "Archived" diff --git a/apps/red-ui/src/assets/icons/general/warning.svg b/apps/red-ui/src/assets/icons/general/warning.svg new file mode 100644 index 000000000..0601406be --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/warning.svg @@ -0,0 +1 @@ +