Fix datatable multirow multiple selection and deletion (#1764)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/clients/clients.component.ts

@@ -25,7 +25,7 @@ export class ClientsComponent implements OnInit {
 
   totalRows: number;
   isLoading = false;
-  
+
   pageSize = 50;
   currentPage = 0;
   filterText = '';

src/app/clients/clients.service.ts

@@ -389,7 +389,7 @@ export class ClientsService {
         },
         page,
         size: pageSize
-    }
+    };
     if (sortAttribute !== '' && sortDirection !== '') {
       request = {
         ...request,
@@ -399,7 +399,7 @@ export class ClientsService {
           property: sortAttribute
           }
         ]
-      }
+      };
     }
     return this.http.post(`/v2/clients/search`, request);
   }

src/app/core/utils/datatables.ts

@@ -12,7 +12,9 @@ import { Dates } from './dates';
 })
 export class Datatables {
 
-  systemFields: string[] = ['id', 'created_at', 'updated_at', 'client_id', 'savings_account_id',
+  systemFields: string[] = ['id', 'created_at', 'updated_at'];
+
+  entitiesIdFields: string[] = ['client_id', 'savings_account_id',
     'loan_id', 'group_id', 'center_id', 'office_id', 'product_loan_id', 'savings_product_id', 'share_product_id'];
 
   constructor(private dateUtils: Dates,
@@ -73,9 +75,17 @@ export class Datatables {
     });
   }
 
+  public isEntityId(columnName: string): boolean {
+    return (this.entitiesIdFields.includes(columnName));
+  }
+
+  public isSystemColumn(columnName: string): boolean {
+    return (this.systemFields.includes(columnName) || this.entitiesIdFields.includes(columnName));
+  }
+
   public filterSystemColumns(columnHeaders: any): any {
     return columnHeaders.filter((column: any, index: number) => {
-      if (!this.systemFields.includes(column.columnName)) {
+      if (!this.isSystemColumn(column.columnName)) {
         column.idx = index;
         return column;
       }

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

@@ -127,7 +127,7 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         'fixedEmiAmount': this.loansAccountTermsData.fixedEmiAmount,
         'maxOutstandingLoanBalance': this.loansAccountTermsData.maxOutstandingLoanBalance,
         'transactionProcessingStrategyCode': this.loansAccountTermsData.transactionProcessingStrategyCode,
-        'interestRateDifferential':this.loansAccountTermsData.interestRateDifferential,
+        'interestRateDifferential': this.loansAccountTermsData.interestRateDifferential,
         'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan
       });
 
@@ -211,7 +211,7 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         'fixedEmiAmount': this.loansAccountTermsData.fixedEmiAmount,
         'maxOutstandingLoanBalance': this.loansAccountTermsData.maxOutstandingLoanBalance,
         'transactionProcessingStrategyCode': this.loansAccountTermsData.transactionProcessingStrategyCode,
-        'interestRateDifferential':this.loansAccountTermsData.interestRateDifferential,
+        'interestRateDifferential': this.loansAccountTermsData.interestRateDifferential,
         'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan
       });
     }
@@ -273,9 +273,9 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
       'fixedEmiAmount': [''],
       'isTopup': [''],
       'maxOutstandingLoanBalance': [''],
-      'interestRateDifferential':[''],
+      'interestRateDifferential': [''],
       'transactionProcessingStrategyCode': ['', Validators.required],
-      'multiDisburseLoan': [false] 
+      'multiDisburseLoan': [false]
     });
   }
 

src/app/loans/loans.service.ts

@@ -587,7 +587,7 @@ export class LoansService {
     delete loansAccountData.isValid;
     loansAccountData.principal = loansAccountData.principalAmount;
     delete loansAccountData.principalAmount;
-    delete loansAccountData.multiDisburseLoan; //this was just added so that disbursement data can be send in the backend
+    delete loansAccountData.multiDisburseLoan; // this was just added so that disbursement data can be send in the backend
     return loansAccountData;
   }
 

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

@@ -147,7 +147,7 @@ export class SavingsAccountTermsStepComponent implements OnChanges, OnInit {
     const payload = this.savingsAccountTermsForm.getRawValue();
     delete payload.currencyCode;
     delete payload.decimal;
-    delete payload.minBalanceForInterestCalculation; //Backend is not accepting minBalanceForInterestCalculation value
+    delete payload.minBalanceForInterestCalculation; // Backend is not accepting minBalanceForInterestCalculation value
     return payload;
   }
 

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html

@@ -10,13 +10,13 @@
           <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
         </button>
       </span>
-      <span *mifosxHasPermission="'DELETE_' + datatableName">
-        <button class="delete-button" mat-raised-button color="warn" (click)="deleteSelected()" *ngIf="dataObject.data.length > 0">
-          <fa-icon icon="trash" [disabled]="!isAnySelected()" class="m-r-10"></fa-icon>Delete Selected
+      <span *mifosxHasPermission="'DELETE_' + datatableName" [fxShow]="isSelected">
+        <button class="delete-button" mat-raised-button color="warn" (click)="deleteSelected()">
+          <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete Selected
         </button>
       </span>
-      <span *mifosxHasPermission="'DELETE_' + datatableName">
-        <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data.length > 0">
+      <span *mifosxHasPermission="'DELETE_' + datatableName" [fxShow]="datatableData.length > 0">
+        <button class="delete-button" mat-raised-button color="warn" (click)="delete()">
           <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
         </button>
       </span>
@@ -31,7 +31,7 @@
           <th mat-header-cell *matHeaderCellDef></th>
           <td mat-cell *matCellDef="let data">
             <mat-checkbox class="center" (click)="$event.stopPropagation()"
-              (change)="$event ? selection.toggle(data) : null" [checked]="selection.isSelected(data)">
+              (change)="$event ? itemToggle(data) : null" [checked]="selection.isSelected(data)">
             </mat-checkbox>
           </td>
         </ng-container>
@@ -39,7 +39,7 @@
         <ng-container *ngIf="i > 0">
           <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
           <td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
-              {{ formatValue(i, data.row[i]) }}
+              {{ formatValue(i, data.row[i - 1]) }}
           </td>
         </ng-container>
       </ng-container>

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts

@@ -40,6 +40,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
   showDeleteBotton: boolean;
   /** Row Selection Data */
   selection: SelectionModel<any>;
+  isSelected = false;
 
   /** Data Table Reference */
   @ViewChild('dataTable') dataTableRef: MatTable<Element>;
@@ -73,6 +74,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
       this.datatableName = routeParams.datatableName;
     });
     this.setData();
+    this.isSelected = false;
   }
 
   ngOnDestroy(): void {
@@ -86,13 +88,15 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
   }
 
   setData() {
-    this.datatableColumns = [this.SELECT_NAME_FIELD].concat(this.dataObject.columnHeaders.map((columnHeader: any) => {
-      return columnHeader.columnName;
-    })
-    );
-    this.datatableData = this.dataObject.data;
-    // console.log(this.datatableData);
+    this.datatableColumns = [this.SELECT_NAME_FIELD];
+    this.dataObject.columnHeaders.filter((columnHeader: any) => {
+      if (!this.datatables.isEntityId(columnHeader.columnName)) {
+        this.datatableColumns.push(columnHeader.columnName);
+        return columnHeader;
+      }
+    });
 
+    this.datatableData = this.dataObject.data;
     if (this.dataTableRef) {
       this.dataTableRef.renderRows();
     }
@@ -198,7 +202,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
   }
 
   isAnySelected() {
-    return (this.selection.selected.length > 0);
+    return (this.selection.selected && this.selection.selected.length > 0);
   }
 
   /** Selects all rows if they are not all selected; otherwise clear selection. */
@@ -208,6 +212,12 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
     } else {
       this.selection = new SelectionModel(true, []);
     }
+    this.isSelected = (this.selection.selected.length > 0);
+  }
+
+  itemToggle(data: any): void {
+    this.selection.toggle(data);
+    this.isSelected = (this.selection.selected.length > 0);
   }
 
   /** The label for the checkbox on the passed row */