104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
import { AfterViewInit, Directive, HostListener, inject, OnDestroy } from '@angular/core';
|
|
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
|
|
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
|
|
import { hasFormChanged, IqserEventTarget } from '../utils';
|
|
import { ConfirmOptions } from '.';
|
|
import { ConfirmationDialogService } from './confirmation-dialog.service';
|
|
import { debounceTime, firstValueFrom, fromEvent, merge, of, Subscription } from 'rxjs';
|
|
import { LoadingService } from '../loading';
|
|
import { Toaster } from '../services';
|
|
import { IconButtonTypes } from '../buttons';
|
|
import { tap } from 'rxjs/operators';
|
|
|
|
const TARGET_NODE = 'mat-dialog-container';
|
|
|
|
export interface SaveOptions {
|
|
closeAfterSave?: boolean;
|
|
addMembers?: boolean;
|
|
}
|
|
|
|
@Directive()
|
|
export abstract class BaseDialogComponent implements AfterViewInit, OnDestroy {
|
|
readonly iconButtonTypes = IconButtonTypes;
|
|
form?: UntypedFormGroup;
|
|
initialFormValue!: Record<string, string>;
|
|
protected readonly _formBuilder = inject(UntypedFormBuilder);
|
|
protected readonly _loadingService = inject(LoadingService);
|
|
protected readonly _toaster = inject(Toaster);
|
|
protected readonly _subscriptions: Subscription = new Subscription();
|
|
readonly #confirmationDialogService = inject(ConfirmationDialogService);
|
|
readonly #dialog = inject(MatDialog);
|
|
#hasErrors = false;
|
|
|
|
protected constructor(
|
|
protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>,
|
|
private readonly _isInEditMode = false,
|
|
) {}
|
|
|
|
get valid(): boolean {
|
|
return !this.form || this.form.valid;
|
|
}
|
|
|
|
get changed(): boolean {
|
|
return !this.form || hasFormChanged(this.form, this.initialFormValue);
|
|
}
|
|
|
|
get disabled(): boolean {
|
|
return !this.valid || !this.changed || this.#hasErrors;
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
this._subscriptions.add(this._dialogRef.backdropClick().subscribe(() => this.close()));
|
|
const valueChanges = this.form?.valueChanges ?? of(null);
|
|
const events = [fromEvent(window, 'keyup'), fromEvent(window, 'input'), valueChanges];
|
|
const events$ = merge(...events).pipe(
|
|
debounceTime(10),
|
|
tap(() => (this.#hasErrors = !!document.getElementsByClassName('ng-invalid')[0])),
|
|
);
|
|
this._subscriptions.add(events$.subscribe());
|
|
}
|
|
|
|
abstract save(options?: SaveOptions): void;
|
|
|
|
ngOnDestroy(): void {
|
|
this._subscriptions.unsubscribe();
|
|
}
|
|
|
|
close() {
|
|
if (!this._isInEditMode || !this.changed) {
|
|
return this._dialogRef.close();
|
|
}
|
|
|
|
this._openConfirmDialog().then(result => {
|
|
if (result) {
|
|
if (result === ConfirmOptions.CONFIRM) {
|
|
this.save({ closeAfterSave: true });
|
|
} else {
|
|
this._dialogRef.close();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
@HostListener('window:keydown.Enter', ['$event'])
|
|
onEnter(event: KeyboardEvent): void {
|
|
event?.stopImmediatePropagation();
|
|
const node = (event.target as IqserEventTarget).localName?.trim()?.toLowerCase();
|
|
if (this.valid && !this.disabled && this.changed && node === TARGET_NODE) {
|
|
this.save();
|
|
}
|
|
}
|
|
|
|
@HostListener('window:keydown.Escape', ['$event'])
|
|
onEscape(): void {
|
|
if (this.#dialog.openDialogs.length === 1) {
|
|
this.close();
|
|
}
|
|
}
|
|
|
|
protected _openConfirmDialog() {
|
|
const dialogRef = this.#confirmationDialogService.open({ disableConfirm: !this.valid });
|
|
return firstValueFrom(dialogRef.afterClosed());
|
|
}
|
|
}
|