Allow to delete rows from datatatble multirow (#1751)

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

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

@@ -4,12 +4,17 @@
     <div class="m-b-10">
       <h3>{{datatableName}}</h3>
     </div>
-    <div class="action-button m-b-5" fxLayoutGap="10px">
+    <div class="action-button m-b-7" fxLayoutGap="10px">
       <span *mifosxHasPermission="'CREATE_' + datatableName">
         <button mat-raised-button color="primary" (click)="add()">
           <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
+        </button>
+      </span>
       <span *mifosxHasPermission="'DELETE_' + datatableName">
         <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data.length > 0">
           <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
@@ -22,8 +27,21 @@
     <table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z1 m-b-25">
 
       <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
-        <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
+        <ng-container *ngIf="i == 0">
-        <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
+          <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)">
+            </mat-checkbox>
+          </td>
+        </ng-container>
+
+        <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]) }}
+          </td>
+        </ng-container>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>

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

@@ -1,3 +1,5 @@
+@import "assets/styles/helper";
+
 .tab-container {
   padding: 1%;
   margin: 1%;
@@ -8,3 +10,8 @@
       width: 100%;
   }
 }
+
+.tobe-deleted {
+  text-decoration: line-through;
+  color: $orange;
+}

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

@@ -1,5 +1,7 @@
+import { SelectionModel } from '@angular/cdk/collections';
 import { DecimalPipe } from '@angular/common';
 import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
@@ -12,6 +14,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { SystemService } from 'app/system/system.service';
+import * as _ from 'lodash';
 
 @Component({
   selector: 'mifosx-datatable-multi-row',
@@ -20,6 +23,7 @@ import { SystemService } from 'app/system/system.service';
 })
 export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges {
 
+  SELECT_NAME_FIELD:string = 'select';
   /** Data Object */
   @Input() dataObject: any;
   @Input() entityId: string;
@@ -34,6 +38,8 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
 
   /** Toggle button visibility */
   showDeleteBotton: boolean;
+  /** Row Selection Data */
+  selection: SelectionModel<any>;
 
   /** Data Table Reference */
   @ViewChild('dataTable') dataTableRef: MatTable<Element>;
@@ -62,6 +68,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
    * subscription is required due to asynchronicity.
    */
   ngOnInit() {
+    this.selection = new SelectionModel(true, []);
     this.route.params.subscribe((routeParams: any) => {
       this.datatableName = routeParams.datatableName;
     });
@@ -79,10 +86,12 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
   }
 
   setData() {
-    this.datatableColumns = this.dataObject.columnHeaders.map((columnHeader: any) => {
+    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);
 
     if (this.dataTableRef) {
       this.dataTableRef.renderRows();
@@ -142,6 +151,26 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
     });
   }
 
+  /**
+   * Deletes all rows of the given multi row data table.
+   */
+  deleteSelected() {
+    const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `the ${this.selection.selected.length} items selected of ${this.datatableName}` }
+    });
+    deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.selection.selected.forEach((data) => {
+          this.systemService.deleteDatatableEntry(this.entityId, data.row[1], this.datatableName).subscribe(() => {
+            this.datatableData.forEach((item: any, index: any) => {
+              if (item.row[1] === data.row[1]) delete this.datatableData[index]
+            });
+          });
+        });
+      }
+    });
+  }
+
   formatValue(index: number, value: any): any {
     if (this.dataObject.columnHeaders && this.dataObject.columnHeaders[index]) {
       const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
@@ -160,5 +189,38 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
     return value;
   }
 
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    const numSelected = this.selection.selected;
+    return (this.datatableData.length == numSelected);
+  }
+
+  isAnySelected() {
+    return (this.selection.selected.length > 0);
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle(change: MatCheckboxChange): void {
+    if (change.checked) {
+      this.datatableData.forEach((row: any) => this.selection.select(row));
+    } else {
+      this.selection = new SelectionModel(true, []);
+    }
+  }
+
+  /** The label for the checkbox on the passed row */
+  checkboxLabel(row?: any): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+  }
+
+  isToDelete(data: any): string {
+    if (this.selection.isSelected(data)) {
+      return 'tobe-deleted';
+    }
+    return '';
+  }
 
 }

src/app/system/system.service.ts

@@ -717,6 +717,11 @@ export class SystemService {
     return this.http.delete(`/datatables/${datatableName}/${entityId}`, { params: httpParams });
   }
 
+  deleteDatatableEntry(entityId: string, rowId: string, datatableName: string) {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.delete(`/datatables/${datatableName}/${entityId}/${rowId}`, { params: httpParams });
+  }
+
   getCOBCatchUpStatus() {
     return this.http.get(`/loans/is-catch-up-running`);
   }