feat: add create client page (#1153)

Fixes: #215
2020-07-24 16:32:58 +05:30
parent cb62fefbfa
commit 9c15545cd4
28 changed files with 1713 additions and 6 deletions
@@ -0,0 +1,104 @@
+<h1 mat-dialog-title>{{ data.context }} Family Member</h1>
+
+<form [formGroup]="familyMemberForm">
+
+  <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center" fxLayoutGap="2%">
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>First Name</mat-label>
+      <input formControlName="firstName" required matInput />
+      <mat-error *ngIf="familyMemberForm.controls.firstName.hasError('required')">
+        First Name is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Middle Name</mat-label>
+      <input formControlName="middleName" matInput />
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Last Name</mat-label>
+      <input formControlName="lastName" required matInput />
+      <mat-error *ngIf="familyMemberForm.controls.lastName.hasError('required')">
+        Last Name is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Qualification</mat-label>
+      <input formControlName="qualification" matInput />
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Age</mat-label>
+      <input type="number" formControlName="age" matInput />
+      <mat-error *ngIf="familyMemberForm.controls.age.hasError('required')">
+        Age is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="48%">Is Dependent?</mat-checkbox>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Relationship</mat-label>
+      <mat-select formControlName="relationshipId" required>
+        <mat-option *ngFor="let relation of data.options.relationshipIdOptions" [value]="relation.id">
+          {{ relation.name  }}
+        </mat-option>
+      </mat-select>
+      <mat-error *ngIf="familyMemberForm.controls.relationshipId.hasError('required')">
+        Relationship is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Gender</mat-label>
+      <mat-select formControlName="genderId">
+        <mat-option *ngFor="let gender of data.options.genderIdOptions" [value]="gender.id">
+          {{ gender.name }}
+        </mat-option>
+      </mat-select>
+      <mat-error *ngIf="familyMemberForm.controls.genderId.hasError('required')">
+        Gender is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Profession</mat-label>
+      <mat-select formControlName="professionId">
+        <mat-option *ngFor="let profession of data.options.professionIdOptions" [value]="profession.id">
+          {{ profession.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Marital Status</mat-label>
+      <mat-select formControlName="maritalStatusId">
+        <mat-option *ngFor="let maritalStatus of data.options.maritalStatusIdOptions"
+          [value]="maritalStatus.id">
+          {{ maritalStatus.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+
+    <mat-form-field fxFlex="98%">
+      <mat-label>Date Of Birth</mat-label>
+      <input formControlName="dateOfBirth" matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker">
+      <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #dueDatePicker></mat-datepicker>
+      <mat-error *ngIf="familyMemberForm.controls.dateOfBirth.hasError('required')">
+        Date of birth is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+  </div>
+
+  <mat-dialog-actions align="center">
+    <button mat-raised-button mat-dialog-close>Cancel</button>
+    <button mat-raised-button color="primary" [disabled]="!familyMemberForm.valid" [mat-dialog-close]="{ member: familyMember }">Confirm</button>
+  </mat-dialog-actions>
+
+</form>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClientFamilyMemberDialogComponent } from './client-family-member-dialog.component';
+
+describe('ClientFamilyMemberDialogComponent', () => {
+  let component: ClientFamilyMemberDialogComponent;
+  let fixture: ComponentFixture<ClientFamilyMemberDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ClientFamilyMemberDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClientFamilyMemberDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,97 @@
+/** Angular Imports */
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+
+/**
+ * Client Family Members Dialog
+ */
+@Component({
+  selector: 'mifosx-client-family-member-dialog',
+  templateUrl: './client-family-member-dialog.component.html',
+  styleUrls: ['./client-family-member-dialog.component.scss']
+})
+export class ClientFamilyMemberDialogComponent implements OnInit {
+
+  /** Minimum Due Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Due Date allowed. */
+  maxDate = new Date();
+
+  /** Add/Edit family member form. */
+  familyMemberForm: FormGroup;
+
+  /**
+   * @param {MatDialogRef} dialogRef Client Family Member Dialog Reference
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {DatePipe} datePipe Date Pipe
+   * @param {any} data Dialog Data
+   */
+  constructor(public dialogRef: MatDialogRef<ClientFamilyMemberDialogComponent>,
+              private formBuilder: FormBuilder,
+              private datePipe: DatePipe,
+              @Inject(MAT_DIALOG_DATA) public data: any) { }
+
+  ngOnInit() {
+    this.createFamilyMemberForm();
+    if (this.data.context === 'Edit') {
+      this.familyMemberForm.patchValue({
+        'firstName': this.data.member.firstName,
+        'middleName': this.data.member.middleName,
+        'lastName': this.data.member.lastName,
+        'qualification': this.data.member.qualification,
+        'age': this.data.member.age,
+        'isDependent': this.data.member.isDependent,
+        'relationshipId': this.data.member.relationshipId,
+        'genderId': this.data.member.genderId,
+        'professionId': this.data.member.professionId,
+        'maritalStatusId': this.data.member.maritalStatusId,
+        'dateOfBirth': this.data.member.dateOfBirth && new Date(this.data.member.dateOfBirth)
+      });
+    }
+  }
+
+  /**
+   * Creates Family Member Form
+   */
+  createFamilyMemberForm() {
+    this.familyMemberForm = this.formBuilder.group({
+      'firstName': ['', Validators.required],
+      'middleName': [''],
+      'lastName': ['', Validators.required],
+      'qualification': [''],
+      'age': [''],
+      'isDependent': [''],
+      'relationshipId': ['', Validators.required],
+      'genderId': [''],
+      'professionId': [''],
+      'maritalStatusId': [''],
+      'dateOfBirth': ['']
+    });
+  }
+
+  /**
+   * Returns Formatted Family Member
+   */
+  get familyMember() {
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    // TODO: Update once language and date settings are setup
+    const familyMember = {
+      ...this.familyMemberForm.value,
+      dateFormat,
+      locale
+    };
+    for (const key in familyMember) {
+      if (familyMember[key] === '' || familyMember[key] === undefined) {
+        delete familyMember[key];
+      }
+    }
+    if (familyMember.dateOfBirth) {
+      familyMember.dateOfBirth = this.datePipe.transform(familyMember.dateOfBirth, dateFormat);
+    }
+    return familyMember;
+  }
+
+}
@@ -0,0 +1,67 @@
+<div class="mat-typography">
+
+    <h3>Family Members</h3>
+
+    <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
+      <button mat-raised-button color="primary" (click)="addFamilyMember()">
+        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+      </button>
+    </div>
+
+    <mat-accordion>
+
+      <mat-expansion-panel *ngFor="let member of clientFamilyMembers;index as i" class="family-member">
+
+        <mat-expansion-panel-header>
+
+          <mat-panel-title>
+            {{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
+          </mat-panel-title>
+
+          <mat-panel-description>
+            {{member.relationship}}
+          </mat-panel-description>
+
+        </mat-expansion-panel-header>
+
+        <mat-divider></mat-divider>
+
+        <div class="family-member-actions" fxLayout="row" fxLayoutAlign="flex-end">
+          <button mat-button color="primary">
+            <fa-icon icon="edit" (click)="editFamilyMember(member, i)"></fa-icon>
+          </button>
+          <button mat-button color="warn" (click)="deleteFamilyMember(member.firstName,i)">
+            <fa-icon icon="trash"></fa-icon>
+          </button>
+        </div>
+        
+        <p>
+          First Name : {{ member.firstName }}<br />
+          Middle Name : {{ member.middleName }}<br />
+          Last Name : {{ member.lastName }}<br />
+          Qualification : {{ member.qualification }}<br />
+          Relationship : {{ member.relationshipId | find:clientTemplate.familyMemberOptions.relationshipIdOptions:'id':'name' }}<br />
+          Age : {{ member.age }}<br />
+          Is Dependent : {{ member.isDependent ? 'Yes' : 'No' }}<br />
+          Marital Status : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
+          Gender : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
+          Profession : {{member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
+          Date Of Birth : {{member.dateOfBirth | date}}<br />
+        </p>
+
+      </mat-expansion-panel>
+
+    </mat-accordion>
+
+    <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+      <button mat-raised-button matStepperPrevious>
+        <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+        Previous
+      </button>
+      <button mat-raised-button matStepperNext>
+        Next&nbsp;&nbsp;
+        <fa-icon icon="arrow-right"></fa-icon>
+      </button>
+    </div>
+
+</div>
@@ -0,0 +1,19 @@
+.family-member {
+  .family-member-actions{
+    margin-top: 1%;
+    button{
+      margin-right: 1%;
+    }
+  }
+  h3 {
+    margin: 1% auto;
+  }
+  p {
+    line-height: 30px;
+    margin-left: 2%;
+  }
+}
+
+.margin-t {
+  margin-top: 2em;
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClientFamilyMembersStepComponent } from './client-family-members-step.component';
+
+describe('ClientFamilyMembersStepComponent', () => {
+  let component: ClientFamilyMembersStepComponent;
+  let fixture: ComponentFixture<ClientFamilyMembersStepComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ClientFamilyMembersStepComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClientFamilyMembersStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,90 @@
+/** Angular Imports */
+import { Component, OnInit, Input } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { MatDialog } from '@angular/material';
+
+/** Custom Components */
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { ClientFamilyMemberDialogComponent } from './client-family-member-dialog/client-family-member-dialog.component';
+
+/**
+ * Client Family Members Step
+ */
+@Component({
+  selector: 'mifosx-client-family-members-step',
+  templateUrl: './client-family-members-step.component.html',
+  styleUrls: ['./client-family-members-step.component.scss']
+})
+export class ClientFamilyMembersStepComponent {
+
+  /** Cient Template */
+  @Input() clientTemplate: any;
+  /** Client Family Members */
+  clientFamilyMembers: any[] = [];
+
+  /**
+   * @param {MatDialog} dialog Mat Dialog
+   */
+  constructor(public dialog: MatDialog) { }
+
+  /**
+   * Adds a family member.
+   */
+  addFamilyMember() {
+    const addFamilyMemberDialogRef = this.dialog.open(ClientFamilyMemberDialogComponent, {
+      data: {
+        context: 'Add',
+        options: this.clientTemplate.familyMemberOptions,
+      },
+      width: '50rem'
+    });
+    addFamilyMemberDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.member) {
+        this.clientFamilyMembers.push(response.member);
+      }
+    });
+  }
+
+  /**
+   * Edits the family member.
+   * @param {any} member Family Member
+   * @param {any} index Tree Index
+   */
+  editFamilyMember(member: any, index: any) {
+    const addFamilyMemberDialogRef = this.dialog.open(ClientFamilyMemberDialogComponent, {
+      data: {
+        context: 'Edit',
+        member: member,
+        options: this.clientTemplate.familyMemberOptions,
+      },
+      width: '50rem'
+    });
+    addFamilyMemberDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.member) {
+        this.clientFamilyMembers.splice(index, 1, response.member);
+      }
+    });
+  }
+
+  /**
+   * Deletes the family member
+   */
+  deleteFamilyMember(name: string, index: number) {
+    const deleteFamilyMemberDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `Family member name : ${name} ${index}` }
+    });
+    deleteFamilyMemberDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.clientFamilyMembers.splice(index, 1);
+      }
+    });
+  }
+
+  /**
+   * Returns the array of client family members.
+   */
+  get familyMembers() {
+    return { familyMembers: this.clientFamilyMembers };
+  }
+
+}