From 02ab8e0090b17688c376725cc9bc5ea8196fe9af Mon Sep 17 00:00:00 2001
From: Karan Takalkar <karant@iitk.ac.in>
Date: Tue, 7 Jul 2020 14:32:31 +0530
Subject: [PATCH] feat: fd interest rate chart (view-incentives) (#1005)

Fixes: #1004
---
 .../general-tab/general-tab.component.html    |  14 +--
 .../fixed-deposit-account-view.component.html |   2 +-
 .../interest-rate-chart-tab.component.html    | 111 +++++++++++++++---
 .../interest-rate-chart-tab.component.scss    |  18 ++-
 .../interest-rate-chart-tab.component.ts      |  35 +++---
 5 files changed, 134 insertions(+), 46 deletions(-)

diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.html b/src/app/clients/clients-view/general-tab/general-tab.component.html
index 46400070f..e5b3d9df9 100644
--- a/src/app/clients/clients-view/general-tab/general-tab.component.html
+++ b/src/app/clients/clients-view/general-tab/general-tab.component.html
@@ -273,7 +273,6 @@
           <i class="fa fa-check-circle"></i>
         </button>
       </td>
-
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
@@ -348,28 +347,21 @@
     <ng-container matColumnDef="Actions">
       <th mat-header-cell *matHeaderCellDef> Actions </th>
       <td mat-cell *matCellDef="let element">
-        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
-          <i class="fa fa-arrow-up"></i>
-        </button>
-        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
-          <i class="fa fa-arrow-down"></i>
-        </button>
         <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
-          color="primary">
+          color="primary" (click)="routeEdit($event)" [routerLink]="['../','fixed-deposits-accounts', element.id, 'actions', 'Approve']">
           <i class="fa fa-check"></i>
         </button>
         <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
           class="account-action-button" mat-raised-button color="primary"
-          (click)="routeEdit($event)" [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Undo Approval']">
+          [routerLink]="['../','fixed-deposits-accounts', element.id, 'actions', 'Undo Approval']">
           <i class="fa fa-undo"></i>
         </button>
         <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
           class="account-action-button" mat-raised-button color="primary"
-          (click)="routeEdit($event)" [routerLink]="['../','savingsaccounts', element.id, 'actions', 'Activate']">
+          [routerLink]="['../','fixed-deposits-accounts', element.id, 'actions', 'Activate']">
           <i class="fa fa-check-circle"></i>
         </button>
       </td>
-
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html
index b2de6318f..ad5417573 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html
@@ -177,7 +177,7 @@
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
       [active]="IRC.isActive">
-        Ineterest Rate Chart
+        Interest Rate Chart
       </a>
       <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
       [active]="transactions.isActive">
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
index 9b67e4323..64f3a1950 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
@@ -8,41 +8,114 @@
 
   <div class="mat-elevation-z1 m-b-25">
 
-    <table mat-table [dataSource]="dataSource" >
+    <table mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
 
       <ng-container matColumnDef="period">
         <th mat-header-cell *matHeaderCellDef> Period </th>
-        <td mat-cell *matCellDef="let rateChart">{{rateChart.fromPeriod}}-{{rateChart.toPeriod}}&nbsp;{{rateChart.periodType.value}}</td>
+        <td mat-cell *matCellDef="let chartSlab">
+          {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
       </ng-container>
-
+  
       <ng-container matColumnDef="amountRange">
         <th mat-header-cell *matHeaderCellDef> Amount Range </th>
-        <td mat-cell *matCellDef="let rateChart">{{rateChart.amountRangeFrom}}-{{rateChart.amountRangeTo}}</td>
+        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
       </ng-container>
-
+  
       <ng-container matColumnDef="interest">
         <th mat-header-cell *matHeaderCellDef> Interest </th>
-        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.annualInterestRate }} </td>
+        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
       </ng-container>
-
+  
       <ng-container matColumnDef="description">
         <th mat-header-cell *matHeaderCellDef> Description </th>
-        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.description }} </td>
+        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
       </ng-container>
-
-      <ng-container matColumnDef="incentives">
-        <th mat-header-cell *matHeaderCellDef> Incentives </th>
-        <td mat-cell *matCellDef="let rateChart">
-          <button mat-button color="primary">
-            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
-            View Incentives
+  
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
+          <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
+            <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
+              <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+              View Incentives
+            </span>
+            <span *ngIf="expandChartSlabIndex === chartSlabIndex">
+              <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+              Hide Incentives
+            </span>
           </button>
         </td>
       </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+  
+      <ng-container matColumnDef="incentives">
+        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns.length">
+  
+          <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
+  
+            <mat-card fxLayout="row wrap" fxFlexFill>
+  
+              <h4 class="m-b-10" fxFlex="13%">
+                Incentives
+              </h4>
+  
+              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives?.length">
+  
+                <ng-container matColumnDef="entityType">
+                  <th mat-header-cell *matHeaderCellDef> Entity Type </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.entityType.value }}
+                  </td>
+                </ng-container>
+  
+                <ng-container matColumnDef="attributeName">
+                  <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.attributeName.value }}
+                  </td>
+                </ng-container>
+  
+                <ng-container matColumnDef="conditionType">
+                  <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.conditionType.value | titlecase }}
+                  </td>
+                </ng-container>
+  
+                <ng-container matColumnDef="attributeValue">
+                  <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                  <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
+                    {{ incentive.attributeValueDesc }}
+                  </td>
+                </ng-container>
+  
+                <ng-container matColumnDef="incentiveType">
+                  <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.incentiveType.value }}
+                  </td>
+                </ng-container>
+  
+                <ng-container matColumnDef="amount">
+                  <th mat-header-cell *matHeaderCellDef> Interest </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.amount }}
+                  </td>
+                </ng-container>
+  
+                <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
+  
+              </table>
+  
+            </mat-card>
+          </div>
+        </td>
+      </ng-container>
+  
+      <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
+  
     </table>
 
   </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.scss b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.scss
index be9328c80..e33b8ded0 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.scss
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.scss
@@ -6,5 +6,21 @@
   }
   table {
     width: 100%;
-  }
+  
+    tr.incentives-row {
+      height: 0;
+  
+      > td {
+        padding: 0;
+      }
+  
+      .incentives {
+        overflow: hidden;
+      }
+  
+      .mat-card {
+        border-radius: 0;
+      }
+    }
+  }  
 }
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.ts
index 29156ca00..7aa3a2b2d 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.ts
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.ts
@@ -1,26 +1,37 @@
-/** Angular Imports */
-import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource } from '@angular/material';
+// ** Angular Imports */
+import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 
 /**
- * Interest Rate Chart Tab Component.
+ * Interest Rate Chart Tab
  */
 @Component({
   selector: 'mifosx-interest-rate-chart-tab',
   templateUrl: './interest-rate-chart-tab.component.html',
-  styleUrls: ['./interest-rate-chart-tab.component.scss']
+  styleUrls: ['./interest-rate-chart-tab.component.scss'],
+  animations: [
+    trigger('expandChartSlab', [
+      state('collapsed', style({ height: '0px', minHeight: '0' })),
+      state('expanded', style({ height: '*' })),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+    ])
+  ]
 })
-export class InterestRateChartTabComponent implements OnInit {
+export class InterestRateChartTabComponent {
 
   /** Fixed Deposits Account Status */
   status: any;
   /** Interest Rate Chart Data */
-  interestRateChartData: any;
+  interestRateChartData: any = [];
   /** Columns to be displayed in interest rate chart table. */
-  displayedColumns: string[] = ['period', 'amountRange', 'interest', 'description', 'incentives'];
-  /** Data source for interest rate chart table. */
-  dataSource: MatTableDataSource<any>;
+  chartSlabsDisplayedColumns: any[] = ['period', 'amountRange', 'interest', 'description', 'actions'];
+  /** Columns to be displayed in incentives sub-table. */
+  incentivesDisplayedColumns: string[] = ['entityType', 'attributeName', 'conditionType', 'attributeValue', 'incentiveType', 'amount'];
+  /** Additional Column to display in incentives table  */
+  chartSlabsIncentivesDisplayedColumns: string[] = ['incentives'];
+  /** Expand Chart Slab Index used in the view */
+  expandChartSlabIndex: number;
 
   /**
    * Retrieves fixed deposits account data from `resolve`.
@@ -32,8 +43,4 @@ export class InterestRateChartTabComponent implements OnInit {
     });
   }
 
-  ngOnInit() {
-    this.dataSource = new MatTableDataSource(this.interestRateChartData);
-  }
-
 }