@iapps/ng-dhis2-ui 1.1.4 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3587,9 +3587,14 @@ class DataTableUIComponent extends ReactWrapperModule {
|
|
|
3587
3587
|
this.DataTableUI = () => {
|
|
3588
3588
|
const [columns, setColumns] = useState([]);
|
|
3589
3589
|
const [tableData, setTableData] = useState([]);
|
|
3590
|
+
const [loading, setLoading] = useState(true);
|
|
3590
3591
|
useEffect(() => {
|
|
3591
|
-
|
|
3592
|
+
const hasData = this.data?.length > 0;
|
|
3593
|
+
const hasColumns = this.columnDefinitions?.length > 0;
|
|
3594
|
+
if (!hasData || !hasColumns) {
|
|
3595
|
+
setLoading(true);
|
|
3592
3596
|
return;
|
|
3597
|
+
}
|
|
3593
3598
|
const filteredColumns = this.columnDefinitions.filter((col) => col.visible !== false);
|
|
3594
3599
|
const sortedColumns = filteredColumns.sort((a, b) => {
|
|
3595
3600
|
const indexA = Number(a.index) || 0;
|
|
@@ -3598,32 +3603,40 @@ class DataTableUIComponent extends ReactWrapperModule {
|
|
|
3598
3603
|
});
|
|
3599
3604
|
setColumns(sortedColumns);
|
|
3600
3605
|
setTableData(this.data);
|
|
3606
|
+
setLoading(false);
|
|
3601
3607
|
}, [this.data, this.columnDefinitions]);
|
|
3602
3608
|
const getDropdownOptions = (row) => {
|
|
3603
3609
|
return (this.actionOptions || []).map((option) => ({
|
|
3604
3610
|
...option,
|
|
3605
3611
|
onClick: () => {
|
|
3606
|
-
// Ensure the onClick is called with the correct context
|
|
3607
3612
|
if (option.onClick) {
|
|
3608
|
-
option.onClick(row);
|
|
3613
|
+
option.onClick(row);
|
|
3609
3614
|
}
|
|
3610
|
-
this.actionSelected.emit({ action: option.label, row });
|
|
3615
|
+
this.actionSelected.emit({ action: option.label, row });
|
|
3611
3616
|
},
|
|
3612
3617
|
}));
|
|
3613
3618
|
};
|
|
3614
|
-
return (React__default.createElement("div", null,
|
|
3615
|
-
|
|
3616
|
-
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
|
|
3619
|
+
return (React__default.createElement("div", null, loading ? (React__default.createElement("div", { style: {
|
|
3620
|
+
display: 'flex',
|
|
3621
|
+
alignItems: 'center',
|
|
3622
|
+
gap: 8,
|
|
3623
|
+
padding: 8,
|
|
3624
|
+
} },
|
|
3625
|
+
React__default.createElement(CircularLoader$1, { small: true }),
|
|
3626
|
+
React__default.createElement("div", { style: {
|
|
3627
|
+
fontSize: 14,
|
|
3628
|
+
} }, "Loading"))) : (React__default.createElement(DataTable, null,
|
|
3629
|
+
React__default.createElement(TableHead, null,
|
|
3630
|
+
React__default.createElement(DataTableRow, null,
|
|
3631
|
+
columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.column }, col.display))),
|
|
3632
|
+
this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableColumnHeader, null, "Actions")))),
|
|
3633
|
+
React__default.createElement(TableBody, null, tableData.map((row, rowIndex) => (React__default.createElement(DataTableRow, { key: rowIndex },
|
|
3634
|
+
columns.map((col) => (React__default.createElement(DataTableCell, { key: col.column }, row[col.column] || '-'))),
|
|
3635
|
+
this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableCell, null,
|
|
3636
|
+
React__default.createElement(DropdownMenu, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.(row) }))))))),
|
|
3637
|
+
React__default.createElement(TableFoot, null,
|
|
3638
|
+
React__default.createElement(DataTableRow, null,
|
|
3639
|
+
React__default.createElement(DataTableCell, { colSpan: columns.length + 1 })))))));
|
|
3627
3640
|
};
|
|
3628
3641
|
}
|
|
3629
3642
|
async ngAfterViewInit() {
|
|
@@ -3634,7 +3647,6 @@ class DataTableUIComponent extends ReactWrapperModule {
|
|
|
3634
3647
|
this.render();
|
|
3635
3648
|
}
|
|
3636
3649
|
ngOnChanges(changes) {
|
|
3637
|
-
console.log("THIS IS MORE");
|
|
3638
3650
|
if (changes['data'] || changes['columnDefinitions']) {
|
|
3639
3651
|
if (!this.elementRef)
|
|
3640
3652
|
throw new Error('No element ref');
|