Advanced Payment Allocation for Loan Transactions drag and drop

src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/advance-payment-allocation-tab/advance-payment-allocation-tab.component.html

@@ -12,16 +12,23 @@ <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">
         <th mat-header-cell *matHeaderCellDef> Order </th>
         <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>

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

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);
 

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">

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>

src/app/shared/icons.module.ts

@@ -221,7 +221,8 @@ export class IconsModule {
       faInfo,
       faTasks,
       faCoins,
-      faPiggyBank
+      faPiggyBank,
+      faBars
     );
   }