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