@iapps/ng-dhis2-ui 1.2.64 → 1.2.66

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

@@ -3302,7 +3302,7 @@ 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, }) => (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',
             flexDirection: 'column', // Ensures rows
@@ -3315,7 +3315,10 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                 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) => {
+            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);
                 } }),
@@ -3323,14 +3326,14 @@ const FilterToolbar = ({ orgUnitLabel, selectedOrgUnit, setSelectedOrgUnit, setO
                 //clearable={!!tempStartDateState}
                 //date={tempStartDateState || undefined}
                 //date={tempStartDateState || "yyyy-mm-dd"}
-                clearable: !!tempStartDateState && tempStartDateState !== "yyyy-mm-dd", date: tempStartDateState || "yyyy-mm-dd", onDateSelect: (selectedDate) => {
+                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) => {
+            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);
@@ -4226,8 +4229,9 @@ 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 d2 = window.d2Web;
-            // Store updaters in refs for Angular to access
+            // Stores updaters in refs for Angular to access
             const updateRefs = useRef({
                 setProgramIdState,
                 setOrgUnitState,
@@ -4317,11 +4321,13 @@ class LineListTableComponent extends ReactWrapperModule {
                             ? response.data
                             : [response.data];
                         const orgUnitIdsFromEnrollments = new Set(trackedEntityInstances.map((tei) => tei.latestEnrollment.orgUnit));
-                        const orgUnitsFromAttributes = new Set(trackedEntityInstances
-                            .flatMap((tei) => tei.attributes
+                        const orgUnitsFromAttributes = new Set(trackedEntityInstances.flatMap((tei) => tei.attributes
                             ?.filter((attr) => attr.valueType === 'ORGANISATION_UNIT')
                             .map((attr) => attr.value) || []));
-                        const uniqueOrgUnitIds = [...orgUnitIdsFromEnrollments, ...orgUnitsFromAttributes];
+                        const uniqueOrgUnitIds = [
+                            ...orgUnitIdsFromEnrollments,
+                            ...orgUnitsFromAttributes,
+                        ];
                         this.lineListService.fetchOrgUnits(uniqueOrgUnitIds).subscribe({
                             next: (fetchedOrgUnits) => {
                                 const trackedEntityResponse = {
@@ -4368,9 +4374,9 @@ class LineListTableComponent extends ReactWrapperModule {
                     [key]: value ?? '',
                 }));
                 setTempDataQueryFiltersState((prevFilters) => {
-                    // Remove old filter for this key
+                    // 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,
@@ -4390,9 +4396,9 @@ class LineListTableComponent extends ReactWrapperModule {
                     [key]: value ?? '',
                 }));
                 setTempDataQueryFiltersState((prevFilters = []) => {
-                    // Remove existing filter for the same key (attribute)
+                    // 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,
@@ -4407,12 +4413,12 @@ class LineListTableComponent extends ReactWrapperModule {
             };
             const handleDateSelect = (key, selectedDate) => {
                 const selectedDateString = selectedDate?.calendarDateString ?? '';
-                // Update dateStates
+                // Updates dateStates
                 setDateStates((prevDateStates) => ({
                     ...prevDateStates,
                     [key]: selectedDateString,
                 }));
-                // Update dataQueryFilters
+                // Updates dataQueryFilters
                 setTempDataQueryFiltersState((prevFilters) => {
                     const filteredFilters = (prevFilters || []).filter((f) => f.attribute !== key);
                     const updatedFilters = selectedDateString.trim()
@@ -4430,20 +4436,17 @@ class LineListTableComponent extends ReactWrapperModule {
             const handleSearch = () => (setDataQueryFiltersState(tempDataQueryFiltersState),
                 setStartDateState(tempStartDateState),
                 setEndDateState(tempEndDateState),
-                setOrgUnitState(tempOrgUnitState)
-            // console.log(
-            //   'Search button clicked',)
-            );
+                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: {
@@ -4456,8 +4459,8 @@ 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, 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 })),
+                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 })))));
         };
     }