Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

moved 'base-dialog component' and 'confirmation-dialog service' in common

Browse Source
This commit is contained in:
Valentin 2022-01-12 13:13:41 +02:00
parent 3f847c21a6
commit fb212b5ad6
9 changed files with 6 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts
View File

@ -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',

3
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts
View File

@ -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',

2
apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
View File

@ -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',

3
apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts
View File

@ -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;

3
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
View File

@ -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';

112
apps/red-ui/src/app/modules/shared/dialog/base-dialog.component.ts
View File

@ -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<BaseDialogComponent>) {
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();
}
}
}

36
apps/red-ui/src/app/modules/shared/dialog/confirmation-dialog.service.ts
View File

@ -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<DialogType> {
protected readonly _config: DialogConfig<DialogType> = {
confirm: {
component: ConfirmationDialogComponent,
dialogConfig: { disableClose: false },
},
};
constructor(protected readonly _dialog: MatDialog) {
super(_dialog);
}
openDialog(data?): MatDialogRef<unknown> {
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,
}),
);
}
}

2
apps/red-ui/src/app/modules/shared/shared.module.ts
View File

@ -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 {}

2
libs/common-ui

@ -1 +1 @@
Subproject commit b3a820ca960c4cb5d8afa6b4949a720b3075fb85
Subproject commit afed414030f936da36aa993a1945591b5c451861