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.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 '';
+  }
 
 }