fix (clients): bugs in clients view page

- adds skipErrorHandler to avoid profile image error message on frontend
- defines breadcrumb text for each route in clients-routing.module.ts
- removes mat-elevation-z1 class of tables in client view page

fixes: #447

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

@@ -60,6 +60,7 @@ const routes: Routes = [
           {
             path: 'general',
             component: GeneralTabComponent,
+            data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
             resolve: {
               clientAccountsData: ClientAccountsResolver,
               clientChargesData: ClientChargesResolver,
@@ -69,6 +70,7 @@ const routes: Routes = [
           {
             path: 'address',
             component: AddressTabComponent,
+            data: { title: extract('Address'), breadcrumb: 'Address', routeParamBreadcrumb: false },
             resolve: {
               clientAddressFieldConfig: ClientAddressFieldConfigurationResolver,
               clientAddressTemplateData: ClientAddressTemplateResolver,
@@ -77,6 +79,7 @@ const routes: Routes = [
           },
           {
             path: 'family-members',
+            data: { title: extract('Family Members'), breadcrumb: 'Family Members', routeParamBreadcrumb: false },
             children: [
               {
                 path: '',
@@ -88,6 +91,7 @@ const routes: Routes = [
               {
                 path: 'add',
                 component: AddFamilyMemberComponent,
+                data: { title: extract('Add'), breadcrumb: 'Add', routeParamBreadcrumb: false },
                 resolve: {
                   clientTemplate: ClientTemplateResolver
                 }
@@ -97,6 +101,7 @@ const routes: Routes = [
                 children: [{
                   path: 'edit',
                   component: EditFamilyMemberComponent,
+                  data: { title: extract('Family Member View'), routeParamBreadcrumb: 'familyMemberId' },
                   resolve: {
                     clientTemplate: ClientTemplateResolver,
                     editFamilyMember: ClientFamilyMemberResolver
@@ -108,6 +113,7 @@ const routes: Routes = [
           {
             path: 'identities',
             component: IdentitiesTabComponent,
+            data: { title: extract('Identities'), breadcrumb: 'Identities', routeParamBreadcrumb: false },
             resolve: {
               clientIdentities: ClientIdentitiesResolver,
               clientIdentifierTemplate: ClientIdentifierTemplateResolver
@@ -116,6 +122,7 @@ const routes: Routes = [
           {
             path: 'documents',
             component: DocumentsTabComponent,
+            data: { title: extract('Documents'), breadcrumb: 'Documents', routeParamBreadcrumb: false },
             resolve: {
               clientDocuments: ClientDocumentsResolver
             }
@@ -123,6 +130,7 @@ const routes: Routes = [
           {
             path: 'notes',
             component: NotesTabComponent,
+            data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
             resolve: {
               clientNotes: ClientNotesResolver
             }
@@ -132,6 +140,7 @@ const routes: Routes = [
             children: [{
               path: ':datatableName',
               component: DatatableTabComponent,
+              data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
               resolve: {
                 clientDatatable: ClientDatatableResolver
               }

src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.html

@@ -5,7 +5,7 @@
       <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
     </button>
   </div>
-  <table mat-table *ngIf="dataObject.data[0]" [dataSource]="datatableData" class="mat-elevation-z1">
+  <table mat-table *ngIf="dataObject.data[0]" [dataSource]="datatableData">
 
     <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
       <th mat-header-cell *matHeaderCellDef> {{datatableColumn}} </th>

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

@@ -9,7 +9,7 @@
        Add
   </button>
 
-    <table mat-table #documentsTable [dataSource]="clientDocuments" class="mat-elevation-z1">
+    <table mat-table #documentsTable [dataSource]="clientDocuments">
 
         <ng-container matColumnDef="name">
             <th mat-header-cell *matHeaderCellDef> Name </th>

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

@@ -9,7 +9,6 @@
     <p>
       No. of Active Savings :{{clientSummary?.activeSavings}} <br />
       Total Savings :{{clientSummary?.totalSavings}} <br />
-
     </p>
   </div>
 
@@ -17,7 +16,7 @@
 
   <h3>Upcoming Charges</h3>
   <button mat-raised-button class="f-right" color="primary">Charges Overview</button>
-  <table mat-table [dataSource]="upcomingCharges" class="mat-elevation-z1">
+  <table mat-table [dataSource]="upcomingCharges">
 
     <ng-container matColumnDef="Name">
       <th mat-header-cell *matHeaderCellDef> Name </th>
@@ -75,8 +74,7 @@
   <h3>Loan Accounts</h3>
   <button mat-raised-button class="f-right" color="primary"
     (click)="toggleLoanAccountsOverview()">{{showClosedLoanAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
-  <table *ngIf="!showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan'"
+  <table *ngIf="!showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan'">
-    class="mat-elevation-z1">
 
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> Account No. </th>
@@ -139,8 +137,7 @@
   </table>
 
   <!-- Closed Loan Accounts -->
-  <table *ngIf="showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan':'closed'"
+  <table *ngIf="showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan':'closed'">
-    class="mat-elevation-z1">
 
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> Account No. </th>
@@ -193,8 +190,7 @@
   <h3>Saving Accounts</h3>
   <button mat-raised-button class="f-right" color="primary"
     (click)="toggleSavingAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
-  <table *ngIf="!showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving'"
+  <table *ngIf="!showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving'">
-    class="mat-elevation-z1">
 
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> Account No. </th>
@@ -252,8 +248,7 @@
 
   <!-- Closed Saving Accounts -->
 
-  <table *ngIf="showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving':'closed'"
+  <table *ngIf="showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving':'closed'">
-    class="mat-elevation-z1">
 
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> Account No. </th>
@@ -280,8 +275,7 @@
   <h3>Shares Accounts</h3>
   <button mat-raised-button class="f-right" color="primary"
     (click)="toggleShareAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
-  <table *ngIf="!showClosedShareAccounts" mat-table [dataSource]="shareAccounts|accountsFilter:'share'"
+  <table *ngIf="!showClosedShareAccounts" mat-table [dataSource]="shareAccounts|accountsFilter:'share'">
-    class="mat-elevation-z1">
 
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> Account No. </th>
@@ -327,8 +321,7 @@
     <tr mat-row *matRowDef="let row; columns: openSharesColumns;"></tr>
   </table>
   <!-- Closed Share Accounts -->
-  <table *ngIf="showClosedShareAccounts" mat-table [dataSource]="shareAccounts|accountsFilter:'share':'closed'"
+  <table *ngIf="showClosedShareAccounts" mat-table [dataSource]="shareAccounts|accountsFilter:'share':'closed'">
-    class="mat-elevation-z1">
 
     <ng-container matColumnDef="Account No">
       <th mat-header-cell *matHeaderCellDef> Account No. </th>

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

@@ -8,7 +8,7 @@
     <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp; Add
   </button>
 
-    <table mat-table #identifiersTable [dataSource]="clientIdentities" class="mat-elevation-z1">
+    <table mat-table #identifiersTable [dataSource]="clientIdentities">
 
         <ng-container matColumnDef="id">
             <th mat-header-cell *matHeaderCellDef> Id </th>

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

@@ -1,5 +1,4 @@
 <div class="tab-container mat-typography">
-
   <h3>Notes</h3>
   <div>
     <form #formRef="ngForm" [formGroup]="noteForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
@@ -27,11 +26,7 @@
         <button mat-button color="warn" (click)="deleteNote(clientNote.id,i)">
           <fa-icon icon="trash"></fa-icon>
         </button>
-
       </div>
     </mat-list-item>
   </mat-list>
-
-
-
 </div>

src/app/clients/clients.service.ts

@@ -22,7 +22,6 @@ export class ClientsService {
       .set('limit', limit.toString())
       .set('sortOrder', sortOrder)
       .set('orderBy', orderBy);
-
     return this.http.get('/clients', { params: httpParams });
   }
 
@@ -62,7 +61,7 @@ export class ClientsService {
 
   getClientProfileImage(clientId: string) {
     const httpParams = new HttpParams().set('maxHeight', '150');
-    return this.http.get(`/clients/${clientId}/images`, { params: httpParams, responseType: 'text' });
+    return this.http.skipErrorHandler().get(`/clients/${clientId}/images`, { params: httpParams, responseType: 'text' });
   }
 
   getClientFamilyMembers(clientId: string) {