feat: family members list

- add family member tab component
- Change delete button color to warn in delete dialog box

fixes: #262 , #80

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

@@ -11,6 +11,7 @@ import { extract } from '../core/i18n/i18n.service';
 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';
 
 /** Custom Resolvers */
 import { ClientsResolver } from './common-resolvers/clients.resolver';
@@ -18,6 +19,9 @@ import { ClientViewResolver } from './common-resolvers/client-view.resolver';
 import { ClientAccountsResolver } from './common-resolvers/client-accounts.resolver';
 import { ClientChargesResolver } from './common-resolvers/client-charges.resolver';
 import { ClientSummaryResolver } from './common-resolvers/client-summary.resolver';
+import { ClientFamilyMembersResolver } from './common-resolvers/client-family-members.resolver';
+import { ClientFamilyMemberResolver } from './common-resolvers/client-family-member.resolver';
+import { ClientTemplateResolver } from './common-resolvers/client-template.resolver';
 
 const routes: Routes = [
   Route.withShell([{
@@ -36,7 +40,7 @@ const routes: Routes = [
         component: ClientsViewComponent,
         data: { title: extract('Clients View'), routeParamBreadcrumb: 'clientId' },
         resolve: {
-          clientViewData: ClientViewResolver
+          clientViewData: ClientViewResolver,
         },
         children: [
           {
@@ -46,8 +50,19 @@ const routes: Routes = [
               clientAccountsData: ClientAccountsResolver,
               clientChargesData: ClientChargesResolver,
               clientSummary: ClientSummaryResolver
-            },
-
+            }
+          },
+          {
+            path: 'family-members',
+            children: [
+              {
+                path: '',
+                component: FamilyMembersTabComponent,
+                resolve: {
+                  clientFamilyMembers: ClientFamilyMembersResolver
+                }
+              }
+            ]
           }
         ]
       }
@@ -64,7 +79,10 @@ const routes: Routes = [
     ClientViewResolver,
     ClientAccountsResolver,
     ClientChargesResolver,
-    ClientSummaryResolver
+    ClientSummaryResolver,
+    ClientFamilyMembersResolver,
+    ClientFamilyMemberResolver,
+    ClientTemplateResolver
   ]
 })
 export class ClientsRoutingModule { }

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

@@ -4,7 +4,8 @@
       <!-- change this -->
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image" [src]="(clientImage)?clientImage:'../../../assets/images/user_placeholder.png'">
+          <img mat-card-md-image class="profile-image"
+            [src]="(clientImage)?clientImage:'assets/images/user_placeholder.png'">
         </div>
       </div>
       <div class="mat-typography client-card-title">
@@ -43,9 +44,12 @@
   </mat-card-header>
   <mat-card-content>
     <nav mat-tab-nav-bar>
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive active="true">
+      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive" [active]="general.isActive">
         General
       </a>
+      <a mat-tab-link [routerLink]="['./family-members']" routerLinkActive #familyMembers="routerLinkActive" [active]="familyMembers.isActive">
+        Family Members
+      </a>
     </nav>
     <router-outlet></router-outlet>
   </mat-card-content>

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

@@ -13,19 +13,18 @@ import { ClientsService } from '../clients.service';
 export class ClientsViewComponent implements OnInit {
   clientViewData: any;
   clientImage: any;
+  clientTemplate: any;
   constructor(private route: ActivatedRoute,
     private clientsService: ClientsService,
     private _sanitizer: DomSanitizer) {
     this.route.data.subscribe((data: { clientViewData: any }) => {
       this.clientViewData = data.clientViewData;
     });
-
   }
 
   ngOnInit() {
-    this.clientsService.getClientProfileImage(this.clientViewData.id).subscribe(base64Image => {
+    this.clientsService.getClientProfileImage(this.clientViewData.id).subscribe((base64Image: any) => {
       this.clientImage = this._sanitizer.bypassSecurityTrustResourceUrl(base64Image);
     });
   }
-
 }

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

@@ -0,0 +1,47 @@
+<div class="tab-container mat-typography">
+  <router-outlet>
+    <h3>Family Members</h3>
+    <div fxLayout="row" fxLayoutAlign="flex-end">
+      <button mat-raised-button color="primary" [routerLink]="['./add']">
+        <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.lastName}}
+          </mat-panel-title>
+          <mat-panel-description>
+            {{member.relationship}}
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+        <mat-divider [inset]="true"></mat-divider>
+        <div class="family-member-actions" fxLayout="row" fxLayoutAlign="flex-end">
+          <button mat-button color="primary">
+            <fa-icon icon="edit" [routerLink]="[member.id,'edit']"></fa-icon>
+          </button>
+          <button mat-button color="warn" (click)="deleteFamilyMember(member.clientId,member.id,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 />
+          Mobile Number : {{member.mobileNumber}}<br />
+          Age : {{member.age}}<br />
+          Is Dependent : {{member.isDependent}}<br />
+          Martial Status : {{member.maritalStatus}}<br />
+          Gender : {{member.gender}}<br />
+          Profession : {{member.profession}}<br />
+          Date Of Birth : {{member.dateOfBirth|date}}<br />
+        </p>
+
+      </mat-expansion-panel>
+
+    </mat-accordion>
+  </router-outlet>
+</div>

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

@@ -0,0 +1,21 @@
+.tab-container {
+  padding:1%;
+  margin: 1%;
+
+  .family-member {
+    .family-member-actions{
+      margin-top: 1%;
+      button{
+        margin-right: 1%;
+      }
+    }
+    h3 {
+      margin: 1% auto;
+    }
+
+    p {
+      line-height: 30px;
+      margin-left: 2%;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { MatDialog } from '@angular/material';
+
+/** Custom Components */
+import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
+
+/** Custom Services */
+import { ClientsService } from '../../clients.service';
+
+@Component({
+  selector: 'mifosx-family-members-tab',
+  templateUrl: './family-members-tab.component.html',
+  styleUrls: ['./family-members-tab.component.scss']
+})
+export class FamilyMembersTabComponent implements OnInit {
+  clientFamilyMembers: any;
+  constructor(private route: ActivatedRoute,
+    private router: Router,
+    private clientsService: ClientsService,
+    public dialog: MatDialog) {
+    this.route.data.subscribe((data: { clientFamilyMembers: any }) => {
+      this.clientFamilyMembers = data.clientFamilyMembers;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  /**
+   * Deletes the family member and redirects to family members tab.
+   */
+  deleteFamilyMember(clientId: string, id: string, name: string, index: number) {
+    const deleteFamilyMemberDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `Family member id:${id} name : ${name} ${index}` }
+    });
+    deleteFamilyMemberDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.clientsService.deleteFamilyMember(clientId, id)
+          .subscribe(() => {
+            this.clientFamilyMembers.splice(index, 1);
+          });
+      }
+    });
+  }
+
+}

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

@@ -2,13 +2,13 @@
   <h3>Performance History</h3>
   <div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
     <p>
-      No. Of Loan Cycles :{{clientSummary.loanCycle}} <br />
-      No. of Active Loans :{{clientSummary.activeLoans}} <br />
-      Last Loan Amount :{{clientSummary.lastLoanAmount}} <br />
+      No. Of Loan Cycles :{{clientSummary?.loanCycle}} <br />
+      No. of Active Loans :{{clientSummary?.activeLoans}} <br />
+      Last Loan Amount :{{clientSummary?.lastLoanAmount}} <br />
     </p>
     <p>
-      No. of Active Savings :{{clientSummary.activeSavings}} <br />
-      Total Savings :{{clientSummary.totalSavings}} <br />
+      No. of Active Savings :{{clientSummary?.activeSavings}} <br />
+      Total Savings :{{clientSummary?.totalSavings}} <br />
 
     </p>
   </div>

src/app/clients/clients.module.ts

@@ -11,6 +11,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 {PipesModule} from '../pipes/pipes.module';
+import { FamilyMembersTabComponent } from './clients-view/family-members-tab/family-members-tab.component';
+
 
 
 /**
@@ -27,7 +29,9 @@ import {PipesModule} from '../pipes/pipes.module';
   declarations: [
     ClientsComponent,
     ClientsViewComponent,
-    GeneralTabComponent],
+    GeneralTabComponent,
+    FamilyMembersTabComponent,
+  ],
   providers: [DatePipe]
 
 })

src/app/clients/clients.service.ts

@@ -20,6 +20,10 @@ export class ClientsService {
     const httpParams = new HttpParams().set('orderBy', 'id');
     return this.http.get('/clients', { params: httpParams });
   }
+
+  getClientTemplate(): Observable<any> {
+    return this.http.get('/clients/template');
+  }
   getClientData(clientId: string) {
     return this.http.get(`/clients/${clientId}`);
   }
@@ -39,4 +43,19 @@ export class ClientsService {
     const httpParams = new HttpParams().set('maxHeight', '150');
     return this.http.get(`/clients/${clientId}/images`, { params: httpParams, responseType: 'text' });
   }
+  getClientFamilyMembers(clientId: string) {
+    return this.http.get(`/clients/${clientId}/familymembers`);
+  }
+  getClientFamilyMember(clientId: string, familyMemberId: string) {
+    return this.http.get(`/clients/${clientId}/familymembers/${familyMemberId}`);
+  }
+  addFamilyMember(clientId: string, familyMemberData: any) {
+    return this.http.post(`/clients/${clientId}/familymembers`, familyMemberData);
+  }
+  editFamilyMember(clientId: string, familyMemberId: any, familyMemberData: any) {
+    return this.http.put(`/clients/${clientId}/familymembers/${familyMemberId}`, familyMemberData);
+  }
+  deleteFamilyMember(clientId: string, familyMemberId: string) {
+    return this.http.delete(`/clients/${clientId}/familymembers/${familyMemberId}`);
+  }
 }

src/app/clients/common-resolvers/client-family-member.resolver.ts

@@ -0,0 +1,32 @@
+/** 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';
+
+/**
+ * Client Family Member resolver.
+ */
+@Injectable()
+export class ClientFamilyMemberResolver implements Resolve<Object> {
+
+    /**
+     * @param {ClientsService} ClientsService Clients service.
+     */
+    constructor(private clientsService: ClientsService) { }
+
+    /**
+     * Returns the Clients data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.parent.parent.parent.paramMap.get('clientId');
+        const familyMemberId = route.parent.paramMap.get('familyMemberId');
+        return this.clientsService.getClientFamilyMember(clientId, familyMemberId);
+    }
+
+}

src/app/clients/common-resolvers/client-family-members.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';
+
+/**
+ * Client Family Members resolver.
+ */
+@Injectable()
+export class ClientFamilyMembersResolver implements Resolve<Object> {
+
+    /**
+     * @param {ClientsService} ClientsService Clients service.
+     */
+    constructor(private clientsService: ClientsService) { }
+
+    /**
+     * Returns the Clients data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.parent.parent.paramMap.get('clientId');
+        return this.clientsService.getClientFamilyMembers(clientId);
+    }
+
+}

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

@@ -0,0 +1,30 @@
+/** 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';
+
+/**
+ * Client Template resolver.
+ */
+@Injectable()
+export class ClientTemplateResolver implements Resolve<Object> {
+
+    /**
+     * @param {ClientsService} ClientsService Clients service.
+     */
+    constructor(private clientsService: ClientsService) { }
+
+    /**
+     * Returns the Client Template data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        return this.clientsService.getClientTemplate();
+    }
+
+}

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

@@ -3,6 +3,6 @@
   <p>Are you sure you want to delete {{ data.deleteContext }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>Cancel</button>
-  <button mat-button [mat-dialog-close]="{ delete: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>Cancel</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ delete: true }">Confirm</button>
 </mat-dialog-actions>