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-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>