Fix/multirow data datatable (#1741)

* Fix charge payment method edition

* Fix DataTables due incorrect records shown

---------

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
This commit is contained in:
José Alberto Hernández
2023-04-24 22:08:23 -06:00
committed by GitHub
co-authored by Jose Alberto Hernandez
parent 7306781db8
commit 625d75a0f5
2 changed files with 26 additions and 30 deletions
@@ -1,4 +1,4 @@
<div class="tab-container mat-typography"> <div class="tab-container mat-typography" id="selector-{{datatableName}}">
<div fxLayout="row" fxLayoutAlign="start"> <div fxLayout="row" fxLayoutAlign="start">
<div class="m-b-10"> <div class="m-b-10">
@@ -11,23 +11,25 @@
</button> </button>
</span> </span>
<span *mifosxHasPermission="'DELETE_' + datatableName"> <span *mifosxHasPermission="'DELETE_' + datatableName">
<button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="hasEntityData"> <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 <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
</button> </button>
</span> </span>
</div> </div>
</div> </div>
<table #dataTable mat-table [hidden]="!hasEntityData" [dataSource]="datatableData" class="mat-elevation-z1 m-b-25"> <div class="m-t-10" *ngIf="dataObject.data.length > 0">
<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"> <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
<th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th> <th mat-header-cell class="right" *matHeaderCellDef> {{datatableColumn}} </th>
<td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td> <td mat-cell class="right" *matCellDef="let data">{{ formatValue(i, data.row[i]) }}</td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="datatableColumns"></tr> <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
<tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr> <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
</table> </table>
</div>
</div> </div>
@@ -34,7 +34,6 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
/** Toggle button visibility */ /** Toggle button visibility */
showDeleteBotton: boolean; showDeleteBotton: boolean;
hasEntityData = false;
/** Data Table Reference */ /** Data Table Reference */
@ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>; @ViewChild('dataTable', { static: true }) dataTableRef: MatTable<Element>;
@@ -56,9 +55,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
private datatables: Datatables, private datatables: Datatables,
private dateFormat: DateFormatPipe, private dateFormat: DateFormatPipe,
private dateTimeFormat: DatetimeFormatPipe, private dateTimeFormat: DatetimeFormatPipe,
private numberFormat: DecimalPipe) { private numberFormat: DecimalPipe) { }
}
/** /**
* Fetches data table name from route params. * Fetches data table name from route params.
@@ -72,17 +69,12 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
return columnHeader.columnName; return columnHeader.columnName;
}); });
this.datatableData = this.dataObject.data; this.datatableData = this.dataObject.data;
this.hasEntityData = (this.datatableData && this.datatableData.length > 0);
console.log(this.hasEntityData);
console.log(this.dataObject.data);
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.datatableName = null;
this.datatableColumns = null; this.datatableColumns = null;
this.datatableData = null; this.datatableData = null;
this.hasEntityData = false;
console.log(this.hasEntityData);
console.log(this.dataObject.data);
} }
/** /**
@@ -135,16 +127,18 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy {
} }
formatValue(index: number, value: any): any { formatValue(index: number, value: any): any {
const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType; if (this.dataObject.columnHeaders && this.dataObject.columnHeaders[index]) {
if (columnDisplayType === 'DATE') { const columnDisplayType = this.dataObject.columnHeaders[index].columnDisplayType;
return this.dateFormat.transform(value); if (columnDisplayType === 'DATE') {
} else if (columnDisplayType === 'DATETIME') { return this.dateFormat.transform(value);
return this.dateTimeFormat.transform(value); } else if (columnDisplayType === 'DATETIME') {
} else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') { return this.dateTimeFormat.transform(value);
if (typeof value === 'number') { } else if (columnDisplayType === 'INTEGER' || columnDisplayType === 'DECIMAL') {
return this.numberFormat.transform(value); if (typeof value === 'number') {
} else { return this.numberFormat.transform(value);
return value; } else {
return value;
}
} }
} }
return value; return value;