feat: add edit client page (#1147)

Fixes: #1146

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

@@ -22,6 +22,7 @@ import { AddressTabComponent } from './clients-view/address-tab/address-tab.comp
 import { ClientActionsComponent } from './clients-view/client-actions/client-actions.component';
 import { ViewChargeComponent } from './clients-view/charges/view-charge/view-charge.component';
 import { ClientPayChargesComponent } from './clients-view/charges/client-pay-charges/client-pay-charges.component';
+import { EditClientComponent } from './edit-client/edit-client.component';
 
 /** Custom Resolvers */
 import { ClientViewResolver } from './common-resolvers/client-view.resolver';
@@ -45,6 +46,7 @@ import { ClientChargeOverviewResolver } from './clients-view/charges/charges-ove
 import { ClientActionsResolver } from './common-resolvers/client-actions.resolver';
 import { ClientChargeViewResolver } from './common-resolvers/client-charge-view.resolver';
 import { ClientTransactionPayResolver } from './common-resolvers/client-transaction-pay.resolver';
+import { ClientDataAndTemplateResolver } from './common-resolvers/client-and-template.resolver';
 
 const routes: Routes = [
   Route.withShell([{
@@ -166,6 +168,14 @@ const routes: Routes = [
         path: ':clientId',
         data: { title: extract('Clients View'), routeParamBreadcrumb: 'clientId' },
         children: [
+          {
+            path: 'edit',
+            data: { title: extract('Edit Client'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+            component: EditClientComponent,
+            resolve: {
+              clientDataAndTemplate: ClientDataAndTemplateResolver
+            }
+          },
           {
             path: 'actions/:name',
             data: { title: extract('Client Actions'), routeParamBreadcrumb: 'name' },
@@ -263,7 +273,8 @@ const routes: Routes = [
     ClientChargeOverviewResolver,
     ClientActionsResolver,
     ClientChargeViewResolver,
-    ClientTransactionPayResolver
+    ClientTransactionPayResolver,
+    ClientDataAndTemplateResolver
   ]
 })
 export class ClientsRoutingModule { }

src/app/clients/clients-view/clients-view.component.html

@@ -31,7 +31,7 @@
       </div>
     </mat-card-title-group>
     <mat-card-actions class="client-actions">
-      <button mat-raised-button>Edit</button>
+      <button mat-raised-button [routerLink]="['edit']">Edit</button>
       <button mat-raised-button [routerLink]="['loans', 'create-loans-account']">+ New Loan</button>
       <button mat-raised-button [routerLink]="['savingsaccounts', 'create-savings-account']">+ New Savings</button>
       <button mat-raised-button>+ Deposit</button>

src/app/clients/clients.module.ts

@@ -49,6 +49,7 @@ import { UploadSignatureDialogComponent } from './clients-view/custom-dialogs/up
 import { DeleteSignatureDialogComponent } from './clients-view/custom-dialogs/delete-signature-dialog/delete-signature-dialog.component';
 import { UploadImageDialogComponent } from './clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component';
 import { ClientScreenReportsComponent } from './clients-view/client-actions/client-screen-reports/client-screen-reports.component';
+import { EditClientComponent } from './edit-client/edit-client.component';
 
 
 /**
@@ -103,7 +104,8 @@ import { ClientScreenReportsComponent } from './clients-view/client-actions/clie
     UploadSignatureDialogComponent,
     DeleteSignatureDialogComponent,
     UploadImageDialogComponent,
-    ClientScreenReportsComponent
+    ClientScreenReportsComponent,
+    EditClientComponent
   ],
   entryComponents: [
     UploadDocumentDialogComponent,

src/app/clients/clients.service.ts

@@ -45,6 +45,10 @@ export class ClientsService {
     return this.http.get(`/clients/${clientId}`);
   }
 
+  updateClient(clientId: string, client: any) {
+    return this.http.put(`/clients/${clientId}`, client);
+  }
+
   deleteClient(clientId: string) {
     return this.http.delete(`/clients/${clientId}`);
   }

src/app/clients/common-resolvers/client-and-template.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ClientsService } from '../clients.service';
+
+/**
+ * Clients data and template resolver.
+ */
+@Injectable()
+export class ClientDataAndTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {ClientsService} ClientsService Clients service.
+   */
+  constructor(private clientsService: ClientsService) { }
+
+  /**
+   * Returns the Clients data and template.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const clientId = route.paramMap.get('clientId');
+    return this.clientsService.getClientDataAndTemplate(clientId);
+  }
+
+}

src/app/clients/edit-client/edit-client.component.html

@@ -0,0 +1,194 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="editClientForm">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Office</mat-label>
+            <mat-select required formControlName="officeId">
+              <mat-option *ngFor="let office of officeOptions" [value]="office.id">
+                {{ office.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="editClientForm.controls.officeId.hasError('required')">
+              Office is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Staff</mat-label>
+            <mat-select formControlName="staffId">
+              <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
+                {{ staff.displayName }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Legal Form</mat-label>
+            <mat-select formControlName="legalFormId">
+              <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
+                {{ legalForm.value }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="editClientForm.contains('fullname')" fxFlex="48%">
+            <mat-label>Name</mat-label>
+            <input matInput required formControlName="fullname">
+            <mat-error *ngIf="editClientForm.controls.fullname.hasError('required')">
+              Client name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="editClientForm.contains('firstname')" fxFlex="48%">
+            <mat-label>First Name</mat-label>
+            <input matInput required formControlName="firstname">
+            <mat-error *ngIf="editClientForm.controls.firstname.hasError('required')">
+              Client first name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="editClientForm.contains('middlename')" fxFlex="48%">
+            <mat-label>Middle Name</mat-label>
+            <input matInput formControlName="middlename">
+          </mat-form-field>
+
+          <mat-form-field *ngIf="editClientForm.contains('lastname')" fxFlex="48%">
+            <mat-label>Last Name</mat-label>
+            <input matInput required formControlName="lastname">
+            <mat-error *ngIf="editClientForm.controls.lastname.hasError('required')">
+              Client last name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>{{ editClientForm.value.legalFormId === 1 ? 'Date of Birth' : 'Incorporation Date' }}</mat-label>
+            <input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth">
+            <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Account No</mat-label>
+            <input matInput formControlName="accountNo">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>External Id</mat-label>
+            <input matInput formControlName="externalId">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Mobile No</mat-label>
+            <input matInput formControlName="mobileNo">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Client Type</mat-label>
+            <mat-select formControlName="clientTypeId">
+              <mat-option *ngFor="let clientType of clientTypeOptions" [value]="clientType.id">
+                {{ clientType.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Client Classification</mat-label>
+            <mat-select formControlName="clientClassificationId">
+              <mat-option *ngFor="let clientClassification of clientClassificationTypeOptions" [value]="clientClassification.id">
+                {{ clientClassification.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Submitted On</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate">
+            <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #submittedOnDatePicker></mat-datepicker>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Activated On</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
+              formControlName="activationDate">
+            <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #activatedOnDatePicker></mat-datepicker>
+            <mat-error *ngIf="editClientForm.controls.activationDate.hasError('required')">
+              Activation Date is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field *ngIf="editClientForm.value.legalFormId === 1" fxFlex="48%">
+            <mat-label>Gender</mat-label>
+            <mat-select formControlName="genderId">
+              <mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
+                {{ gender.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-checkbox *ngIf="editClientForm.value.legalFormId === 1" fxFlex="48%" labelPosition="before" formControlName="isStaff" class="margin-v">
+            Is staff?
+          </mat-checkbox>
+
+          <div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" formGroupName="clientNonPersonDetails"
+            *ngIf="editClientForm.contains('clientNonPersonDetails')">
+
+            <mat-form-field fxFlex="48%">
+              <mat-label>Incorporation Validity Till Date</mat-label>
+              <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="incorpValidityTillDateDatePicker" formControlName="incorpValidityTillDate">
+              <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
+              <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
+            </mat-form-field>
+  
+            <mat-form-field fxFlex="48%">
+              <mat-label>Incorporation No</mat-label>
+              <input matInput formControlName="incorpNumber">
+            </mat-form-field>
+  
+            <mat-form-field fxFlex="48%">
+              <mat-label>Main Business Line</mat-label>
+              <mat-select formControlName="mainBusinessLineId">
+                <mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
+                  {{ business.name }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+  
+            <mat-form-field fxFlex="48%">
+              <mat-label>Constitution</mat-label>
+              <mat-select formControlName="constitutionId">
+                <mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
+                  {{ constitution.name }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+  
+            <mat-form-field fxFlex="98%">
+              <mat-label>Remarks</mat-label>
+              <textarea matInput formControlName="remarks"></textarea>
+            </mat-form-field>
+
+          </div>
+
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/clients/edit-client/edit-client.component.scss

@@ -0,0 +1,3 @@
+.margin-v {
+  margin: 2em 0 0 0;
+}

src/app/clients/edit-client/edit-client.component.spec.ts

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

src/app/clients/edit-client/edit-client.component.ts

@@ -0,0 +1,182 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { ClientsService } from '../clients.service';
+
+/**
+ * Edit Client Component
+ */
+@Component({
+  selector: 'mifosx-edit-client',
+  templateUrl: './edit-client.component.html',
+  styleUrls: ['./edit-client.component.scss']
+})
+export class EditClientComponent implements OnInit {
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+
+  /** Client Data and Template */
+  clientDataAndTemplate: any;
+  /** Edit Client Form */
+  editClientForm: FormGroup;
+
+  /** Office Options */
+  officeOptions: any;
+  /** Staff Options */
+  staffOptions: any;
+  /** Legal Form Options */
+  legalFormOptions: any;
+  /** Client Type Options */
+  clientTypeOptions: any;
+  /** Client Classification Options */
+  clientClassificationTypeOptions: any;
+  /** Business Line Options */
+  businessLineOptions: any;
+  /** Constitution Options */
+  constitutionOptions: any;
+  /** Gender Options */
+  genderOptions: any;
+
+  /**
+   * Fetches client template data from `resolve`
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {ActivatedRoute} route ActivatedRoute
+   * @param {Router} router Router
+   * @param {ClientsService} clientsService Clients Service
+   * @param {DatePipe} datePipe Date Pipe
+   */
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private router: Router,
+              private clientsService: ClientsService,
+              private datePipe: DatePipe) {
+    this.route.data.subscribe((data: { clientDataAndTemplate: any }) => {
+      this.clientDataAndTemplate = data.clientDataAndTemplate;
+    });
+  }
+
+  ngOnInit() {
+    this.createEditClientForm();
+    this.setOptions();
+    this.buildDependencies();
+    this.editClientForm.patchValue({
+      'officeId': this.clientDataAndTemplate.officeId,
+      'staffId': this.clientDataAndTemplate.staffId,
+      'legalFormId': this.clientDataAndTemplate.legalForm && this.clientDataAndTemplate.legalForm.id,
+      'accountNo': this.clientDataAndTemplate.accountNo,
+      'externalId': this.clientDataAndTemplate.externalId,
+      'genderId': this.clientDataAndTemplate.gender && this.clientDataAndTemplate.gender.id,
+      'isStaff': this.clientDataAndTemplate.isStaff,
+      'active': this.clientDataAndTemplate.active,
+      'mobileNo': this.clientDataAndTemplate.mobileNo,
+      'dateOfBirth': this.clientDataAndTemplate.dateOfBirth && new Date(this.clientDataAndTemplate.dateOfBirth),
+      'clientTypeId': this.clientDataAndTemplate.clientType && this.clientDataAndTemplate.clientType.id,
+      'clientClassificationId': this.clientDataAndTemplate.clientClassification && this.clientDataAndTemplate.clientClassification.id,
+      'submittedOnDate': this.clientDataAndTemplate.timeline.submittedOnDate && new Date(this.clientDataAndTemplate.timeline.submittedOnDate),
+      'activationDate': this.clientDataAndTemplate.timeline.activatedOnDate && new Date(this.clientDataAndTemplate.timeline.activatedOnDate)
+    });
+  }
+
+  /**
+   * Creates the edit client form.
+   */
+  createEditClientForm() {
+    this.editClientForm = this.formBuilder.group({
+      'officeId': [{ value: '', disabled: true }],
+      'staffId': [''],
+      'legalFormId': [''],
+      'isStaff': [false],
+      'active': [false],
+      'accountNo': [{ value: '', disabled: true }],
+      'externalId': [''],
+      'genderId': [''],
+      'mobileNo': [''],
+      'dateOfBirth': [''],
+      'clientTypeId': [''],
+      'clientClassificationId': [''],
+      'submittedOnDate': [''],
+      'activationDate': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Sets select dropdown options.
+   */
+  setOptions() {
+    this.officeOptions = this.clientDataAndTemplate.officeOptions;
+    this.staffOptions = this.clientDataAndTemplate.staffOptions;
+    this.legalFormOptions = this.clientDataAndTemplate.clientLegalFormOptions;
+    this.clientTypeOptions = this.clientDataAndTemplate.clientTypeOptions;
+    this.clientClassificationTypeOptions = this.clientDataAndTemplate.clientClassificationOptions;
+    this.businessLineOptions = this.clientDataAndTemplate.clientNonPersonMainBusinessLineOptions;
+    this.constitutionOptions = this.clientDataAndTemplate.clientNonPersonConstitutionOptions;
+    this.genderOptions = this.clientDataAndTemplate.genderOptions;
+  }
+
+  /**
+   * Adds controls conditionally.
+   */
+  buildDependencies() {
+    this.editClientForm.get('legalFormId').valueChanges.subscribe((legalFormId: any) => {
+      if (legalFormId === 1) {
+        this.editClientForm.removeControl('fullname');
+        this.editClientForm.removeControl('clientNonPersonDetails');
+        this.editClientForm.addControl('firstname', new FormControl(this.clientDataAndTemplate.firstname, Validators.required));
+        this.editClientForm.addControl('middlename', new FormControl(this.clientDataAndTemplate.middlename));
+        this.editClientForm.addControl('lastname', new FormControl(this.clientDataAndTemplate.lastname, Validators.required));
+      } else {
+        this.editClientForm.removeControl('firstname');
+        this.editClientForm.removeControl('middlename');
+        this.editClientForm.removeControl('lastname');
+        this.editClientForm.addControl('fullname', new FormControl(this.clientDataAndTemplate.fullname, Validators.required));
+        this.editClientForm.addControl('clientNonPersonDetails', this.formBuilder.group({
+          'constitutionId': [this.clientDataAndTemplate.clientNonPersonDetails.constitution && this.clientDataAndTemplate.clientNonPersonDetails.constitution.id],
+          'incorpValidityTillDate': [this.clientDataAndTemplate.clientNonPersonDetails.incorpValidityTillDate && new Date(this.clientDataAndTemplate.clientNonPersonDetails.incorpValidityTillDate)],
+          'incorpNumber': [this.clientDataAndTemplate.clientNonPersonDetails.incorpNumber],
+          'mainBusinessLineId': [this.clientDataAndTemplate.clientNonPersonDetails.mainBusinessLine && this.clientDataAndTemplate.clientNonPersonDetails.mainBusinessLine.id],
+          'remarks': [this.clientDataAndTemplate.clientNonPersonDetails.remarks]
+        }));
+      }
+    });
+  }
+
+  /**
+   * Submits the edit client form.
+   */
+  submit() {
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    // TODO: Update once language and date settings are setup
+    const editClientFormValue: any = this.editClientForm.getRawValue();
+    const clientData = {
+      ...editClientFormValue,
+      dateOfBirth: editClientFormValue.dateOfBirth && this.datePipe.transform(editClientFormValue.dateOfBirth, dateFormat),
+      submittedOnDate: editClientFormValue.submittedOnDate && this.datePipe.transform(editClientFormValue.submittedOnDate, dateFormat),
+      activationDate: this.datePipe.transform(editClientFormValue.activationDate, dateFormat),
+      dateFormat,
+      locale
+    };
+    delete clientData.officeId;
+    if (editClientFormValue.clientNonPersonDetails) {
+      clientData.clientNonPersonDetails = {
+        ...editClientFormValue.clientNonPersonDetails,
+        incorpValidityTillDate: editClientFormValue.clientNonPersonDetails.incorpValidityTillDate && this.datePipe.transform(editClientFormValue.clientNonPersonDetails.incorpValidityTillDate, dateFormat),
+        dateFormat,
+        locale
+      };
+    } else {
+      clientData.clientNonPersonDetails = {};
+    }
+    this.clientsService.updateClient(this.clientDataAndTemplate.id, clientData).subscribe(() => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}