@iapps/ng-dhis2-ui 1.1.37 → 1.1.40

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

@@ -25,7 +25,7 @@ import { Layer } from '@dhis2-ui/layer';
 import { CircularLoader } from '@dhis2-ui/loader';
 import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
 import parse from 'html-react-parser';
-import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
+import { Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, spacers as spacers$1, colors as colors$1, IconEdit16, theme as theme$1, Tooltip, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, IconFilter16, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
 import { isObject, isString, sortBy, isArray, find, camelCase, flatten, head, isEmpty } from 'lodash';
 import cx from 'classnames';
@@ -3327,7 +3327,8 @@ const addActionsColumn = (columns, actionOptions) => {
 class LineListTableComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
-        this.showApprovalButton = false;
+        this.dispatchTeis = false;
+        this.showFilterButton = false;
         this.actionSelected = new EventEmitter();
         this.reactStateUpdaters = null;
         this.approvalSelected = new EventEmitter();
@@ -3357,6 +3358,7 @@ class LineListTableComponent extends ReactWrapperModule {
             const [isButtonLoading, setIsButtonLoading] = useState(this.isButtonLoading);
             const [filteredColumns, setFilteredColumns] = useState();
             const [inputValues, setInputValues] = useState({});
+            const [filters, setFilters] = useState(false);
             // Store updaters in refs for Angular to access
             const updateRefs = useRef({
                 setProgramIdState,
@@ -3476,15 +3478,6 @@ class LineListTableComponent extends ReactWrapperModule {
                     }
                 });
             };
-            // const handleInputChange = (key: string, value: string) => {
-            //   setInputValues((prevValues) => ({
-            //     ...prevValues,
-            //     [key]: value ?? '', // Ensure no undefined values
-            //   }));
-            // };
-            // if (!filteredColumns || filteredColumns.length === 0) {
-            //   return <div>No fields available</div>;
-            // }
             const handleInputChange = (key, value) => {
                 setInputValues((prevValues) => ({
                     ...prevValues,
@@ -3500,42 +3493,9 @@ class LineListTableComponent extends ReactWrapperModule {
                     // console.log(`Updated Filters:`, updatedFilters); // Debugging
                     return updatedFilters;
                 });
-                // setAttributeFiltersState((prevFilters = []) => {
-                //   // Check if attribute already exists
-                //   const existingFilterIndex = prevFilters.findIndex(
-                //     (f) => f.attribute === key
-                //   );
-                //   // Create a new filter object
-                //   const newFilter = { attribute: key, operator: 'like', value };
-                //   if (existingFilterIndex !== -1) {
-                //     // If attribute exists, update its value
-                //     const updatedFilters = [...prevFilters];
-                //     updatedFilters[existingFilterIndex] = newFilter;
-                //     console.log(`Updated Filters:`, updatedFilters); // Log updated filter list
-                //     return updatedFilters;
-                //   } else {
-                //     // If attribute doesn't exist, add a new object
-                //     return [...prevFilters, newFilter];
-                //   }
-                // });
             };
-            // console.log(
-            //   'these are the filtered columns which have the attributes neede',
-            //   filteredColumns
-            // );
             return (React__default.createElement("div", null,
-                React__default.createElement("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' } }, (filteredColumns ?? []).map(({ label, key }) => (React__default.createElement(InputField$1, { key: key, label: label, value: inputValues[key] || '', onChange: (e) => {
-                        // console.log(`Event for key "${key}":`, e);
-                        // Check if it's a standard event with target.value
-                        if ('target' in e && e.target) {
-                            handleInputChange(key, e.target.value);
-                        }
-                        // Check if it's a DHIS2 UI event with direct value
-                        else if ('value' in e) {
-                            handleInputChange(key, e.value ?? '');
-                        }
-                    } })))),
-                this.showApprovalButton && (React__default.createElement("div", { style: {
+                React__default.createElement("div", { style: {
                         width: '100%',
                         display: 'flex',
                         justifyContent: 'flex-end',
@@ -3543,7 +3503,45 @@ class LineListTableComponent extends ReactWrapperModule {
                         gap: 8,
                         padding: 8,
                         marginBottom: 16,
-                    } }, isButtonLoading ? (React__default.createElement(CircularLoader$1, { small: true })) : (React__default.createElement(Button$1, { className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", onClick: handleApprovalClick, primary: true }, this.buttonLabel)))),
+                    } },
+                    this.dispatchTeis &&
+                        (isButtonLoading ? (React__default.createElement(CircularLoader$1, { small: true })) : (React__default.createElement(Button$1, { style: {
+                                backgroundColor: '#3b82f6', // Blue color
+                                color: 'white',
+                                padding: '8px 16px',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                            }, onClick: handleApprovalClick, primary: true }, this.buttonLabel))),
+                    this.showFilterButton && (React__default.createElement(Button$1, { style: {
+                            backgroundColor: '#6b7280', // Gray color
+                            color: 'white',
+                            padding: '8px 16px',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 8,
+                        }, onClick: () => {
+                            setFilters(!filters);
+                        }, secondary: true },
+                        React__default.createElement(IconFilter16, null),
+                        filters ? 'Hide Filters' : 'Show Filters'))),
+                filters && (React__default.createElement("div", { style: {
+                        display: 'flex',
+                        gap: '10px',
+                        flexWrap: 'wrap',
+                        paddingBottom: '16px',
+                    } }, (filteredColumns ?? []).map(({ label, key }) => (React__default.createElement(InputField$1, { key: key, label: label, value: inputValues[key] || '', onChange: (e) => {
+                        console.log(`Event for key "${key}":`, e);
+                        // Check if it's a standard event with target.value
+                        if ('target' in e && e.target) {
+                            handleInputChange(key, e.target.value);
+                        }
+                        // Check if it's an event with direct value
+                        else if ('value' in e) {
+                            handleInputChange(key, e.value ?? '');
+                        }
+                    } }))))),
                 loading ? (React__default.createElement("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
@@ -3611,7 +3609,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", showApprovalButton: "showApprovalButton", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", showFilterButton: "showFilterButton", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
@@ -3634,7 +3632,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], ouMode: [{
                 type: Input
-            }], showApprovalButton: [{
+            }], dispatchTeis: [{
+                type: Input
+            }], showFilterButton: [{
                 type: Input
             }], actionSelected: [{
                 type: Output