onshore-forms 0.0.1

package/src/lib/onshore-forms.module.ts

@@ -0,0 +1,78 @@
+import { NgModule } from '@angular/core';
+import { OnshoreFormsComponent } from './onshore-forms.component';
+import { OnshoreFormsService } from './onshore-forms.service';
+import { OnshoreFormInputItemComponent } from './components/form-input-item/form-input-item.component';
+import { OnshoreFormSwitchItemComponent } from './components/form-switch-item/form-switch-item.component';
+import { OnshoreFormTextareaItemComponent } from './components/form-textarea-item/form-textarea-item.component';
+import { OnshoreFormValidationOutputComponent } from './components/form-validation-output/form-validation-output.component';
+import { OnshoreFormImageItemComponent } from './components/form-image-item/form-image-item.component';
+import { OnshoreFormDropdownItemComponent } from './components/form-dropdown-item/form-dropdown-item.component';
+import { OnshoreFormColorpickerItemComponent } from './components/form-colorpicker-item/form-colorpicker-item.component';
+import { OnshoreFormCheckboxItemComponent } from './components/form-checkbox-item/form-checkbox-item.component';
+import { OnshoreFormAutocompleteItemComponent } from './components/form-autocomplete-item/form-autocomplete-item.component';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { CheckboxModule } from 'primeng/checkbox';
+import { ColorPickerModule } from 'primeng/colorpicker';
+import { DropdownModule } from 'primeng/dropdown';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { TooltipModule } from 'primeng/tooltip';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { InputTextModule } from 'primeng/inputtext';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { RippleModule } from 'primeng/ripple';
+import { DialogModule } from 'primeng/dialog';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [
+    OnshoreFormsComponent,
+    OnshoreFormInputItemComponent,
+    OnshoreFormSwitchItemComponent,
+    OnshoreFormTextareaItemComponent,
+    OnshoreFormValidationOutputComponent,
+    OnshoreFormImageItemComponent,
+    OnshoreFormDropdownItemComponent,
+    OnshoreFormColorpickerItemComponent,
+    OnshoreFormCheckboxItemComponent,
+    OnshoreFormAutocompleteItemComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ButtonModule,
+    RippleModule,
+    AutoCompleteModule,
+    CheckboxModule,
+    ColorPickerModule,
+    DropdownModule,
+    MultiSelectModule,
+    TooltipModule,
+    InputNumberModule,
+    InputSwitchModule,
+    InputTextModule,
+    InputTextareaModule,
+    DialogModule
+  ],
+  exports: [
+    OnshoreFormsComponent,
+    OnshoreFormInputItemComponent,
+    OnshoreFormSwitchItemComponent,
+    OnshoreFormTextareaItemComponent,
+    OnshoreFormValidationOutputComponent,
+    OnshoreFormImageItemComponent,
+    OnshoreFormDropdownItemComponent,
+    OnshoreFormColorpickerItemComponent,
+    OnshoreFormCheckboxItemComponent,
+    OnshoreFormAutocompleteItemComponent
+  ],
+  providers: [
+    OnshoreFormsService
+  ]
+})
+export class OnshoreFormsModule { }

package/src/lib/onshore-forms.service.ts

@@ -0,0 +1,172 @@
+import { Injectable } from '@angular/core';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { Subject, Subscription } from 'rxjs';
+import { OnshoreFormTemplateType } from './enums/form.enums';
+import { OnshoreFormTemplateItem, OnshoreFormValidationItem } from './models/form.models';
+@Injectable({
+  providedIn: 'root'
+})
+export class OnshoreFormsService {
+
+  _form: FormGroup;
+  _formTemplate: OnshoreFormTemplateItem[];
+  _formValidations: OnshoreFormValidationItem[] = [];
+
+  subscriptions: Array<Subscription> = [];
+
+  public isLoading$: Subject<boolean> = new Subject<boolean>();
+
+  constructor() {
+    this._form = new FormGroup({}, {updateOn: 'change'});
+    this._formTemplate = [];
+  }
+
+  public get form(): FormGroup {
+    return this._form;
+  }
+
+  public get formValues() {
+    return this._form?.value;
+  }
+
+  public patchForm(value: any) {
+    this._form?.patchValue(value);
+  }
+
+  public resetForm() {
+    this._form?.reset();
+    this._form?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+    this.subscriptions.forEach((subscription: Subscription) => {
+      subscription.unsubscribe();
+    });
+
+    this._form = null!;
+    this._formTemplate = null!;
+  }
+
+  public generateForm(formTemplate: OnshoreFormTemplateItem[]): FormGroup | null {
+    this._formTemplate = formTemplate;
+    this._form = new FormGroup({}, {updateOn: 'change'});
+    this._form = this.iterateNestedForm(this._form, formTemplate);
+    return this._form;
+  }
+
+  public formTemplate(name: string, formTemplate: OnshoreFormTemplateItem[] = this._formTemplate): OnshoreFormTemplateItem {
+    let template: OnshoreFormTemplateItem;
+
+    if(formTemplate) {
+      for(let i = 0; i < formTemplate?.length; i++) {
+        const item = formTemplate[i];
+        if(item.name === name) {
+          template = item;
+          i = formTemplate.length;
+        }else if(item.subformArray) {
+          const arrayTemplate = this.formTemplate(name, item.subformArray);
+          if(arrayTemplate) template = arrayTemplate;
+        }else if(item.subformObject) {
+          const objectTemplate = this.formTemplate(name, item.subformObject);
+          if(objectTemplate) template = objectTemplate;
+        }
+      }
+    }
+
+    return template!;
+  }
+
+  public formControl(name: string, formGroup: FormGroup | null = this._form): FormControl {
+    return formGroup?.get(name) as FormControl;
+  }
+
+  public formArray(name: string): FormArray {
+    return this._form?.get(name) as FormArray;
+  }
+
+  public formGroup(form: FormGroup, name: string): FormGroup  {
+    return form.get(name) as FormGroup;
+  }
+
+  public addFormArrayItem(name: string, item: OnshoreFormTemplateItem) {
+    let formControls = <any>{};
+
+    if(item) {
+      item.subformArray?.forEach((subitem: OnshoreFormTemplateItem) => {
+        formControls[subitem.name] = new FormControl(subitem.default !== undefined ? subitem.default : '', {
+          validators: subitem.validators || [],
+          updateOn: 'change'
+        });
+      });
+    }
+
+    const formGroup = new FormGroup(formControls);
+    formGroup.setParent(this.formArray(name));
+
+    this.formArray(name).push(formGroup);
+
+    this.subscribeNestedFormGroup(formGroup);
+  }
+
+  public removeFormArrayItem(form: FormArray, index: number) {
+    form.removeAt(index);
+  }
+
+  public setFormValidations(validations: OnshoreFormValidationItem[] = []) {
+    this._formValidations = validations;
+  }
+
+  public enable() {
+    setTimeout(() => {
+      this._form?.enable({onlySelf: true, emitEvent: false});
+    }, 100);
+  }
+
+  public disable() {
+    setTimeout(() => {
+      this._form?.disable({onlySelf: true, emitEvent: false});
+    }, 100);
+  }
+
+  public setError(control: string, error: Object) {
+    this.formControl(control).setErrors(error);
+  }
+
+  public setLoader(loaders$: Subject<boolean>[]) {
+    loaders$.forEach($loader => {
+      this.subscriptions.push($loader.subscribe(isLoading => {
+        isLoading ? this.disable() : this.enable();
+        this.isLoading$.next(isLoading);
+      }));
+    });
+  }
+
+  iterateNestedForm(form: FormGroup, formTemplate: OnshoreFormTemplateItem[]): any {
+    formTemplate.forEach((item: OnshoreFormTemplateItem) => {
+      if(item.type === OnshoreFormTemplateType.subform) {
+        if(item.subformArray) {
+          form.controls[item.name] = new FormArray([]);
+          form.controls[item.name].setParent(form);
+        }
+        if(item.subformObject) {
+          form.controls[item.name] = new FormGroup({});
+          form.controls[item.name] = this.iterateNestedForm(form.controls[item.name] as FormGroup, item.subformObject) as FormGroup;
+          this.subscribeNestedFormGroup(form.controls[item.name] as FormGroup);
+        }
+      } else {
+        form.addControl(item.name, new FormControl(item.default !== undefined ? item.default : '', {
+          validators: item.validators || [],
+          updateOn: 'change'
+        }));
+      }
+    });
+    return form;
+  }
+
+  subscribeNestedFormGroup(nestedFormItem: FormGroup) {
+    this.subscriptions.push(nestedFormItem.valueChanges.subscribe(() => {
+      this.form?.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+    }));
+    this.subscriptions.push(nestedFormItem.statusChanges.subscribe(() => {
+      this.form?.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+    }));
+  }
+
+}

package/src/public-api.ts

@@ -0,0 +1,18 @@
+/*
+ * Public API Surface of onshore-forms
+ */
+
+export * from './lib/onshore-forms.service';
+export * from './lib/onshore-forms.component';
+export * from './lib/onshore-forms.module';
+export * from './lib/enums/form.enums';
+export * from './lib/models/form.models';
+export * from './lib/components/form-autocomplete-item/form-autocomplete-item.component';
+export * from './lib/components/form-checkbox-item/form-checkbox-item.component';
+export * from './lib/components/form-colorpicker-item/form-colorpicker-item.component';
+export * from './lib/components/form-dropdown-item/form-dropdown-item.component';
+export * from './lib/components/form-image-item/form-image-item.component';
+export * from './lib/components/form-input-item/form-input-item.component';
+export * from './lib/components/form-switch-item/form-switch-item.component';
+export * from './lib/components/form-textarea-item/form-textarea-item.component';
+export * from './lib/components/form-validation-output/form-validation-output.component';

package/src/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

package/styles/css/main.css

@@ -0,0 +1 @@
+@import"~primeng/resources/themes/saga-blue/theme.css";@import"~primeng/resources/primeng.min.css";@import"~primeflex/primeflex.min.css";@import"~primeicons/primeicons.css"

package/styles/css/theme1.css

@@ -0,0 +1 @@
+@import"~primeng/resources/themes/saga-blue/theme.css";@import"~primeng/resources/primeng.min.css";@import"~primeflex/primeflex.min.css";@import"~primeicons/primeicons.css";:root{--color-light: #ffffff;--color-dark: #000000;--color-primary: #24C875;--color-secondary: #20A6FC}

package/styles/scss/main.scss

@@ -0,0 +1,4 @@
+@import "~primeng/resources/themes/saga-blue/theme.css";
+@import "~primeng/resources/primeng.min.css";
+@import "~primeflex/primeflex.min.css";
+@import "~primeicons/primeicons.css";

package/styles/scss/theme1.scss

@@ -0,0 +1,8 @@
+@import "main";
+
+:root {
+  --color-light: #ffffff;
+  --color-dark: #000000;
+  --color-primary: #24C875;
+  --color-secondary: #20A6FC;
+}

package/tsconfig.lib.json

@@ -0,0 +1,16 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "strictNullChecks": false,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,12 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false,
+    "strictNullChecks": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial",
+    "strictTemplates": false
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}