feat: add/edit family member page

fixes: #263

src/app/clients/clients-routing.module.ts

@@ -12,6 +12,8 @@ import { ClientsComponent } from './clients.component';
 import { ClientsViewComponent } from './clients-view/clients-view.component';
 import { GeneralTabComponent } from './clients-view/general-tab/general-tab.component';
 import { FamilyMembersTabComponent } from './clients-view/family-members-tab/family-members-tab.component';
+import { AddFamilyMemberComponent } from './clients-view/family-members-tab/add-family-member/add-family-member.component';
+import { EditFamilyMemberComponent } from './clients-view/family-members-tab/edit-family-member/edit-family-member.component';
 
 /** Custom Resolvers */
 import { ClientsResolver } from './common-resolvers/clients.resolver';
@@ -61,6 +63,24 @@ const routes: Routes = [
                 resolve: {
                   clientFamilyMembers: ClientFamilyMembersResolver
                 }
+              },
+              {
+                path: 'add',
+                component: AddFamilyMemberComponent,
+                resolve: {
+                  clientTemplate: ClientTemplateResolver
+                }
+              },
+              {
+                path: ':familyMemberId',
+                children: [{
+                  path: 'edit',
+                  component: EditFamilyMemberComponent,
+                  resolve: {
+                    clientTemplate: ClientTemplateResolver,
+                    editFamilyMember: ClientFamilyMemberResolver
+                  }
+                }]
               }
             ]
           }

src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.html

@@ -0,0 +1,108 @@
+<div class="add-family-member-container">
+
+  <form [formGroup]="addFamilyMemberForm" (ngSubmit)="submit()">
+
+    <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center">
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>First Name</mat-label>
+        <input formControlName="firstName" required matInput />
+        <mat-error *ngIf="addFamilyMemberForm.controls.firstName.hasError('required')">
+          First Name is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Middle Name</mat-label>
+        <input formControlName="middleName" matInput />
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Last Name</mat-label>
+        <input formControlName="lastName" required matInput />
+        <mat-error *ngIf="addFamilyMemberForm.controls.lastName.hasError('required')">
+          Last Name is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Qualification</mat-label>
+        <input formControlName="qualification" matInput />
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Age</mat-label>
+        <input type="number" formControlName="age" required matInput />
+        <mat-error *ngIf="addFamilyMemberForm.controls.age.hasError('required')">
+          Age is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)">Is Dependent?
+      </mat-checkbox>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Relationship</mat-label>
+        <mat-select formControlName="relationshipId" required>
+          <mat-option *ngFor="let relation of addFamilyMemberTemplate.relationshipIdOptions" [value]="relation.id">
+            {{ relation.name  }}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="addFamilyMemberForm.controls.relationshipId.hasError('required')">
+          Relationship is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Gender</mat-label>
+        <mat-select formControlName="genderId" required>
+          <mat-option *ngFor="let gender of addFamilyMemberTemplate.genderIdOptions" [value]="gender.id">
+            {{ gender.name }}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="addFamilyMemberForm.controls.genderId.hasError('required')">
+          Gender is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Profession</mat-label>
+        <mat-select formControlName="professionId">
+          <mat-option *ngFor="let profession of addFamilyMemberTemplate.professionIdOptions" [value]="profession.id">
+            {{ profession.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Marital Status</mat-label>
+        <mat-select formControlName="maritalStatusId">
+          <mat-option *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
+            [value]="maritalStatus.id">
+            {{ maritalStatus.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+
+      <mat-form-field fxFlex>
+        <mat-label>Date Of Birth</mat-label>
+        <input formControlName="dateOfBirth" matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
+          required>
+        <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #dueDatePicker></mat-datepicker>
+        <mat-error *ngIf="addFamilyMemberForm.controls.dateOfBirth.hasError('required')">
+          Date of birth
+          is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+    </div>
+    <div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="center">
+      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button type="submit" mat-raised-button color="primary" [disabled]="!addFamilyMemberForm.valid">Submit</button>
+    </div>
+
+  </form>
+
+</div>

src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.scss

@@ -0,0 +1,13 @@
+.add-family-member-container {
+  width: 70%;
+  margin: 0 auto;
+  padding: 5%;
+  @media screen and (min-width:960px) {
+    [fxFlex]:nth-child(odd) {
+      margin-right: 25px;
+    }
+    [fxFlex]:last-child {
+      margin-right: 0;
+    }
+  }
+}

src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.spec.ts

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

src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.ts

@@ -0,0 +1,75 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { ClientsService } from '../../../clients.service';
+
+
+@Component({
+  selector: 'mifosx-add-family-member',
+  templateUrl: './add-family-member.component.html',
+  styleUrls: ['./add-family-member.component.scss']
+})
+export class AddFamilyMemberComponent implements OnInit {
+  /** Minimum Due Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Due Date allowed. */
+  maxDate = new Date();
+  /** Add family member form. */
+  addFamilyMemberForm: FormGroup;
+  /** Add family member template. */
+  addFamilyMemberTemplate: any;
+  clientId: any;
+  constructor(private formBuilder: FormBuilder,
+    private datePipe: DatePipe,
+    private router: Router,
+    private route: ActivatedRoute,
+    private clientsService: ClientsService) {
+    this.route.data.subscribe((data: { clientTemplate: any }) => {
+      this.addFamilyMemberTemplate = data.clientTemplate.familyMemberOptions;
+    });
+    this.clientId = this.route.parent.parent.snapshot.params['clientId'];
+
+  }
+
+  ngOnInit() {
+    this.createAddFamilyMemberForm();
+
+  }
+
+
+  createAddFamilyMemberForm() {
+    this.addFamilyMemberForm = this.formBuilder.group({
+      'firstName': ['', Validators.required],
+      'middleName': [''],
+      'lastName': ['', Validators.required],
+      'qualification': [''],
+      'age': ['', Validators.required],
+      'isDependent': [''],
+      'relationshipId': ['', Validators.required],
+      'genderId': ['', Validators.required],
+      'professionId': [''],
+      'maritalStatusId': [''],
+      'dateOfBirth': ['', Validators.required]
+    });
+  }
+
+  submit() {
+    const prevDateOfBirth: Date = this.addFamilyMemberForm.value.dateOfBirth;
+    // TODO: Update once language and date settings are setup
+    const dateFormat = 'yyyy-MM-dd';
+    this.addFamilyMemberForm.patchValue({
+      dateOfBirth: this.datePipe.transform(prevDateOfBirth, dateFormat)
+    });
+    const familyMemberData = this.addFamilyMemberForm.value;
+    familyMemberData.locale = 'en';
+    familyMemberData.dateFormat = dateFormat;
+    this.clientsService.addFamilyMember(this.clientId, familyMemberData).subscribe(res => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+
+  }
+
+}

src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.html

@@ -0,0 +1,108 @@
+<div class="add-family-member-container">
+
+  <form [formGroup]="editFamilyMemberForm" (ngSubmit)="submit()">
+
+    <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center">
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>First Name</mat-label>
+        <input formControlName="firstName" required matInput />
+        <mat-error *ngIf="editFamilyMemberForm.controls.firstName.hasError('required')">
+          First Name is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Middle Name</mat-label>
+        <input formControlName="middleName" matInput />
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Last Name</mat-label>
+        <input formControlName="lastName" required matInput />
+        <mat-error *ngIf="editFamilyMemberForm.controls.lastName.hasError('required')">
+          Last Name is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Qualification</mat-label>
+        <input formControlName="qualification" matInput />
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Age</mat-label>
+        <input type="number" formControlName="age" required matInput />
+        <mat-error *ngIf="editFamilyMemberForm.controls.age.hasError('required')">
+          Age is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)">Is Dependent?
+      </mat-checkbox>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Relationship</mat-label>
+        <mat-select formControlName="relationshipId" required>
+          <mat-option *ngFor="let relation of addFamilyMemberTemplate.relationshipIdOptions" [value]="relation.id">
+            {{ relation.name  }}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="editFamilyMemberForm.controls.relationshipId.hasError('required')">
+          Relationship is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Gender</mat-label>
+        <mat-select formControlName="genderId" required>
+          <mat-option *ngFor="let gender of addFamilyMemberTemplate.genderIdOptions" [value]="gender.id">
+            {{ gender.name }}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="editFamilyMemberForm.controls.genderId.hasError('required')">
+          Gender is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Profession</mat-label>
+        <mat-select formControlName="professionId">
+          <mat-option *ngFor="let profession of addFamilyMemberTemplate.professionIdOptions" [value]="profession.id">
+            {{ profession.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="calc(50% - 25px)">
+        <mat-label>Marital Status</mat-label>
+        <mat-select formControlName="maritalStatusId">
+          <mat-option *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
+            [value]="maritalStatus.id">
+            {{ maritalStatus.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+
+      <mat-form-field fxFlex>
+        <mat-label>Date Of Birth</mat-label>
+        <input formControlName="dateOfBirth" matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
+          required>
+        <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #dueDatePicker></mat-datepicker>
+        <mat-error *ngIf="editFamilyMemberForm.controls.dateOfBirth.hasError('required')">
+          Date of birth
+          is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+    </div>
+    <div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="center">
+      <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+      <button type="submit" mat-raised-button color="primary" [disabled]="editFamilyMemberForm.pristine||!editFamilyMemberForm.valid">Submit</button>
+    </div>
+
+  </form>
+
+</div>

src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.scss

@@ -0,0 +1,14 @@
+.add-family-member-container {
+    width: 70%;
+    margin: 0 auto;
+    padding: 5%;
+    @media screen and (min-width:960px) {
+      [fxFlex]:nth-child(odd) {
+        margin-right: 25px;
+      }
+      [fxFlex]:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  

src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.spec.ts

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

src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.ts

@@ -0,0 +1,72 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { ClientsService } from '../../../clients.service';
+
+@Component({
+  selector: 'mifosx-edit-family-member',
+  templateUrl: './edit-family-member.component.html',
+  styleUrls: ['./edit-family-member.component.scss']
+})
+export class EditFamilyMemberComponent implements OnInit {
+  /** Minimum Due Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Due Date allowed. */
+  maxDate = new Date();
+  /** Add family member form. */
+  editFamilyMemberForm: FormGroup;
+  /** Add family member template. */
+  addFamilyMemberTemplate: any;
+  familyMemberDetails: any;
+
+  constructor(private formBuilder: FormBuilder,
+    private datePipe: DatePipe,
+    private router: Router,
+    private route: ActivatedRoute,
+    private clientsService: ClientsService) {
+    this.route.data.subscribe((data: { clientTemplate: any, editFamilyMember: any }) => {
+      this.addFamilyMemberTemplate = data.clientTemplate.familyMemberOptions;
+      this.familyMemberDetails = data.editFamilyMember;
+    });
+  }
+
+  ngOnInit() {
+    this.createEditFamilyMemberForm(this.familyMemberDetails);
+
+  }
+
+  createEditFamilyMemberForm(familyMember: any) {
+    this.editFamilyMemberForm = this.formBuilder.group({
+      'firstName': [familyMember.firstName, Validators.required],
+      'middleName': [familyMember.middleName],
+      'lastName': [familyMember.lastName, Validators.required],
+      'qualification': [familyMember.qualification],
+      'age': [familyMember.age, Validators.required],
+      'isDependent': [familyMember.isDependent],
+      'relationshipId': [familyMember.relationshipId, Validators.required],
+      'genderId': [familyMember.genderId, Validators.required],
+      'professionId': [familyMember.professionId],
+      'maritalStatusId': [familyMember.maritalStatusId],
+      'dateOfBirth': [this.datePipe.transform(familyMember.dateOfBirth, 'yyyy-MM-dd'), Validators.required]
+    });
+  }
+
+  submit() {
+    const prevDateOfBirth: Date = this.editFamilyMemberForm.value.dateOfBirth;
+    // TODO: Update once language and date settings are setup
+    const dateFormat = 'yyyy-MM-dd';
+    this.editFamilyMemberForm.patchValue({
+      dateOfBirth: this.datePipe.transform(prevDateOfBirth, dateFormat)
+    });
+    const familyMemberData = this.editFamilyMemberForm.value;
+    familyMemberData.locale = 'en';
+    familyMemberData.dateFormat = dateFormat;
+    this.clientsService.editFamilyMember(this.familyMemberDetails.clientId, this.familyMemberDetails.id, familyMemberData).subscribe(res => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    });
+
+  }
+}

src/app/clients/clients.module.ts

@@ -12,7 +12,8 @@ import { ClientsViewComponent } from './clients-view/clients-view.component';
 import { GeneralTabComponent } from './clients-view/general-tab/general-tab.component';
 import {PipesModule} from '../pipes/pipes.module';
 import { FamilyMembersTabComponent } from './clients-view/family-members-tab/family-members-tab.component';
-
+import { AddFamilyMemberComponent } from './clients-view/family-members-tab/add-family-member/add-family-member.component';
+import { EditFamilyMemberComponent } from './clients-view/family-members-tab/edit-family-member/edit-family-member.component';
 
 
 /**
@@ -31,6 +32,8 @@ import { FamilyMembersTabComponent } from './clients-view/family-members-tab/fam
     ClientsViewComponent,
     GeneralTabComponent,
     FamilyMembersTabComponent,
+    AddFamilyMemberComponent,
+    EditFamilyMemberComponent
   ],
   providers: [DatePipe]