@iapps/ng-dhis2-ui 1.1.3 → 1.1.5

package/fesm2022/iapps-ng-dhis2-ui.mjs

@@ -3587,9 +3587,14 @@ class DataTableUIComponent extends ReactWrapperModule {
         this.DataTableUI = () => {
             const [columns, setColumns] = useState([]);
             const [tableData, setTableData] = useState([]);
+            const [loading, setLoading] = useState(true);
             useEffect(() => {
-                if (!this.data || !this.columnDefinitions)
+                const hasData = this.data?.length > 0;
+                const hasColumns = this.columnDefinitions?.length > 0;
+                if (!hasData || !hasColumns) {
+                    setLoading(true);
                     return;
+                }
                 const filteredColumns = this.columnDefinitions.filter((col) => col.visible !== false);
                 const sortedColumns = filteredColumns.sort((a, b) => {
                     const indexA = Number(a.index) || 0;
@@ -3598,32 +3603,40 @@ class DataTableUIComponent extends ReactWrapperModule {
                 });
                 setColumns(sortedColumns);
                 setTableData(this.data);
+                setLoading(false);
             }, [this.data, this.columnDefinitions]);
             const getDropdownOptions = (row) => {
                 return (this.actionOptions || []).map((option) => ({
                     ...option,
                     onClick: () => {
-                        // Ensure the onClick is called with the correct context
                         if (option.onClick) {
-                            option.onClick(row); // Passing row to the handler
+                            option.onClick(row);
                         }
-                        this.actionSelected.emit({ action: option.label, row }); // Emit action and row details
+                        this.actionSelected.emit({ action: option.label, row });
                     },
                 }));
             };
-            return (React__default.createElement("div", null,
-                React__default.createElement(DataTable, null,
-                    React__default.createElement(TableHead, null,
-                        React__default.createElement(DataTableRow, null,
-                            columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.column }, col.display))),
-                            this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableColumnHeader, null, "Actions")))),
-                    React__default.createElement(TableBody, null, tableData.map((row, rowIndex) => (React__default.createElement(DataTableRow, { key: rowIndex },
-                        columns.map((col) => (React__default.createElement(DataTableCell, { key: col.column }, row[col.column] || '-'))),
-                        this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableCell, null,
-                            React__default.createElement(DropdownMenu, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.(row) }))))))),
-                    React__default.createElement(TableFoot, null,
-                        React__default.createElement(DataTableRow, null,
-                            React__default.createElement(DataTableCell, { colSpan: columns.length + 1 }))))));
+            return (React__default.createElement("div", null, loading ? (React__default.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: 8,
+                } },
+                React__default.createElement(CircularLoader$1, { small: true }),
+                React__default.createElement("div", { style: {
+                        fontSize: 14,
+                    } }, "Loading"))) : (React__default.createElement(DataTable, null,
+                React__default.createElement(TableHead, null,
+                    React__default.createElement(DataTableRow, null,
+                        columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.column }, col.display))),
+                        this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableColumnHeader, null, "Actions")))),
+                React__default.createElement(TableBody, null, tableData.map((row, rowIndex) => (React__default.createElement(DataTableRow, { key: rowIndex },
+                    columns.map((col) => (React__default.createElement(DataTableCell, { key: col.column }, row[col.column] || '-'))),
+                    this.actionOptions && this.actionOptions.length > 0 && (React__default.createElement(DataTableCell, null,
+                        React__default.createElement(DropdownMenu, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.(row) }))))))),
+                React__default.createElement(TableFoot, null,
+                    React__default.createElement(DataTableRow, null,
+                        React__default.createElement(DataTableCell, { colSpan: columns.length + 1 })))))));
         };
     }
     async ngAfterViewInit() {
@@ -3633,8 +3646,17 @@ class DataTableUIComponent extends ReactWrapperModule {
         this.component = this.DataTableUI;
         this.render();
     }
+    ngOnChanges(changes) {
+        if (changes['data'] || changes['columnDefinitions']) {
+            if (!this.elementRef)
+                throw new Error('No element ref');
+            this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+            this.component = this.DataTableUI;
+            this.render();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: DataTableUIComponent, isStandalone: false, selector: "app-data-table-ui", inputs: { data: "data", columnDefinitions: "columnDefinitions", actionOptions: "actionOptions" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: DataTableUIComponent, isStandalone: false, selector: "app-data-table-ui", inputs: { data: "data", columnDefinitions: "columnDefinitions", actionOptions: "actionOptions" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DataTableUIComponent, decorators: [{
             type: Component,