Fix datatable multirow multiple selection and deletion (#1764)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>
This commit is contained in:
José Alberto Hernández
2023-06-06 21:54:13 -06:00
committed by GitHub
co-authored by Jose Alberto Hernandez
parent 75686c7f4c
commit 6bba522108
8 changed files with 45 additions and 25 deletions
@@ -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>
@@ -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 */