@iapps/ng-dhis2-ui 1.3.6 → 1.3.8

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

@@ -3233,18 +3233,20 @@ const orgUnitFieldStyles$1 = {
     },
 };
 const OrgUnitFormField$1 = (props) => {
-    const { onSelectOrgUnit, label, required, selected, disabled, key } = props;
+    const { onSelectOrgUnit, label, required, selected, disabled, key, customOrgUnitRoots, multiple = false, selectedPaths, } = props;
     const d2 = window?.d2Web;
     const classes = useDynamicStyles$2(orgUnitFieldStyles$1);
     const config = useMemo(() => {
         return d2.systemInfo?.toInitObject();
     }, []);
     const rootOrgUnits = useMemo(() => {
-        return d2.currentUser?.organisationUnits || [];
-    }, []);
+        return (customOrgUnitRoots?.map((id) => ({ id: `/${id}`, path: `/${id}` })) ??
+            d2.currentUser?.organisationUnits ??
+            []);
+    }, [customOrgUnitRoots]);
     const getExpandedItems = () => {
         if (rootOrgUnits && rootOrgUnits.length === 1) {
-            return [`/${rootOrgUnits[0].id}`];
+            return [`${rootOrgUnits[0].path}`];
         }
         else if (rootOrgUnits?.length > 1) {
             return rootOrgUnits.map((root) => root.path);
@@ -3278,11 +3280,14 @@ const OrgUnitFormField$1 = (props) => {
         }
     }, []);
     const highlighted = useMemo(() => {
+        if (selectedPaths !== undefined) {
+            return selectedPaths;
+        }
         if (selectedOrgUnit) {
             return [selectedOrgUnit['path']];
         }
         return undefined;
-    }, [selectedOrgUnit]);
+    }, [selectedPaths, selectedOrgUnit]);
     const selectedOrgUnitLabel = useMemo(() => {
         if (selectedOrgUnit) {
             return [
@@ -3300,13 +3305,7 @@ const OrgUnitFormField$1 = (props) => {
         }
     };
     const handleCollapse = ({ path }) => {
-        const pathIndex = expanded?.indexOf(path);
-        if (pathIndex && pathIndex !== -1 && expanded) {
-            const updatedExpanded = pathIndex === 0
-                ? expanded.slice(1)
-                : [...expanded.slice(0, pathIndex), ...expanded.slice(pathIndex + 1)];
-            setExpanded(updatedExpanded);
-        }
+        setExpanded((previous) => previous?.filter((item) => item !== path));
     };
     const handleOrgUnitSearch = async (query) => {
         setSearchLoading(true);
@@ -3335,15 +3334,15 @@ const OrgUnitFormField$1 = (props) => {
                 return (React__default.createElement("div", { className: classes.orgUnitTreeLoader },
                     React__default.createElement(CircularLoader$1, { small: true })));
             }
-            return (ready && (React__default.createElement(OrganisationUnitTree, { key: `${key}-search`, roots: searchData?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
+            return (ready && (React__default.createElement(OrganisationUnitTree, { key: `${key}-search`, roots: searchData?.map((orgUnit) => orgUnit.id) || [], singleSelection: !multiple, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
                     setSelectedOrgUnit(event);
-                    setShowOrgUnitTree(false);
+                    setShowOrgUnitTree(multiple);
                     onSelectOrgUnit(event);
                 } })));
         }
-        return (React__default.createElement(OrganisationUnitTree, { key: key, roots: rootOrgUnits?.map((orgUnit) => orgUnit.id) || [], singleSelection: true, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
+        return (React__default.createElement(OrganisationUnitTree, { key: key, roots: rootOrgUnits?.map((orgUnit) => orgUnit.id) || [], singleSelection: !multiple, expanded: expanded, handleExpand: handleExpand, handleCollapse: handleCollapse, selected: highlighted, onChange: (event) => {
                 setSelectedOrgUnit(event);
-                setShowOrgUnitTree(false);
+                setShowOrgUnitTree(multiple);
                 onSelectOrgUnit(event);
             } }));
     };
@@ -3355,7 +3354,7 @@ const OrgUnitFormField$1 = (props) => {
             label && (React__default.createElement("div", { className: classes.orgUnitFieldLabel },
                 React__default.createElement("span", null, label),
                 required ? (React__default.createElement("span", { className: classes.orgUnitFieldRequiredLabel }, "*")) : (React__default.createElement(React__default.Fragment, null)))),
-            !showOrgUnitTree ? (selectedOrgUnit ? (React__default.createElement(React__default.Fragment, null,
+            !multiple && !showOrgUnitTree ? (selectedOrgUnit ? (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(Tooltip, { content: selectedOrgUnitLabel },
                     React__default.createElement(Chip, { onRemove: () => {
                             setShowOrgUnitTree(true);
@@ -3367,19 +3366,17 @@ 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, 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);
-                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, 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 FilterToolbar = ({ orgUnit: { customOrgUnitRoots, allowMultipleOrgUnits, chosenOrgUnits: chosenOrgUnitsProp, setChosenOrgUnits, orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setOrgUnitState, defaultOrgUnit, setTempOrgUnitState, tempOrgUnitState, handleOrgUnitFilter, tempOrgUnitModeState, defaultOrgUnitMode, setTempOrgUnitModeState, handleOrgUnitModeReset, prevSelectedOrgUnit, setPrevSelectedOrgUnit, }, dates: { startDateState, setStartDateState, endDateState, setEndDateState, setTempStartDateState, setTempEndDateState, tempStartDateState, tempEndDateState, showEnrollmentDates, handleStartDateFilter, handleEndDateFilter, }, filters: { visibleFilters, dateStates, inputValues, setInputValues, handleInputChange, handleInputChangeForSelectField, handleDateSelect, showAllFilters, setShowAllFilters, dataQueryFiltersState, setDataQueryFiltersState, handleAdditionalFilters, setDateStates, prevInputValues, setPrevInputValues, setTempDataQueryFiltersState, prevDateStates, setPrevDateStates, }, }) => {
+    const chosenOrgUnits = chosenOrgUnitsProp;
+    const displayedOrgUnitNames = (prevSelectedOrgUnit || '').split(', ');
+    const orgUnitSelectionLabel = displayedOrgUnitNames.length > 2
+        ? `${displayedOrgUnitNames.slice(0, 2).join(', ')} .....`
+        : prevSelectedOrgUnit;
+    const updateChosenOrgUnits = (units) => {
+        setChosenOrgUnits(units);
+        setSelectedOrgUnit(units.map((unit) => unit.displayName).join(', '));
+        setTempOrgUnitState(units.map((unit) => unit.id).join(';'));
+    };
     const [isOpen, setIsOpen] = useState(false);
     const [isOpenOrgUnitDropdown, setIsOpenOrgUnitDropdown] = useState(false);
     const [openDropdownKey, setOpenDropdownKey] = useState(null);
@@ -3399,12 +3396,25 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                     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(FlyoutMenu, { maxWidth: "90vw" },
                             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);
-                                    } }),
+                                isOpenOrgUnitDropdown && (React__default.createElement("div", { style: { width: '400px', maxWidth: '80vw' } },
+                                    React__default.createElement(OrgUnitFormField$1, { key: "registering-unit", customOrgUnitRoots: customOrgUnitRoots, multiple: allowMultipleOrgUnits, selectedPaths: chosenOrgUnits.map((unit) => unit.path), onSelectOrgUnit: (unit) => {
+                                            if (!allowMultipleOrgUnits) {
+                                                updateChosenOrgUnits([unit]);
+                                                return;
+                                            }
+                                            const paths = unit.selected;
+                                            const units = chosenOrgUnits.filter((chosen) => paths.includes(chosen.path));
+                                            if (paths.includes(unit.path) && !units.some((chosen) => chosen.id === unit.id)) {
+                                                units.push(unit);
+                                            }
+                                            updateChosenOrgUnits(units);
+                                        } }),
+                                    React__default.createElement("div", { role: "group", "aria-label": "Mode", style: { display: 'flex', alignItems: 'center', gap: '12px', margin: '8px 0 12px' } },
+                                        React__default.createElement("span", { style: { fontSize: '14px', fontWeight: 400 } }, "Mode:"),
+                                        React__default.createElement("div", { style: { flex: 1, minWidth: 0 } },
+                                            React__default.createElement(SingleSelectField, { selected: tempOrgUnitModeState, helpText: `If no mode is selected, the default mode will be ${defaultOrgUnitMode}.`, onChange: ({ selected }) => setTempOrgUnitModeState(selected) }, ['DESCENDANTS', 'SELECTED', 'CHILDREN'].map((mode) => (React__default.createElement(SingleSelectOption, { key: mode, label: mode, value: mode })))))))),
                                 React__default.createElement("div", { style: {
                                         paddingTop: '8px',
                                         display: 'flex',
@@ -3418,21 +3428,25 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                                             } }, "Update"),
                                         React__default.createElement(Button$1, { disabled: !selectedOrgUnit, onClick: () => {
                                                 setSelectedOrgUnit('');
+                                                setChosenOrgUnits([]);
                                                 setPrevSelectedOrgUnit('');
                                                 setOrgUnitState(defaultOrgUnit);
+                                                handleOrgUnitModeReset();
                                                 setTempOrgUnitState(defaultOrgUnit);
                                                 setIsOpenOrgUnitDropdown(false);
                                             } }, "Reset")))))) },
                     orgUnitLabel ? orgUnitLabel : 'Registering unit',
                     ' ',
-                    prevSelectedOrgUnit && ':',
-                    " ",
-                    prevSelectedOrgUnit,
+                    prevSelectedOrgUnit && (React__default.createElement("span", { title: prevSelectedOrgUnit },
+                        ": ",
+                        orgUnitSelectionLabel)),
                     prevSelectedOrgUnit && (React__default.createElement("span", { onClick: (event) => {
                             event.stopPropagation();
                             setSelectedOrgUnit('');
+                            setChosenOrgUnits([]);
                             setPrevSelectedOrgUnit('');
                             setOrgUnitState(defaultOrgUnit);
+                            handleOrgUnitModeReset();
                             setTempOrgUnitState(defaultOrgUnit);
                             setIsOpenOrgUnitDropdown(false);
                         }, style: { display: 'inline-flex', alignItems: 'center' } },
@@ -3688,49 +3702,6 @@ function formatDateForDisplay(dateString) {
         return 'dd-mm-yyyy';
     }
 }
-// case 'date':
-//           case 'date-time':
-//             return (
-//               // <InputField
-//               //   error={hasError}
-//               //   validationText={validationError}
-//               //   type={this.field().type as any}
-//               //   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: any) => {
-//               //     onValueChange(event.value);
-//               //   }}
-//               //   onBlur={() => {
-//               //     checkValueUniqueness();
-//               //   }}
-//               // />
-//               <CalendarInput
-//                 label={this.label()}
-//                 error={hasError}
-//                 validationText={validationError}
-//                 date={value}
-//                 readOnly={disabled}
-//                 min={this.field().min?.toString()}
-//                 max={this.field().max?.toString()}
-//                 placeholder={this.placeholder()}
-//                 onDateSelect={(selectedDate: any) => {
-//                   onValueChange(selectedDate.calendarDateString);
-//                 }}
-//                 disabled={disabled}
-//                 inputWidth={inputWidth}
-//                 required={this.field().required}
-//                 calendar="gregory"
-//                 locale="en-GB"
-//                 timeZone="Africa/Dar_es_Salaam"
-//               />
-//             );
 
 const TableHeader = ({ columns, allSelected, onSelectAll, selectable, showActionButtons, }) => {
     const handleCheckboxChange = () => {
@@ -4332,7 +4303,7 @@ const formatMultiTextOptionValue = (value, options = []) => {
     return codes.map((code) => optionByCode.get(code)?.name || code).join(', ');
 };
 
-const getTrackedEntityTableData = (response, programId, pager, metaData, searcheableDataElements, customDisplayInReportsIds, columnNameSource = 'NAME', columnMetadataDisplayMode) => {
+const getTrackedEntityTableData = (response, programId, pager, metaData, searcheableDataElements, customDisplayInReportsIds, columnNameSource = 'NAME', columnMetadataDisplayMode, orgUnitAndDateColumnsPosition = 'start') => {
     const getColumnLabel = (item) => columnNameSource === 'FORM_NAME'
         ? item?.formName || item?.name || 'Default'
         : item?.name || item?.formName || 'Default';
@@ -4411,7 +4382,7 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
             color: option.style?.color,
         })) ?? [],
     }));
-    const tableColumns = [
+    const orgUnitAndDateColumns = [
         {
             label: orgUnitLabel || 'Registering unit',
             key: 'orgUnit',
@@ -4424,9 +4395,11 @@ const getTrackedEntityTableData = (response, programId, pager, metaData, searche
                 },
             ]
             : []),
-        ...attributeColumns,
-        ...dataElementColumns,
     ];
+    const entityColumns = [...attributeColumns, ...dataElementColumns];
+    const tableColumns = orgUnitAndDateColumnsPosition === 'end'
+        ? [...entityColumns, ...orgUnitAndDateColumns]
+        : [...orgUnitAndDateColumns, ...entityColumns];
     const tableFilters = metaData.searchableTrackedEntityAttributes
         .sort((a, b) => a.sortOrder - b.sortOrder)
         .map((attr) => ({
@@ -4881,6 +4854,7 @@ const fetchLineListDownloadRows = async ({ d2, metaData, programId, programStage
 class LineListTableComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
+        this.allowMultipleOrgUnits = false;
         this.actionOptionOrientation = 'DROPDOWN';
         this.dataQueryFilters = [];
         this.hydrateForActionFiltering = true;
@@ -4897,6 +4871,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.showDownloadButton = false;
         this.searcheableDataElements = [];
         this.columnNameSource = 'NAME';
+        this.orgUnitAndDateColumnsPosition = 'start';
         this.reactStateUpdaters = null;
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
@@ -4914,6 +4889,10 @@ class LineListTableComponent extends ReactWrapperModule {
             const [triggerTokenState, setTriggerTokenState] = useState(this.triggerToken);
             const [programIdState, setProgramIdState] = useState(this.programId);
             const [isOptionSetNameVisibleState, setOptionSetNameVisible] = useState(this.isOptionSetNameVisible);
+            const [chosenOrgUnits, setChosenOrgUnits] = useState([]);
+            const defaultOrgUnitMode = (this.ouMode);
+            const [orgUnitModeState, setOrgUnitModeState] = useState(defaultOrgUnitMode);
+            const [tempOrgUnitModeState, setTempOrgUnitModeState] = useState(defaultOrgUnitMode);
             const [orgUnitState, setOrgUnitState] = useState(this.orgUnit);
             const [tempOrgUnitState, setTempOrgUnitState] = useState(this.orgUnit);
             const [programStageIdState, setProgramStageIdState] = useState(this.programStageId);
@@ -4932,7 +4911,6 @@ class LineListTableComponent extends ReactWrapperModule {
             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 ?? []
@@ -4947,7 +4925,6 @@ class LineListTableComponent extends ReactWrapperModule {
             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;
@@ -5009,7 +4986,7 @@ class LineListTableComponent extends ReactWrapperModule {
                                 .setProgram(this.programId)
                                 .setProgramStage(this.programStageId)
                                 .setOrgUnit(orgUnitState)
-                                .setOuMode(this.ouMode)
+                                .setOuMode(orgUnitModeState)
                                 .setPagination(new Pager({
                                 pageSize: pager.pageSize,
                                 page: pager.page,
@@ -5071,7 +5048,7 @@ class LineListTableComponent extends ReactWrapperModule {
                                 .setProgram(this.programId)
                                 .setProgramStage(this.programStageId)
                                 .setOrgUnit(orgUnitState)
-                                .setOuMode(this.ouMode)
+                                .setOuMode(orgUnitModeState)
                                 .setStatus(this.enrollmentStatus)
                                 .setEventStatus(this.eventStatus?.status, this.eventStatus?.programStage)
                                 .setFilters(dataQueryFiltersState)
@@ -5103,7 +5080,7 @@ class LineListTableComponent extends ReactWrapperModule {
                                 pager: pager,
                                 orgUnitsMap: fetchedOrgUnits,
                             };
-                            const { columns, data, filteredEntityColumns, orgUnitLabel } = getTrackedEntityTableData({ data: trackedEntityResponse }, this.programId, pager, metaData, this.searcheableDataElements, this.customDisplayInReportsIds, this.columnNameSource, this.columnMetadataDisplayMode);
+                            const { columns, data, filteredEntityColumns, orgUnitLabel } = getTrackedEntityTableData({ data: trackedEntityResponse }, this.programId, pager, metaData, this.searcheableDataElements, this.customDisplayInReportsIds, this.columnNameSource, this.columnMetadataDisplayMode, this.orgUnitAndDateColumnsPosition);
                             setFilteredColumns((prev) => filteredEntityColumns.length > 0 ? filteredEntityColumns : prev);
                             let updatedFilterableColumnIds;
                             if (Array.isArray(this.filterableColumnIds) &&
@@ -5139,6 +5116,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 metaData,
                 programIdState,
                 orgUnitState,
+                orgUnitModeState,
                 programStageIdState,
                 attributeFiltersState,
                 startDateState,
@@ -5160,7 +5138,7 @@ class LineListTableComponent extends ReactWrapperModule {
                         programId: programIdState,
                         programStageId: programStageIdState,
                         orgUnit: orgUnitState,
-                        ouMode: this.ouMode,
+                        ouMode: orgUnitModeState,
                         startDate: startDateState,
                         endDate: endDateState,
                         dataQueryFilters: dataQueryFiltersState,
@@ -5311,7 +5289,16 @@ class LineListTableComponent extends ReactWrapperModule {
             const handleAdditionalFilters = () => setDataQueryFiltersState(tempDataQueryFiltersState);
             const handleStartDateFilter = () => setStartDateState(tempStartDateState);
             const handleEndDateFilter = () => setEndDateState(tempEndDateState);
-            const handleOrgUnitFilter = () => setOrgUnitState(tempOrgUnitState);
+            const handleOrgUnitFilter = () => {
+                setOrgUnitState(tempOrgUnitState);
+                setOrgUnitModeState(tempOrgUnitModeState);
+                setPager((previous) => new Pager({ ...previous, page: 1 }));
+            };
+            const handleOrgUnitModeReset = () => {
+                setOrgUnitModeState(defaultOrgUnitMode);
+                setTempOrgUnitModeState(defaultOrgUnitMode);
+                setPager((previous) => new Pager({ ...previous, page: 1 }));
+            };
             function getTextColorFromBackGround(hex) {
                 hex = hex.replace('#', '');
                 const r = parseInt(hex.substr(0, 2), 16);
@@ -5355,59 +5342,61 @@ class LineListTableComponent extends ReactWrapperModule {
                         value: 'Download',
                     }, downloadLoading
                         ? React__default.createElement(CircularLoader$1, { small: true })
-                        : 'Download')), orgUnitModalVisible &&
-                    React__default.createElement(OrgUnitSelector, {
-                        hide: hide,
-                        setHide: setHide,
-                        selectedOrgUnit: selectedOrgUnit,
-                        setSelectedOrgUnit: setSelectedOrgUnit,
-                        setOrgUnitState: setOrgUnitState,
-                        setTempOrgUnitState: setTempOrgUnitState,
-                        tempOrgUnitState: tempOrgUnitState,
-                    }), this.showFilters &&
+                        : 'Download')), 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,
-                        //  filteredFilters: filteredFilters
+                        orgUnit: {
+                            allowMultipleOrgUnits: this.allowMultipleOrgUnits,
+                            chosenOrgUnits,
+                            setChosenOrgUnits,
+                            customOrgUnitRoots: this.customOrgUnitRoots,
+                            orgUnitLabel,
+                            selectedOrgUnit,
+                            setSelectedOrgUnit,
+                            setOrgUnitState,
+                            defaultOrgUnit,
+                            setTempOrgUnitState,
+                            tempOrgUnitState,
+                            handleOrgUnitFilter,
+                            tempOrgUnitModeState,
+                            defaultOrgUnitMode,
+                            setTempOrgUnitModeState,
+                            handleOrgUnitModeReset,
+                            prevSelectedOrgUnit,
+                            setPrevSelectedOrgUnit,
+                        },
+                        dates: {
+                            startDateState,
+                            setStartDateState,
+                            endDateState,
+                            setEndDateState,
+                            setTempStartDateState,
+                            setTempEndDateState,
+                            tempStartDateState,
+                            tempEndDateState,
+                            showEnrollmentDates: this.showEnrollmentDates,
+                            handleStartDateFilter,
+                            handleEndDateFilter,
+                        },
+                        filters: {
+                            visibleFilters,
+                            dateStates,
+                            inputValues,
+                            setInputValues,
+                            handleInputChange,
+                            handleInputChangeForSelectField,
+                            handleDateSelect,
+                            showAllFilters,
+                            setShowAllFilters,
+                            dataQueryFiltersState,
+                            setDataQueryFiltersState,
+                            handleAdditionalFilters,
+                            setDateStates,
+                            prevInputValues,
+                            setPrevInputValues,
+                            setTempDataQueryFiltersState,
+                            prevDateStates,
+                            setPrevDateStates,
+                        },
                     }), React__default.createElement('div', { className: 'line-list-table-scroll' }, React__default.createElement(LineListTable, {
                     columns: columns,
                     data: data,
@@ -5471,7 +5460,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.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", lineListRowActionFilterConfig: "lineListRowActionFilterConfig", hydrateForActionFiltering: "hydrateForActionFiltering", 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", columnNameSource: "columnNameSource", customDisplayInReportsIds: "customDisplayInReportsIds", columnMetadataDisplayMode: "columnMetadataDisplayMode" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .line-list-root{width:100%;max-width:100%;min-width:0}::ng-deep .line-list-download-toolbar{position:sticky;left:0;z-index:2;display:flex;justify-content:flex-end;width:100%;max-width:100%;box-sizing:border-box;background:#fff}::ng-deep .line-list-table-scroll{width:100%;max-width:100%;overflow-x:auto}::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"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: LineListTableComponent, isStandalone: false, selector: "ng-dhis2-ui-line-list", inputs: { triggerToken: "triggerToken", programId: "programId", orgUnit: "orgUnit", allowMultipleOrgUnits: "allowMultipleOrgUnits", customOrgUnitRoots: "customOrgUnitRoots", programStageId: "programStageId", actionOptions: "actionOptions", actionOptionOrientation: "actionOptionOrientation", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", dataQueryFilters: "dataQueryFilters", lineListRowActionFilterConfig: "lineListRowActionFilterConfig", hydrateForActionFiltering: "hydrateForActionFiltering", 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", columnNameSource: "columnNameSource", orgUnitAndDateColumnsPosition: "orgUnitAndDateColumnsPosition", customDisplayInReportsIds: "customDisplayInReportsIds", columnMetadataDisplayMode: "columnMetadataDisplayMode" }, outputs: { actionSelected: "actionSelected", rowsSelected: "rowsSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";::ng-deep .line-list-root{width:100%;max-width:100%;min-width:0}::ng-deep .line-list-download-toolbar{position:sticky;left:0;z-index:2;display:flex;justify-content:flex-end;width:100%;max-width:100%;box-sizing:border-box;background:#fff}::ng-deep .line-list-table-scroll{width:100%;max-width:100%;overflow-x:auto}::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"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
@@ -5482,6 +5471,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], orgUnit: [{
                 type: Input
+            }], allowMultipleOrgUnits: [{
+                type: Input
+            }], customOrgUnitRoots: [{
+                type: Input
             }], programStageId: [{
                 type: Input
             }], actionOptions: [{
@@ -5538,6 +5531,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], columnNameSource: [{
                 type: Input
+            }], orgUnitAndDateColumnsPosition: [{
+                type: Input
             }], customDisplayInReportsIds: [{
                 type: Input
             }], columnMetadataDisplayMode: [{