From fb212b5ad6f58ac22a4eaf2f9caf5a5ace02ee14 Mon Sep 17 00:00:00 2001 From: Valentin Date: Wed, 12 Jan 2022 13:13:41 +0200 Subject: [PATCH] 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 | 3 +- .../shared/dialog/base-dialog.component.ts | 112 ------------------ .../dialog/confirmation-dialog.service.ts | 36 ------ .../src/app/modules/shared/shared.module.ts | 2 - libs/common-ui | 2 +- 9 files changed, 6 insertions(+), 160 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 9327ec6bc..c30dbe9e9 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 763bf3539..0330560ca 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'; @@ -14,7 +14,6 @@ import { DossiersService } from '@services/entity-services/dossiers.service'; import { Observable } from 'rxjs'; import { tap } from 'rxjs/operators'; import { EditDossierTeamComponent } from './edit-dossier-team/edit-dossier-team.component'; -import { BaseDialogComponent } from '@shared/dialog/base-dialog.component'; import { PermissionsService } from '@services/permissions.service'; type Section = 'dossierInfo' | 'downloadPackage' | 'dossierDictionary' | 'members' | 'dossierAttributes' | 'deletedDocuments'; 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 {} diff --git a/libs/common-ui b/libs/common-ui index b3a820ca9..afed41403 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit b3a820ca960c4cb5d8afa6b4949a720b3075fb85 +Subproject commit afed414030f936da36aa993a1945591b5c451861