fix: glim, gsim account create (#2375)

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

@@ -50,6 +50,13 @@
       </mifosx-savings-account-charges-step>
     </mat-step>
 
+    <mat-step>
+      <ng-template matStepLabel>{{ 'labels.heading.Active Client Members' | translate }}</ng-template>
+
+      <mifosx-savings-active-client-members [activeClientMembers]="activeClientMembers">
+      </mifosx-savings-active-client-members>
+    </mat-step>
+
     <mat-step *ngIf="savingsAccountFormValid" completed>
       <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 

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

@@ -6,6 +6,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { SavingsAccountDetailsStepComponent } from '../../savings-account-stepper/savings-account-details-step/savings-account-details-step.component';
 import { SavingsAccountTermsStepComponent } from '../../savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component';
 import { SavingsAccountChargesStepComponent } from '../../savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component';
+import { SavingsActiveClientMembersComponent } from '../../savings-account-stepper/savings-active-client-members/savings-active-client-members.component';
 
 /** Custom Services */
 import { SavingsService } from '../../savings.service';
@@ -39,6 +40,9 @@ export class CreateGsimAccountComponent {
   /** Savings Account Charges Step */
   @ViewChild(SavingsAccountChargesStepComponent, { static: true })
   savingsAccountChargesStep: SavingsAccountChargesStepComponent;
+  /** Savings Active Client Members */
+  @ViewChild(SavingsActiveClientMembersComponent, { static: true })
+  savingsActiveClientMembers: SavingsActiveClientMembersComponent;
 
   /**
    * Fetches savings account template from `resolve`
@@ -105,7 +109,7 @@ export class CreateGsimAccountComponent {
    * Retrieves savings account object.
    */
   get savingsAccount() {
-    this.selectedMembers = this.savingsAccountChargesStep.selectedClientMembers;
+    this.selectedMembers = this.savingsActiveClientMembers.selectedClientMembers;
     return {
       ...this.savingsAccountDetailsStep.savingsAccountDetails,
       ...this.savingsAccountTermsStep.savingsAccountTerms,

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

@@ -124,47 +124,14 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
-  <div fxFlex="98%" *ngIf="activeClientMembers">
-    <table fxFlex="98%" mat-table [dataSource]="dataSource">
-      <!-- Check Column -->
-      <ng-container matColumnDef="check">
-        <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
-        </th>
-        <td mat-cell *matCellDef="let element">
-          <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
-        </td>
-      </ng-container>
-
-      <!-- Position 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="displayedColumn"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
-    </table>
+  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+    <button mat-raised-button matStepperPrevious>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Previous' | translate }}
+    </button>
+    <button mat-raised-button matStepperNext>
+      {{ 'labels.buttons.Next' | translate }}
+      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+    </button>
   </div>
 </div>
-
-<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-  <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Previous' | translate }}
-  </button>
-  <button
-    mat-raised-button
-    matStepperNext
-    [disabled]="activeClientMembers ? selectedClientMembers.selectedMembers.length === 0 : false"
-  >
-    {{ 'labels.buttons.Next' | translate }}
-    <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-  </button>
-</div>

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

@@ -81,7 +81,6 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
       } else {
         this.chargesDataSource = [];
       }
-      this.dataSource = new MatTableDataSource<any>(this.activeClientMembers);
     }
   }
 
@@ -226,24 +225,4 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
   get savingsAccountCharges() {
     return { charges: this.chargesDataSource };
   }
-
-  get selectedClientMembers() {
-    return {
-      selectedMembers: this.activeClientMembers ? this.activeClientMembers.filter((item: any) => item.selected) : []
-    };
-  }
-
-  /** Toggle all checks */
-  toggleSelects() {
-    for (const member of this.activeClientMembers) {
-      member.selected = this.selectAllItems;
-    }
-  }
-
-  /** Check if all the checks are selected */
-  toggleSelect() {
-    const len = this.activeClientMembers.length;
-    this.selectAllItems =
-      len === 0 ? false : this.activeClientMembers.filter((item: any) => item.selected).length === len;
-  }
 }

src/app/savings/savings-account-stepper/savings-active-client-members/savings-active-client-members.component.html

@@ -0,0 +1,40 @@
+<div *ngIf="activeClientMembers">
+  <table fxFlex="98%" mat-table [dataSource]="dataSource">
+    <!-- Check Column -->
+
+    <ng-container matColumnDef="check">
+      <th mat-header-cell *matHeaderCellDef>
+        <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
+      </th>
+      <td mat-cell *matCellDef="let element">
+        <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
+      </td>
+    </ng-container>
+
+    <!-- Position 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="displayedColumn"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
+  </table>
+</div>
+
+<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <button mat-raised-button matStepperPrevious>
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Previous' | translate }}
+  </button>
+  <button mat-raised-button matStepperNext [disabled]="selectedClientMembers.selectedMembers.length === 0">
+    {{ 'labels.buttons.Next' | translate }}
+    <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+  </button>
+</div>

src/app/savings/savings-account-stepper/savings-active-client-members/savings-active-client-members.component.scss

@@ -0,0 +1,11 @@
+table {
+  width: 100%;
+}
+
+.mat-elevation-z1 {
+  margin: 1em 0 1.5em;
+}
+
+.margin-t {
+  margin-top: 1em;
+}

src/app/savings/savings-account-stepper/savings-active-client-members/savings-active-client-members.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SavingsActiveClientMembersComponent } from './savings-active-client-members.component';
+
+describe('SavingsActiveClientMembersComponent', () => {
+  let component: SavingsActiveClientMembersComponent;
+  let fixture: ComponentFixture<SavingsActiveClientMembersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SavingsActiveClientMembersComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SavingsActiveClientMembersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/savings/savings-account-stepper/savings-active-client-members/savings-active-client-members.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit, OnChanges, Input } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+
+@Component({
+  selector: 'mifosx-savings-active-client-members',
+  templateUrl: './savings-active-client-members.component.html',
+  styleUrls: ['./savings-active-client-members.component.scss']
+})
+export class SavingsActiveClientMembersComponent implements OnInit {
+  @Input() activeClientMembers?: any;
+  selectAllItems = false;
+  displayedColumn: string[] = [
+    'check',
+    'id',
+    'name'
+  ];
+
+  constructor() {}
+
+  dataSource: any;
+  ngOnInit(): void {
+    console.log('Active Client Members in LoansActiveClientMembersComponent:', this.activeClientMembers);
+    this.dataSource = new MatTableDataSource<any>(this.activeClientMembers);
+  }
+  get selectedClientMembers() {
+    return { selectedMembers: this.activeClientMembers.filter((item: any) => item.selected) };
+  }
+
+  /** Toggle all checks */
+  toggleSelects() {
+    for (const member of this.activeClientMembers) {
+      member.selected = this.selectAllItems;
+    }
+  }
+
+  /** Check if all the checks are selected */
+  toggleSelect() {
+    const len = this.activeClientMembers.length;
+    this.selectAllItems =
+      len === 0 ? false : this.activeClientMembers.filter((item: any) => item.selected).length === len;
+  }
+}

src/app/savings/savings.module.ts

@@ -53,6 +53,7 @@ import { DatatableTransactionTabComponent } from './savings-account-view/transac
 import { SavingsTransactionGeneralTabComponent } from './savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component';
 import { SavingsTransactionDatatableTabComponent } from './savings-account-view/transactions/view-transaction/savings-transaction-datatable-tab/savings-transaction-datatable-tab.component';
 import { GeneralTabComponent } from './savings-account-view/general-tab/general-tab.component';
+import { SavingsActiveClientMembersComponent } from './savings-account-stepper/savings-active-client-members/savings-active-client-members.component';
 
 /**
  * Savings Module
@@ -111,7 +112,8 @@ import { GeneralTabComponent } from './savings-account-view/general-tab/general-
     DatatableTransactionTabComponent,
     SavingsTransactionGeneralTabComponent,
     SavingsTransactionDatatableTabComponent,
-    GeneralTabComponent
+    GeneralTabComponent,
+    SavingsActiveClientMembersComponent
   ],
   providers: []
 })