@iapps/ng-dhis2-ui 1.2.64 → 1.2.68

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

@@ -3302,10 +3302,10 @@ 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, showEnrollmentDates, }) => (React__default.createElement(DataTableToolbar, { className: "table-top-toolbar" },
     React__default.createElement("div", { style: {
             display: 'flex',
-            flexDirection: 'column', // Ensures rows
+            flexDirection: 'column',
             gap: '10px',
             flexWrap: 'wrap',
         } },
@@ -3315,27 +3315,31 @@ 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);
                 } }),
-            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);
-                    }
-                } }),
+            showEnrollmentDates && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(CalendarInput, { label: "Start date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", 
+                    //clearable={!!tempStartDateState}
+                    //date={tempStartDateState || undefined}
+                    //date={tempStartDateState || "yyyy-mm-dd"}
+                    clearable: !!tempStartDateState && tempStartDateState !== '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: {
@@ -4179,6 +4183,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.actionSelected = new EventEmitter();
         this.rowsSelected = new EventEmitter();
         this.showActionButtons = true;
+        this.showEnrollmentDates = true;
         this.reactStateUpdaters = null;
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
@@ -4226,8 +4231,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 +4323,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 +4376,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 +4398,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 +4415,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 +4438,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 +4461,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, showEnrollmentDates: this.showEnrollmentDates })),
                 React__default.createElement(LineListTable, { columns: columns, data: data, pager: pager, setPager: setPager, getTextColorFromBackGround: getTextColorFromBackGround, actionOptions: this.actionOptions, actionOptionOrientation: this.actionOptionOrientation, actionSelected: this.actionSelected, selectable: selectable, rowsSelected: this.rowsSelected, showActionButtons: showActionButtons })))));
         };
     }
@@ -4503,7 +4508,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", 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"] }); }
+    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", showEnrollmentDates: "showEnrollmentDates" }, 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,
@@ -4554,6 +4559,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Output
             }], showActionButtons: [{
                 type: Input
+            }], showEnrollmentDates: [{
+                type: Input
             }] } });
 
 class LineListModule {