From 7832b2327e6fe0c115d2483899fda508d2237b77 Mon Sep 17 00:00:00 2001
From: Jose Alberto Hernandez <alberto@blue-daemon.local>
Date: Wed, 20 Sep 2023 22:43:12 -0600
Subject: [PATCH] Advanced Payment Allocation for Loan Transactions

---
 ...ance-payment-allocation-tab.component.html | 13 +++++--
 ...ance-payment-allocation-tab.component.scss | 36 +++++++++++++++++++
 ...dvance-payment-allocation-tab.component.ts |  2 +-
 .../general-tab/general-tab.component.html    |  5 ++-
 ...-advance-paymeny-allocation.component.html |  4 +--
 src/app/shared/icons.module.ts                |  3 +-
 6 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.html
index 27492f63ca..67e1b2a954 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.html
@@ -12,9 +12,11 @@ <h4 class="m-b-15 right" fxFlex="90%">You can drag and drop the rows to set a Pa
     <table mat-table [dataSource]="paymentAllocationsData" #table cdkDropList
       [cdkDropListData]="paymentAllocationsData" (cdkDropListDropped)="dropTable($event)">
 
-      <ng-container matColumnDef="paymentAllocation">
-        <th mat-header-cell *matHeaderCellDef> Payment Allocation </th>
-        <td mat-cell *matCellDef="let paymentAllocation"> {{ paymentAllocation.value }} </td>
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef> </th>
+        <td mat-cell *matCellDef="let paymentAllocation">
+            <fa-icon icon="bars"></fa-icon>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="order">
@@ -22,6 +24,11 @@ <h4 class="m-b-15 right" fxFlex="90%">You can drag and drop the rows to set a Pa
         <td mat-cell *matCellDef="let paymentAllocation; let rowIndex = index"> {{ (rowIndex + 1) }} </td>
       </ng-container>
 
+      <ng-container matColumnDef="paymentAllocation">
+        <th mat-header-cell *matHeaderCellDef> Payment Allocation </th>
+        <td mat-cell *matCellDef="let paymentAllocation"> {{ paymentAllocation.value }} </td>
+      </ng-container>
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.scss b/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.scss
index e69de29bb2..86f6157be6 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.scss
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.scss
@@ -0,0 +1,36 @@
+@import "assets/styles/colours";
+
+tr:hover {
+  cursor: move;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+              display: table;
+  background-color: $white;
+}
+
+.cdk-drag-preview td {
+  flex-grow: 2;
+  font-size: 14px;
+  padding: 4px;
+  vertical-align: middle;
+}
+
+.cdk-drag-placeholder {
+  background-color: $status-approved;
+  opacity: 0.2;
+}
+
+.cdk-drag-animating {
+  cursor: move;
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.ts b/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.ts
index 98075f6934..4ac91e235b 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.ts
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.ts
@@ -21,7 +21,7 @@ export class AdvancePaymentAllocationTabComponent implements OnInit {
   paymentAllocationsData: PaymentAllocationOrder[] = [];
 
   /** Columns to be displayed in the table. */
-  displayedColumns: string[] = ['paymentAllocation', 'order'];
+  displayedColumns: string[] = ['actions', 'order', 'paymentAllocation'];
 
   futureInstallmentAllocationRule = new UntypedFormControl('', Validators.required);
 
diff --git a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
index 6810658e75..3176e7be79 100644
--- a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
+++ b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
@@ -583,12 +583,11 @@ <h3 class="mat-h3" fxFlexFill>Configurable Terms and Settings</h3>
     <span fxFlex="40%">Repaid every:</span>
     <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.repaymentEvery | yesNo }}</span>
     <span fxFlex="40%">Moratorium:</span>
-    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment ? 'Yes' : 'No'
-      }}</span>
+    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment | yesNo }}</span>
     <span fxFlex="40%">Number of days a loan may be overdue before moving into arrears:</span>
     <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnArrearsAgeing | yesNo }}</span>
     <span fxFlex="40%">Delinquency Bucket:</span>
-    <span fxFlex="60%">{{ loanProduct.delinquencyBucket.id | yesNo }}</span>
+    <span fxFlex="60%">{{ loanProduct.delinquencyBucket.id }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
diff --git a/src/app/products/loan-products/view-loan-product/shared/view-advance-paymeny-allocation/view-advance-paymeny-allocation.component.html b/src/app/products/loan-products/view-loan-product/shared/view-advance-paymeny-allocation/view-advance-paymeny-allocation.component.html
index 2d242ee34c..6934304edb 100644
--- a/src/app/products/loan-products/view-loan-product/shared/view-advance-paymeny-allocation/view-advance-paymeny-allocation.component.html
+++ b/src/app/products/loan-products/view-loan-product/shared/view-advance-paymeny-allocation/view-advance-paymeny-allocation.component.html
@@ -25,14 +25,14 @@
         <table>
           <thead>
             <tr>
-              <th>Payment Allocation Rule</th>
               <th>Order</th>
+              <th>Payment Allocation Rule</th>
             </tr>
           </thead>
           <tbody>
             <tr *ngFor="let paymentAllocation of paymentAllocation.paymentAllocationOrder; let idx = index;">
-              <td>{{ paymentAllocation.paymentAllocationRule }}</td>
               <td>{{ (idx + 1) }}</td>
+              <td>{{ paymentAllocation.paymentAllocationRule }}</td>
             </tr>
           </tbody>
         </table>
diff --git a/src/app/shared/icons.module.ts b/src/app/shared/icons.module.ts
index 93a0955871..40dd574bc0 100644
--- a/src/app/shared/icons.module.ts
+++ b/src/app/shared/icons.module.ts
@@ -221,7 +221,8 @@ export class IconsModule {
       faInfo,
       faTasks,
       faCoins,
-      faPiggyBank
+      faPiggyBank,
+      faBars
     );
   }