Documents and Notes for Clients, Loans and Clients (#1632)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

src/app/loans/loans-view/view-charge/view-charge.component.html

@@ -37,6 +37,8 @@
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
+        <div fxFlex="100%" [ngClass]="loanChargeColor()">
+        </div>
 
         <div fxFlex="50%" class="mat-body-strong">
           Name

src/app/loans/loans-view/view-charge/view-charge.component.scss

@@ -1,6 +1,8 @@
+@import "assets/styles/helper";
+
 .container {
   max-width: 37rem;
-  
+
   .content {
     div {
       margin: 1rem 0;
@@ -8,3 +10,13 @@
     }
   }
 }
+
+.paid {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.not-paid {
+  background-color: $status-active-overdue;
+  height: 4px;
+}

src/app/loans/loans-view/view-charge/view-charge.component.ts

@@ -52,7 +52,7 @@ export class ViewChargeComponent {
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { loansAccountCharge: any, loanDetailsData: any }) => {
       this.chargeData = data.loansAccountCharge;
-      this.allowPayCharge = (this.chargeData.chargeTimeType.code === 'chargeTimeType.instalmentFee');
+      this.allowPayCharge = (this.chargeData.chargePayable && !this.chargeData.paid);
       this.allowWaive = !this.chargeData.chargeTimeType.waived;
       this.loansAccountData = data.loanDetailsData;
     });
@@ -72,7 +72,7 @@ export class ViewChargeComponent {
       })
     ];
     const data = {
-      title: 'Pay Charge',
+      title: `Pay Charge ${this.chargeData.id}`,
       layout: { addButtonText: 'Confirm' },
       formfields: formfields
     };
@@ -173,6 +173,10 @@ export class ViewChargeComponent {
     });
   }
 
+  loanChargeColor(): string {
+    return this.chargeData.paid ? 'paid' : 'not-paid';
+  }
+
   /**
    * Refetches data fot the component
    * TODO: Replace by a custom reload component instead of hard-coded back-routing.