Merge pull request #2751 from JaySoni1/WEB-362-correct-position-and-trailing-comma-in-provisioning-criteria-loan-product

WEB-362-correct-position-and-trailing-comma-in-provisioning-criteria-loan-product

src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.html

@@ -12,15 +12,16 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div class="layout-row-wrap">
-        <h2 class="mat-h2 flex-fill">{{ provisioningData.criteriaName }}</h2>
-        <mat-divider [inset]="true"></mat-divider>
-
-        <div class="loanProduct flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Loan Product' | translate }}:</span>
-          <span class="flex-60">{{ loanProducts }}</span>
-        </div>
+      <div class="layout-row-wrap align-center">
+        <h2 class="mat-h2 criteria-title">
+          {{ provisioningData.criteriaName }}
+        </h2>
+        <span class="loan-product-label">
+          <strong>{{ 'labels.inputs.Loan Product' | translate }}:</strong>
+          <span>{{ loanProducts }}</span>
+        </span>
       </div>
+      <mat-divider [inset]="true"></mat-divider>
 
       <div>
         <table mat-table class="mat-elevation-z1" [dataSource]="dataSource">

src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.scss

@@ -1,3 +1,15 @@
+.criteria-title {
+  margin-bottom: 0;
+  display: inline;
+  vertical-align: middle;
+}
+
+.loan-product-label {
+  margin-left: 24px;
+  font-size: 1.1em;
+  vertical-align: middle;
+}
+
 table {
   width: 100%;
 }

src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.ts

@@ -25,6 +25,8 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatDivider } from '@angular/material/divider';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
+import { LoanProduct } from 'app/products/loan-products/models/loan-product.model';
+
 /**
  * View Loan Provisioning
  */
@@ -93,9 +95,14 @@ export class ViewLoanProvisioningCriteriaComponent implements OnInit {
   setLoanProvisioningSelectedCriteria() {
     this.dataSource = new MatTableDataSource(this.provisioningData.definitions);
 
-    /** Get load products as a string. */
-    for (let _id = 0; _id < this.provisioningData.loanProducts.length; _id++) {
-      this.loanProducts += this.provisioningData.loanProducts[_id].name + ',';
+    // Get loan products as a comma-separated string, no trailing comma, with type safety
+    if (this.provisioningData.loanProducts && this.provisioningData.loanProducts.length > 0) {
+      this.loanProducts = (this.provisioningData.loanProducts as LoanProduct[])
+        .filter((p) => p && p.name)
+        .map((p) => p.name)
+        .join(', ');
+    } else {
+      this.loanProducts = '';
     }
   }