@iapps/ng-dhis2-ui 1.2.62 → 1.2.66

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

@@ -3290,43 +3290,70 @@ const OrgUnitFormField$1 = (props) => {
                     React__default.createElement(CircularLoader$1, { small: true }))) : (React__default.createElement("div", { className: classes.orgUnitTreeContainer, style: { maxHeight: '200px', overflowY: 'auto' } }, renderOrgUnitTree()))))))));
 };
 
-const OrgUnitSelector = ({ hide, setHide, selectedOrgUnit, setSelectedOrgUnit, setOrgUnitState, }) => (React__default.createElement(Modal$1, { hide: hide, position: "middle" },
+const OrgUnitSelector = ({ hide, setHide, selectedOrgUnit, setSelectedOrgUnit, setOrgUnitState, setTempOrgUnitState, tempOrgUnitState }) => (React__default.createElement(Modal$1, { hide: hide, position: "middle" },
     React__default.createElement(ModalTitle$1, null, "Select organization unit"),
     React__default.createElement(ModalContent$1, null,
         React__default.createElement(OrgUnitFormField$1, { key: selectedOrgUnit, onSelectOrgUnit: (selectedOrgUnit) => {
                 setSelectedOrgUnit(selectedOrgUnit.displayName);
-                setOrgUnitState(selectedOrgUnit.id);
+                setTempOrgUnitState(selectedOrgUnit.id);
                 setHide(true);
             } })),
     React__default.createElement(ModalActions$1, null,
         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, }) => (React__default.createElement(DataTableToolbar, { className: "table-top-toolbar" },
+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, }) => (React__default.createElement(DataTableToolbar, { className: "table-top-toolbar" },
     React__default.createElement("div", { style: {
             display: 'flex',
-            alignItems: 'center',
+            flexDirection: 'column', // Ensures rows
             gap: '10px',
             flexWrap: 'wrap',
         } },
-        React__default.createElement(InputField$1, { key: "location", label: orgUnitLabel ? orgUnitLabel : 'registering unit:', value: selectedOrgUnit, onFocus: () => setHide(false), className: "custom-input", clearable: true, onChange: (event) => {
-                setSelectedOrgUnit(event.value);
-                setOrgUnitState(defaultOrgUnit);
-            } }),
-        React__default.createElement(CalendarInput, { label: "Start date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", clearable: !!startDateState, date: startDateState, onDateSelect: (selectedDate) => {
-                // 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: !!endDateState, date: endDateState, onDateSelect: (selectedDate) => {
-                // if (!(selectedDate.calendarDateString === null)) {
-                setEndDateState(selectedDate.calendarDateString);
-                //}
-            } }),
-        (visibleFilters ?? []).map(({ label, key, valueType, options }) => {
+        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);
+                } }),
+            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 !== 'yyyy-mm-dd', date: tempStartDateState || 'yyyy-mm-dd', onDateSelect: (selectedDate) => {
+                    setTempStartDateState(selectedDate.calendarDateString);
+                    console.log('selectedDate', selectedDate);
+                    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 !== 'yyyy-mm-dd', date: tempEndDateState || 'yyyy-mm-dd', onDateSelect: (selectedDate) => {
+                    setTempEndDateState(selectedDate.calendarDateString);
+                    if (selectedDate.calendarDateString === null) {
+                        setEndDateState(selectedDate.calendarDateString);
+                    }
+                } }),
+            React__default.createElement(Button$1, { onClick: handleSearch }, "Search"),
+            React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters')),
+        visibleFilters?.length > 0 && (React__default.createElement("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px',
+                flexWrap: 'wrap',
+            } }, (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 === null) {
+                            setDataQueryFiltersState(filteredFilters);
+                        }
                     } }));
             }
             if (options && options.options.length > 0) {
@@ -3336,6 +3363,10 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                             [key]: selected ?? '',
                         }));
                         handleInputChangeForSelectField(key, selected ?? '');
+                        const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
+                        if (selected === '') {
+                            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) => {
@@ -3344,8 +3375,9 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                         ...prevValues,
                         [key]: currentValue,
                     }));
+                    const filteredFilters = dataQueryFiltersState.filter((f) => f.attribute !== key);
                     if (currentValue === '') {
-                        handleInputChange(key, '');
+                        setDataQueryFiltersState(filteredFilters);
                     }
                 }, onBlur: (e) => {
                     const currentValue = 'target' in e ? e.target.value : e.value ?? '';
@@ -3354,8 +3386,164 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                         setPrevValue(currentValue);
                     }
                 } }));
-        }),
-        React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters'))));
+        })))))
+// <DataTableToolbar className="table-top-toolbar">
+//   <div
+//     style={{
+//       display: 'flex',
+//       alignItems: 'center',
+//       gap: '10px',
+//       flexWrap: 'wrap',
+//     }}
+//   >
+//     <InputField
+//       key="location"
+//       label={orgUnitLabel ? orgUnitLabel : 'registering unit:'}
+//       value={selectedOrgUnit}
+//       onFocus={() => setHide(false)}
+//       className="custom-input"
+//       clearable
+//       onChange={(event: { value: string }) => {
+//         setSelectedOrgUnit(event.value);
+//         setOrgUnitState(defaultOrgUnit);
+//       }}
+//     />
+//     <CalendarInput
+//       label="Start date:"
+//       calendar="gregory"
+//       locale="en-GB"
+//       timeZone="Africa/Dar_es_Salaam"
+//       className="custom-input"
+//       clearable={!!tempStartDateState}
+//       date={tempStartDateState}
+//       onDateSelect={(selectedDate: any) => {
+//         // if (!(selectedDate.calendarDateString === null)) {
+//         setTempStartDateState(selectedDate.calendarDateString);
+//         //}
+//         if (selectedDate.calendarDateString === null) {
+//           setStartDateState(selectedDate.calendarDateString);
+//         }
+//       }}
+//     />
+//     <CalendarInput
+//       label="End date:"
+//       calendar="gregory"
+//       locale="en-GB"
+//       timeZone="Africa/Dar_es_Salaam"
+//       className="custom-input"
+//       clearable={!!tempEndDateState}
+//       date={tempEndDateState}
+//       onDateSelect={(selectedDate: any) => {
+//         // if (!(selectedDate.calendarDateString === null)) {
+//         setTempEndDateState(selectedDate.calendarDateString);
+//         //}
+//         if (selectedDate.calendarDateString === null) {
+//           setEndDateState(selectedDate.calendarDateString);
+//         }
+//       }}
+//     />
+//     <Button onClick={() => handleSearch()}>Search</Button>
+//     <Button onClick={() => setShowAllFilters(!showAllFilters)}>
+//       {showAllFilters ? 'Less Filters' : 'More Filters'}
+//     </Button>
+//     {(visibleFilters ?? []).map(({ label, key, valueType, options }: any) => {
+//       if (valueType === 'DATE') {
+//         return (
+//           <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: any) => {
+//               handleDateSelect(key, selectedDate);
+//               const filteredFilters = dataQueryFiltersState.filter(
+//                 (f: { attribute: any }) => f.attribute !== key
+//               );
+//               if (selectedDate === null) {
+//                 setDataQueryFiltersState(filteredFilters);
+//               }
+//             }}
+//           />
+//         );
+//       }
+//       // const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
+//       if (options && options.options.length > 0) {
+//         return (
+//           <SingleSelectField
+//             key={key}
+//             label={`${label}:`}
+//             selected={inputValues[key] || ''}
+//             className="custom-select-input"
+//             clearable
+//             onChange={({ selected }: { selected: string }) => {
+//               setInputValues((prevValues: any) => ({
+//                 ...prevValues,
+//                 [key]: selected ?? '',
+//               }));
+//               handleInputChangeForSelectField(key, selected ?? '');
+//               const filteredFilters = dataQueryFiltersState.filter(
+//                 (f: { attribute: any }) => f.attribute !== key
+//               );
+//               if (selected === '') {
+//                 setDataQueryFiltersState(filteredFilters);
+//               }
+//             }}
+//           >
+//             {(options.options ?? []).map((opt: any) => (
+//               <SingleSelectOption
+//                 key={opt.id}
+//                 label={opt.name}
+//                 value={opt.code}
+//               />
+//             ))}
+//           </SingleSelectField>
+//         );
+//       }
+//       return (
+//         <InputField
+//           key={key}
+//           label={`${label}:`}
+//           className="custom-input"
+//           value={inputValues[key] || ''}
+//           clearable
+//           onChange={(e: any) => {
+//             const currentValue =
+//               'target' in e ? e.target.value : e.value ?? '';
+//             setInputValues((prevValues: any) => ({
+//               ...prevValues,
+//               [key]: currentValue,
+//             }));
+//             // if (currentValue === '') {
+//             //   handleInputChange(key, '');
+//             // }
+//             const filteredFilters = dataQueryFiltersState.filter(
+//               (f: { attribute: any }) => f.attribute !== key
+//             );
+//             if (currentValue === '') {
+//               setDataQueryFiltersState(filteredFilters);
+//             }
+//           }}
+//           onBlur={(e: any) => {
+//             const currentValue =
+//               'target' in e ? e.target.value : e.value ?? '';
+//             if (currentValue !== '' && currentValue !== prevValue) {
+//               handleInputChange(key, currentValue);
+//               setPrevValue(currentValue);
+//             }
+//           }}
+//         />
+//       );
+//     })}
+//     <div>
+//       {/* <p>hello</p> */}
+//     </div>
+//   </div>
+// </DataTableToolbar>
+);
 
 // export const TableHeader = ({
 //   columns,
@@ -3386,7 +3574,7 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
 //     </TableHead>
 //   );
 // };
-const TableHeader = ({ columns, allSelected, onSelectAll, selectable, }) => {
+const TableHeader = ({ columns, allSelected, onSelectAll, selectable, showActionButtons }) => {
     const handleCheckboxChange = () => {
         onSelectAll(!allSelected);
     };
@@ -3394,7 +3582,9 @@ const TableHeader = ({ columns, allSelected, onSelectAll, selectable, }) => {
         React__default.createElement(DataTableRow, null,
             selectable && (React__default.createElement(DataTableColumnHeader, { width: "48px" },
                 React__default.createElement(Checkbox, { checked: allSelected, onChange: handleCheckboxChange }))),
-            columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))));
+            columns
+                .filter((col) => showActionButtons || col.key !== 'actions')
+                .map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))));
 };
 
 const dropdownStyles$1 = {
@@ -3610,7 +3800,7 @@ const TableCell = ({ cell, getTextColorFromBackGround, }) => {
 //     </DataTableRow>
 //   );
 // };
-const TableRow = ({ row, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, isChecked, onToggle, selectable, }) => {
+const TableRow = ({ row, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, isChecked, onToggle, selectable, showActionButtons }) => {
     const handleCheckBoxChange = () => {
         onToggle(row);
     };
@@ -3619,7 +3809,7 @@ const TableRow = ({ row, columns, getTextColorFromBackGround, actionOptions, act
             React__default.createElement(Checkbox, { onChange: handleCheckBoxChange, checked: isChecked }))),
         columns.map((col) => {
             if (col.key === 'actions') {
-                return (React__default.createElement(DataTableCell, { key: col.key }, actionOptions && (React__default.createElement(DataTableActions, { actionOptions: actionOptions, data: row, actionOptionOrientation: actionOptionOrientation, onClick: (option) => {
+                return (React__default.createElement(DataTableCell, { key: col.key }, actionOptions && showActionButtons && (React__default.createElement(DataTableActions, { actionOptions: actionOptions, data: row, actionOptionOrientation: actionOptionOrientation, onClick: (option) => {
                         const data = row['responseData']?.['value'];
                         if (option.onClick)
                             option.onClick(data);
@@ -3671,7 +3861,7 @@ const TableRow = ({ row, columns, getTextColorFromBackGround, actionOptions, act
 //     )}
 //   </DHISTableBody>
 // );
-const TableBody = ({ data, columns, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectedRows, onRowToggle, selectable, }) => (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 })))) : (React__default.createElement(DataTableRow, null,
+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,
     React__default.createElement(DataTableCell, { colSpan: columns.length.toString(), style: {
             textAlign: 'center',
             fontWeight: 'bold',
@@ -3728,7 +3918,7 @@ const TableFooter = ({ pager, setPager, columns }) => {
 //       </DataTable>
 //     );
 //   };
-const LineListTable = ({ columns, data, pager, setPager, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectable, rowsSelected, }) => {
+const LineListTable = ({ columns, data, pager, setPager, getTextColorFromBackGround, actionOptions, actionOptionOrientation, actionSelected, selectable, rowsSelected, showActionButtons }) => {
     const [selectedRows, setSelectedRows] = useState([]);
     const handleRowToggle = (row) => {
         const exists = selectedRows.find((r) => r.index?.value === row.index?.value);
@@ -3744,8 +3934,8 @@ const LineListTable = ({ columns, data, pager, setPager, getTextColorFromBackGro
         rowsSelected.emit(updatedRows);
     };
     return (React__default.createElement(DataTable, null,
-        React__default.createElement(TableHeader, { columns: columns, allSelected: selectedRows.length === data.length && data.length > 0, onSelectAll: handleSelectAll, selectable: selectable }),
-        React__default.createElement(TableBody, { data: data, columns: columns, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: actionOptions, actionOptionOrientation: actionOptionOrientation, actionSelected: actionSelected, selectedRows: selectedRows, onRowToggle: handleRowToggle, selectable: selectable }),
+        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(TableFooter, { columns: columns, pager: pager, setPager: setPager })));
 };
 
@@ -3850,9 +4040,30 @@ const getTrackedEntityTableData = (response, programId, pager, metaData) => {
             }
             return attr;
         });
+        // attributesData.forEach((attr: any) => {
+        //   const attributeMeta = metaData.programTrackedEntityAttributes?.find(
+        //     (metadata) => metadata.trackedEntityAttribute.id === attr.attribute
+        //   );
+        //   if (attributeMeta?.trackedEntityAttribute.optionSetValue) {
+        //     const optionSet = attributeMeta?.trackedEntityAttribute?.optionSet;
+        //     const option = optionSet?.options?.find(
+        //       (option) => option.code === attr.value
+        //     );
+        //     row[attr.attribute] = option
+        //       ? { value: option?.name }
+        //       : { value: attr.value };
+        //   } else {
+        //     row[attr.attribute] = { value: attr.value };
+        //   }
+        // });
         attributesData.forEach((attr) => {
             const attributeMeta = metaData.programTrackedEntityAttributes?.find((metadata) => metadata.trackedEntityAttribute.id === attr.attribute);
-            if (attributeMeta?.trackedEntityAttribute.optionSetValue) {
+            const valueType = attributeMeta?.trackedEntityAttribute?.valueType;
+            if (valueType === 'ORGANISATION_UNIT') {
+                const orgUnitName = orgUnitMap?.get(attr.value);
+                row[attr.attribute] = { value: orgUnitName || attr.value };
+            }
+            else if (attributeMeta?.trackedEntityAttribute.optionSetValue) {
                 const optionSet = attributeMeta?.trackedEntityAttribute?.optionSet;
                 const option = optionSet?.options?.find((option) => option.code === attr.value);
                 row[attr.attribute] = option
@@ -3970,6 +4181,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.triggerRefetch = false;
         this.actionSelected = new EventEmitter();
         this.rowsSelected = new EventEmitter();
+        this.showActionButtons = true;
         this.reactStateUpdaters = null;
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
@@ -3987,11 +4199,15 @@ class LineListTableComponent extends ReactWrapperModule {
             const [programIdState, setProgramIdState] = useState(this.programId);
             const [isOptionSetNameVisibleState, setOptionSetNameVisible] = useState(this.isOptionSetNameVisible);
             const [orgUnitState, setOrgUnitState] = useState(this.orgUnit);
+            const [tempOrgUnitState, setTempOrgUnitState] = useState(this.orgUnit);
             const [programStageIdState, setProgramStageIdState] = useState(this.programStageId);
             const [attributeFiltersState, setAttributeFiltersState] = useState(this.attributeFilters);
             const [dataQueryFiltersState, setDataQueryFiltersState] = useState(this.dataQueryFilters);
+            const [tempDataQueryFiltersState, setTempDataQueryFiltersState] = useState(this.dataQueryFilters);
             const [startDateState, setStartDateState] = useState(this.startDate);
+            const [tempStartDateState, setTempStartDateState] = useState(this.startDate);
             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();
@@ -4002,15 +4218,20 @@ class LineListTableComponent extends ReactWrapperModule {
             const [showAllFilters, setShowAllFilters] = useState(false);
             const visibleFilters = showAllFilters
                 ? filteredColumns ?? []
-                : (filteredColumns ?? []).slice(0, 2);
+                : (filteredColumns ?? []).slice(0, 0);
+            // const visibleFilters = showAllFilters
+            //   ? filteredColumns ?? []
+            //   : filteredColumns ?? []).slice(0, 2);
             const defaultOrgUnit = this.orgUnit;
             const [prevValue, setPrevValue] = useState();
             const [dateStates, setDateStates] = 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 d2 = window.d2Web;
-            // Store updaters in refs for Angular to access
+            // Stores updaters in refs for Angular to access
             const updateRefs = useRef({
                 setProgramIdState,
                 setOrgUnitState,
@@ -4020,7 +4241,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 setEndDateState,
                 setOptionSetNameVisible,
                 setSelectable,
-                setTriggerRefetch
+                setTriggerRefetch,
             });
             useEffect(() => {
                 this.setReactStateUpdaters?.(updateRefs.current);
@@ -4100,7 +4321,13 @@ class LineListTableComponent extends ReactWrapperModule {
                             ? response.data
                             : [response.data];
                         const orgUnitIdsFromEnrollments = new Set(trackedEntityInstances.map((tei) => tei.latestEnrollment.orgUnit));
-                        const uniqueOrgUnitIds = [...orgUnitIdsFromEnrollments];
+                        const orgUnitsFromAttributes = new Set(trackedEntityInstances.flatMap((tei) => tei.attributes
+                            ?.filter((attr) => attr.valueType === 'ORGANISATION_UNIT')
+                            .map((attr) => attr.value) || []));
+                        const uniqueOrgUnitIds = [
+                            ...orgUnitIdsFromEnrollments,
+                            ...orgUnitsFromAttributes,
+                        ];
                         this.lineListService.fetchOrgUnits(uniqueOrgUnitIds).subscribe({
                             next: (fetchedOrgUnits) => {
                                 const trackedEntityResponse = {
@@ -4139,17 +4366,17 @@ class LineListTableComponent extends ReactWrapperModule {
                 pager.pageSize,
                 isOptionSetNameVisibleState,
                 dataQueryFiltersState,
-                triggerRefetch
+                triggerRefetch,
             ]);
             const handleInputChange = (key, value) => {
                 setInputValues((prevValues) => ({
                     ...prevValues,
                     [key]: value ?? '',
                 }));
-                setDataQueryFiltersState((prevFilters) => {
-                    // Remove old filter for this key
+                setTempDataQueryFiltersState((prevFilters) => {
+                    // Removes old filter for this key
                     const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
-                    // Only add new filter if value is not empty
+                    // adds new filter only if value is not empty
                     const updatedFilters = value.trim()
                         ? [
                             ...filteredFilters,
@@ -4168,10 +4395,10 @@ class LineListTableComponent extends ReactWrapperModule {
                     ...prevValues,
                     [key]: value ?? '',
                 }));
-                setDataQueryFiltersState((prevFilters = []) => {
-                    // Remove existing filter for the same key (attribute)
+                setTempDataQueryFiltersState((prevFilters = []) => {
+                    // Removes existing filter for the same key (attribute)
                     const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
-                    // Only add new filter if value is not empty
+                    // adds new filter only if value is not empty
                     const updatedFilters = value.trim()
                         ? [
                             ...filteredFilters,
@@ -4186,13 +4413,13 @@ class LineListTableComponent extends ReactWrapperModule {
             };
             const handleDateSelect = (key, selectedDate) => {
                 const selectedDateString = selectedDate?.calendarDateString ?? '';
-                // Update dateStates
+                // Updates dateStates
                 setDateStates((prevDateStates) => ({
                     ...prevDateStates,
                     [key]: selectedDateString,
                 }));
-                // Update dataQueryFilters
-                setDataQueryFiltersState((prevFilters) => {
+                // Updates dataQueryFilters
+                setTempDataQueryFiltersState((prevFilters) => {
                     const filteredFilters = (prevFilters || []).filter((f) => f.attribute !== key);
                     const updatedFilters = selectedDateString.trim()
                         ? [
@@ -4206,16 +4433,20 @@ class LineListTableComponent extends ReactWrapperModule {
                     return updatedFilters;
                 });
             };
+            const handleSearch = () => (setDataQueryFiltersState(tempDataQueryFiltersState),
+                setStartDateState(tempStartDateState),
+                setEndDateState(tempEndDateState),
+                setOrgUnitState(tempOrgUnitState));
             function getTextColorFromBackGround(hex) {
-                // Remove the hash if present
+                // Removes the hash if present
                 hex = hex.replace('#', '');
-                // Convert to RGB
+                // 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;
-                // Return black for light backgrounds, white for dark backgrounds
+                // Returns black for light backgrounds, white for dark backgrounds
                 return yiq >= 128 ? colors$1.grey700 : '#FFFFFF';
             }
             return (React__default.createElement("div", null, loading ? (React__default.createElement("div", { style: {
@@ -4228,9 +4459,9 @@ class LineListTableComponent extends ReactWrapperModule {
                 React__default.createElement("div", { style: {
                         fontSize: 14,
                     } }, "Loading"))) : (React__default.createElement("div", null,
-                React__default.createElement(OrgUnitSelector, { hide: hide, setHide: setHide, selectedOrgUnit: selectedOrgUnit, setSelectedOrgUnit: setSelectedOrgUnit, setOrgUnitState: setOrgUnitState }),
-                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 })),
-                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 })))));
+                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 })),
+                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 })))));
         };
     }
     ngOnChanges(changes) {
@@ -4275,7 +4506,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: { 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", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus" }, 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: { 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", triggerRefetch: "triggerRefetch", eventStatus: "eventStatus", showActionButtons: "showActionButtons" }, 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,
@@ -4324,6 +4555,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Output
             }], rowsSelected: [{
                 type: Output
+            }], showActionButtons: [{
+                type: Input
             }] } });
 
 class LineListModule {