Pull request #8: VM/RED-2614

Merge in SL/common-ui from VM/RED-2614 to master

* commit '47dc55206bdea193eec78b021e04ccbaaf5b6915':
  added confirmation dialog service to index
  added base form component to index
  added valid method and abstract save method in base form component
  added base form component, extracted changed method from base dialog component into separated function in utils

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

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, hasFormChanged, IqserEventTarget } from '../utils';
-import { AutoUnsubscribe, IqserEventTarget } from '../utils';
 import { ConfirmOptions } from '../misc';
 import { ConfirmationDialogService } from './confirmation-dialog.service';
 import { firstValueFrom } from 'rxjs';
@@ -38,34 +37,7 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
     }
 
     get changed(): boolean {
-        for (const key of Object.keys(this.form.getRawValue())) {
+        return hasFormChanged(this.form, this.initialFormValue);
-            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;
     }
 
     get disabled(): boolean {

src/lib/dialog/index.ts

@@ -1 +1,2 @@
 export * from './base-dialog.component';
+export * from './confirmation-dialog.service'

src/lib/form/base-form.component.ts

@@ -0,0 +1,24 @@
+import { Directive } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { AutoUnsubscribe, hasFormChanged } from '@iqser/common-ui';
+
+@Directive()
+export abstract class BaseFormComponent extends AutoUnsubscribe {
+
+    form!: FormGroup;
+    initialFormValue;
+
+    constructor() {
+        super();
+    }
+
+    get changed(): boolean {
+        return hasFormChanged(this.form, this.initialFormValue);
+    }
+
+    get valid(): boolean {
+        return this.form?.valid;
+    }
+
+    abstract save(): Promise<void>;
+}

src/lib/form/index.ts

@@ -0,0 +1 @@
+export * from './base-form.component';

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,37 @@ export function toNumber(str: string): number {
 export function trackByFactory<T extends ITrackable>() {
     return (index: number, item: T): string => item.id;
 }
+
+export function hasFormChanged(form: FormGroup, initialFormValue): boolean {
+
+    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)) {
+                        return true;
+                    }
+                } else if (updatedValue instanceof moment) {
+                    if (!moment(updatedValue).isSame(moment(initialValue))) {
+                        return true;
+                    }
+                } else {
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
+}