@iapps/ng-dhis2-ui 1.2.98 → 1.2.100

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, IconChevronRight16, 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, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, DropdownButton, 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, IconChevronRight16, 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, CircularLoader as CircularLoader$1, Chip, DataTableToolbar, DropdownButton, FlyoutMenu, CalendarInput, TableHead, DataTableRow, DataTableColumnHeader, Layer as Layer$1, Popper, MenuItem as MenuItem$1, IconMore24, DataTableCell, TableBody as TableBody$1, Pagination as Pagination$1, TableFoot, DataTable, FileInputField, FileListItem, MultiSelectField, TextAreaField } from '@dhis2/ui';
 import { isObject, isString, debounce, sortBy, isArray, find, camelCase, flatten, isUndefined, head, isEmpty } from 'lodash';
 import cx from 'classnames';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
@@ -2891,6 +2891,7 @@ class OrganisationUnitSelectionConfig {
         this.allowSingleSelection = params?.allowSingleSelection || false;
         this.batchSize = params?.batchSize;
         this.additionalQueryFields = params?.additionalQueryFields;
+        this.allowCaching = params?.allowCaching;
     }
 }
 
@@ -2899,10 +2900,10 @@ class OrganisationUnitSelectionConfig {
 // license that can be found in the LICENSE file.
 
 class OrganisationUnitSelectorComponent extends ReactWrapperModule {
-    constructor(elementRef, httpClient, ngZone) {
+    constructor(elementRef, ngZone) {
         super(elementRef);
-        this.httpClient = httpClient;
         this.ngZone = ngZone;
+        this.d2 = window.d2Web;
         this.selectedOrgUnits = [];
         this.orgUnitSelectionConfig = new OrganisationUnitSelectionConfig();
         this.selectOrgUnits = new EventEmitter();
@@ -2918,18 +2919,23 @@ class OrganisationUnitSelectorComponent extends ReactWrapperModule {
         this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
         const rootOrgUnits = await this.getRootOrgUnits();
         const config = await this.getAppConfig();
-        this.component = () => (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false }, React__default.createElement(OrgUnitDimension, { selected: this.selectedOrgUnits, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => this.ngZone.run(() => {
-                this.onSelectItems(selectionEvent);
-            }), orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits })));
-        this.render();
+        if (config) {
+            this.component = () => (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false }, React__default.createElement(OrgUnitDimension, { selected: this.selectedOrgUnits, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => this.ngZone.run(() => {
+                    this.onSelectItems(selectionEvent);
+                }), orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits })));
+            this.render();
+        }
     }
     async getAppConfig() {
-        const systemInfo = (await firstValueFrom(this.httpClient.systemInfo()));
+        const systemInfo = this.d2.systemInfo;
+        if (!systemInfo) {
+            return systemInfo;
+        }
         return {
-            baseUrl: (document?.location?.host?.includes('localhost')
+            baseUrl: document?.location?.host?.includes('localhost')
                 ? `${document.location.protocol}//${document.location.host}`
-                : systemInfo['contextPath']),
-            apiVersion: Number(((systemInfo['version'] || '')?.split('.') || [])[1]),
+                : systemInfo.contextPath,
+            apiVersion: systemInfo.apiVersion,
         };
     }
     getOrgUnitAttributeByUsage(usageType) {
@@ -2942,26 +2948,27 @@ class OrganisationUnitSelectorComponent extends ReactWrapperModule {
                 return 'organisationUnits';
         }
     }
-    getRootOrgUnits() {
+    async getRootOrgUnits() {
         const orgUnitAttribute = this.getOrgUnitAttributeByUsage(this.orgUnitSelectionConfig.usageType);
-        return firstValueFrom(this.httpClient
-            .me()
-            .pipe(map((user) => (user ? user[orgUnitAttribute] : []).map((orgUnit) => orgUnit.id))));
+        const currentUser = this.d2?.currentUser;
+        return (currentUser ? currentUser[orgUnitAttribute] : []).map((orgUnit) => orgUnit.id);
     }
-    getOrgUnitGroups() {
-        return firstValueFrom(this.httpClient
-            .get('organisationUnitGroups.json?fields=id,displayName,name&paging=false')
-            .pipe(map((res) => res?.['organisationUnitGroups'])));
+    async getOrgUnitGroups() {
+        const orgUnitGroupResponse = await this.d2?.httpInstance?.get('organisationUnitGroups.json?fields=id,displayName,name&paging=false', {
+            useIndexDb: this.orgUnitSelectionConfig?.allowCaching,
+        });
+        return orgUnitGroupResponse?.data?.['organisationUnitGroups'] ?? [];
     }
-    getOrgUnitLevels() {
-        return firstValueFrom(this.httpClient
-            .get('organisationUnitLevels.json?fields=id,level,displayName,name&paging=false')
-            .pipe(map((res) => res?.['organisationUnitLevels'])));
+    async getOrgUnitLevels() {
+        const orgUnitLevelResponse = await this.d2?.httpInstance?.get('organisationUnitLevels.json?fields=id,level,displayName,name&paging=false', {
+            useIndexDb: this.orgUnitSelectionConfig?.allowCaching,
+        });
+        return orgUnitLevelResponse?.data?.['organisationUnitLevels'] ?? [];
     }
     onSelectItems(selectionEvent) {
         this.selectOrgUnits.emit(selectionEvent.items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: OrganisationUnitSelectorComponent, isStandalone: false, selector: "ng-dhis2-ui-org-unit-selector", inputs: { selectedOrgUnits: "selectedOrgUnits", orgUnitSelectionConfig: "orgUnitSelectionConfig" }, outputs: { selectOrgUnits: "selectOrgUnits" }, usesInheritance: true, ngImport: i0, template: '<ng-container><ng-container>', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: OrganisationUnitSelectorComponent, decorators: [{
@@ -2971,7 +2978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                     template: '<ng-container><ng-container>',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }, { type: i0.NgZone }], propDecorators: { selectedOrgUnits: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { selectedOrgUnits: [{
                 type: Input
             }], orgUnitSelectionConfig: [{
                 type: Input
@@ -3303,96 +3310,299 @@ const OrgUnitSelector = ({ hide, setHide, selectedOrgUnit, setSelectedOrgUnit, s
         React__default.createElement(ButtonStrip$1, { end: true },
             React__default.createElement(Button$1, { onClick: () => setHide(true), secondary: true }, "Close")))));
 
-const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setOrgUnitState, defaultOrgUnit, setHide, startDateState, setStartDateState, endDateState, setEndDateState, visibleFilters, dateStates, inputValues, setInputValues, handleInputChange, handleInputChangeForSelectField, handleDateSelect, prevValue, setPrevValue, showAllFilters, setShowAllFilters, handleSearch, setTempStartDateState, setTempEndDateState, setTempOrgUnitState, tempStartDateState, tempEndDateState, tempOrgUnitState, dataQueryFiltersState, setDataQueryFiltersState, SetOrgUnitModalVisible, showEnrollmentDates, }) => (React__default.createElement(DataTableToolbar, { className: "table-top-toolbar" },
-    React__default.createElement("div", { style: {
-            display: 'flex',
-            // flexDirection: 'column',
-            gap: '10px',
-            flexWrap: 'wrap',
-        } },
+const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setOrgUnitState, defaultOrgUnit, setHide, startDateState, setStartDateState, endDateState, setEndDateState, visibleFilters, dateStates, inputValues, setInputValues, handleInputChange, handleInputChangeForSelectField, handleDateSelect, showAllFilters, setShowAllFilters, setTempStartDateState, setTempEndDateState, setTempOrgUnitState, tempStartDateState, tempEndDateState, tempOrgUnitState, dataQueryFiltersState, setDataQueryFiltersState, SetOrgUnitModalVisible, showEnrollmentDates, handleAdditionalFilters, handleStartDateFilter, handleEndDateFilter, handleOrgUnitFilter, setDateStates, prevInputValues, setPrevInputValues, setTempDataQueryFiltersState, prevDateStates, setPrevDateStates, prevSelectedOrgUnit, setPrevSelectedOrgUnit, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isOpenOrgUnitDropdown, setIsOpenOrgUnitDropdown] = useState(false);
+    const [openDropdownKey, setOpenDropdownKey] = useState(null);
+    //TODO: I HAVE DUPLICATED DROPDOWN AND CLEAR ICON IN MULTIPLE PLACES REQUIRED TO CREATE A REUSABLE DROPDOWN COMPONENT WITH THE CLEAR ICON TO AVOID DUPLICATION
+    const ClearIcon = ({ className, ...props }) => (React__default.createElement("svg", { className: className, ...props, viewBox: "0 0 24 24", width: 16, height: 16 },
+        React__default.createElement("path", { d: "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" })));
+    return (React__default.createElement(DataTableToolbar, { className: "table-top-toolbar" },
         React__default.createElement("div", { style: {
                 display: 'flex',
-                alignItems: 'center',
                 gap: '10px',
                 flexWrap: 'wrap',
             } },
-            React__default.createElement(InputField$1, { key: "location", label: orgUnitLabel ? orgUnitLabel : 'registering unit:', value: selectedOrgUnit, onFocus: () => {
-                    SetOrgUnitModalVisible(true);
-                    setHide(false);
-                }, className: "custom-input", clearable: true, onChange: (event) => {
-                    setSelectedOrgUnit(event.value);
-                    setOrgUnitState(defaultOrgUnit);
-                } }),
-            showEnrollmentDates && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(CalendarInput, { label: "Start date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", 
-                    //clearable={!!tempStartDateState}
-                    //date={tempStartDateState || undefined}
-                    //date={tempStartDateState || "yyyy-mm-dd"}
-                    clearable: !!tempStartDateState && tempStartDateState !== 'dd-mm-yyyy', 
-                    // date={tempStartDateState || 'dd-mm-yyyy'}
-                    date: formatDateForDisplay(tempStartDateState), onDateSelect: (selectedDate) => {
-                        setTempStartDateState(selectedDate.calendarDateString);
-                        if (selectedDate.calendarDateString === null) {
-                            setStartDateState(selectedDate.calendarDateString);
-                        }
-                    } }),
-                React__default.createElement(CalendarInput, { label: "End date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", clearable: !!tempEndDateState && tempEndDateState !== 'dd-mm-yyyy', 
-                    // date={tempEndDateState || 'dd-mm-yyyy'}
-                    date: formatDateForDisplay(tempEndDateState), onDateSelect: (selectedDate) => {
-                        setTempEndDateState(selectedDate.calendarDateString);
-                        if (selectedDate.calendarDateString === null) {
-                            setEndDateState(selectedDate.calendarDateString);
-                        }
-                    } })))),
-        (visibleFilters ?? []).map(({ label, key, valueType, options }) => {
-            if (valueType === 'DATE') {
-                return (React__default.createElement(CalendarInput, { key: key, label: `${label}:`, calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", clearable: !!dateStates[key], date: dateStates[key], onDateSelect: (selectedDate) => {
-                        handleDateSelect(key, selectedDate);
-                        const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
-                        if (selectedDate.calendarDateString === null) {
-                            setDataQueryFiltersState(filteredFilters);
-                        }
-                    } }));
-            }
-            if (options && options.options.length > 0) {
-                return (React__default.createElement(SingleSelectField, { key: key, label: `${label}:`, selected: inputValues[key] || '', className: "custom-select-input", clearable: true, onChange: ({ selected }) => {
-                        setInputValues((prevValues) => ({
-                            ...prevValues,
-                            [key]: selected ?? '',
-                        }));
-                        handleInputChangeForSelectField(key, selected ?? '');
-                        const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
-                        if (selected === '') {
+            React__default.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '10px',
+                    flexWrap: 'wrap',
+                } },
+                React__default.createElement(DropdownButton, { name: "customDropdown", open: isOpenOrgUnitDropdown, onClick: () => setIsOpenOrgUnitDropdown(!isOpenOrgUnitDropdown), component: React__default.createElement("div", null,
+                        React__default.createElement(FlyoutMenu, null,
+                            React__default.createElement("div", { style: { padding: '16px' } },
+                                React__default.createElement(InputField$1, { key: "location", placeholder: orgUnitLabel ? orgUnitLabel : 'registering unit', value: selectedOrgUnit, onFocus: () => {
+                                        SetOrgUnitModalVisible(true);
+                                        setHide(false);
+                                    } }),
+                                React__default.createElement("div", { style: {
+                                        paddingTop: '8px',
+                                        display: 'flex',
+                                        justifyContent: 'flex-end',
+                                    } },
+                                    React__default.createElement(ButtonStrip$1, null,
+                                        React__default.createElement(Button$1, { primary: true, disabled: !selectedOrgUnit, onClick: () => {
+                                                setPrevSelectedOrgUnit(selectedOrgUnit);
+                                                handleOrgUnitFilter();
+                                                setIsOpenOrgUnitDropdown(false);
+                                            } }, "update"),
+                                        React__default.createElement(Button$1, { disabled: !selectedOrgUnit, onClick: () => {
+                                                setSelectedOrgUnit('');
+                                                setPrevSelectedOrgUnit('');
+                                                setOrgUnitState(defaultOrgUnit);
+                                                setTempOrgUnitState(defaultOrgUnit);
+                                                setIsOpenOrgUnitDropdown(false);
+                                            } }, "reset filter")))))) },
+                    orgUnitLabel ? orgUnitLabel : 'registering unit',
+                    ' ',
+                    prevSelectedOrgUnit && ':',
+                    " ",
+                    prevSelectedOrgUnit,
+                    prevSelectedOrgUnit && (React__default.createElement("span", { onClick: (event) => {
+                            event.stopPropagation();
+                            setSelectedOrgUnit('');
+                            setPrevSelectedOrgUnit('');
+                            setOrgUnitState(defaultOrgUnit);
+                            setTempOrgUnitState(defaultOrgUnit);
+                            setIsOpenOrgUnitDropdown(false);
+                        }, style: { display: 'inline-flex', alignItems: 'center' } },
+                        React__default.createElement(ClearIcon, { className: "my-icon-class" })))),
+                showEnrollmentDates && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(DropdownButton, { name: "customDropdown", open: isOpen, onClick: () => setIsOpen(!isOpen), component: React__default.createElement("div", null,
+                            React__default.createElement(FlyoutMenu, null,
+                                React__default.createElement("div", { style: { padding: '16px' } },
+                                    React__default.createElement("div", { style: {
+                                            display: 'flex',
+                                            alignItems: 'flex-end',
+                                            gap: '16px',
+                                        } },
+                                        React__default.createElement(CalendarInput, { calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", date: formatDateForDisplay(tempStartDateState), onDateSelect: (selectedDate) => {
+                                                setTempStartDateState(selectedDate.calendarDateString);
+                                            } }),
+                                        React__default.createElement("span", { style: { paddingBottom: '8px' } }, "to"),
+                                        React__default.createElement(CalendarInput, { calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", date: formatDateForDisplay(tempEndDateState), onDateSelect: (selectedDate) => {
+                                                setTempEndDateState(selectedDate.calendarDateString);
+                                            } })),
+                                    React__default.createElement("div", { style: {
+                                            paddingTop: '8px',
+                                            display: 'flex',
+                                            justifyContent: 'flex-end',
+                                        } },
+                                        React__default.createElement(ButtonStrip$1, null,
+                                            React__default.createElement(Button$1, { primary: true, onClick: () => {
+                                                    handleStartDateFilter();
+                                                    handleEndDateFilter();
+                                                    setIsOpen(false);
+                                                } }, "update"),
+                                            React__default.createElement(Button$1, { onClick: () => {
+                                                    setStartDateState(null);
+                                                    setTempEndDateState(null);
+                                                    setTempStartDateState(null);
+                                                    setEndDateState(null);
+                                                    setIsOpen(false);
+                                                } }, "reset")))))) },
+                        "registration dates ",
+                        (startDateState || endDateState) && ':',
+                        ' ',
+                        startDateState,
+                        endDateState && ` - ${endDateState}`,
+                        (startDateState || endDateState) && (React__default.createElement("span", { onClick: (event) => {
+                                event.stopPropagation();
+                                setStartDateState(null);
+                                setTempEndDateState(null);
+                                setTempStartDateState(null);
+                                setEndDateState(null);
+                                setIsOpen(false);
+                            }, style: { display: 'inline-flex', alignItems: 'center' } },
+                            React__default.createElement(ClearIcon, { className: "my-icon-class" }))))))),
+            (visibleFilters ?? []).map(({ label, key, valueType, options, type }) => {
+                if (valueType === 'DATE') {
+                    return (React__default.createElement(DropdownButton, { name: "customDropdown", open: openDropdownKey === key, onClick: () => {
+                            setOpenDropdownKey(openDropdownKey === key ? null : key);
+                        }, component: React__default.createElement("div", null,
+                            React__default.createElement(FlyoutMenu, null,
+                                React__default.createElement("div", { style: { padding: '16px' } },
+                                    React__default.createElement(CalendarInput, { key: key, calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", date: dateStates[key], onDateSelect: (selectedDate) => {
+                                            handleDateSelect(key, selectedDate, type);
+                                        } }),
+                                    React__default.createElement("div", { style: {
+                                            paddingTop: '8px',
+                                            display: 'flex',
+                                            justifyContent: 'flex-end',
+                                        } },
+                                        React__default.createElement(ButtonStrip$1, null,
+                                            React__default.createElement(Button$1, { primary: true, onClick: () => {
+                                                    setPrevDateStates((prev) => ({
+                                                        ...prev,
+                                                        [key]: dateStates[key],
+                                                    }));
+                                                    handleAdditionalFilters();
+                                                    setOpenDropdownKey(null);
+                                                } }, "update"),
+                                            React__default.createElement(Button$1, { onClick: () => {
+                                                    setIsOpen(false);
+                                                } }, "reset")))))) },
+                        label,
+                        " ",
+                        prevDateStates[key] && ':',
+                        " ",
+                        prevDateStates[key],
+                        prevDateStates[key] && (React__default.createElement("span", { onClick: (event) => {
+                                event.stopPropagation();
+                                setDateStates((prev) => ({
+                                    ...prev,
+                                    [key]: '',
+                                }));
+                                setPrevDateStates((prev) => ({
+                                    ...prev,
+                                    [key]: '',
+                                }));
+                                const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
+                                setDataQueryFiltersState(filteredFilters);
+                                setTempDataQueryFiltersState(filteredFilters);
+                                setOpenDropdownKey(null);
+                            }, style: { display: 'inline-flex', alignItems: 'center' } },
+                            React__default.createElement(ClearIcon, { className: "my-icon-class" })))));
+                }
+                if (options && options.options.length > 0) {
+                    return (React__default.createElement(DropdownButton, { name: "customDropdown", open: openDropdownKey === key, onClick: () => {
+                            setOpenDropdownKey(openDropdownKey === key ? null : key);
+                        }, component: React__default.createElement("div", null,
+                            React__default.createElement(FlyoutMenu, null,
+                                React__default.createElement("div", { style: { padding: '16px' } },
+                                    React__default.createElement(SingleSelectField, { key: key, placeholder: `${label}`, selected: inputValues[key] || '', onChange: ({ selected }) => {
+                                            setInputValues((prevValues) => ({
+                                                ...prevValues,
+                                                [key]: selected ?? '',
+                                            }));
+                                            handleInputChangeForSelectField(key, selected ?? '', type);
+                                        } }, (options.options ?? []).map((opt) => (React__default.createElement(SingleSelectOption, { key: opt.id, label: opt.name, value: opt.code })))),
+                                    React__default.createElement("div", { style: {
+                                            paddingTop: '8px',
+                                            display: 'flex',
+                                            justifyContent: 'flex-end',
+                                        } },
+                                        React__default.createElement(ButtonStrip$1, null,
+                                            React__default.createElement(Button$1, { primary: true, disabled: !inputValues[key] ||
+                                                    inputValues[key] === prevInputValues[key], onClick: () => {
+                                                    setPrevInputValues((prev) => ({
+                                                        ...prev,
+                                                        [key]: inputValues[key],
+                                                    }));
+                                                    handleAdditionalFilters();
+                                                    setOpenDropdownKey(null);
+                                                } }, "update"),
+                                            React__default.createElement(Button$1, { disabled: !inputValues[key], onClick: () => {
+                                                    setInputValues((prevValues) => ({
+                                                        ...prevValues,
+                                                        [key]: '',
+                                                    }));
+                                                    setPrevInputValues((prevValues) => ({
+                                                        ...prevValues,
+                                                        [key]: '',
+                                                    }));
+                                                    handleInputChangeForSelectField(key, '', type);
+                                                    const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
+                                                    setDataQueryFiltersState(filteredFilters);
+                                                    setTempDataQueryFiltersState(filteredFilters);
+                                                    setOpenDropdownKey(null);
+                                                } }, "reset")))))) },
+                        label,
+                        " ",
+                        prevInputValues[key] && ':',
+                        " ",
+                        prevInputValues[key],
+                        prevInputValues[key] && (React__default.createElement("span", { onClick: (event) => {
+                                event.stopPropagation();
+                                setInputValues((prevValues) => ({
+                                    ...prevValues,
+                                    [key]: '',
+                                }));
+                                setPrevInputValues((prevValues) => ({
+                                    ...prevValues,
+                                    [key]: '',
+                                }));
+                                handleInputChangeForSelectField(key, '', type);
+                                const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
+                                setDataQueryFiltersState(filteredFilters);
+                                setTempDataQueryFiltersState(filteredFilters);
+                                setOpenDropdownKey(null);
+                            }, style: { display: 'inline-flex', alignItems: 'center' } },
+                            React__default.createElement(ClearIcon, { className: "my-icon-class" })))));
+                }
+                return (React__default.createElement(DropdownButton, { name: "customDropdown", open: openDropdownKey === key, onClick: () => {
+                        setOpenDropdownKey(openDropdownKey === key ? null : key);
+                    }, component: React__default.createElement("div", null,
+                        React__default.createElement(FlyoutMenu, null,
+                            React__default.createElement("div", { style: { padding: '16px' } },
+                                React__default.createElement(InputField$1, { key: key, placeholder: `${label}`, value: inputValues[key] || '', onChange: (e) => {
+                                        const currentValue = 'target' in e ? e.target.value : e.value ?? '';
+                                        setInputValues((prevValues) => ({
+                                            ...prevValues,
+                                            [key]: currentValue,
+                                        }));
+                                        handleInputChange(key, currentValue, type);
+                                    } }),
+                                React__default.createElement("div", { style: {
+                                        paddingTop: '8px',
+                                        display: 'flex',
+                                        justifyContent: 'flex-end',
+                                    } },
+                                    React__default.createElement(ButtonStrip$1, null,
+                                        React__default.createElement(Button$1, { primary: true, disabled: !inputValues[key] ||
+                                                inputValues[key] === prevInputValues[key], onClick: () => {
+                                                setPrevInputValues((prev) => ({
+                                                    ...prev,
+                                                    [key]: inputValues[key],
+                                                }));
+                                                handleAdditionalFilters();
+                                                setOpenDropdownKey(null);
+                                            } }, "update"),
+                                        React__default.createElement(Button$1, { disabled: !inputValues[key], onClick: () => {
+                                                setInputValues((prevValues) => ({
+                                                    ...prevValues,
+                                                    [key]: '',
+                                                }));
+                                                setPrevInputValues((prevValues) => ({
+                                                    ...prevValues,
+                                                    [key]: '',
+                                                }));
+                                                // Remove the filter for this key
+                                                const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
+                                                setDataQueryFiltersState(filteredFilters);
+                                                setTempDataQueryFiltersState(filteredFilters);
+                                                setOpenDropdownKey(null);
+                                            } }, "reset")))))) },
+                    label,
+                    " ",
+                    prevInputValues[key] && ':',
+                    " ",
+                    prevInputValues[key],
+                    prevInputValues[key] && (React__default.createElement("span", { onClick: (event) => {
+                            event.stopPropagation();
+                            // Clear the input value for this key
+                            setInputValues((prevValues) => ({
+                                ...prevValues,
+                                [key]: '',
+                            }));
+                            setPrevInputValues((prevValues) => ({
+                                ...prevValues,
+                                [key]: '',
+                            }));
+                            // Remove the filter for this key
+                            const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
                             setDataQueryFiltersState(filteredFilters);
-                        }
-                    } }, (options.options ?? []).map((opt) => (React__default.createElement(SingleSelectOption, { key: opt.id, label: opt.name, value: opt.code })))));
-            }
-            return (React__default.createElement(InputField$1, { key: key, label: `${label}:`, className: "custom-input", value: inputValues[key] || '', clearable: true, onChange: (e) => {
-                    const currentValue = 'target' in e ? e.target.value : e.value ?? '';
-                    setInputValues((prevValues) => ({
-                        ...prevValues,
-                        [key]: currentValue,
-                    }));
-                    const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
-                    if (currentValue === '') {
-                        setDataQueryFiltersState(filteredFilters);
-                    }
-                }, onBlur: (e) => {
-                    const currentValue = 'target' in e ? e.target.value : e.value ?? '';
-                    if (currentValue !== '' && currentValue !== prevValue) {
-                        handleInputChange(key, currentValue);
-                        setPrevValue(currentValue);
-                    }
-                } }));
-        }),
-        React__default.createElement("div", { style: {
-                display: 'flex',
-                // alignItems: 'center',
-                gap: '10px',
-                // flexWrap: 'wrap',
-            } },
-            React__default.createElement(Button$1, { onClick: handleSearch }, "Search"),
-            React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters')))));
+                            setTempDataQueryFiltersState(filteredFilters);
+                        }, style: { display: 'inline-flex', alignItems: 'center' } },
+                        React__default.createElement(ClearIcon, { className: "my-icon-class" })))));
+            }),
+            React__default.createElement("div", { style: {
+                    display: 'flex',
+                    gap: '10px',
+                } },
+                React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters')))));
+};
 function formatDateForDisplay(dateString) {
     if (!dateString || dateString === 'dd-mm-yyyy')
         return 'dd-mm-yyyy';
@@ -3639,7 +3849,13 @@ const TableRow = ({ row, columns, getTextColorFromBackGround, actionOptions, act
 //     )}
 //   </DHISTableBody>
 // );
-const TableBody = ({ data, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectedRows, onRowToggle, selectable, showActionButtons }) => (React__default.createElement(TableBody$1, null, data.length > 0 ? (data.map((row) => (React__default.createElement(TableRow, { key: row.index.value, row: row, columns: columns, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, actionSelected: actionSelected, isChecked: selectedRows.some((r) => r.index?.value === row.index?.value), onToggle: onRowToggle, selectable: selectable, showActionButtons: showActionButtons })))) : (React__default.createElement(DataTableRow, null,
+const TableBody = ({ data, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectedRows, onRowToggle, selectable, showActionButtons, error, }) => (React__default.createElement(TableBody$1, null, error ? (React__default.createElement(DataTableRow, null,
+    React__default.createElement(DataTableCell, { colSpan: columns.length.toString(), style: {
+            textAlign: 'center',
+            fontWeight: 'bold',
+            color: 'red',
+            padding: '20px',
+        } }, error))) : data.length > 0 ? (data.map((row) => (React__default.createElement(TableRow, { key: row.index.value, row: row, columns: columns, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, actionSelected: actionSelected, isChecked: selectedRows.some((r) => r.index?.value === row.index?.value), onToggle: onRowToggle, selectable: selectable, showActionButtons: showActionButtons })))) : (React__default.createElement(DataTableRow, null,
     React__default.createElement(DataTableCell, { colSpan: columns.length.toString(), style: {
             textAlign: 'center',
             fontWeight: 'bold',
@@ -3696,7 +3912,7 @@ const TableFooter = ({ pager, setPager, columns }) => {
 //       </DataTable>
 //     );
 //   };
-const LineListTable = ({ columns, data, pager, setPager, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectable, rowsSelected, showActionButtons }) => {
+const LineListTable = ({ columns, data, pager, setPager, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectable, rowsSelected, showActionButtons, error }) => {
     const [selectedRows, setSelectedRows] = useState([]);
     const handleRowToggle = (row) => {
         const exists = selectedRows.find((r) => r.index?.value === row.index?.value);
@@ -3713,7 +3929,7 @@ const LineListTable = ({ columns, data, pager, setPager, getTextColorFromBackGro
     };
     return (React__default.createElement(DataTable, null,
         React__default.createElement(TableHeader, { columns: columns, allSelected: selectedRows.length === data.length && data.length > 0, onSelectAll: handleSelectAll, selectable: selectable, showActionButtons: showActionButtons }),
-        React__default.createElement(TableBody, { data: data, columns: columns, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, actionSelected: actionSelected, selectedRows: selectedRows, onRowToggle: handleRowToggle, selectable: selectable, showActionButtons: showActionButtons }),
+        React__default.createElement(TableBody, { data: data, columns: columns, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, actionSelected: actionSelected, selectedRows: selectedRows, onRowToggle: handleRowToggle, selectable: selectable, showActionButtons: showActionButtons, error: error }),
         React__default.createElement(TableFooter, { columns: columns, pager: pager, setPager: setPager })));
 };
 
@@ -3743,7 +3959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i1.NgxDhis2HttpClientService }] });
 
-const getTrackedEntityTableData = (response, programId, pager, metaData) => {
+const getTrackedEntityTableData = (response, programId, pager, metaData, searcheableDataElements) => {
     const teisRaw = response.data
         .trackedEntityInstances;
     const teis = Array.isArray(teisRaw)
@@ -3758,12 +3974,19 @@ const getTrackedEntityTableData = (response, programId, pager, metaData) => {
         label: trackedEntityAttribute.formName ?? trackedEntityAttribute.name,
         key: trackedEntityAttribute.id,
     }));
-    // const dataElementColumns = metaData.displayInListDataElements
-    //   .sort((a, b) => a.sortOrder! - b.sortOrder!)
-    //   .map((dataElement) => ({
-    //     label: dataElement.formName || dataElement.name,
-    //     key: dataElement.id,
-    //   }));
+    const tableSearcheableDataElements = metaData
+        .programStages.sort((a, b) => a.sortOrder - b.sortOrder)
+        .flatMap((stage) => stage
+        .programStageDataElements.filter((psde) => psde.displayInReports)
+        .sort((a, b) => a.sortOrder - b.sortOrder)
+        .map((psde) => ({
+        label: psde.dataElement.formName || psde.dataElement.name,
+        key: psde.dataElement.id,
+        valueType: psde.dataElement.valueType,
+        options: psde.dataElement.optionSet,
+        type: 'dataElement',
+    }))
+        .filter((col) => searcheableDataElements.includes(col.key)));
     const dataElementColumns = metaData
         .programStages.sort((a, b) => a.sortOrder - b.sortOrder) // Sorts stages by sortOrder
         .flatMap((stage) => stage
@@ -3795,6 +4018,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData) => {
         key: attr.id,
         valueType: attr.valueType,
         options: attr.optionSet ?? undefined,
+        type: 'attribute',
     }));
     const tableData = teis.map((tei, idx) => {
         const row = {
@@ -3881,7 +4105,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData) => {
     return {
         columns: tableColumns,
         data: tableData,
-        filteredEntityColumns: tableFilters,
+        filteredEntityColumns: [...tableFilters, ...tableSearcheableDataElements],
         orgUnitLabel: orgUnitLabel,
     };
 };
@@ -3962,6 +4186,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.showActionButtons = true;
         this.showEnrollmentDates = true;
         this.showDownloadButton = false;
+        this.searcheableDataElements = [];
         this.reactStateUpdaters = null;
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
@@ -3990,28 +4215,29 @@ class LineListTableComponent extends ReactWrapperModule {
             const [endDateState, setEndDateState] = useState(this.endDate);
             const [tempEndDateState, setTempEndDateState] = useState(this.endDate);
             const [loading, setLoading] = useState(false);
-            const [metaDataLoadng, setMetaDataLoading] = useState(false);
             const [filteredColumns, setFilteredColumns] = useState();
             const [inputValues, setInputValues] = useState({});
             const [orgUnitLabel, setOrgUnitLabel] = useState('');
             const [selectedOrgUnit, setSelectedOrgUnit] = useState('');
+            const [prevSelectedOrgUnit, setPrevSelectedOrgUnit] = useState('');
             const [hide, setHide] = useState(true);
             const [showAllFilters, setShowAllFilters] = useState(false);
             const visibleFilters = showAllFilters
                 ? filteredColumns ?? []
-                : (filteredColumns ?? []).slice(0, 0);
+                : (filteredColumns ?? []).slice(0, 5);
             // const visibleFilters = showAllFilters
             //   ? filteredColumns ?? []
             //   : filteredColumns ?? []).slice(0, 2);
             const defaultOrgUnit = this.orgUnit;
-            const [prevValue, setPrevValue] = useState();
             const [dateStates, setDateStates] = useState({});
+            const [prevDateStates, setPrevDateStates] = useState({});
             const [metaData, setMetaData] = useState(null);
             const [selectable, setSelectable] = useState(this.allowRowsSelection);
             const [triggerRefetch, setTriggerRefetch] = useState(this.triggerRefetch);
             const [showActionButtons, setShowActionButtons] = useState(this.showActionButtons);
             const [orgUnitModalVisible, setOrgUnitModalVisible] = useState(false);
             const [error, setError] = useState(null);
+            const [prevInputValues, setPrevInputValues] = useState({});
             const d2 = window.d2Web;
             // Stores updaters in refs for Angular to access
             const updateRefs = useRef({
@@ -4026,9 +4252,6 @@ class LineListTableComponent extends ReactWrapperModule {
                 setTriggerRefetch,
                 setTriggerTokenState,
             });
-            // useEffect(() => {
-            //   this.setReactStateUpdaters?.(updateRefs.current);
-            // }, []);
             useEffect(() => {
                 this.setReactStateUpdaters?.(updateRefs.current);
                 const fetchmetaData = async () => {
@@ -4064,57 +4287,71 @@ class LineListTableComponent extends ReactWrapperModule {
                 const isEvent = metaData.programType === 'WITHOUT_REGISTRATION';
                 const endDate = endDateState ?? format(addDays(new Date(), 1), 'yyyy-MM-dd');
                 if (this.programStageId || isEvent) {
-                    setLoading(true);
-                    d2.eventModule.event
-                        .setEndDate(endDate)
-                        .setStartDate(startDateState)
-                        .setProgram(this.programId)
-                        .setProgramStage(this.programStageId)
-                        .setOrgUnit(orgUnitState)
-                        .setOuMode(this.ouMode)
-                        .setPagination(new Pager({
-                        pageSize: pager.pageSize,
-                        page: pager.page,
-                    }))
-                        .get()
-                        .then((response) => {
-                        const eventsResponse = {
-                            events: response.data,
-                            pager: pager,
-                            // orgUnitsMap: fetchedOrgUnits,
-                        };
-                        const { columns, data } = getEvents({ data: eventsResponse }, this.programStageId, pager, metaData);
-                        // const filterableColumnIdsSet = new Set(
-                        //   this.filterableColumnIds
-                        // );
-                        // const updatedFilterableColumnIds: ColumnDefinition[] =
-                        //   columns.filter((column) =>
-                        //     filterableColumnIdsSet.has(column.key)
-                        //   );
-                        // const finalColumns: ColumnDefinition[] = addActionsColumn(
-                        //   [{ label: '#', key: 'index' }, ...updatedFilterableColumnIds],
-                        //   this.actionOptions
-                        // );
-                        let updatedFilterableColumnIds;
-                        if (Array.isArray(this.filterableColumnIds) &&
-                            this.filterableColumnIds.length > 0) {
-                            const filterableColumnIdsSet = new Set(this.filterableColumnIds);
-                            updatedFilterableColumnIds = columns.filter((column) => filterableColumnIdsSet.has(column.key));
+                    const fetchEventData = async () => {
+                        try {
+                            setError(null);
+                            setLoading(true);
+                            const response = await d2.eventModule.event
+                                .setEndDate(endDate)
+                                .setStartDate(startDateState)
+                                .setProgram(this.programId)
+                                .setProgramStage(this.programStageId)
+                                .setOrgUnit(orgUnitState)
+                                .setOuMode(this.ouMode)
+                                .setPagination(new Pager({
+                                pageSize: pager.pageSize,
+                                page: pager.page,
+                            }))
+                                .get();
+                            if (response.responseStatus.status !== 200) {
+                                throw new Error('failed to load data.');
+                            }
+                            const eventsResponse = {
+                                events: response.data,
+                                pager: pager,
+                                // orgUnitsMap: fetchedOrgUnits,
+                            };
+                            const { columns, data } = getEvents({ data: eventsResponse }, this.programStageId, pager, metaData);
+                            // const filterableColumnIdsSet = new Set(
+                            //   this.filterableColumnIds
+                            // );
+                            // const updatedFilterableColumnIds: ColumnDefinition[] =
+                            //   columns.filter((column) =>
+                            //     filterableColumnIdsSet.has(column.key)
+                            //   );
+                            // const finalColumns: ColumnDefinition[] = addActionsColumn(
+                            //   [{ label: '#', key: 'index' }, ...updatedFilterableColumnIds],
+                            //   this.actionOptions
+                            // );
+                            let updatedFilterableColumnIds;
+                            if (Array.isArray(this.filterableColumnIds) &&
+                                this.filterableColumnIds.length > 0) {
+                                const filterableColumnIdsSet = new Set(this.filterableColumnIds);
+                                updatedFilterableColumnIds = columns.filter((column) => filterableColumnIdsSet.has(column.key));
+                            }
+                            else {
+                                updatedFilterableColumnIds = columns;
+                            }
+                            const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...updatedFilterableColumnIds], this.actionOptions);
+                            const pagerResponse = response.pagination;
+                            setColumns(finalColumns);
+                            setData(data);
+                            setPager(new Pager(pagerResponse || {}));
                         }
-                        else {
-                            updatedFilterableColumnIds = columns;
+                        catch {
+                            console.error('Failed to fetch event data:', error);
+                            setError('Could not load records. Please reload.');
                         }
-                        const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...updatedFilterableColumnIds], this.actionOptions);
-                        const pagerResponse = response.pagination;
-                        setLoading(false);
-                        setColumns(finalColumns);
-                        setData(data);
-                        setPager(new Pager(pagerResponse || {}));
-                    });
+                        finally {
+                            setLoading(false);
+                        }
+                    };
+                    fetchEventData();
                 }
                 else if (isTracker) {
                     const fetchTrackerData = async () => {
                         try {
+                            setError(null);
                             setLoading(true);
                             const response = await d2.trackerModule.trackedEntity
                                 .setEndDate(endDate)
@@ -4134,6 +4371,9 @@ class LineListTableComponent extends ReactWrapperModule {
                                 new DataOrderCriteria().setField('createdAt').setOrder('desc'),
                             ])
                                 .get();
+                            if (response.responseStatus.status !== 200) {
+                                throw new Error('failed to load data.');
+                            }
                             const trackedEntityInstances = Array.isArray(response.data)
                                 ? response.data
                                 : [response.data];
@@ -4151,7 +4391,7 @@ class LineListTableComponent extends ReactWrapperModule {
                                 pager: pager,
                                 orgUnitsMap: fetchedOrgUnits,
                             };
-                            const { columns, data, filteredEntityColumns, orgUnitLabel } = getTrackedEntityTableData({ data: trackedEntityResponse }, this.programId, pager, metaData);
+                            const { columns, data, filteredEntityColumns, orgUnitLabel } = getTrackedEntityTableData({ data: trackedEntityResponse }, this.programId, pager, metaData, this.searcheableDataElements);
                             setFilteredColumns((prev) => filteredEntityColumns.length > 0 ? filteredEntityColumns : prev);
                             let updatedFilterableColumnIds;
                             if (Array.isArray(this.filterableColumnIds) &&
@@ -4168,7 +4408,6 @@ class LineListTableComponent extends ReactWrapperModule {
                             //   this.actionOptions
                             // );
                             const pagerResponse = response.pagination;
-                            // setLoading(false);
                             setColumns(finalColumns);
                             setData(data);
                             setPager(new Pager(pagerResponse || {}));
@@ -4211,7 +4450,6 @@ class LineListTableComponent extends ReactWrapperModule {
                         : cell;
                 }));
                 const worksheetData = [header, ...rows];
-                // Creates worksheet and workbook, then writes to file
                 const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
                 const workbook = XLSX.utils.book_new();
                 XLSX.utils.book_append_sheet(workbook, worksheet, 'LineListData');
@@ -4233,7 +4471,6 @@ class LineListTableComponent extends ReactWrapperModule {
                 const header = filteredColumns.map((col) => `"${col.label}"`).join(',');
                 const csvData = data.map((row) => filteredColumns.map((col) => `"${safeValue(row[col.key])}"`).join(','));
                 const csvContent = [header, ...csvData].join('\n');
-                // Creates a Blob and triggers the download
                 const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                 const url = URL.createObjectURL(blob);
                 const link = document.createElement('a');
@@ -4243,7 +4480,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 link.click();
                 document.body.removeChild(link);
             };
-            const handleInputChange = (key, value) => {
+            const handleInputChange = (key, value, type) => {
                 setInputValues((prevValues) => ({
                     ...prevValues,
                     [key]: value ?? '',
@@ -4252,20 +4489,36 @@ class LineListTableComponent extends ReactWrapperModule {
                     // Removes old filter for this key
                     const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
                     // adds new filter only if value is not empty
-                    const updatedFilters = value.trim()
-                        ? [
-                            ...filteredFilters,
-                            new DataQueryFilter()
-                                .setAttribute(key)
-                                .setCondition(DataFilterCondition.Like)
-                                .setValue(value),
-                        ]
-                        : filteredFilters;
+                    let updatedFilters;
+                    if (type === 'dataElement') {
+                        updatedFilters =
+                            value && value.length
+                                ? [
+                                    ...filteredFilters,
+                                    new DataQueryFilter()
+                                        .setAttribute(key)
+                                        .setCondition(DataFilterCondition.Like)
+                                        .setValue(value)
+                                        .setType('DATA_ELEMENT'),
+                                ]
+                                : filteredFilters;
+                    }
+                    else {
+                        updatedFilters = value.trim()
+                            ? [
+                                ...filteredFilters,
+                                new DataQueryFilter()
+                                    .setAttribute(key)
+                                    .setCondition(DataFilterCondition.Like)
+                                    .setValue(value),
+                            ]
+                            : filteredFilters;
+                    }
                     return updatedFilters;
                 });
             };
             //TODO: MERGE THIS WITH HANDLE INPUT CHANGE PUT A CHECK FOR IF ITS A SELECT FIELD TO USE EQ
-            const handleInputChangeForSelectField = (key, value) => {
+            const handleInputChangeForSelectField = (key, value, type) => {
                 setInputValues((prevValues) => ({
                     ...prevValues,
                     [key]: value ?? '',
@@ -4274,19 +4527,35 @@ class LineListTableComponent extends ReactWrapperModule {
                     // Removes existing filter for the same key (attribute)
                     const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
                     // adds new filter only if value is not empty
-                    const updatedFilters = value.trim()
-                        ? [
-                            ...filteredFilters,
-                            new DataQueryFilter()
-                                .setAttribute(key)
-                                .setCondition(DataFilterCondition.Equal)
-                                .setValue(value),
-                        ]
-                        : filteredFilters;
+                    let updatedFilters;
+                    if (type === 'dataElement') {
+                        updatedFilters =
+                            value && value.length
+                                ? [
+                                    ...filteredFilters,
+                                    new DataQueryFilter()
+                                        .setAttribute(key)
+                                        .setCondition(DataFilterCondition.Equal)
+                                        .setValue(value)
+                                        .setType('DATA_ELEMENT'),
+                                ]
+                                : filteredFilters;
+                    }
+                    else {
+                        updatedFilters = value.trim()
+                            ? [
+                                ...filteredFilters,
+                                new DataQueryFilter()
+                                    .setAttribute(key)
+                                    .setCondition(DataFilterCondition.Equal)
+                                    .setValue(value),
+                            ]
+                            : filteredFilters;
+                    }
                     return updatedFilters;
                 });
             };
-            const handleDateSelect = (key, selectedDate) => {
+            const handleDateSelect = (key, selectedDate, type) => {
                 const selectedDateString = selectedDate?.calendarDateString ?? '';
                 // Updates dateStates
                 setDateStates((prevDateStates) => ({
@@ -4296,30 +4565,51 @@ class LineListTableComponent extends ReactWrapperModule {
                 // Updates dataQueryFilters
                 setTempDataQueryFiltersState((prevFilters) => {
                     const filteredFilters = (prevFilters || []).filter((f) => f.attribute !== key);
-                    const updatedFilters = selectedDateString.trim()
-                        ? [
-                            ...filteredFilters,
-                            new DataQueryFilter()
-                                .setAttribute(key)
-                                .setCondition(DataFilterCondition.Equal)
-                                .setValue(selectedDateString),
-                        ]
-                        : filteredFilters;
+                    // const updatedFilters = selectedDateString.trim()
+                    //   ? [
+                    //       ...filteredFilters,
+                    //       new DataQueryFilter()
+                    //         .setAttribute(key)
+                    //         .setCondition(DataFilterCondition.Equal)
+                    //         .setValue(selectedDateString),
+                    //     ]
+                    //   : filteredFilters;
+                    let updatedFilters;
+                    if (type === 'dataElement') {
+                        updatedFilters = selectedDateString.trim()
+                            ? [
+                                ...filteredFilters,
+                                new DataQueryFilter()
+                                    .setAttribute(key)
+                                    .setCondition(DataFilterCondition.Equal)
+                                    .setValue(selectedDateString)
+                                    .setType('DATA_ELEMENT'),
+                            ]
+                            : filteredFilters;
+                    }
+                    else {
+                        updatedFilters = selectedDateString.trim()
+                            ? [
+                                ...filteredFilters,
+                                new DataQueryFilter()
+                                    .setAttribute(key)
+                                    .setCondition(DataFilterCondition.Equal)
+                                    .setValue(selectedDateString),
+                            ]
+                            : filteredFilters;
+                    }
                     return updatedFilters;
                 });
             };
-            const handleSearch = () => (setDataQueryFiltersState(tempDataQueryFiltersState),
-                setStartDateState(tempStartDateState),
-                setEndDateState(tempEndDateState),
-                setOrgUnitState(tempOrgUnitState));
+            const handleAdditionalFilters = () => setDataQueryFiltersState(tempDataQueryFiltersState);
+            const handleStartDateFilter = () => setStartDateState(tempStartDateState);
+            const handleEndDateFilter = () => setEndDateState(tempEndDateState);
+            const handleOrgUnitFilter = () => setOrgUnitState(tempOrgUnitState);
             function getTextColorFromBackGround(hex) {
-                // Removes the hash if present
                 hex = hex.replace('#', '');
-                // Converts to RGB
                 const r = parseInt(hex.substr(0, 2), 16);
                 const g = parseInt(hex.substr(2, 2), 16);
                 const b = parseInt(hex.substr(4, 2), 16);
-                // YIQ formula to calculate brightness
                 const yiq = (r * 299 + g * 587 + b * 114) / 1000;
                 // Returns black for light backgrounds, white for dark backgrounds
                 return yiq >= 128 ? colors$1.grey700 : '#FFFFFF';
@@ -4344,8 +4634,8 @@ class LineListTableComponent extends ReactWrapperModule {
                             React__default.createElement(MenuItem$1, { label: "Download Csv", onClick: handleCsvDownload }),
                             React__default.createElement(MenuItem$1, { label: "Download Excel", onClick: handleExcelDownload })), value: "Download" }, "Download"))),
                 orgUnitModalVisible && (React__default.createElement(OrgUnitSelector, { hide: hide, setHide: setHide, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState, setTempOrgUnitState: setTempOrgUnitState, tempOrgUnitState: tempOrgUnitState })),
-                this.showFilters && (React__default.createElement(FilterToolbar, { orgUnitLabel: orgUnitLabel, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState, defaultOrgUnit: defaultOrgUnit, setHide: setHide, startDateState: startDateState, setStartDateState: setStartDateState, endDateState: endDateState, setEndDateState: setEndDateState, visibleFilters: visibleFilters, dateStates: dateStates, inputValues: inputValues, setInputValues: setInputValues, handleInputChange: handleInputChange, handleInputChangeForSelectField: handleInputChangeForSelectField, handleDateSelect: handleDateSelect, prevValue: prevValue, setPrevValue: setPrevValue, showAllFilters: showAllFilters, setShowAllFilters: setShowAllFilters, handleSearch: handleSearch, setTempStartDateState: setTempStartDateState, setTempEndDateState: setTempEndDateState, setTempOrgUnitState: setTempOrgUnitState, tempStartDateState: tempStartDateState, tempEndDateState: tempEndDateState, tempOrgUnitState: tempOrgUnitState, dataQueryFiltersState: dataQueryFiltersState, setDataQueryFiltersState: setDataQueryFiltersState, SetOrgUnitModalVisible: setOrgUnitModalVisible, showEnrollmentDates: this.showEnrollmentDates })),
-                React__default.createElement(LineListTable, { columns: columns, data: data, pager: pager, setPager: setPager, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: this.actionOptions, actionOptionOrientation: this.actionOptionOrientation, actionSelected: this.actionSelected, selectable: selectable, rowsSelected: this.rowsSelected, showActionButtons: showActionButtons })))));
+                this.showFilters && (React__default.createElement(FilterToolbar, { orgUnitLabel: orgUnitLabel, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState, defaultOrgUnit: defaultOrgUnit, setHide: setHide, startDateState: startDateState, setStartDateState: setStartDateState, endDateState: endDateState, setEndDateState: setEndDateState, visibleFilters: visibleFilters, dateStates: dateStates, inputValues: inputValues, setInputValues: setInputValues, handleInputChange: handleInputChange, handleInputChangeForSelectField: handleInputChangeForSelectField, handleDateSelect: handleDateSelect, showAllFilters: showAllFilters, setShowAllFilters: setShowAllFilters, setTempStartDateState: setTempStartDateState, setTempEndDateState: setTempEndDateState, setTempOrgUnitState: setTempOrgUnitState, tempStartDateState: tempStartDateState, tempEndDateState: tempEndDateState, tempOrgUnitState: tempOrgUnitState, dataQueryFiltersState: dataQueryFiltersState, setDataQueryFiltersState: setDataQueryFiltersState, SetOrgUnitModalVisible: setOrgUnitModalVisible, showEnrollmentDates: this.showEnrollmentDates, handleAdditionalFilters: handleAdditionalFilters, handleStartDateFilter: handleStartDateFilter, handleEndDateFilter: handleEndDateFilter, handleOrgUnitFilter: handleOrgUnitFilter, setDateStates: setDateStates, prevInputValues: prevInputValues, setPrevInputValues: setPrevInputValues, setTempDataQueryFiltersState: setTempDataQueryFiltersState, prevDateStates: prevDateStates, setPrevDateStates: setPrevDateStates, prevSelectedOrgUnit: prevSelectedOrgUnit, setPrevSelectedOrgUnit: setPrevSelectedOrgUnit })),
+                React__default.createElement(LineListTable, { columns: columns, data: data, pager: pager, setPager: setPager, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: this.actionOptions, actionOptionOrientation: this.actionOptionOrientation, actionSelected: this.actionSelected, selectable: selectable, rowsSelected: this.rowsSelected, showActionButtons: showActionButtons, error: error })))));
         };
     }
     ngOnChanges(changes) {
@@ -4394,7 +4684,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: "ng-dhis2-ui-line-list", inputs: { triggerToken: "triggerToken", programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", ouMode: "ouMode", isButtonLoading: "isButtonLoading", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible", allowRowsSelection: "allowRowsSelection", enrollmentStatus: "enrollmentStatus", filterableColumnIds: "filterableColumnIds", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus", showActionButtons: "showActionButtons", showEnrollmentDates: "showEnrollmentDates", showDownloadButton: "showDownloadButton" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "ng-dhis2-ui-line-list", inputs: { triggerToken: "triggerToken", programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", ouMode: "ouMode", isButtonLoading: "isButtonLoading", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible", allowRowsSelection: "allowRowsSelection", enrollmentStatus: "enrollmentStatus", filterableColumnIds: "filterableColumnIds", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus", showActionButtons: "showActionButtons", showEnrollmentDates: "showEnrollmentDates", showDownloadButton: "showDownloadButton", searcheableDataElements: "searcheableDataElements" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-input div{margin:0!important}::ng-deep .custom-input label{font-size:12px;padding-right:0}::ng-deep .custom-input input{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input [data-test=calendar-clear-button]{background-color:#f2f2f2!important;color:#870808!important;border-radius:6px!important;padding:4px 10px!important;font-size:0!important}::ng-deep .custom-input [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:14px;color:#870808}::ng-deep .custom-input [data-test=calendar-clear-button]:hover{background-color:#ddd}::ng-deep .calendar-input-wrapper{position:relative}::ng-deep .calendar-input-wrapper .custom-input{position:relative;width:100%;display:flex;align-items:center}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]{right:8px;bottom:14px;margin:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0!important;background-color:#a0adba!important;border-radius:50%;padding:2px;cursor:pointer}::ng-deep .calendar-input-wrapper [data-test=calendar-clear-button]:before{content:\"\\2715\";font-size:10px;color:#f0f0f0}::ng-deep .calendar-input-wrapper input{padding-right:40px!important;height:40px;line-height:40px;box-sizing:border-box}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}::ng-deep .custom-select-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9fadba!important;border-radius:4px!important;margin:0;padding:0 0 0 8px;background-color:#fff!important}::ng-deep .custom-select-input div{margin:0!important}::ng-deep .custom-select-input [data-test=dhis2-uiwidgets-singleselectfield-label]{font-size:12px;color:gray!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]{border:none!important;font-size:12px!important;display:flex;align-items:center;padding-left:4px;height:40px;outline:none!important;box-shadow:none!important}::ng-deep .custom-select-input [data-test=dhis2-uicore-select-input]:focus-within{box-shadow:none!important}::ng-deep .custom-select-input input:focus{border:none!important;box-shadow:none!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
@@ -4453,6 +4743,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], showDownloadButton: [{
                 type: Input
+            }], searcheableDataElements: [{
+                type: Input
             }] } });
 
 class LineListModule {
@@ -6215,7 +6507,11 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 setTouched(true);
             };
             const checkValueUniqueness = async () => {
-                if (this.field().unique || (this.field().extension?.isDataElementUnique ?? false) && value && value.length > 0 && touched) {
+                if (this.field().unique ||
+                    ((this.field().extension?.isDataElementUnique ?? false) &&
+                        value &&
+                        value.length > 0 &&
+                        touched)) {
                     //  if (this.field().unique && value && value.length > 0 && touched) {
                     setCheckingUniqueness(true);
                     setRecordExistError(undefined);
@@ -6279,6 +6575,13 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                             }, onBlur: () => {
                                 checkValueUniqueness();
                             }, selected: arrayValue }, (this.field().options || []).map((option) => (React__default.createElement(MultiSelectOption, { key: option.key, label: option.label, value: option.value })))));
+                    case 'date':
+                    case 'date-time':
+                        return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, readOnly: disabled, onChange: (event) => {
+                                onValueChange(event.value);
+                            }, onBlur: () => {
+                                checkValueUniqueness();
+                            } }));
                     case 'file':
                         return (React__default.createElement(React__default.Fragment, null,
                             React__default.createElement(FileUploadField, { label: this.label(), id: this.field().id, hasError: hasError, required: this.field().required, validationText: validationError, performUpload: true, uploadUrl: 'fileResources', onUploadSuccess: (fileId) => {