Fix datatable multirow multiple selection and deletion (#1764)
Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>
This commit is contained in:
co-authored by
Jose Alberto Hernandez
parent
75686c7f4c
commit
6bba522108
+7
-7
@@ -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>
|
||||
|
||||
+17
-7
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user