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/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);
+          });
+      }
+    });
+  }
+
+}