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

updated general logic for 'valid' and 'changed' methods to be used by more classes that inherit BaseDialog

Browse Source
This commit is contained in:
Valentin 2022-01-04 20:32:33 +02:00
parent d0395dd3bc
commit cea10d1396
14 changed files with 88 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -101,5 +101,5 @@
</div>
</form>
<iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
<iqser-circle-button class="dialog-close" icon="iqser:close" (click)="close()"></iqser-circle-button>
</section>

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

@ -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<string>;
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),

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

@ -33,16 +33,11 @@
<div class="validity">
<div>
<mat-checkbox
(change)="hasValidFrom = !hasValidFrom"
[checked]="hasValidFrom"
class="filter-menu-checkbox"
color="primary"
>
<mat-checkbox (change)="toggleHasValid('from')" [checked]="hasValidFrom" class="filter-menu-checkbox" color="primary">
{{ 'add-edit-dossier-template.form.valid-from' | translate }}
</mat-checkbox>
<mat-checkbox (change)="hasValidTo = !hasValidTo" [checked]="hasValidTo" class="filter-menu-checkbox" color="primary">
<mat-checkbox (change)="toggleHasValid('to')" [checked]="hasValidTo" class="filter-menu-checkbox" color="primary">
{{ 'add-edit-dossier-template.form.valid-to' | translate }}
</mat-checkbox>
</div>
@ -93,5 +88,5 @@
</div>
</form>
<iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
<iqser-circle-button class="dialog-close" icon="iqser:close" (click)="close()"></iqser-circle-button>
</section>

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

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

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

@ -84,11 +84,11 @@
</div>
</div>
<div class="dialog-actions">
<button (click)="save()" [disabled]="!valid || !changed" color="primary" mat-flat-button>
<button (click)="save()" [disabled]="!valid" color="primary" mat-flat-button>
{{ 'add-edit-file-attribute.save' | translate }}
</button>
</div>
</form>
<iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
<iqser-circle-button class="dialog-close" icon="iqser:close" (click)="close()"></iqser-circle-button>
</section>

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

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

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

@ -34,5 +34,5 @@
</div>
</form>
<iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
<iqser-circle-button class="dialog-close" icon="iqser:close" (click)="close()"></iqser-circle-button>
</section>

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

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

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

@ -53,7 +53,7 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
}
get valid(): boolean {
return this.form.valid;
return this.form?.valid;
}
async ngOnInit() {

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

@ -147,7 +147,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()

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

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

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

@ -18,7 +18,7 @@ export class ConfirmationDialogService extends DialogService<DialogType> {
super(_dialog);
}
openDialog(): MatDialogRef<unknown> {
openDialog(data?): MatDialogRef<unknown> {
return super.openDialog(
'confirm',
null,
@ -28,6 +28,7 @@ export class ConfirmationDialogService extends DialogService<DialogType> {
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,
}),
);

33
apps/red-ui/src/app/modules/shared/dialog/form-dialog.component.ts
View File

@ -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<FormDialogComponent>,
// ) {
// 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;
// }
// }

2
libs/common-ui

@ -1 +1 @@
Subproject commit 09008130e81e3ddf1a7434c9ef14e41678f6e2a9
Subproject commit b3a820ca960c4cb5d8afa6b4949a720b3075fb85