From 867d7b089ee3d10abf42bf6957c02f7f48ffdb7f Mon Sep 17 00:00:00 2001 From: Valentin Date: Sun, 23 Jan 2022 15:59:11 +0200 Subject: [PATCH 1/4] added base form component, extracted changed method from base dialog component into separated function in utils --- src/lib/dialog/base-dialog.component.ts | 32 ++---------------------- src/lib/form/base-form.component.ts | 14 +++++++++++ src/lib/utils/functions.ts | 33 +++++++++++++++++++++++++ 3 files changed, 49 insertions(+), 30 deletions(-) create mode 100644 src/lib/form/base-form.component.ts diff --git a/src/lib/dialog/base-dialog.component.ts b/src/lib/dialog/base-dialog.component.ts index a361d0f..783c223 100644 --- a/src/lib/dialog/base-dialog.component.ts +++ b/src/lib/dialog/base-dialog.component.ts @@ -1,8 +1,7 @@ import { Directive, HostListener, Injector, OnInit } from '@angular/core'; import { MatDialogRef } from '@angular/material/dialog'; import { FormGroup } from '@angular/forms'; -import * as moment from 'moment'; -import { AutoUnsubscribe, IqserEventTarget } from '../utils'; +import { AutoUnsubscribe, hasFormChanged, IqserEventTarget } from '../utils'; import { ConfirmOptions } from '../misc'; import { ConfirmationDialogService } from './confirmation-dialog.service'; @@ -47,34 +46,7 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI } 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; + return hasFormChanged(this.form, this.initialFormValue); } get disabled(): boolean { diff --git a/src/lib/form/base-form.component.ts b/src/lib/form/base-form.component.ts new file mode 100644 index 0000000..4ae779e --- /dev/null +++ b/src/lib/form/base-form.component.ts @@ -0,0 +1,14 @@ +import { Directive } from '@angular/core'; +import { FormGroup } from '@angular/forms'; +import { hasFormChanged } from '@iqser/common-ui'; + +@Directive() +export class BaseFormComponent { + + form!: FormGroup; + initialFormValue; + + get changed() { + return hasFormChanged(this.form, this.initialFormValue); + } +} diff --git a/src/lib/utils/functions.ts b/src/lib/utils/functions.ts index 302c4d7..133feb4 100644 --- a/src/lib/utils/functions.ts +++ b/src/lib/utils/functions.ts @@ -2,6 +2,7 @@ import { tap } from 'rxjs/operators'; import { ITrackable } from '../listing/models/trackable'; import { MonoTypeOperatorFunction } from 'rxjs'; import moment from 'moment'; +import { FormGroup } from '@angular/forms'; export function capitalize(value: string): string { if (!value) { @@ -34,3 +35,35 @@ export function toNumber(str: string): number { export function trackBy() { return (index: number, item: T): string => item.id; } + +export function hasFormChanged(form: FormGroup, initialFormValue): boolean { + + for (const key of Object.keys(form.getRawValue())) { + const initialValue = initialFormValue[key]; + const updatedValue = 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; +} From 3d50996b2e1fc374cc4418d47ce7922ca9bb9aed Mon Sep 17 00:00:00 2001 From: Valentin Date: Mon, 24 Jan 2022 13:07:03 +0200 Subject: [PATCH 2/4] added valid method and abstract save method in base form component --- src/lib/form/base-form.component.ts | 16 +++++++++--- src/lib/utils/functions.ts | 40 +++++++++++++++-------------- 2 files changed, 34 insertions(+), 22 deletions(-) diff --git a/src/lib/form/base-form.component.ts b/src/lib/form/base-form.component.ts index 4ae779e..c93d71a 100644 --- a/src/lib/form/base-form.component.ts +++ b/src/lib/form/base-form.component.ts @@ -1,14 +1,24 @@ import { Directive } from '@angular/core'; import { FormGroup } from '@angular/forms'; -import { hasFormChanged } from '@iqser/common-ui'; +import { AutoUnsubscribe, hasFormChanged } from '@iqser/common-ui'; @Directive() -export class BaseFormComponent { +export abstract class BaseFormComponent extends AutoUnsubscribe { form!: FormGroup; initialFormValue; - get changed() { + constructor() { + super(); + } + + get changed(): boolean { return hasFormChanged(this.form, this.initialFormValue); } + + get valid(): boolean { + return this.form?.valid; + } + + abstract save(): Promise; } diff --git a/src/lib/utils/functions.ts b/src/lib/utils/functions.ts index 133feb4..b9e38ec 100644 --- a/src/lib/utils/functions.ts +++ b/src/lib/utils/functions.ts @@ -38,30 +38,32 @@ export function trackBy() { export function hasFormChanged(form: FormGroup, initialFormValue): boolean { - for (const key of Object.keys(form.getRawValue())) { - const initialValue = initialFormValue[key]; - const updatedValue = form.get(key).value; + if (form && initialFormValue) { + for (const key of Object.keys(form.getRawValue())) { + const initialValue = initialFormValue[key]; + const updatedValue = 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)) { + 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 (updatedValue instanceof moment) { - if (!moment(updatedValue).isSame(moment(initialValue))) { + } 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; } - } else { - return true; } } } From e41a59dc7089e1644496f5cff09b3bc64370913a Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Wed, 26 Jan 2022 17:17:23 +0200 Subject: [PATCH 3/4] added base form component to index --- src/index.ts | 2 +- src/lib/form/index.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 src/lib/form/index.ts diff --git a/src/index.ts b/src/index.ts index 66497a4..bd46f0f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,7 @@ export * from './lib/common-ui.module'; - export * from './lib/buttons'; export * from './lib/dialog'; +export * from './lib/form'; export * from './lib/listing'; export * from './lib/filtering'; export * from './lib/help-mode'; diff --git a/src/lib/form/index.ts b/src/lib/form/index.ts new file mode 100644 index 0000000..229bef8 --- /dev/null +++ b/src/lib/form/index.ts @@ -0,0 +1 @@ +export * from './base-form.component'; From 47dc55206bdea193eec78b021e04ccbaaf5b6915 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Wed, 26 Jan 2022 17:25:17 +0200 Subject: [PATCH 4/4] added confirmation dialog service to index --- src/lib/dialog/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/dialog/index.ts b/src/lib/dialog/index.ts index 8df0d44..e98069f 100644 --- a/src/lib/dialog/index.ts +++ b/src/lib/dialog/index.ts @@ -1 +1,2 @@ export * from './base-dialog.component'; +export * from './confirmation-dialog.service'