fix: Show members in GLIM and GSIM preview (#2334)

This shows a list of participating members in
GLIM resp. GSIM preview step.
It also changes "GLIM Loan" to "GLIM" in a menu
item.

Fixes: WEB-64

src/app/groups/groups-view/groups-view.component.html

@@ -119,7 +119,7 @@
             *mifosxHasPermission="'CREATE_LOAN'"
             [routerLink]="['loans-accounts', 'glim-account', 'create']"
           >
-            {{ 'labels.buttons.GLIM Loan Application' | translate }}
+            {{ 'labels.buttons.GLIM Application' | translate }}
           </button>
           <button
             mat-menu-item

src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html

@@ -42,11 +42,44 @@
     </span>
   </div>
 
-  <div fxFlex="98%" *ngIf="activeClientMembers">
+  <ng-container *ngIf="activeClientMembers">
-    <! -- TODO: Display activeClientMembers -->
+    <h3 class="mat-h3" fxFlexFill class="margin-t">{{ 'labels.heading.Client Members' | translate }}</h3>
-  </div>
+    <mat-divider fxFlexFill></mat-divider>
+    <div fxFlex="60%">
+      <table mat-table #membersTable [dataSource]="dataSource">
+        <!-- ID Column -->
+        <ng-container matColumnDef="id">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.id }}</td>
+        </ng-container>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
+        <!-- Name Column -->
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
+        </ng-container>
+
+        <!-- Purpose Column -->
+        <ng-container matColumnDef="purpose">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Purpose' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.purpose }}</td>
+        </ng-container>
+
+        <!-- Principal Column -->
+        <ng-container matColumnDef="principal">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
+          <td mat-cell *matCellDef="let element">
+            {{ element.principal | currency: loansAccountProductTemplate.currency.code : 'symbol-narrow' : '1.2-2' }}
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="membersDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: membersDisplayedColumns"></tr>
+      </table>
+    </div>
+  </ng-container>
+
+  <h3 class="mat-h3" fxFlexFill class="margin-t">{{ 'labels.heading.Terms' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
@@ -175,7 +208,7 @@
     <span fxFlex="60%"> {{ loansAccount.balloonRepaymentAmount | formatNumber }} </span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Moratorium' | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill class="margin-t">{{ 'labels.heading.Moratorium' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
@@ -214,7 +247,7 @@
     <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
+  <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column" class="margin-t">
     <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
@@ -279,7 +312,13 @@
     </table>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccountProductTemplate.overdueCharges.length" fxLayout="row wrap" fxLayout.lt-md="column">
+  <div
+    fxFlexFill
+    *ngIf="loansAccountProductTemplate.overdueCharges.length"
+    fxLayout="row wrap"
+    fxLayout.lt-md="column"
+    class="margin-t"
+  >
     <h3 fxFlex="98%" class="mat-h3">{{ 'labels.heading.Overdue Charges' | translate }}</h3>
 
     <mat-divider fxFlex="98%"></mat-divider>

src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.ts

@@ -17,7 +17,7 @@ export class LoansAccountPreviewStepComponent implements OnChanges {
   @Input() loansAccountProductTemplate: any;
   /** Loans Account Data */
   @Input() loansAccount: any;
-  /** active Client Members in case of GSIM Account */
+  /** active Client Members in case of GLIM Account */
   @Input() activeClientMembers?: any;
 
   /** Submit Loans Account */
@@ -38,6 +38,16 @@ export class LoansAccountPreviewStepComponent implements OnChanges {
     'amount',
     'collectedon'
   ];
+  /** Columns to be displayed in active members table. */
+  membersDisplayedColumns: string[] = [
+    'id',
+    'name',
+    'purpose',
+    'principal'
+  ];
+
+  /** Loan Purpose Options */
+  loanPurposeOptions: any[] = [];
 
   /** Table Data Source */
   dataSource: any;
@@ -48,11 +58,18 @@ export class LoansAccountPreviewStepComponent implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     this.productEnableDownPayment = this.loansAccountProductTemplate.product.enableDownPayment;
     if (this.activeClientMembers) {
-      this.dataSource = new MatTableDataSource<any>(this.activeClientMembers);
+      this.loanPurposeOptions = this.loansAccountProductTemplate.loanPurposeOptions;
-      this.loansAccount.principalAmount = this.activeClientMembers.reduce(
+      this.dataSource = new MatTableDataSource<any>(
-        (acc: number, member: any) => acc + (member.principal ?? 0),
+        this.activeClientMembers
-        0
+          .filter((member: any) => member.selected)
+          .map((member: any) => ({
+            ...member,
+            purpose: this.loanPurposeOptions.find((option) => option.id === member.loanPurposeId)?.name
+          }))
       );
+      this.loansAccount.principalAmount = this.activeClientMembers
+        .filter((member: any) => member.selected)
+        .reduce((acc: number, member: any) => acc + (member.principal ?? 0), 0);
     }
   }
 }

src/app/savings/gsim-account/create-gsim-account/create-gsim-account.component.html

@@ -58,6 +58,7 @@
         [savingsAccountTemplate]="savingsAccountTemplate"
         [savingsAccountTermsForm]="savingsAccountTermsForm"
         [savingsAccount]="savingsAccount"
+        [activeClientMembers]="activeClientMembers"
         (submitEvent)="submit()"
       >
       </mifosx-savings-account-preview-step>

src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html

@@ -32,7 +32,30 @@
     }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
+  <ng-container *ngIf="activeClientMembers">
+    <h3 class="mat-h3" fxFlexFill class="margin-t">{{ 'labels.heading.Client Members' | translate }}</h3>
+    <mat-divider fxFlexFill></mat-divider>
+    <div fxFlex="60%">
+      <table mat-table #membersTable [dataSource]="dataSource">
+        <!-- ID Column -->
+        <ng-container matColumnDef="id">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.id }}</td>
+        </ng-container>
+
+        <!-- Name Column -->
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="membersDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: membersDisplayedColumns"></tr>
+      </table>
+    </div>
+  </ng-container>
+
+  <h3 class="mat-h3" fxFlexFill class="margin-t">{{ 'labels.heading.Terms' | translate }}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 

src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.ts

@@ -1,6 +1,7 @@
 /** Angular Imports */
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { MatTableDataSource } from '@angular/material/table';
 
 /**
  * Savings account preview step
@@ -10,7 +11,7 @@ import { TranslateService } from '@ngx-translate/core';
   templateUrl: './savings-account-preview-step.component.html',
   styleUrls: ['./savings-account-preview-step.component.scss']
 })
-export class SavingsAccountPreviewStepComponent {
+export class SavingsAccountPreviewStepComponent implements OnChanges {
   /** Savings Account Product Template */
   @Input() savingsAccountProductTemplate: any;
   /** Savings Account Template */
@@ -19,6 +20,11 @@ export class SavingsAccountPreviewStepComponent {
   @Input() savingsAccountTermsForm: any;
   /** Savings Account */
   @Input() savingsAccount: any;
+  /** active Client Members in case of GSIM Account */
+  @Input() activeClientMembers?: any;
+
+  /** Table Data Source */
+  dataSource: any;
 
   /** Display columns for charges table */
   chargesDisplayedColumns: string[] = [
@@ -29,12 +35,23 @@ export class SavingsAccountPreviewStepComponent {
     'date',
     'repaymentsEvery'
   ];
+  /** Columns to be displayed in active members table. */
+  membersDisplayedColumns: string[] = [
+    'id',
+    'name'
+  ];
 
   /** Form submission event */
   @Output() submitEvent = new EventEmitter();
 
   constructor(private translateService: TranslateService) {}
 
+  ngOnChanges(): void {
+    if (this.activeClientMembers?.length > 0) {
+      this.dataSource = new MatTableDataSource<any>(this.activeClientMembers.filter((member: any) => member.selected));
+    }
+  }
+
   getCatalogTranslation(text: string): string {
     return this.translateService.instant('labels.catalogs.' + text);
   }

src/assets/translations/cs-CS.json

@@ -413,7 +413,7 @@
       "Export XLS": "Vývozní XLS",
       "Filter": "filtr",
       "Foreclosure": "Exekuce",
-      "GLIM Loan Application": "Žádost o půjčku GLIM",
+      "GLIM Application": "Žádost o půjčku GLIM",
       "GSIM Application": "Aplikace GSIM",
       "Generate Report": "Vygenerovat zprávu",
       "Get Parameters": "Získat parametry",

src/assets/translations/de-DE.json

@@ -413,7 +413,7 @@
       "Export XLS": "XLS exportieren",
       "Filter": "Filter",
       "Foreclosure": "Zwangsvollstreckung",
-      "GLIM Loan Application": "GLIM-Kreditantrag",
+      "GLIM Application": "GLIM-Kreditantrag",
       "GSIM Application": "GSIM-Anwendung",
       "Generate Report": "Bericht generieren",
       "Get Parameters": "Parameter abrufen",

src/assets/translations/en-US.json

@@ -414,7 +414,7 @@
       "Export XLS": "Export XLS",
       "Filter": "filter",
       "Foreclosure": "Foreclosure",
-      "GLIM Loan Application": "GLIM Loan Application",
+      "GLIM Application": "GLIM Application",
       "GSIM Application": "GSIM Application",
       "Generate Report": "Generate Report",
       "Get Parameters": "Get Parameters",

src/assets/translations/es-CL.json

@@ -413,7 +413,7 @@
       "Export XLS": "Exportar XLS",
       "Filter": "Filtrar",
       "Foreclosure": "Juicio hipotecario",
-      "GLIM Loan Application": "Solicitud de Crédito GLIM",
+      "GLIM Application": "Solicitud de Crédito GLIM",
       "GSIM Application": "Aplicación GSIM",
       "Generate Report": "Generar reporte",
       "Get Parameters": "Obtener parámetros",

src/assets/translations/es-MX.json

@@ -413,7 +413,7 @@
       "Export XLS": "Exportar XLS",
       "Filter": "Filtrar",
       "Foreclosure": "Juicio hipotecario",
-      "GLIM Loan Application": "Solicitud de Crédito GLIM",
+      "GLIM Application": "Solicitud de Crédito GLIM",
       "GSIM Application": "Aplicación GSIM",
       "Generate Report": "Generar reporte",
       "Get Parameters": "Obtener parámetros",

src/assets/translations/fr-FR.json

@@ -413,7 +413,7 @@
       "Export XLS": "Exporter au format XLS",
       "Filter": "filtre",
       "Foreclosure": "Forclusion",
-      "GLIM Loan Application": "Demande de prêt GLIM",
+      "GLIM Application": "Demande de prêt GLIM",
       "GSIM Application": "Demande GSIM",
       "Generate Report": "Générer un rapport",
       "Get Parameters": "Obtenir les paramètres",

src/assets/translations/it-IT.json

@@ -413,7 +413,7 @@
       "Export XLS": "Esporta XLS",
       "Filter": "filtro",
       "Foreclosure": "Pignoramento",
-      "GLIM Loan Application": "Richiesta di prestito GLIM",
+      "GLIM Application": "Richiesta di prestito GLIM",
       "GSIM Application": "Applicazione GSMIM",
       "Generate Report": "Genera rapporto",
       "Get Parameters": "Ottieni parametri",

src/assets/translations/ko-KO.json

@@ -413,7 +413,7 @@
       "Export XLS": "XLS 내보내기",
       "Filter": "필터",
       "Foreclosure": "유질",
-      "GLIM Loan Application": "GLIM 대출 신청",
+      "GLIM Application": "GLIM 대출 신청",
       "GSIM Application": "GSIM 애플리케이션",
       "Generate Report": "보고서 생성",
       "Get Parameters": "매개변수 가져오기",

src/assets/translations/lt-LT.json

@@ -413,7 +413,7 @@
       "Export XLS": "Eksportuoti XLS",
       "Filter": "filtras",
       "Foreclosure": "Uždarymas",
-      "GLIM Loan Application": "GLIM paskolos paraiška",
+      "GLIM Application": "GLIM paskolos paraiška",
       "GSIM Application": "GSIM programa",
       "Generate Report": "Sukurti ataskaitą",
       "Get Parameters": "Gaukite parametrus",

src/assets/translations/lv-LV.json

@@ -413,7 +413,7 @@
       "Export XLS": "Eksportēt XLS",
       "Filter": "filtrēt",
       "Foreclosure": "Preces ierobežošana",
-      "GLIM Loan Application": "GLIM aizdevuma pieteikums",
+      "GLIM Application": "GLIM aizdevuma pieteikums",
       "GSIM Application": "GSIM lietojumprogramma",
       "Generate Report": "Ģenerēt atskaiti",
       "Get Parameters": "Iegūstiet parametrus",

src/assets/translations/ne-NE.json

@@ -413,7 +413,7 @@
       "Export XLS": "XLS निर्यात गर्नुहोस्",
       "Filter": "फिल्टर",
       "Foreclosure": "फोरक्लोजर",
-      "GLIM Loan Application": "GLIM ऋण आवेदन",
+      "GLIM Application": "GLIM ऋण आवेदन",
       "GSIM Application": "GSIM आवेदन",
       "Generate Report": "रिपोर्ट उत्पन्न गर्नुहोस्",
       "Get Parameters": "प्यारामिटरहरू प्राप्त गर्नुहोस्",

src/assets/translations/pt-PT.json

@@ -413,7 +413,7 @@
       "Export XLS": "Exportar XLS",
       "Filter": "filtro",
       "Foreclosure": "Execução hipotecária",
-      "GLIM Loan Application": "Solicitação de empréstimo GLIM",
+      "GLIM Application": "Solicitação de empréstimo GLIM",
       "GSIM Application": "Aplicação GSM",
       "Generate Report": "Gerar relatório",
       "Get Parameters": "Obter parâmetros",

src/assets/translations/sw-SW.json

@@ -413,7 +413,7 @@
       "Export XLS": "Hamisha XLS",
       "Filter": "Kichujio",
       "Foreclosure": "Foreclosure",
-      "GLIM Loan Application": "Maombi ya Mkopo wa GLIM",
+      "GLIM Application": "Maombi ya Mkopo wa GLIM",
       "GSIM Application": "Maombi ya GSIM",
       "Generate Report": "Tengeneza Ripoti",
       "Get Parameters": "Pata Vigezo",