feat: add navigation component (#590)

Fixes: #256
2020-05-24 22:28:47 +05:30
parent 7a5069e590
commit e2707a1d0a
43 changed files with 1713 additions and 9 deletions
@@ -0,0 +1,44 @@
+<div fxLayout="row" fxLayoutAlign="space-between center">
+  <mat-form-field fxFlex="50%">
+    <mat-label>Filter</mat-label>
+    <input matInput (keyup)="applyFilter($event.target.value)">
+  </mat-form-field>
+  <button mat-raised-button color="primary" (click)="toggleClosed()">
+    {{ showClosed ? 'View Active' : 'View Closed' }}
+  </button>  
+</div>
+
+<table mat-table [dataSource]="dataSource" matSort>
+
+  <ng-container matColumnDef="accountNo">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Number </th>
+    <td mat-cell *matCellDef="let loanAccount">{{ loanAccount.accountNo }}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="productName">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Account </th>
+    <td mat-cell *matCellDef="let loanAccount">{{ loanAccount.productName }}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="Type">
+    <th mat-header-cell *matHeaderCellDef> Type </th>
+    <td mat-cell *matCellDef="let loanAccount">
+      <fa-icon matTooltip="{{ loanAccount.loanType.value }}" matTooltipPosition="right" [icon]="(loanAccount.loanType.code === 'accountType.individual') ? 'user' : 'users'" size="lg"></fa-icon>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="Status">
+    <th mat-header-cell *matHeaderCellDef> Status </th>
+    <td mat-cell *matCellDef="let loanAccount">
+      <span [className]="loanAccount.inArrears?'status-active-overdue' : (loanAccount.status.code | statusLookup)">
+        <fa-icon matTooltip="{{ loanAccount.status.value }}" matTooltipPosition="right" icon="circle" size="md"></fa-icon>
+      </span>  
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+</table>
+
+<mat-paginator [pageSizeOptions]="[10, 25]" showFirstLastButtons></mat-paginator>