feat: add form dialog component (#428)

- Add formfield, input, select base (model)
- Add formfield component
- Add form-group service
- Add form-dialog component

Fixes: #427

src/app/shared/form-dialog/form-dialog.component.html

@@ -0,0 +1,14 @@
+<h1 mat-dialog-title>{{ data.title }}</h1>
+
+<div mat-dialog-content [formGroup]="form" [fxLayout]="layout.columns > 1 ? 'row wrap' : 'column'" fxLayout.lt-md="column" [fxLayoutGap]="(layout.columns > 1 ? layout.gap : 0) + '%'" fxLayoutGap.lt-md="0%">
+
+  <div *ngFor="let formfield of formfields" [fxFlex]="layout.flex + '%'" fxFlex.lt-md="100%">
+    <mifosx-formfield [formfield]="formfield" [form]="form" fxFlexFill></mifosx-formfield>
+  </div>
+
+</div>
+
+<mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <button mat-raised-button mat-dialog-close>{{ layout.cancelButtonText }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: form }" [disabled]="!form.valid && form.pristine">{{ layout.addButtonText }}</button>
+</mat-dialog-actions>

src/app/shared/form-dialog/form-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormDialogComponent } from './form-dialog.component';
+
+describe('FormDialogComponent', () => {
+  let component: FormDialogComponent;
+  let fixture: ComponentFixture<FormDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FormDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/form-dialog/form-dialog.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { FormGroup } from '@angular/forms';
+
+import { FormfieldBase } from './formfield/model/formfield-base';
+
+import { FormGroupService } from './form-group.service';
+
+const layoutGap = 2;
+
+@Component({
+  selector: 'mifosx-form-dialog',
+  templateUrl: './form-dialog.component.html',
+  styleUrls: ['./form-dialog.component.scss']
+})
+export class FormDialogComponent implements OnInit {
+
+  layout: {
+    columns: number,
+    columnWidth?: number,
+    flex?: number,
+    gap?: number,
+    cancelButtonText?: string,
+    addButtonText?: string
+  } = {
+    columns: 1,
+    columnWidth: 400,
+    flex: 100,
+    cancelButtonText: 'Cancel',
+    addButtonText: 'Add'
+  };
+
+  form: FormGroup;
+  formfields: FormfieldBase[];
+
+  constructor(public dialogRef: MatDialogRef<FormDialogComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any,
+              private formGroupService: FormGroupService) {
+    this.dialogRef.disableClose = !data.disableClose;
+    this.formfields = data.formfields.sort((formfieldA: FormfieldBase, formfieldB: FormfieldBase) => formfieldA.order - formfieldB.order);
+    this.layout = { ...this.layout, ...data.layout };
+    this.layout.gap = this.layout.columns > 1 ? layoutGap : 0;
+    this.layout.flex = (this.layout.flex / this.layout.columns) - this.layout.gap;
+  }
+
+  ngOnInit() {
+    this.dialogRef.updateSize(`${this.layout.columnWidth * this.layout.columns}px`);
+    this.form = this.formGroupService.createFormGroup(this.formfields);
+  }
+
+}

src/app/shared/form-dialog/form-group.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FormGroupService } from './form-group.service';
+
+describe('FormGroupService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: FormGroupService = TestBed.get(FormGroupService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/form-dialog/form-group.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+import { FormfieldBase } from './formfield/model/formfield-base';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FormGroupService {
+
+  constructor() { }
+
+  createFormGroup(formfields: FormfieldBase[]) {
+    const group: any = {};
+
+    formfields.forEach(formfield => {
+      group[formfield.controlName] = formfield.required ? new FormControl(formfield.value, Validators.required) : new FormControl(formfield.value);
+    });
+
+    return new FormGroup(group);
+  }
+
+}

src/app/shared/form-dialog/formfield/formfield.component.html

@@ -0,0 +1,25 @@
+<div [formGroup]="form" fxFlexFill>
+
+  <mat-form-field fxFlexFill>
+
+    <mat-label>{{ formfield.label }}</mat-label>
+
+    <div [ngSwitch]="formfield.controlType">
+
+      <input *ngSwitchCase="'input'" [type]="formfield.type" matInput [formControlName]="formfield.controlName" [required]="formfield.required">
+
+      <mat-select *ngSwitchCase="'select'" [formControlName]="formfield.controlName" [required]="formfield.required">
+        <mat-option *ngFor="let option of formfield.options.data" [value]="option[formfield.options.value]">
+          {{ option[formfield.options.label] }}
+        </mat-option>
+      </mat-select>
+
+    </div>
+
+    <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
+      {{ formfield.label }} is <strong>required</strong>
+    </mat-error>
+
+  </mat-form-field>
+
+</div>

src/app/shared/form-dialog/formfield/formfield.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormfieldComponent } from './formfield.component';
+
+describe('FormfieldComponent', () => {
+  let component: FormfieldComponent;
+  let fixture: ComponentFixture<FormfieldComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FormfieldComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormfieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/form-dialog/formfield/formfield.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { FormfieldBase } from './model/formfield-base';
+
+@Component({
+  selector: 'mifosx-formfield',
+  templateUrl: './formfield.component.html',
+  styleUrls: ['./formfield.component.scss']
+})
+export class FormfieldComponent implements OnInit {
+
+  @Input() form: FormGroup;
+  @Input() formfield: FormfieldBase;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shared/form-dialog/formfield/model/formfield-base.ts

@@ -0,0 +1,26 @@
+export class FormfieldBase {
+
+  controlType: string;
+  controlName: string;
+  label: string;
+  value: string;
+  required: boolean;
+  order: number;
+
+  constructor(options: {
+              controlType?: string,
+              controlName?: string,
+              label?: string,
+              value?: string,
+              required?: boolean,
+              order?: number
+    } = {}) {
+      this.controlType = options.controlType || '';
+      this.controlName = options.controlName || '';
+      this.label = options.label || '';
+      this.value = options.value || '';
+      this.required = !!options.required;
+      this.order = options.order === undefined ? 1 : options.order;
+  }
+
+}

src/app/shared/form-dialog/formfield/model/input-base.ts

@@ -0,0 +1,13 @@
+import { FormfieldBase } from './formfield-base';
+
+export class InputBase extends FormfieldBase {
+
+  controlType = 'input';
+  type: string;
+
+  constructor(options: any) {
+    super(options);
+    this.type = options['type'] || 'text';
+  }
+
+}

src/app/shared/form-dialog/formfield/model/select-base.ts

@@ -0,0 +1,17 @@
+import { FormfieldBase } from './formfield-base';
+
+export class SelectBase extends FormfieldBase {
+
+  controlType = 'select';
+  options: {
+    label: string,
+    value: string,
+    data: {}[]
+  };
+
+  constructor(options: {} = {}) {
+    super(options);
+    this.options = options['options'];
+  }
+
+}

src/app/shared/shared.module.ts

@@ -4,6 +4,8 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 /** Custom Components */
+import { FormfieldComponent } from './form-dialog/formfield/formfield.component';
+import { FormDialogComponent } from './form-dialog/form-dialog.component';
 import { DeleteDialogComponent } from './delete-dialog/delete-dialog.component';
 import { FileUploadComponent } from './file-upload/file-upload.component';
 import { FooterComponent } from './footer/footer.component';
@@ -27,6 +29,8 @@ import { MaterialModule } from './material.module';
     ReactiveFormsModule
   ],
   declarations: [
+    FormfieldComponent,
+    FormDialogComponent,
     DeleteDialogComponent,
     FileUploadComponent,
     FooterComponent,
@@ -45,6 +49,7 @@ import { MaterialModule } from './material.module';
     ReactiveFormsModule
   ],
   entryComponents: [
+    FormDialogComponent,
     DeleteDialogComponent
   ]
 })