Minor fixes in Loan product Advanced Payment Allocation (#1856)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/loans/glim-account/create-glim-account/create-glim-account.component.ts

@@ -1,16 +1,9 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
 import { LoansService } from 'app/loans/loans.service';
 import { SettingsService } from 'app/settings/settings.service';
-import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
-import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
-import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
-import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { GlimChargesStepComponent } from './glim-account-stepper/glim-charges-step/glim-charges-step.component';
 import { GlimDetailsStepComponent } from './glim-account-stepper/glim-details-step/glim-details-step.component';
 import { GlimTermsStepComponent } from './glim-account-stepper/glim-terms-step/glim-terms-step.component';
@@ -112,8 +105,6 @@ export class CreateGlimAccountComponent implements OnInit {
     };
   }
 
-
-
   setData(client: any): any {
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
@@ -140,7 +131,6 @@ export class CreateGlimAccountComponent implements OnInit {
     data.groupId = this.loansAccountTemplate.group.id;
 
     return JSON.stringify(data);
-
   }
 
   /** Request Body Data */

src/app/loans/glim-account/glim-account.component.html

@@ -1,6 +1,6 @@
-<div class="tab-container mat-typography">
+<mat-card class="loan-card">
 
-  <div style="margin-top: 5px;">
+  <mat-card-content>
 
     <h2> GLIM Account Overview</h2>
 
@@ -42,5 +42,5 @@
 
     </table>
 
-
-</div>
+  </mat-card-content>
+</mat-card>

src/app/loans/glim-account/glim-account.component.scss

@@ -1,33 +1,40 @@
-.tab-container {
+.loan-card {
+  margin: 0 auto;
+  max-width: 80rem;
+  width: 90%;
+  padding: 0;
+  .header {
     padding: 1%;
-    margin: 1%;
-    h3 {
-      margin:1% auto;
-    }
-    .group-details-container {
-      border: 1px solid;
-      padding: 1%;
-    }
-    .action-button{
-      margin-left: auto;
-    }
-    table {
-      width: 100%;
-      .account-action-button{
-        min-width: 26px;
-        padding: 0 6px;
-        margin: 4px;
-        line-height: 25px;
-      }
-      tr.select-row:hover {
-        cursor: pointer;
+    .header-title-group {
+      .loan-card-title {
+        color: white;
+        width: 90%;
+        p {
+          color: white;
+        }
       }
     }
-    i:hover {
-      cursor: pointer;
+    .profile-image-container {
+      margin: 1%;
+      .profile-image {
+        object-fit: cover;
+        border-radius: 20px;
+      }
     }
-    tr:hover {
-        cursor: pointer;
+    .loan-actions {
+      align-self: flex-end;
+      margin: 0 1%;
+      // min-width: 72%;
+    }
+    .loan-span {
+      margin: 0 0.5%;
     }
   }
-  
+  .navigation-tabs {
+    overflow: auto;
+  }
+}
+
+.loans-overview{
+  font-size: 14px;
+}

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

@@ -10,22 +10,22 @@
       </mat-select>
     </mat-form-field>
 
-    <div class="mat-elevation-z8 container m-t-20">
+    <h4 class="m-b-15 right" fxFlex="63%">You can drag and drop the rows to set a Payment Allocations order</h4>
 
+    <div class="mat-elevation-z8 container m-t-15">
       <table mat-table [dataSource]="paymentAllocationsData" #table cdkDropList
-        [cdkDropListData]="paymentAllocationsData" (cdkDropListDropped)="dropTable($event)"
-        matTooltip="You can drag and drop the rows to set a Payment Allocations order">
-
-        <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>
+        [cdkDropListData]="paymentAllocationsData" (cdkDropListDropped)="dropTable($event)">
 
         <ng-container matColumnDef="paymentAllocation">
           <th mat-header-cell *matHeaderCellDef> Payment Allocation </th>
           <td mat-cell *matCellDef="let paymentAllocation"> {{ paymentAllocation.name }} </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>
+
         <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/loan-product-payment-strategy-step.component.ts

@@ -27,7 +27,7 @@ export class LoanProductPaymentStrategyStepComponent implements OnInit {
   @ViewChild('table') table: MatTable<any>;
 
   /** Columns to be displayed in the table. */
-  displayedColumns: string[] = ['order', 'paymentAllocation'];
+  displayedColumns: string[] = ['paymentAllocation', 'order'];
 
   constructor() { }