From d574bf290416411b937204f9c796e6f1b6dda56a Mon Sep 17 00:00:00 2001 From: Valentin Date: Wed, 15 Dec 2021 10:37:48 +0200 Subject: [PATCH 01/13] WIP on warning the user before leaving the page with unsaved changes --- .../add-edit-dictionary-dialog.component.ts | 10 +-- ...-edit-dossier-template-dialog.component.ts | 12 ++-- ...dd-edit-file-attribute-dialog.component.ts | 11 ++-- .../edit-color-dialog.component.ts | 10 +-- .../edit-dossier-dialog.component.html | 2 +- .../edit-dossier-dialog.component.ts | 10 +-- .../shared/dialog/base-dialog.component.ts | 65 +++++++++++++++++++ .../dialog/confirmation-dialog.service.ts | 36 ++++++++++ .../shared/dialog/form-dialog.component.ts | 33 ++++++++++ .../src/app/modules/shared/shared.module.ts | 2 + apps/red-ui/src/assets/i18n/en.json | 7 ++ 11 files changed, 175 insertions(+), 23 deletions(-) create mode 100644 apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts create mode 100644 apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts create mode 100644 apps/red-ui/src/app/modules/shared/dialog/form-dialog.component.ts diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts index 76018c393..53041dcbf 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts @@ -1,8 +1,8 @@ -import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Inject, Injector } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { Observable } from 'rxjs'; -import { BaseDialogComponent, shareDistinctLast, Toaster } from '@iqser/common-ui'; +import { shareDistinctLast, Toaster } from '@iqser/common-ui'; import { TranslateService } from '@ngx-translate/core'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { AppStateService } from '@state/app-state.service'; @@ -12,6 +12,7 @@ import { Dictionary, IDictionary } from '@red/domain'; import { UserService } from '@services/user.service'; import { map } from 'rxjs/operators'; import { HttpStatusCode } from '@angular/common/http'; +import { BaseDialogComponent } from '../../../shared/dialog/base-dialog.component'; @Component({ selector: 'redaction-add-edit-dictionary-dialog', @@ -39,11 +40,12 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent { private readonly _appStateService: AppStateService, private readonly _translateService: TranslateService, private readonly _dictionaryService: DictionaryService, - private readonly _dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) private readonly _data: { readonly dictionary: Dictionary; readonly dossierTemplateId: string }, ) { - super(); + super(_injector, _dialogRef); this.hasColor$ = this._colorEmpty$; this.technicalName$ = this.form.get('label').valueChanges.pipe(map(value => this._toTechnicalName(value))); } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts index 39025d390..9755a2839 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject } from '@angular/core'; +import { Component, Inject, Injector } from '@angular/core'; import { AppStateService } from '@state/app-state.service'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; @@ -7,10 +7,11 @@ import { Moment } from 'moment'; import { applyIntervalConstraints } from '@utils/date-inputs-utils'; import { downloadTypesTranslations } from '../../../../translations/download-types-translations'; import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service'; -import { BaseDialogComponent, Toaster } from '@iqser/common-ui'; +import { Toaster } from '@iqser/common-ui'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { DownloadFileType, IDossierTemplate } from '@red/domain'; import { HttpStatusCode } from '@angular/common/http'; +import { BaseDialogComponent } from '../../../shared/dialog/base-dialog.component'; @Component({ templateUrl: './add-edit-dossier-template-dialog.component.html', @@ -34,10 +35,11 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent { private readonly _toaster: Toaster, private readonly _dossierTemplatesService: DossierTemplatesService, private readonly _formBuilder: FormBuilder, - public dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) readonly dossierTemplate: IDossierTemplate, ) { - super(); + super(_injector, _dialogRef); this.hasValidFrom = !!this.dossierTemplate?.validFrom; this.hasValidTo = !!this.dossierTemplate?.validTo; @@ -97,7 +99,7 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent { await this._dossierTemplatesService.createOrUpdate(dossierTemplate).toPromise(); await this._dossierTemplatesService.loadAll().toPromise(); await this._appStateService.loadDictionaryData(); - this.dialogRef.close(true); + this._dialogRef.close(true); } catch (error: any) { const message = error.status === HttpStatusCode.Conflict diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts index 7346bf384..2ad60ad14 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts @@ -1,10 +1,10 @@ -import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Inject, Injector } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { fileAttributeTypesTranslations } from '../../translations/file-attribute-types-translations'; import { FileAttributesService } from '@services/entity-services/file-attributes.service'; -import { BaseDialogComponent } from '@iqser/common-ui'; +import { BaseDialogComponent } from '../../../shared/dialog/base-dialog.component'; @Component({ selector: 'redaction-add-edit-file-attribute-dialog', @@ -26,7 +26,8 @@ export class AddEditFileAttributeDialogComponent extends BaseDialogComponent { constructor( private readonly _formBuilder: FormBuilder, private readonly _fileAttributesService: FileAttributesService, - public dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: { fileAttribute: IFileAttributeConfig; @@ -35,7 +36,7 @@ export class AddEditFileAttributeDialogComponent extends BaseDialogComponent { numberOfFilterableAttrs: number; }, ) { - super(); + super(_injector, _dialogRef); this.canSetDisplayed = data.numberOfDisplayedAttrs < this.DISPLAYED_FILTERABLE_LIMIT || data.fileAttribute?.displayedInFileList; this.canSetFilterable = data.numberOfFilterableAttrs < this.DISPLAYED_FILTERABLE_LIMIT || data.fileAttribute?.filterable; this.form = this._getForm(this.fileAttribute); @@ -69,7 +70,7 @@ export class AddEditFileAttributeDialogComponent extends BaseDialogComponent { editable: !this.form.get('readonly').value, ...this.form.getRawValue(), }; - this.dialogRef.close(fileAttribute); + this._dialogRef.close(fileAttribute); } private _getForm(fileAttribute: IFileAttributeConfig): FormGroup { diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts index 519eb2dd2..2af506f39 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts @@ -1,12 +1,13 @@ -import { Component, Inject } from '@angular/core'; +import { Component, Inject, Injector } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { DefaultColorType, IColors } from '@red/domain'; -import { BaseDialogComponent, Toaster } from '@iqser/common-ui'; +import { Toaster } from '@iqser/common-ui'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { TranslateService } from '@ngx-translate/core'; import { defaultColorsTranslations } from '../../translations/default-colors-translations'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { DictionaryService } from '@shared/services/dictionary.service'; +import { BaseDialogComponent } from '../../../shared/dialog/base-dialog.component'; interface IEditColorData { colors: IColors; @@ -30,11 +31,12 @@ export class EditColorDialogComponent extends BaseDialogComponent { private readonly _dictionaryService: DictionaryService, private readonly _toaster: Toaster, private readonly _translateService: TranslateService, - private readonly _dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) readonly data: IEditColorData, ) { - super(); + super(_injector, _dialogRef); this._dossierTemplateId = data.dossierTemplateId; this._initialColor = data.colors[data.colorKey]; diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html index 8b9f90c77..2500c6cd4 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html @@ -65,5 +65,5 @@ - + diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts index e319283ab..85b9da834 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts @@ -1,10 +1,10 @@ -import { ChangeDetectorRef, Component, Inject, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, Inject, Injector, ViewChild } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { Dossier } from '@red/domain'; import { EditDossierGeneralInfoComponent } from './general-info/edit-dossier-general-info.component'; import { EditDossierDownloadPackageComponent } from './download-package/edit-dossier-download-package.component'; import { EditDossierSectionInterface } from './edit-dossier-section.interface'; -import { BaseDialogComponent, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui'; +import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui'; import { EditDossierDictionaryComponent } from './dictionary/edit-dossier-dictionary.component'; import { EditDossierAttributesComponent } from './attributes/edit-dossier-attributes.component'; @@ -15,6 +15,7 @@ import { Observable } from 'rxjs'; import { tap } from 'rxjs/operators'; import { EditDossierTeamComponent } from './edit-dossier-team/edit-dossier-team.component'; import { PermissionsService } from '@services/permissions.service'; +import { BaseDialogComponent } from '@shared/dialog/base-dialog.component'; type Section = 'dossierInfo' | 'downloadPackage' | 'dossierDictionary' | 'members' | 'dossierAttributes' | 'deletedDocuments'; @@ -40,16 +41,17 @@ export class EditDossierDialogComponent extends BaseDialogComponent { private readonly _toaster: Toaster, private readonly _dossiersService: DossiersService, private readonly _changeRef: ChangeDetectorRef, - private readonly _dialogRef: MatDialogRef, private readonly _loadingService: LoadingService, private readonly _permissionsService: PermissionsService, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) private readonly _data: { dossierId: string; section?: Section; }, ) { - super(); + super(_injector, _dialogRef); this.navItems = [ { key: 'dossierInfo', diff --git a/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts b/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts new file mode 100644 index 000000000..efdd9ba5a --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts @@ -0,0 +1,65 @@ +import { Directive, HostListener, Injector, OnInit } from '@angular/core'; +import { AutoUnsubscribe, IqserEventTarget } from '../../../../../../../libs/common-ui/src'; +import { MatDialogRef } from '@angular/material/dialog'; +import { ConfirmationDialogService } from '@shared/dialog/confirmation-dialog.service'; + +@Directive() +/** + * Extend this component when you want to submit the form after pressing enter. + * + * This could be done by adding properties (submit)="save()" on the form and type="submit" on the save button. + * However, some components (e.g. redaction-select, color picker) don't set focus on the input after choosing a value. + * Also, other components (e.g. dropdown select) trigger a different action on enter, instead of submit. + * + * Make sure to remove property type="submit" from the save button and the (submit)="save()" property from the form + * (otherwise the save request will be triggered twice). + * */ +export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnInit { + abstract changed: boolean; + abstract valid: boolean; + abstract disabled: boolean; + + private readonly _dialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService); + + private _waitingForConfirmation = false; + + constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef) { + super(); + } + + abstract save(): void; + + ngOnInit(): void { + this.addSubscription = this._dialogRef.backdropClick().subscribe(() => { + this.close(); + }); + } + + close(): void { + if (this.changed) { + this._waitingForConfirmation = true; + const dialogRef = this._dialogService.openDialog(() => this._dialogRef.close()); + dialogRef + .afterClosed() + .toPromise() + .then(() => (this._waitingForConfirmation = false)); + return; + } + this._dialogRef.close(); + } + + @HostListener('window:keydown.Enter', ['$event']) + onEnter(event: KeyboardEvent): void { + const node = (event.target as IqserEventTarget).localName; + if (this.valid && !this.disabled && this.changed && node !== 'textarea') { + this.save(); + } + } + + @HostListener('window:keydown.Escape', ['$event']) + onEscape(): void { + if (!this._waitingForConfirmation) { + this.close(); + } + } +} diff --git a/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts b/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts new file mode 100644 index 000000000..508bb40a4 --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts @@ -0,0 +1,36 @@ +import { Injectable } from '@angular/core'; +import { ConfirmationDialogComponent, ConfirmationDialogInput, DialogConfig, DialogService, TitleColors } from '@iqser/common-ui'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; + +type DialogType = 'confirm'; + +@Injectable() +export class ConfirmationDialogService extends DialogService { + protected readonly _config: DialogConfig = { + confirm: { + component: ConfirmationDialogComponent, + dialogConfig: { disableClose: false }, + }, + }; + + constructor(protected readonly _dialog: MatDialog) { + super(_dialog); + } + + openDialog(cb: any): MatDialogRef { + return super.openDialog( + 'confirm', + null, + new ConfirmationDialogInput({ + title: _('confirmation-dialog.unsaved-changes.title'), + question: _('confirmation-dialog.unsaved-changes.question'), + details: _('confirmation-dialog.unsaved-changes.details'), + confirmationText: _('confirmation-dialog.unsaved-changes.confirmation-text'), + denyText: _('confirmation-dialog.unsaved-changes.deny-text'), + titleColor: TitleColors.WARN, + }), + cb, + ); + } +} diff --git a/apps/red-ui/src/app/modules/shared/dialog/form-dialog.component.ts b/apps/red-ui/src/app/modules/shared/dialog/form-dialog.component.ts new file mode 100644 index 000000000..63072f58b --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/dialog/form-dialog.component.ts @@ -0,0 +1,33 @@ +// import { BaseDialogComponent } from './base-dialog.component'; +// import { Injector, OnInit } from '@angular/core'; +// import { MatDialogRef } from '@angular/material/dialog'; +// import { FormGroup } from '@angular/forms'; +// +// export abstract class FormDialogComponent extends BaseDialogComponent implements OnInit { +// +// abstract readonly form: FormGroup; +// private _hasChange = false; +// +// constructor( +// protected readonly _injector: Injector, +// protected readonly _dialogRef: MatDialogRef, +// ) { +// super(_injector, _dialogRef); +// } +// +// get changed(): boolean { +// return this._hasChange; +// } +// +// onFormGroupValueChange() { +// const initialValue = this.form.value; +// this.createGroupForm.valueChanges.subscribe(value => { +// this.hasChange = Object.keys(initialValue).some(key => this.form.value[key] != +// initialValue[key]); +// }); +// } +// +// get valid(): boolean { +// return this.form.valid; +// } +// } 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 4f606ceb9..81e3e3122 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -26,6 +26,7 @@ import { TypeFilterComponent } from './components/type-filter/type-filter.compon import { TeamMembersComponent } from './components/team-members/team-members.component'; import { EditorComponent } from './components/editor/editor.component'; import { ExpandableFileActionsComponent } from './components/expandable-file-actions/expandable-file-actions.component'; +import { ConfirmationDialogService } from '@shared/dialog/confirmation-dialog.service'; const buttons = [FileDownloadBtnComponent, UserButtonComponent]; @@ -69,6 +70,7 @@ const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, Rea }, }, }, + ConfirmationDialogService, ], }) export class SharedModule {} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index ba5a448b6..24e960b39 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -448,6 +448,13 @@ "question": "Are you sure you want to delete {filesCount, plural, one{this document} other{these documents}}?", "title": "Delete {filesCount, plural, one{{fileName}} other{Selected Documents}}" }, + "unsaved-changes": { + "confirmation-text": "Save and Leave", + "deny-text": "DISCARD CHANGES", + "details": "If you leave the tab without saving, all the unsaved changes will be lost.", + "question": "Are you sure you want to leave the tab? You have unsaved changes.", + "title": "You have unsaved changes" + }, "upload-report-template": { "alternate-confirmation-text": "Upload as multi-file report", "confirmation-text": "Upload as single-file report", From 5b7236ff88cf394c423aaea6cfa8cad3f677cc49 Mon Sep 17 00:00:00 2001 From: Valentin Date: Mon, 20 Dec 2021 10:28:37 +0200 Subject: [PATCH 02/13] updated base dialog component to display the confirmation dialog whenever the user wants to leave the modal or change its tab with unsaved changes --- .../edit-dossier-dialog.component.ts | 19 +++++++++++++++++-- .../shared/dialog/base-dialog.component.ts | 19 ++++++++++++++----- .../dialog/confirmation-dialog.service.ts | 5 ++--- apps/red-ui/src/assets/i18n/en.json | 5 ++--- libs/common-ui | 2 +- 5 files changed, 36 insertions(+), 14 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts index 85b9da834..d9e0ca50d 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts @@ -4,7 +4,7 @@ import { Dossier } from '@red/domain'; import { EditDossierGeneralInfoComponent } from './general-info/edit-dossier-general-info.component'; import { EditDossierDownloadPackageComponent } from './download-package/edit-dossier-download-package.component'; import { EditDossierSectionInterface } from './edit-dossier-section.interface'; -import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui'; +import { ConfirmOptions, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui'; import { EditDossierDictionaryComponent } from './dictionary/edit-dossier-dictionary.component'; import { EditDossierAttributesComponent } from './attributes/edit-dossier-attributes.component'; @@ -148,7 +148,22 @@ export class EditDossierDialogComponent extends BaseDialogComponent { changeTab(key: Section) { if (this.changed) { - this._toaster.error(_('edit-dossier-dialog.unsaved-changes')); + this._waitingForConfirmation = true; + const dialogRef = this._dialogService.openDialog(); + dialogRef + .afterClosed() + .toPromise() + .then(async result => { + if (result in ConfirmOptions) { + if (result === ConfirmOptions.CONFIRM) { + await this.save(); + } else { + this.revert(); + } + this.activeNav = key; + } + this._waitingForConfirmation = false; + }); return; } this.activeNav = key; diff --git a/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts b/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts index efdd9ba5a..a192a3832 100644 --- a/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts +++ b/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts @@ -1,5 +1,5 @@ import { Directive, HostListener, Injector, OnInit } from '@angular/core'; -import { AutoUnsubscribe, IqserEventTarget } from '../../../../../../../libs/common-ui/src'; +import { AutoUnsubscribe, ConfirmOptions, IqserEventTarget } from '../../../../../../../libs/common-ui/src'; import { MatDialogRef } from '@angular/material/dialog'; import { ConfirmationDialogService } from '@shared/dialog/confirmation-dialog.service'; @@ -19,9 +19,9 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI abstract valid: boolean; abstract disabled: boolean; - private readonly _dialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService); + protected readonly _dialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService); - private _waitingForConfirmation = false; + protected _waitingForConfirmation = false; constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef) { super(); @@ -38,11 +38,20 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI close(): void { if (this.changed) { this._waitingForConfirmation = true; - const dialogRef = this._dialogService.openDialog(() => this._dialogRef.close()); + const dialogRef = this._dialogService.openDialog(); dialogRef .afterClosed() .toPromise() - .then(() => (this._waitingForConfirmation = false)); + .then(result => { + if (result in ConfirmOptions) { + if (result === ConfirmOptions.CONFIRM) { + this.save(); + } else { + this._dialogRef.close(); + } + } + this._waitingForConfirmation = false; + }); return; } this._dialogRef.close(); diff --git a/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts b/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts index 508bb40a4..9a4c68c8f 100644 --- a/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts +++ b/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts @@ -18,7 +18,7 @@ export class ConfirmationDialogService extends DialogService { super(_dialog); } - openDialog(cb: any): MatDialogRef { + openDialog(): MatDialogRef { return super.openDialog( 'confirm', null, @@ -27,10 +27,9 @@ export class ConfirmationDialogService extends DialogService { question: _('confirmation-dialog.unsaved-changes.question'), details: _('confirmation-dialog.unsaved-changes.details'), confirmationText: _('confirmation-dialog.unsaved-changes.confirmation-text'), - denyText: _('confirmation-dialog.unsaved-changes.deny-text'), + discardChangesText: _('confirmation-dialog.unsaved-changes.discard-changes-text'), titleColor: TitleColors.WARN, }), - cb, ); } } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 24e960b39..a53182033 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -450,8 +450,8 @@ }, "unsaved-changes": { "confirmation-text": "Save and Leave", - "deny-text": "DISCARD CHANGES", "details": "If you leave the tab without saving, all the unsaved changes will be lost.", + "discard-changes-text": "DISCARD CHANGES", "question": "Are you sure you want to leave the tab? You have unsaved changes.", "title": "You have unsaved changes" }, @@ -947,8 +947,7 @@ "members": "Members", "team-members": "Team Members" }, - "side-nav-title": "Configurations", - "unsaved-changes": "You have unsaved changes. Save or revert before changing the tab." + "side-nav-title": "Configurations" }, "error": { "deleted-entity": { diff --git a/libs/common-ui b/libs/common-ui index 1b8ce8ef1..95644f59e 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 1b8ce8ef1d295efc5b02b39b631b5e654938de29 +Subproject commit 95644f59e4e32517d76e0bd9267805a88ebdd8d1 From 08902fe3e060773b7e208cb7867f6215f9dab3c0 Mon Sep 17 00:00:00 2001 From: Valentin Date: Tue, 4 Jan 2022 20:32:33 +0200 Subject: [PATCH 03/13] updated general logic for 'valid' and 'changed' methods to be used by more classes that inherit BaseDialog --- .../add-edit-dictionary-dialog.component.html | 2 +- .../add-edit-dictionary-dialog.component.ts | 25 +------- ...dit-dossier-template-dialog.component.html | 11 +--- ...-edit-dossier-template-dialog.component.ts | 63 ++++++++----------- ...-edit-file-attribute-dialog.component.html | 4 +- ...dd-edit-file-attribute-dialog.component.ts | 24 +------ .../edit-color-dialog.component.html | 2 +- .../edit-color-dialog.component.ts | 12 +--- .../edit-dossier-dialog.component.ts | 2 +- .../shared/dialog/base-dialog.component.ts | 53 ++++++++++++++-- .../dialog/confirmation-dialog.service.ts | 3 +- .../shared/dialog/form-dialog.component.ts | 33 ---------- 12 files changed, 86 insertions(+), 148 deletions(-) delete mode 100644 apps/red-ui/src/app/modules/shared/dialog/form-dialog.component.ts diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html index 2e69716c7..abcf375f0 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html @@ -101,5 +101,5 @@ - + diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts index 53041dcbf..49208b203 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts @@ -22,7 +22,6 @@ import { BaseDialogComponent } from '../../../shared/dialog/base-dialog.componen }) export class AddEditDictionaryDialogComponent extends BaseDialogComponent { readonly dictionary = this._data.dictionary; - readonly form: FormGroup = this._getForm(this.dictionary); readonly canEditLabel$ = this._canEditLabel$; readonly technicalName$: Observable; readonly dialogHeader = this._translateService.instant('add-edit-dictionary.title', { @@ -46,32 +45,12 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent { private readonly _data: { readonly dictionary: Dictionary; readonly dossierTemplateId: string }, ) { super(_injector, _dialogRef); + this.form = this._getForm(this.dictionary); + this.initialForm = this._getForm(this.dictionary); this.hasColor$ = this._colorEmpty$; this.technicalName$ = this.form.get('label').valueChanges.pipe(map(value => this._toTechnicalName(value))); } - get valid(): boolean { - return this.form.valid; - } - - get changed(): boolean { - if (!this.dictionary) { - return true; - } - - for (const key of Object.keys(this.form.getRawValue())) { - if (key === 'caseSensitive') { - if (this.getDictCaseSensitive(this.dictionary) !== this.form.get(key).value) { - return true; - } - } else if (this.dictionary[key] !== this.form.get(key).value) { - return true; - } - } - - return false; - } - private get _canEditLabel$() { return this.userService.currentUser$.pipe( map(user => user.isAdmin || !this._data.dictionary), diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html index a8ee5cdf2..fe2e2f28c 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html @@ -33,16 +33,11 @@
- + {{ 'add-edit-dossier-template.form.valid-from' | translate }} - + {{ 'add-edit-dossier-template.form.valid-to' | translate }}
@@ -93,5 +88,5 @@
- + diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts index 9755a2839..2c40876fc 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts @@ -18,7 +18,6 @@ import { BaseDialogComponent } from '../../../shared/dialog/base-dialog.componen styleUrls: ['./add-edit-dossier-template-dialog.component.scss'], }) export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent { - readonly form: FormGroup = this._getForm(); hasValidFrom: boolean; hasValidTo: boolean; downloadTypesEnum: DownloadFileType[] = ['ORIGINAL', 'PREVIEW', 'REDACTED']; @@ -29,6 +28,8 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent { readonly disabled = false; private _previousValidFrom: Moment; private _previousValidTo: Moment; + private _lastValidFrom: Moment; + private _lastValidTo: Moment; constructor( private readonly _appStateService: AppStateService, @@ -40,52 +41,38 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent { @Inject(MAT_DIALOG_DATA) readonly dossierTemplate: IDossierTemplate, ) { super(_injector, _dialogRef); + this.form = this._getForm(); + this.initialForm = this._getForm(); this.hasValidFrom = !!this.dossierTemplate?.validFrom; this.hasValidTo = !!this.dossierTemplate?.validTo; - this._previousValidFrom = this.form.get('validFrom').value; - this._previousValidTo = this.form.get('validTo').value; + this._previousValidFrom = this._lastValidFrom = this.form.get('validFrom').value; + this._previousValidTo = this._lastValidTo = this.form.get('validTo').value; - this.form.valueChanges.subscribe(value => { + this.addSubscription = this.form.valueChanges.subscribe(value => { this._applyValidityIntervalConstraints(value); }); + + this.addSubscription = this.form.controls['validFrom'].valueChanges.subscribe(value => { + if (value) { + this._lastValidFrom = value; + } + }); + this.addSubscription = this.form.controls['validTo'].valueChanges.subscribe(value => { + if (value) { + this._lastValidTo = value; + } + }); } - get valid(): boolean { - return this.form.valid; - } - - get changed(): boolean { - if (!this.dossierTemplate) { - return true; + toggleHasValid(extremity: string) { + if (extremity === 'from') { + this.hasValidFrom = !this.hasValidFrom; + this.form.controls['validFrom'].setValue(this.hasValidFrom ? this._lastValidFrom : null); + } else { + this.hasValidTo = !this.hasValidTo; + this.form.controls['validTo'].setValue(this.hasValidTo ? this._lastValidTo : null); } - - for (const key of Object.keys(this.form.getRawValue())) { - const formValue = this.form.get(key).value; - const objectValue = this.dossierTemplate[key]; - if (key === 'validFrom') { - if (this.hasValidFrom !== !!objectValue || (this.hasValidFrom && !moment(objectValue).isSame(moment(formValue)))) { - return true; - } - } else if (key === 'validTo') { - if (this.hasValidTo !== !!objectValue || (this.hasValidTo && !moment(objectValue).isSame(moment(formValue)))) { - return true; - } - } else if (formValue instanceof Array) { - if (objectValue.length !== formValue.length) { - return true; - } - for (const item of objectValue) { - if (!formValue.includes(item)) { - return true; - } - } - } else if (objectValue !== formValue) { - return true; - } - } - - return false; } async save() { diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html index 4715598f6..169d826ac 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html @@ -84,11 +84,11 @@
-
- + diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts index 2ad60ad14..1e17d2d58 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts @@ -18,7 +18,6 @@ export class AddEditFileAttributeDialogComponent extends BaseDialogComponent { translations = fileAttributeTypesTranslations; fileAttribute: IFileAttributeConfig = this.data.fileAttribute; dossierTemplateId: string = this.data.dossierTemplateId; - readonly form!: FormGroup; readonly typeOptions = Object.keys(FileAttributeConfigTypes); readonly canSetDisplayed!: boolean; readonly canSetFilterable!: boolean; @@ -40,28 +39,7 @@ export class AddEditFileAttributeDialogComponent extends BaseDialogComponent { this.canSetDisplayed = data.numberOfDisplayedAttrs < this.DISPLAYED_FILTERABLE_LIMIT || data.fileAttribute?.displayedInFileList; this.canSetFilterable = data.numberOfFilterableAttrs < this.DISPLAYED_FILTERABLE_LIMIT || data.fileAttribute?.filterable; this.form = this._getForm(this.fileAttribute); - } - - get valid(): boolean { - return this.form.valid; - } - - get changed(): boolean { - if (!this.fileAttribute) { - return true; - } - - for (const key of Object.keys(this.form.getRawValue())) { - if (key === 'readonly') { - if (this.fileAttribute.editable === this.form.get(key).value) { - return true; - } - } else if (this.fileAttribute[key] !== this.form.get(key).value) { - return true; - } - } - - return false; + this.initialForm = this._getForm(this.fileAttribute); } save() { diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html index 1d42f37a4..873c58145 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html @@ -34,5 +34,5 @@ - + diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts index 2af506f39..bbef7e13d 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts @@ -20,10 +20,8 @@ interface IEditColorData { styleUrls: ['./edit-color-dialog.component.scss'], }) export class EditColorDialogComponent extends BaseDialogComponent { - readonly form: FormGroup; translations = defaultColorsTranslations; readonly disabled = false; - private readonly _initialColor: string; private readonly _dossierTemplateId: string; constructor( @@ -38,17 +36,9 @@ export class EditColorDialogComponent extends BaseDialogComponent { ) { super(_injector, _dialogRef); this._dossierTemplateId = data.dossierTemplateId; - this._initialColor = data.colors[data.colorKey]; this.form = this._getForm(); - } - - get changed(): boolean { - return this.form.get('color').value !== this._initialColor; - } - - get valid(): boolean { - return this.form.valid; + this.initialForm = this._getForm(); } async save() { diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts index d9e0ca50d..827962c04 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts @@ -149,7 +149,7 @@ export class EditDossierDialogComponent extends BaseDialogComponent { changeTab(key: Section) { if (this.changed) { this._waitingForConfirmation = true; - const dialogRef = this._dialogService.openDialog(); + const dialogRef = this._dialogService.openDialog({ disableConfirm: !this.valid }); dialogRef .afterClosed() .toPromise() diff --git a/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts b/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts index a192a3832..3cb2db26c 100644 --- a/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts +++ b/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts @@ -2,6 +2,8 @@ import { Directive, HostListener, Injector, OnInit } from '@angular/core'; import { AutoUnsubscribe, ConfirmOptions, IqserEventTarget } from '../../../../../../../libs/common-ui/src'; import { MatDialogRef } from '@angular/material/dialog'; import { ConfirmationDialogService } from '@shared/dialog/confirmation-dialog.service'; +import { FormGroup } from '@angular/forms'; +import * as moment from 'moment'; @Directive() /** @@ -15,19 +17,19 @@ import { ConfirmationDialogService } from '@shared/dialog/confirmation-dialog.se * (otherwise the save request will be triggered twice). * */ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnInit { - abstract changed: boolean; - abstract valid: boolean; abstract disabled: boolean; protected readonly _dialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService); - protected _waitingForConfirmation = false; + form!: FormGroup; + initialForm!: FormGroup; + constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef) { super(); } - abstract save(): void; + abstract save(closeAfterSave?: boolean): void; ngOnInit(): void { this.addSubscription = this._dialogRef.backdropClick().subscribe(() => { @@ -35,17 +37,56 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI }); } + get valid(): boolean { + return this.form.valid; + } + + get changed(): boolean { + // console.log('-------------------------------------------------------'); + // console.log('initialForm: ', this.initialForm.value); + // console.log('form: ', this.form.value); + + for (const key of Object.keys(this.form.getRawValue())) { + const initialValue = this.initialForm.get(key).value; + const updatedValue = this.form.get(key).value; + + if (initialValue == null && updatedValue != null) { + const updatedValueType = typeof updatedValue; + if (updatedValueType !== 'string' && updatedValueType !== 'boolean') { + return true; + } else if (updatedValueType === 'string' && updatedValue.length > 0) { + return true; + } else if (updatedValueType === 'boolean' && updatedValue === true) { + return true; + } + } else if (initialValue !== updatedValue) { + if (Array.isArray(updatedValue)) { + if (JSON.stringify(initialValue) !== JSON.stringify(updatedValue)) { + return true; + } + } else if (updatedValue instanceof moment) { + if (!moment(updatedValue).isSame(moment(initialValue))) { + return true; + } + } else { + return true; + } + } + } + return false; + } + close(): void { if (this.changed) { this._waitingForConfirmation = true; - const dialogRef = this._dialogService.openDialog(); + const dialogRef = this._dialogService.openDialog({ disableConfirm: !this.valid }); dialogRef .afterClosed() .toPromise() .then(result => { if (result in ConfirmOptions) { if (result === ConfirmOptions.CONFIRM) { - this.save(); + this.save(true); } else { this._dialogRef.close(); } diff --git a/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts b/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts index 9a4c68c8f..efab94dbd 100644 --- a/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts +++ b/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts @@ -18,7 +18,7 @@ export class ConfirmationDialogService extends DialogService { super(_dialog); } - openDialog(): MatDialogRef { + openDialog(data?): MatDialogRef { return super.openDialog( 'confirm', null, @@ -28,6 +28,7 @@ export class ConfirmationDialogService extends DialogService { details: _('confirmation-dialog.unsaved-changes.details'), confirmationText: _('confirmation-dialog.unsaved-changes.confirmation-text'), discardChangesText: _('confirmation-dialog.unsaved-changes.discard-changes-text'), + disableConfirm: data.disableConfirm, titleColor: TitleColors.WARN, }), ); diff --git a/apps/red-ui/src/app/modules/shared/dialog/form-dialog.component.ts b/apps/red-ui/src/app/modules/shared/dialog/form-dialog.component.ts deleted file mode 100644 index 63072f58b..000000000 --- a/apps/red-ui/src/app/modules/shared/dialog/form-dialog.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -// import { BaseDialogComponent } from './base-dialog.component'; -// import { Injector, OnInit } from '@angular/core'; -// import { MatDialogRef } from '@angular/material/dialog'; -// import { FormGroup } from '@angular/forms'; -// -// export abstract class FormDialogComponent extends BaseDialogComponent implements OnInit { -// -// abstract readonly form: FormGroup; -// private _hasChange = false; -// -// constructor( -// protected readonly _injector: Injector, -// protected readonly _dialogRef: MatDialogRef, -// ) { -// super(_injector, _dialogRef); -// } -// -// get changed(): boolean { -// return this._hasChange; -// } -// -// onFormGroupValueChange() { -// const initialValue = this.form.value; -// this.createGroupForm.valueChanges.subscribe(value => { -// this.hasChange = Object.keys(initialValue).some(key => this.form.value[key] != -// initialValue[key]); -// }); -// } -// -// get valid(): boolean { -// return this.form.valid; -// } -// } From 6ec57b9953db8c9d0510948da4557fb276cc7538 Mon Sep 17 00:00:00 2001 From: Valentin Date: Wed, 5 Jan 2022 12:27:01 +0200 Subject: [PATCH 04/13] removed commented code, updated 'close' and 'changeTab' methods --- ...-edit-dossier-template-dialog.component.ts | 8 +--- ...-edit-file-attribute-dialog.component.html | 2 +- .../edit-dossier-dialog.component.ts | 29 ++++++--------- .../shared/dialog/base-dialog.component.ts | 37 +++++++++---------- 4 files changed, 32 insertions(+), 44 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts index 2c40876fc..f263a5904 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts @@ -54,14 +54,10 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent { }); this.addSubscription = this.form.controls['validFrom'].valueChanges.subscribe(value => { - if (value) { - this._lastValidFrom = value; - } + this._lastValidFrom = value ? value : this._lastValidFrom; }); this.addSubscription = this.form.controls['validTo'].valueChanges.subscribe(value => { - if (value) { - this._lastValidTo = value; - } + this._lastValidFrom = value ? value : this._lastValidFrom; }); } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html index 169d826ac..7a8b7aa38 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html @@ -84,7 +84,7 @@
-
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts index 827962c04..5a2c6f83b 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts @@ -148,24 +148,19 @@ export class EditDossierDialogComponent extends BaseDialogComponent { changeTab(key: Section) { if (this.changed) { - this._waitingForConfirmation = true; - const dialogRef = this._dialogService.openDialog({ disableConfirm: !this.valid }); - dialogRef - .afterClosed() - .toPromise() - .then(async result => { - if (result in ConfirmOptions) { - if (result === ConfirmOptions.CONFIRM) { - await this.save(); - } else { - this.revert(); - } - this.activeNav = key; + this._openConfirmDialog().then(async result => { + if (result in ConfirmOptions) { + if (result === ConfirmOptions.CONFIRM) { + await this.save(); + } else { + this.revert(); } - this._waitingForConfirmation = false; - }); - return; + this.activeNav = key; + } + this._waitingForConfirmation = false; + }); + } else { + this.activeNav = key; } - this.activeNav = key; } } diff --git a/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts b/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts index 3cb2db26c..486aded3f 100644 --- a/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts +++ b/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts @@ -42,10 +42,6 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI } get changed(): boolean { - // console.log('-------------------------------------------------------'); - // console.log('initialForm: ', this.initialForm.value); - // console.log('form: ', this.form.value); - for (const key of Object.keys(this.form.getRawValue())) { const initialValue = this.initialForm.get(key).value; const updatedValue = this.form.get(key).value; @@ -78,24 +74,25 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI close(): void { if (this.changed) { - this._waitingForConfirmation = true; - const dialogRef = this._dialogService.openDialog({ disableConfirm: !this.valid }); - dialogRef - .afterClosed() - .toPromise() - .then(result => { - if (result in ConfirmOptions) { - if (result === ConfirmOptions.CONFIRM) { - this.save(true); - } else { - this._dialogRef.close(); - } + this._openConfirmDialog().then(result => { + if (result in ConfirmOptions) { + if (result === ConfirmOptions.CONFIRM) { + this.save(true); + } else { + this._dialogRef.close(); } - this._waitingForConfirmation = false; - }); - return; + } + this._waitingForConfirmation = false; + }); + } else { + this._dialogRef.close(); } - this._dialogRef.close(); + } + + protected _openConfirmDialog() { + this._waitingForConfirmation = true; + const dialogRef = this._dialogService.openDialog({ disableConfirm: !this.valid }); + return dialogRef.afterClosed().toPromise(); } @HostListener('window:keydown.Enter', ['$event']) From 4d9555ada9a5c32e8d7230cce65f29869734c2e8 Mon Sep 17 00:00:00 2001 From: Valentin Date: Wed, 12 Jan 2022 10:16:28 +0200 Subject: [PATCH 05/13] changed 'click' to 'action' --- .../add-edit-dictionary-dialog.component.html | 2 +- .../add-edit-dossier-template-dialog.component.html | 2 +- .../add-edit-file-attribute-dialog.component.html | 2 +- .../dialogs/edit-color-dialog/edit-color-dialog.component.html | 2 +- .../edit-dossier-dialog/edit-dossier-dialog.component.html | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html index abcf375f0..fdef99666 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html @@ -101,5 +101,5 @@ - + diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html index fe2e2f28c..9fa14f36b 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html @@ -88,5 +88,5 @@ - + diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html index 7a8b7aa38..1113f5e46 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html @@ -90,5 +90,5 @@ - + diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html index 873c58145..0cf76231a 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html @@ -34,5 +34,5 @@ - + diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html index 2500c6cd4..ef9f87ce3 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html @@ -65,5 +65,5 @@ - + From b842ab9d02d698fe7e11a98745b523f3268a19c4 Mon Sep 17 00:00:00 2001 From: Valentin Date: Wed, 12 Jan 2022 10:38:07 +0200 Subject: [PATCH 06/13] stored initial form as a simple object instead of a form --- .../add-edit-dictionary-dialog.component.ts | 2 +- .../add-edit-dossier-template-dialog.component.ts | 2 +- .../add-edit-file-attribute-dialog.component.ts | 2 +- .../dialogs/edit-color-dialog/edit-color-dialog.component.ts | 2 +- .../src/app/modules/shared/dialog/base-dialog.component.ts | 4 ++-- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts index 49208b203..2cbeb2ab9 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts @@ -46,7 +46,7 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent { ) { super(_injector, _dialogRef); this.form = this._getForm(this.dictionary); - this.initialForm = this._getForm(this.dictionary); + this.initialFormValue = this.form.getRawValue(); this.hasColor$ = this._colorEmpty$; this.technicalName$ = this.form.get('label').valueChanges.pipe(map(value => this._toTechnicalName(value))); } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts index f263a5904..fb541d419 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts @@ -42,7 +42,7 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent { ) { super(_injector, _dialogRef); this.form = this._getForm(); - this.initialForm = this._getForm(); + this.initialFormValue = this.form.getRawValue(); this.hasValidFrom = !!this.dossierTemplate?.validFrom; this.hasValidTo = !!this.dossierTemplate?.validTo; diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts index 1e17d2d58..387c78462 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts @@ -39,7 +39,7 @@ export class AddEditFileAttributeDialogComponent extends BaseDialogComponent { this.canSetDisplayed = data.numberOfDisplayedAttrs < this.DISPLAYED_FILTERABLE_LIMIT || data.fileAttribute?.displayedInFileList; this.canSetFilterable = data.numberOfFilterableAttrs < this.DISPLAYED_FILTERABLE_LIMIT || data.fileAttribute?.filterable; this.form = this._getForm(this.fileAttribute); - this.initialForm = this._getForm(this.fileAttribute); + this.initialFormValue = this.form.getRawValue(); } save() { diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts index bbef7e13d..ebc4e483d 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts @@ -38,7 +38,7 @@ export class EditColorDialogComponent extends BaseDialogComponent { this._dossierTemplateId = data.dossierTemplateId; this.form = this._getForm(); - this.initialForm = this._getForm(); + this.initialFormValue = this.form.getRawValue(); } async save() { diff --git a/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts b/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts index 486aded3f..f1452b5bb 100644 --- a/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts +++ b/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts @@ -23,7 +23,7 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI protected _waitingForConfirmation = false; form!: FormGroup; - initialForm!: FormGroup; + initialFormValue; constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef) { super(); @@ -43,7 +43,7 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI get changed(): boolean { for (const key of Object.keys(this.form.getRawValue())) { - const initialValue = this.initialForm.get(key).value; + const initialValue = this.initialFormValue[key]; const updatedValue = this.form.get(key).value; if (initialValue == null && updatedValue != null) { From 5e0af3e614356767d228d43b0877f77b2892d1db Mon Sep 17 00:00:00 2001 From: Valentin Date: Wed, 12 Jan 2022 13:13:41 +0200 Subject: [PATCH 07/13] moved 'base-dialog component' and 'confirmation-dialog service' in common --- .../add-edit-dictionary-dialog.component.ts | 3 +- ...-edit-dossier-template-dialog.component.ts | 3 +- ...dd-edit-file-attribute-dialog.component.ts | 2 +- .../edit-color-dialog.component.ts | 3 +- .../edit-dossier-dialog.component.ts | 2 +- .../shared/dialog/base-dialog.component.ts | 112 ------------------ .../dialog/confirmation-dialog.service.ts | 36 ------ .../src/app/modules/shared/shared.module.ts | 2 - 8 files changed, 5 insertions(+), 158 deletions(-) delete mode 100644 apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts delete mode 100644 apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts index 2cbeb2ab9..caec3565a 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts @@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Inject, Injector } from '@angular/c import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { Observable } from 'rxjs'; -import { shareDistinctLast, Toaster } from '@iqser/common-ui'; +import { BaseDialogComponent, shareDistinctLast, Toaster } from '@iqser/common-ui'; import { TranslateService } from '@ngx-translate/core'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { AppStateService } from '@state/app-state.service'; @@ -12,7 +12,6 @@ import { Dictionary, IDictionary } from '@red/domain'; import { UserService } from '@services/user.service'; import { map } from 'rxjs/operators'; import { HttpStatusCode } from '@angular/common/http'; -import { BaseDialogComponent } from '../../../shared/dialog/base-dialog.component'; @Component({ selector: 'redaction-add-edit-dictionary-dialog', diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts index fb541d419..c7e6e6905 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts @@ -7,11 +7,10 @@ import { Moment } from 'moment'; import { applyIntervalConstraints } from '@utils/date-inputs-utils'; import { downloadTypesTranslations } from '../../../../translations/download-types-translations'; import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service'; -import { Toaster } from '@iqser/common-ui'; +import { BaseDialogComponent, Toaster } from '@iqser/common-ui'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { DownloadFileType, IDossierTemplate } from '@red/domain'; import { HttpStatusCode } from '@angular/common/http'; -import { BaseDialogComponent } from '../../../shared/dialog/base-dialog.component'; @Component({ templateUrl: './add-edit-dossier-template-dialog.component.html', diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts index 387c78462..cea36c802 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts @@ -4,7 +4,7 @@ import { FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { fileAttributeTypesTranslations } from '../../translations/file-attribute-types-translations'; import { FileAttributesService } from '@services/entity-services/file-attributes.service'; -import { BaseDialogComponent } from '../../../shared/dialog/base-dialog.component'; +import { BaseDialogComponent } from '../../../../../../../../libs/common-ui/src'; @Component({ selector: 'redaction-add-edit-file-attribute-dialog', diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts index ebc4e483d..c98d2b51a 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts @@ -1,13 +1,12 @@ import { Component, Inject, Injector } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { DefaultColorType, IColors } from '@red/domain'; -import { Toaster } from '@iqser/common-ui'; +import { BaseDialogComponent, Toaster } from '@iqser/common-ui'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { TranslateService } from '@ngx-translate/core'; import { defaultColorsTranslations } from '../../translations/default-colors-translations'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { DictionaryService } from '@shared/services/dictionary.service'; -import { BaseDialogComponent } from '../../../shared/dialog/base-dialog.component'; interface IEditColorData { colors: IColors; diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts index 5a2c6f83b..0239126aa 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts @@ -4,7 +4,7 @@ import { Dossier } from '@red/domain'; import { EditDossierGeneralInfoComponent } from './general-info/edit-dossier-general-info.component'; import { EditDossierDownloadPackageComponent } from './download-package/edit-dossier-download-package.component'; import { EditDossierSectionInterface } from './edit-dossier-section.interface'; -import { ConfirmOptions, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui'; +import { BaseDialogComponent, ConfirmOptions, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui'; import { EditDossierDictionaryComponent } from './dictionary/edit-dossier-dictionary.component'; import { EditDossierAttributesComponent } from './attributes/edit-dossier-attributes.component'; diff --git a/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts b/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts deleted file mode 100644 index f1452b5bb..000000000 --- a/apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts +++ /dev/null @@ -1,112 +0,0 @@ -import { Directive, HostListener, Injector, OnInit } from '@angular/core'; -import { AutoUnsubscribe, ConfirmOptions, IqserEventTarget } from '../../../../../../../libs/common-ui/src'; -import { MatDialogRef } from '@angular/material/dialog'; -import { ConfirmationDialogService } from '@shared/dialog/confirmation-dialog.service'; -import { FormGroup } from '@angular/forms'; -import * as moment from 'moment'; - -@Directive() -/** - * Extend this component when you want to submit the form after pressing enter. - * - * This could be done by adding properties (submit)="save()" on the form and type="submit" on the save button. - * However, some components (e.g. redaction-select, color picker) don't set focus on the input after choosing a value. - * Also, other components (e.g. dropdown select) trigger a different action on enter, instead of submit. - * - * Make sure to remove property type="submit" from the save button and the (submit)="save()" property from the form - * (otherwise the save request will be triggered twice). - * */ -export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnInit { - abstract disabled: boolean; - - protected readonly _dialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService); - protected _waitingForConfirmation = false; - - form!: FormGroup; - initialFormValue; - - constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef) { - super(); - } - - abstract save(closeAfterSave?: boolean): void; - - ngOnInit(): void { - this.addSubscription = this._dialogRef.backdropClick().subscribe(() => { - this.close(); - }); - } - - get valid(): boolean { - return this.form.valid; - } - - get changed(): boolean { - for (const key of Object.keys(this.form.getRawValue())) { - const initialValue = this.initialFormValue[key]; - const updatedValue = this.form.get(key).value; - - if (initialValue == null && updatedValue != null) { - const updatedValueType = typeof updatedValue; - if (updatedValueType !== 'string' && updatedValueType !== 'boolean') { - return true; - } else if (updatedValueType === 'string' && updatedValue.length > 0) { - return true; - } else if (updatedValueType === 'boolean' && updatedValue === true) { - return true; - } - } else if (initialValue !== updatedValue) { - if (Array.isArray(updatedValue)) { - if (JSON.stringify(initialValue) !== JSON.stringify(updatedValue)) { - return true; - } - } else if (updatedValue instanceof moment) { - if (!moment(updatedValue).isSame(moment(initialValue))) { - return true; - } - } else { - return true; - } - } - } - return false; - } - - close(): void { - if (this.changed) { - this._openConfirmDialog().then(result => { - if (result in ConfirmOptions) { - if (result === ConfirmOptions.CONFIRM) { - this.save(true); - } else { - this._dialogRef.close(); - } - } - this._waitingForConfirmation = false; - }); - } else { - this._dialogRef.close(); - } - } - - protected _openConfirmDialog() { - this._waitingForConfirmation = true; - const dialogRef = this._dialogService.openDialog({ disableConfirm: !this.valid }); - return dialogRef.afterClosed().toPromise(); - } - - @HostListener('window:keydown.Enter', ['$event']) - onEnter(event: KeyboardEvent): void { - const node = (event.target as IqserEventTarget).localName; - if (this.valid && !this.disabled && this.changed && node !== 'textarea') { - this.save(); - } - } - - @HostListener('window:keydown.Escape', ['$event']) - onEscape(): void { - if (!this._waitingForConfirmation) { - this.close(); - } - } -} diff --git a/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts b/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts deleted file mode 100644 index efab94dbd..000000000 --- a/apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Injectable } from '@angular/core'; -import { ConfirmationDialogComponent, ConfirmationDialogInput, DialogConfig, DialogService, TitleColors } from '@iqser/common-ui'; -import { MatDialog, MatDialogRef } from '@angular/material/dialog'; -import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; - -type DialogType = 'confirm'; - -@Injectable() -export class ConfirmationDialogService extends DialogService { - protected readonly _config: DialogConfig = { - confirm: { - component: ConfirmationDialogComponent, - dialogConfig: { disableClose: false }, - }, - }; - - constructor(protected readonly _dialog: MatDialog) { - super(_dialog); - } - - openDialog(data?): MatDialogRef { - return super.openDialog( - 'confirm', - null, - new ConfirmationDialogInput({ - title: _('confirmation-dialog.unsaved-changes.title'), - question: _('confirmation-dialog.unsaved-changes.question'), - details: _('confirmation-dialog.unsaved-changes.details'), - confirmationText: _('confirmation-dialog.unsaved-changes.confirmation-text'), - discardChangesText: _('confirmation-dialog.unsaved-changes.discard-changes-text'), - disableConfirm: data.disableConfirm, - titleColor: TitleColors.WARN, - }), - ); - } -} 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 81e3e3122..4f606ceb9 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -26,7 +26,6 @@ import { TypeFilterComponent } from './components/type-filter/type-filter.compon import { TeamMembersComponent } from './components/team-members/team-members.component'; import { EditorComponent } from './components/editor/editor.component'; import { ExpandableFileActionsComponent } from './components/expandable-file-actions/expandable-file-actions.component'; -import { ConfirmationDialogService } from '@shared/dialog/confirmation-dialog.service'; const buttons = [FileDownloadBtnComponent, UserButtonComponent]; @@ -70,7 +69,6 @@ const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, Rea }, }, }, - ConfirmationDialogService, ], }) export class SharedModule {} From 8bae52c895e247ea0ab42f6d50424c6122a0bea3 Mon Sep 17 00:00:00 2001 From: Valentin Date: Thu, 13 Jan 2022 12:05:35 +0200 Subject: [PATCH 08/13] extended base dialog for 'add dossier' component --- .../add-dossier-dialog.component.html | 4 ++-- .../add-dossier-dialog.component.ts | 16 +++++++++------- .../edit-dossier-dialog.component.html | 2 +- .../edit-dossier-dialog.component.ts | 6 +++--- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html index e4b6d7c77..726110f51 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html @@ -1,5 +1,5 @@
-
+
@@ -91,7 +91,7 @@ ({ key: type, @@ -30,10 +29,13 @@ export class AddDossierDialogComponent { private readonly _dossierTemplatesService: DossierTemplatesService, private readonly _formBuilder: FormBuilder, private readonly _reportTemplateController: ReportTemplateService, - readonly dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, ) { + super(_injector, _dialogRef); this._getDossierTemplates(); this.form = this._getForm(); + this.initialFormValue = this.form.getRawValue(); } private _getForm(): FormGroup { @@ -75,10 +77,10 @@ export class AddDossierDialogComponent { reportTemplateValueMapper = (reportTemplate: IReportTemplate) => reportTemplate.templateId; - async saveDossier(addMembers = false) { + async save(options?: SaveOptions) { const savedDossier = await this._dossiersService.createOrUpdate(this._formToObject()).toPromise(); if (savedDossier) { - this.dialogRef.close({ dossier: savedDossier, addMembers }); + this._dialogRef.close({ dossier: savedDossier, addMembers: options?.addMembers }); } } diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html index ef9f87ce3..a996e9418 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html @@ -53,7 +53,7 @@ {{ 'edit-dossier-dialog.actions.save' | translate }} Date: Fri, 14 Jan 2022 16:38:27 +0200 Subject: [PATCH 09/13] extended base dialog for 'manual annotation dialog' component --- .../manual-annotation-dialog.component.html | 8 ++-- .../manual-annotation-dialog.component.ts | 40 +++++++++++-------- 2 files changed, 28 insertions(+), 20 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html index 46db18d59..00e585c58 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html @@ -1,5 +1,5 @@
- +
@@ -54,7 +54,7 @@
- +
@@ -74,11 +74,11 @@
-
- +
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts index bb1727d50..ccb2c63ae 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, Inject, Injector, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { AppStateService } from '@state/app-state.service'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; @@ -9,6 +9,7 @@ import { PermissionsService } from '@services/permissions.service'; import { JustificationsService } from '@services/entity-services/justifications.service'; import { Dictionary, Dossier, File, IAddRedactionRequest } from '@red/domain'; import { DossiersService } from '@services/entity-services/dossiers.service'; +import { BaseDialogComponent } from '@iqser/common-ui'; import { DictionaryService } from '@shared/services/dictionary.service'; export interface LegalBasisOption { @@ -22,9 +23,7 @@ export interface LegalBasisOption { templateUrl: './manual-annotation-dialog.component.html', styleUrls: ['./manual-annotation-dialog.component.scss'], }) -export class ManualAnnotationDialogComponent implements OnInit { - redactionForm: FormGroup; - +export class ManualAnnotationDialogComponent extends BaseDialogComponent implements OnInit { isDocumentAdmin: boolean; isDictionaryRequest: boolean; isFalsePositiveRequest: boolean; @@ -43,15 +42,21 @@ export class ManualAnnotationDialogComponent implements OnInit { private readonly _dossiersService: DossiersService, private readonly _dictionaryService: DictionaryService, public dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: { manualRedactionEntryWrapper: ManualRedactionEntryWrapper; file: File }, ) { + super(_injector, _dialogRef); this._dossier = this._dossiersService.find(this.data.file.dossierId); this.isDocumentAdmin = this._permissionsService.isApprover(this._dossier); this.isFalsePositiveRequest = this.data.manualRedactionEntryWrapper.type === 'FALSE_POSITIVE'; this.isDictionaryRequest = this.data.manualRedactionEntryWrapper.type === 'DICTIONARY' || this.isFalsePositiveRequest; - this.redactionForm = this._getForm(); + this.form = this._getForm(); + this.initialFormValue = this.form.getRawValue(); + + this.possibleDictionaries = this._possibleDictionaries; } get title() { @@ -59,7 +64,7 @@ export class ManualAnnotationDialogComponent implements OnInit { } get displayedDictionaryLabel() { - const dictType = this.redactionForm.get('dictionary').value; + const dictType = this.form.get('dictionary').value; if (dictType) { return this.possibleDictionaries.find(d => d.type === dictType).label; } @@ -92,6 +97,7 @@ export class ManualAnnotationDialogComponent implements OnInit { } async ngOnInit() { + super.ngOnInit(); this.possibleDictionaries = await this._getPossibleDictionaries(); const data = await this._justificationsService.getForDossierTemplate(this._dossier.dossierTemplateId).toPromise(); @@ -104,11 +110,11 @@ export class ManualAnnotationDialogComponent implements OnInit { this.legalOptions.sort((a, b) => a.label.localeCompare(b.label)); } - handleAddRedaction() { + save() { this._enhanceManualRedaction(this.data.manualRedactionEntryWrapper.manualRedactionEntry); this._manualAnnotationService.addAnnotation(this.data.manualRedactionEntryWrapper.manualRedactionEntry, this.data.file).subscribe( - response => this.dialogRef.close(new ManualAnnotationResponse(this.data.manualRedactionEntryWrapper, response)), - () => this.dialogRef.close(), + response => this._dialogRef.close(new ManualAnnotationResponse(this.data.manualRedactionEntryWrapper, response)), + () => this._dialogRef.close(), ); } @@ -133,8 +139,8 @@ export class ManualAnnotationDialogComponent implements OnInit { } private _enhanceManualRedaction(addRedactionRequest: IAddRedactionRequest) { - const legalOption: LegalBasisOption = this.redactionForm.get('reason').value; - addRedactionRequest.type = this.redactionForm.get('dictionary').value; + const legalOption: LegalBasisOption = this.form.get('reason').value; + addRedactionRequest.type = this.form.get('dictionary').value; if (legalOption) { addRedactionRequest.reason = legalOption.description; addRedactionRequest.legalBasis = legalOption.legalBasis; @@ -146,11 +152,13 @@ export class ManualAnnotationDialogComponent implements OnInit { if (!addRedactionRequest.reason) { addRedactionRequest.reason = 'Dictionary Request'; } - const commentValue = this.redactionForm.get('comment').value; + const commentValue = this.form.get('comment').value; addRedactionRequest.comment = commentValue ? { text: commentValue } : null; - addRedactionRequest.section = this.redactionForm.get('section').value; - addRedactionRequest.value = addRedactionRequest.rectangle - ? this.redactionForm.get('classification').value - : addRedactionRequest.value; + addRedactionRequest.section = this.form.get('section').value; + addRedactionRequest.value = addRedactionRequest.rectangle ? this.form.get('classification').value : addRedactionRequest.value; + } + + get disabled() { + return this.form.invalid; } } From a590bfc76439babdfc68612c3958d904a2705930 Mon Sep 17 00:00:00 2001 From: Valentin Date: Fri, 14 Jan 2022 18:03:15 +0200 Subject: [PATCH 10/13] extended base dialog for 'change legal basis dialog' component --- .../add-edit-dictionary-dialog.component.html | 2 +- .../add-edit-dictionary-dialog.component.ts | 1 - ...dit-dossier-template-dialog.component.html | 2 +- ...-edit-dossier-template-dialog.component.ts | 1 - ...-edit-file-attribute-dialog.component.html | 2 +- ...dd-edit-file-attribute-dialog.component.ts | 1 - .../edit-color-dialog.component.html | 2 +- .../edit-color-dialog.component.ts | 1 - .../change-legal-basis-dialog.component.html | 4 ++-- .../change-legal-basis-dialog.component.ts | 24 +++++++++---------- 10 files changed, 17 insertions(+), 23 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html index fdef99666..f626a8619 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html @@ -95,7 +95,7 @@
-
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts index caec3565a..0c80cb245 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts @@ -28,7 +28,6 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent { name: this._data.dictionary?.label, }); readonly hasColor$: Observable; - readonly disabled = false; private readonly _dossierTemplateId = this._data.dossierTemplateId; constructor( diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html index 9fa14f36b..7c0fba861 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html @@ -82,7 +82,7 @@
-
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts index c7e6e6905..f3a046220 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts @@ -24,7 +24,6 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent { key: type, label: downloadTypesTranslations[type], })); - readonly disabled = false; private _previousValidFrom: Moment; private _previousValidTo: Moment; private _lastValidFrom: Moment; diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html index 1113f5e46..c2b1152ca 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html @@ -84,7 +84,7 @@
-
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts index cea36c802..413cdc418 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts @@ -13,7 +13,6 @@ import { BaseDialogComponent } from '../../../../../../../../libs/common-ui/src' changeDetection: ChangeDetectionStrategy.OnPush, }) export class AddEditFileAttributeDialogComponent extends BaseDialogComponent { - readonly disabled = false; DISPLAYED_FILTERABLE_LIMIT = 3; translations = fileAttributeTypesTranslations; fileAttribute: IFileAttributeConfig = this.data.fileAttribute; diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html index 0cf76231a..2255ff409 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html @@ -28,7 +28,7 @@
-
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts index c98d2b51a..87fd53d62 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts @@ -20,7 +20,6 @@ interface IEditColorData { }) export class EditColorDialogComponent extends BaseDialogComponent { translations = defaultColorsTranslations; - readonly disabled = false; private readonly _dossierTemplateId: string; constructor( diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html index 97a07755e..5395eb4df 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html @@ -38,12 +38,12 @@
-
- +
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts index 16f9f5e8f..fcfe2d5d7 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, Inject, Injector, OnInit } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @@ -6,6 +6,7 @@ import { PermissionsService } from '@services/permissions.service'; import { DossiersService } from '@services/entity-services/dossiers.service'; import { JustificationsService } from '@services/entity-services/justifications.service'; import { Dossier } from '@red/domain'; +import { BaseDialogComponent } from '@iqser/common-ui'; export interface LegalBasisOption { label?: string; @@ -16,8 +17,7 @@ export interface LegalBasisOption { @Component({ templateUrl: './change-legal-basis-dialog.component.html', }) -export class ChangeLegalBasisDialogComponent implements OnInit { - form: FormGroup = this._getForm(); +export class ChangeLegalBasisDialogComponent extends BaseDialogComponent implements OnInit { isDocumentAdmin: boolean; legalOptions: LegalBasisOption[] = []; @@ -26,16 +26,12 @@ export class ChangeLegalBasisDialogComponent implements OnInit { private readonly _dossiersService: DossiersService, private readonly _permissionsService: PermissionsService, private readonly _formBuilder: FormBuilder, - readonly dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) private readonly _data: { annotations: AnnotationWrapper[]; dossier: Dossier }, - ) {} - - get changed(): boolean { - return ( - this.form.get('reason').value.legalBasis !== this._data.annotations[0].legalBasis || - this.form.get('section').value !== this._data.annotations[0].section || - this.form.get('classification').value !== this._data.annotations[0].value - ); + ) { + super(_injector, _dialogRef); + this.form = this._getForm(); } get allRectangles(): boolean { @@ -43,6 +39,7 @@ export class ChangeLegalBasisDialogComponent implements OnInit { } async ngOnInit() { + super.ngOnInit(); const data = await this._justificationsService.getForDossierTemplate(this._data.dossier.dossierTemplateId).toPromise(); this.legalOptions = data @@ -56,6 +53,7 @@ export class ChangeLegalBasisDialogComponent implements OnInit { this.form.patchValue({ reason: this.legalOptions.find(option => option.legalBasis === this._data.annotations[0].legalBasis), }); + this.initialFormValue = this.form.getRawValue(); } private _getForm(): FormGroup { @@ -69,7 +67,7 @@ export class ChangeLegalBasisDialogComponent implements OnInit { } save() { - this.dialogRef.close({ + this._dialogRef.close({ legalBasis: this.form.get('reason').value.legalBasis, section: this.form.get('section').value, comment: this.form.get('comment').value, From 85f3088f3af10cc14e3d7921c648ed944e1e7b08 Mon Sep 17 00:00:00 2001 From: Valentin Date: Mon, 17 Jan 2022 10:39:05 +0200 Subject: [PATCH 11/13] extended base dialog for 'document info dialog' component and 'force annotation dialog' compoenent --- .../document-info-dialog.component.html | 6 ++--- .../document-info-dialog.component.ts | 15 ++++++++---- .../force-annotation-dialog.component.html | 8 +++---- .../force-annotation-dialog.component.ts | 23 +++++++++++-------- 4 files changed, 30 insertions(+), 22 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html index 2d8ddfe7c..49fadde08 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html @@ -1,7 +1,7 @@
-
+
@@ -9,11 +9,11 @@
-
- +
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.ts index b18ead053..8d4a77500 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.ts @@ -1,16 +1,17 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, Inject, Injector, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { Dossier, File, IFileAttributeConfig } from '@red/domain'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { FileAttributesService } from '@services/entity-services/file-attributes.service'; import { DossiersService } from '@services/entity-services/dossiers.service'; import { FilesService } from '@services/entity-services/files.service'; +import { BaseDialogComponent } from '@iqser/common-ui'; @Component({ templateUrl: './document-info-dialog.component.html', styleUrls: ['./document-info-dialog.component.scss'], }) -export class DocumentInfoDialogComponent implements OnInit { +export class DocumentInfoDialogComponent extends BaseDialogComponent implements OnInit { form: FormGroup; attributes: IFileAttributeConfig[]; @@ -21,27 +22,31 @@ export class DocumentInfoDialogComponent implements OnInit { private readonly _formBuilder: FormBuilder, private readonly _fileAttributesService: FileAttributesService, private readonly _filesService: FilesService, - public dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) readonly data: File, ) { + super(_injector, _dialogRef); this._dossier = this._dossiersService.find(this.data.dossierId); } async ngOnInit() { + super.ngOnInit(); this.attributes = ( await this._fileAttributesService.getFileAttributesConfig(this._dossier.dossierTemplateId).toPromise() ).fileAttributeConfigs.filter(attr => attr.editable); this.form = this._getForm(); + this.initialFormValue = this.form.getRawValue(); } - async saveDocumentInfo() { + async save() { const attributeIdToValue = { ...this.data.fileAttributes?.attributeIdToValue, ...this.form.getRawValue(), }; await this._fileAttributesService.setFileAttributes({ attributeIdToValue }, this.data.dossierId, this.data.fileId).toPromise(); this._filesService.reload(this.data.dossierId, this.data.fileId); - this.dialogRef.close(true); + this._dialogRef.close(true); } private _getForm(): FormGroup { diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-annotation-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-annotation-dialog.component.html index fb2d27da6..be573e7aa 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-annotation-dialog.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-annotation-dialog.component.html @@ -1,5 +1,5 @@
-
+
@@ -19,7 +19,7 @@
- +
@@ -29,11 +29,11 @@
-
- +
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts index 66fa3e626..3a69b28a3 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts @@ -1,7 +1,7 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, Inject, Injector, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { Toaster } from '@iqser/common-ui'; +import { BaseDialogComponent, Toaster } from '@iqser/common-ui'; import { TranslateService } from '@ngx-translate/core'; import { UserService } from '@services/user.service'; import { ManualAnnotationService } from '../../services/manual-annotation.service'; @@ -21,8 +21,7 @@ export interface LegalBasisOption { templateUrl: './force-annotation-dialog.component.html', styleUrls: ['./force-annotation-dialog.component.scss'], }) -export class ForceAnnotationDialogComponent implements OnInit { - redactionForm: FormGroup; +export class ForceAnnotationDialogComponent extends BaseDialogComponent implements OnInit { isDocumentAdmin: boolean; legalOptions: LegalBasisOption[] = []; @@ -35,10 +34,13 @@ export class ForceAnnotationDialogComponent implements OnInit { private readonly _justificationsService: JustificationsService, private readonly _manualAnnotationService: ManualAnnotationService, private readonly _permissionsService: PermissionsService, - public dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) private readonly _data: { readonly dossier: Dossier; readonly hint: boolean }, ) { - this.redactionForm = this._getForm(); + super(_injector, _dialogRef); + this.form = this._getForm(); + this.initialFormValue = this.form.getRawValue(); } get isHintDialog() { @@ -55,6 +57,7 @@ export class ForceAnnotationDialogComponent implements OnInit { } async ngOnInit() { + super.ngOnInit(); const data = await this._justificationsService.getForDossierTemplate(this._data.dossier.dossierTemplateId).toPromise(); this.legalOptions = data.map(lbm => ({ @@ -66,17 +69,17 @@ export class ForceAnnotationDialogComponent implements OnInit { this.legalOptions.sort((a, b) => a.label.localeCompare(b.label)); } - handleForceAnnotation() { - this.dialogRef.close(this._createForceRedactionRequest()); + save() { + this._dialogRef.close(this._createForceRedactionRequest()); } private _createForceRedactionRequest(): ILegalBasisChangeRequest { const request: ILegalBasisChangeRequest = {}; - const legalOption: LegalBasisOption = this.redactionForm.get('reason').value; + const legalOption: LegalBasisOption = this.form.get('reason').value; request.legalBasis = legalOption.legalBasis; - request.comment = this.redactionForm.get('comment').value; + request.comment = this.form.get('comment').value; return request; } From 10f2f4c48ab373fb944eb6ff511fdbd5dd52fb46 Mon Sep 17 00:00:00 2001 From: Valentin Date: Tue, 18 Jan 2022 00:06:59 +0200 Subject: [PATCH 12/13] extended base dialog for 'recategorize image dialog' component and 'resize annotation dialog' compoenent --- .../recategorize-image-dialog.component.html | 6 ++--- .../recategorize-image-dialog.component.ts | 27 +++++++++++-------- .../resize-annotation-dialog.component.html | 6 ++--- .../resize-annotation-dialog.component.ts | 24 ++++++++++------- 4 files changed, 37 insertions(+), 26 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html index aeafba369..a1073bcd3 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html @@ -1,5 +1,5 @@
-
+
@@ -23,12 +23,12 @@
-
- +
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.ts index 3e6771b28..488438e46 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.ts @@ -1,17 +1,17 @@ -import { Component, Inject, OnInit } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Component, Inject, Injector, OnInit } from '@angular/core'; +import { FormBuilder, Validators } from '@angular/forms'; import { PermissionsService } from '@services/permissions.service'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { imageCategoriesTranslations } from '../../translations/image-categories-translations'; import { ImageCategory } from '../../models/image-category.model'; import { Dossier } from '@red/domain'; +import { BaseDialogComponent } from '@iqser/common-ui'; @Component({ templateUrl: './recategorize-image-dialog.component.html', }) -export class RecategorizeImageDialogComponent implements OnInit { - recategorizeImageForm: FormGroup; +export class RecategorizeImageDialogComponent extends BaseDialogComponent implements OnInit { isDocumentAdmin: boolean; typeOptions: ImageCategory[] = ['signature', 'logo', 'formula', 'image']; translations = imageCategoriesTranslations; @@ -19,27 +19,32 @@ export class RecategorizeImageDialogComponent implements OnInit { constructor( private readonly _permissionsService: PermissionsService, private readonly _formBuilder: FormBuilder, - public dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: { annotations: AnnotationWrapper[]; dossier: Dossier }, - ) {} + ) { + super(_injector, _dialogRef); + } get changed(): boolean { - return this.recategorizeImageForm.get('type').value !== this.data.annotations[0].type; + return this.form.get('type').value !== this.data.annotations[0].type; } ngOnInit() { + super.ngOnInit(); this.isDocumentAdmin = this._permissionsService.isApprover(this.data.dossier); - this.recategorizeImageForm = this._formBuilder.group({ + this.form = this._formBuilder.group({ type: [this.data.annotations[0].type, Validators.required], comment: this.isDocumentAdmin ? [null] : [null, Validators.required], }); + this.initialFormValue = this.form.getRawValue(); } save() { - this.dialogRef.close({ - type: this.recategorizeImageForm.get('type').value, - comment: this.recategorizeImageForm.get('comment').value, + this._dialogRef.close({ + type: this.form.get('type').value, + comment: this.form.get('comment').value, }); } } diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.html index 72a505f70..a83614b35 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.html @@ -1,5 +1,5 @@
-
+
@@ -10,12 +10,12 @@
-
- +
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.ts index 51e55a1ef..14b6e1b64 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.ts @@ -1,34 +1,40 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, Inject, Injector, OnInit } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FormBuilder, Validators } from '@angular/forms'; import { PermissionsService } from '@services/permissions.service'; import { Dossier } from '@red/domain'; +import { BaseDialogComponent } from '@iqser/common-ui'; @Component({ templateUrl: './resize-annotation-dialog.component.html', }) -export class ResizeAnnotationDialogComponent implements OnInit { - resizeForm: FormGroup; +export class ResizeAnnotationDialogComponent extends BaseDialogComponent implements OnInit { isDocumentAdmin: boolean; constructor( private readonly _permissionsService: PermissionsService, private readonly _formBuilder: FormBuilder, - public dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) private readonly _data: { dossier: Dossier }, - ) {} + ) { + super(_injector, _dialogRef); + } ngOnInit() { + super.ngOnInit(); + this.isDocumentAdmin = this._permissionsService.isApprover(this._data.dossier); - this.resizeForm = this._formBuilder.group({ + this.form = this._formBuilder.group({ comment: this.isDocumentAdmin ? [null] : [null, Validators.required], }); + this.initialFormValue = this.form.getRawValue(); } save() { - this.dialogRef.close({ - comment: this.resizeForm.get('comment').value, + this._dialogRef.close({ + comment: this.form.get('comment').value, }); } } From 920be9e4bf537276b1f6ceb25883ec75b82c5395 Mon Sep 17 00:00:00 2001 From: Valentin Date: Tue, 18 Jan 2022 16:53:58 +0200 Subject: [PATCH 13/13] added warn box for all needed dialogs --- ...it-dossier-attribute-dialog.component.html | 4 ++-- ...edit-dossier-attribute-dialog.component.ts | 16 +++++++------- .../admin/services/admin-dialog.service.ts | 8 ++++--- .../remove-annotations-dialog.component.html | 6 +++--- .../remove-annotations-dialog.component.ts | 21 ++++++++++--------- .../services/dossiers-dialog.service.ts | 2 ++ 6 files changed, 32 insertions(+), 25 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html index ab55a854a..8ba993478 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html @@ -35,11 +35,11 @@
-
- + diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts index 96642be2e..f20fa7042 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts @@ -1,8 +1,8 @@ -import { Component, HostListener, Inject, OnDestroy } from '@angular/core'; +import { Component, HostListener, Inject, Injector, OnDestroy } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { DossierAttributeConfigTypes, FileAttributeConfigTypes, IDossierAttributeConfig } from '@red/domain'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { AutoUnsubscribe, IqserEventTarget, LoadingService, Toaster } from '@iqser/common-ui'; +import { BaseDialogComponent, IqserEventTarget, LoadingService, Toaster } from '@iqser/common-ui'; import { HttpErrorResponse } from '@angular/common/http'; import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service'; import { dossierAttributeTypesTranslations } from '../../translations/dossier-attribute-types-translations'; @@ -12,9 +12,8 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; templateUrl: './add-edit-dossier-attribute-dialog.component.html', styleUrls: ['./add-edit-dossier-attribute-dialog.component.scss'], }) -export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe implements OnDestroy { +export class AddEditDossierAttributeDialogComponent extends BaseDialogComponent implements OnDestroy { dossierAttribute: IDossierAttributeConfig = this.data.dossierAttribute; - readonly form: FormGroup = this._getForm(this.dossierAttribute); readonly translations = dossierAttributeTypesTranslations; readonly typeOptions = Object.keys(DossierAttributeConfigTypes); @@ -23,11 +22,14 @@ export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe impl private readonly _loadingService: LoadingService, private readonly _dossierAttributesService: DossierAttributesService, private readonly _toaster: Toaster, - readonly dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) readonly data: { readonly dossierAttribute: IDossierAttributeConfig }, ) { - super(); + super(_injector, _dialogRef); + this.form = this._getForm(this.dossierAttribute); + this.initialFormValue = this.form.getRawValue(); } get changed(): boolean { @@ -55,7 +57,7 @@ export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe impl this._dossierAttributesService.createOrUpdate(attribute).subscribe( () => { - this.dialogRef.close(true); + this._dialogRef.close(true); }, (error: HttpErrorResponse) => { this._loadingService.stop(); diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts index 8eaf8a2b5..66efb8fec 100644 --- a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts +++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts @@ -34,6 +34,7 @@ export class AdminDialogService extends DialogService { protected readonly _config: DialogConfig = { confirm: { component: ConfirmationDialogComponent, + dialogConfig: { disableClose: false }, }, addEditDictionary: { component: AddEditDictionaryDialogComponent, @@ -49,18 +50,19 @@ export class AdminDialogService extends DialogService { }, deleteFileAttribute: { component: ConfirmDeleteFileAttributeDialogComponent, + dialogConfig: { disableClose: false }, }, importFileAttributes: { component: FileAttributesCsvImportDialogComponent, - dialogConfig: largeDialogConfig, + dialogConfig: { ...largeDialogConfig, ...{ disableClose: false } }, }, deleteUsers: { component: ConfirmDeleteUsersDialogComponent, - dialogConfig: { autoFocus: true }, + dialogConfig: { autoFocus: true, disableClose: false }, }, addEditUser: { component: AddEditUserDialogComponent, - dialogConfig: { autoFocus: true }, + dialogConfig: { autoFocus: true, disableClose: false }, }, smtpAuthConfig: { component: SmtpAuthDialogComponent, diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html index 9f40bf629..287629e70 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html @@ -7,7 +7,7 @@ ) | translate: { hint: data.hint } }} -
+
{{ (data.removeFromDictionary @@ -46,12 +46,12 @@
-
- + diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.ts index f6ecb7ab3..16591d344 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.ts @@ -1,10 +1,10 @@ -import { Component, Inject } from '@angular/core'; +import { Component, Inject, Injector } from '@angular/core'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { TranslateService } from '@ngx-translate/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { PermissionsService } from '@services/permissions.service'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { humanize } from '@iqser/common-ui'; +import { FormBuilder, Validators } from '@angular/forms'; +import { BaseDialogComponent, humanize } from '@iqser/common-ui'; import { Dossier } from '@red/domain'; export interface RemoveAnnotationsDialogInput { @@ -18,23 +18,24 @@ export interface RemoveAnnotationsDialogInput { templateUrl: './remove-annotations-dialog.component.html', styleUrls: ['./remove-annotations-dialog.component.scss'], }) -export class RemoveAnnotationsDialogComponent { - redactionForm: FormGroup; - +export class RemoveAnnotationsDialogComponent extends BaseDialogComponent { constructor( private readonly _translateService: TranslateService, private readonly _formBuilder: FormBuilder, readonly permissionsService: PermissionsService, - public dialogRef: MatDialogRef, + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: RemoveAnnotationsDialogInput, ) { - this.redactionForm = this._formBuilder.group({ + super(_injector, _dialogRef); + this.form = this._formBuilder.group({ comment: this.permissionsService.isApprover(this.data.dossier) ? [null] : [null, Validators.required], }); + this.initialFormValue = this.form.getRawValue(); } - confirm() { - this.dialogRef.close({ comment: this.redactionForm.getRawValue().comment }); + save() { + this._dialogRef.close({ comment: this.form.getRawValue().comment }); } printable(annotation: AnnotationWrapper) { diff --git a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts index 5a6feb045..ca5aef32e 100644 --- a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts +++ b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts @@ -30,6 +30,7 @@ export class DossiersDialogService extends DialogService { protected readonly _config: DialogConfig = { confirm: { component: ConfirmationDialogComponent, + dialogConfig: { disableClose: false }, }, documentInfo: { component: DocumentInfoDialogComponent, @@ -45,6 +46,7 @@ export class DossiersDialogService extends DialogService { }, assignFile: { component: AssignReviewerApproverDialogComponent, + dialogConfig: { disableClose: false }, }, recategorizeImage: { component: RecategorizeImageDialogComponent,