@iapps/ng-dhis2-ui 1.1.75 → 1.1.77

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

@@ -3577,7 +3577,7 @@ class LineListService {
             ? `&ouMode=${ouMode}`
             : `&orgUnitMode=${ouMode}`;
         return this.httpClient
-            .get(`tracker/trackedEntities.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntity,orgUnit,attributes[*],enrollments[*]&totalPages=true&${filterParams}&${filterParamsFromEvents}${dateFilter}&order=createdAt:desc`)
+            .get(`tracker/trackedEntities.json?program=${programId}&orgUnit=${orgUnit}${ouModeIdentifier}&page=${page}&pageSize=${pageSize}&fields=trackedEntity,orgUnit,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}&order=createdAt:desc`)
             .pipe(switchMap((response) => {
             if (filterRootOrgUnit) {
                 response.trackedEntities = response.trackedEntities.filter((tei) => tei.orgUnit !== orgUnit);
@@ -3955,7 +3955,39 @@ const getTrackedEntityData = (response, programId, pager, isOptionSetNameVisible
         key: attr.id,
     }));
     const searchableKeys = new Set(searchableAttributes.map((attr) => attr.key));
-    const filteredEntityColumns = entityColumns.filter((column) => searchableKeys.has(column.key));
+    const filteredEntityColumns = Array.from(allAttributes)
+        .map((attrId) => {
+        const foundAttribute = teis
+            .flatMap((tei) => {
+            const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
+            return matchingEnrollment
+                ? matchingEnrollment.attributes
+                : tei.attributes;
+        })
+            .find((attr) => attr.attribute === attrId);
+        // Find the corresponding attribute in mappedProgramMetadataAttributes
+        const mappedAttr = mappedProgramMetadataAttributes.find((attr) => attr.id === attrId);
+        return {
+            label: foundAttribute?.displayName || attrId,
+            key: attrId,
+            valueType: foundAttribute?.valueType,
+            options: mappedAttr?.optionSet ?? undefined
+        };
+    })
+        .filter((column) => {
+        return mappedProgramMetadataAttributes
+            .filter((attr) => attr.displayInList)
+            .some((attr) => attr.id === column.key);
+    })
+        .sort((a, b) => {
+        const sortOrderA = Number(mappedProgramMetadataAttributes.find((attr) => attr.id === a.key)
+            ?.sortOrder ?? 0);
+        const sortOrderB = Number(mappedProgramMetadataAttributes.find((attr) => attr.id === b.key)
+            ?.sortOrder ?? 0);
+        return sortOrderA - sortOrderB;
+    })
+        .filter((column) => searchableKeys.has(column.key));
+    console.log('filtered entity columns', filteredEntityColumns);
     const attributesData = teis.map((tei, idx) => {
         const row = {
             trackedEntityInstance: tei.trackedEntity,
@@ -4029,6 +4061,7 @@ const getTrackedEntityData = (response, programId, pager, isOptionSetNameVisible
             })),
         ];
     }
+    console.log('filtered entity columns', filteredEntityColumns);
     return {
         columns: entityColumns,
         data: attributesData,
@@ -4181,6 +4214,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 : (filteredColumns ?? []).slice(0, 2);
             const defaultOrgUnit = this.orgUnit;
             const [prevValue, setPrevValue] = useState();
+            const [dateStates, setDateStates] = useState({});
             // Store updaters in refs for Angular to access
             const updateRefs = useRef({
                 setProgramIdState,
@@ -4269,7 +4303,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 setIsButtonLoading(true);
                 const subscription = this.lineListService
                     .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, 1000, this.attributeFilters, this.startDate, this.endDate, this.ouMode)
-                    .pipe(take(1)) // Ensures the observable emits only once
+                    .pipe(take(1))
                     .subscribe((response) => {
                     if ('trackedEntities' in response.data ||
                         'instances' in response.data) {
@@ -4285,16 +4319,16 @@ class LineListTableComponent extends ReactWrapperModule {
                                 }
                                 : null;
                         })
-                            .filter(Boolean); // Removes null entries
+                            .filter(Boolean);
                         this.approvalSelected.emit(teiEnrollmentList);
                     }
                     else {
-                        this.approvalSelected.emit([]); // Emit empty array if no TEIs
+                        this.approvalSelected.emit([]);
                     }
-                    setIsButtonLoading(false); // Stop loading after processing
+                    setIsButtonLoading(false);
                 });
                 return () => {
-                    subscription.unsubscribe(); // Cleanup to avoid potential memory leaks
+                    subscription.unsubscribe();
                 };
             };
             const handleInputChange = (key, value) => {
@@ -4312,6 +4346,27 @@ class LineListTableComponent extends ReactWrapperModule {
                     return updatedFilters;
                 });
             };
+            const handleDateSelect = (key, selectedDate) => {
+                const selectedDateString = selectedDate?.calendarDateString ?? ''; // Default to empty string if null
+                // Update dateStates
+                setDateStates((prevDateStates) => ({
+                    ...prevDateStates,
+                    [key]: selectedDateString, // Will set it to empty if date is cleared
+                }));
+                // Update attributeFiltersState to remove filter if date is cleared
+                setAttributeFiltersState((prevFilters = []) => {
+                    // Remove old filter for this key if the date is empty
+                    const filteredFilters = prevFilters.filter((f) => f.attribute !== key);
+                    // Only add a filter if the date is not empty
+                    const updatedFilters = selectedDateString.trim()
+                        ? [
+                            ...filteredFilters,
+                            { attribute: key, operator: 'like', value: selectedDateString },
+                        ]
+                        : filteredFilters; // If empty, just keep the filteredFilters as they are
+                    return updatedFilters;
+                });
+            };
             return (React__default.createElement("div", null,
                 React__default.createElement("div", null, valueMatch &&
                     this.dispatchTeis &&
@@ -4367,54 +4422,52 @@ class LineListTableComponent extends ReactWrapperModule {
                             React__default.createElement(CalendarInput, { label: "End date:", calendar: "gregory", locale: "en-GB", timeZone: "Africa/Dar_es_Salaam", className: "custom-input", date: endDateState, onDateSelect: (selectedDate) => {
                                     setEndDateState(selectedDate.calendarDateString);
                                 } }),
-                            (visibleFilters ?? []).map(({ label, key }) => (React__default.createElement(InputField$1, { key: key, label: `${label}:`, className: "custom-input", value: inputValues[key] || '', clearable: true, onChange: (e) => {
-                                    let currentValue = '';
-                                    if ('target' in e && e.target) {
-                                        currentValue = e.target.value;
-                                    }
-                                    else if ('value' in e) {
-                                        currentValue = e.value ?? '';
-                                    }
-                                    setInputValues((prevValues) => ({
-                                        ...prevValues,
-                                        [key]: currentValue,
-                                    }));
-                                    // Trigger change immediately if the input is cleared
-                                    if (currentValue === '') {
-                                        handleInputChange(key, '');
-                                    }
-                                }, 
-                                // onChange={(
-                                //   e:
-                                //     | React.ChangeEvent<HTMLInputElement>
-                                //     | { value?: string }
-                                // ) => {
-                                //   if ('target' in e && e.target) {
-                                //     setInputValues((prevValues) => ({
-                                //       ...prevValues,
-                                //       [key]: (e as React.ChangeEvent<HTMLInputElement>)
-                                //         .target.value,
-                                //     }));
-                                //   } else if ('value' in e) {
-                                //     setInputValues((prevValues) => ({
-                                //       ...prevValues,
-                                //       [key]: e.value ?? '',
-                                //     }));
-                                //   }
-                                // }}
-                                onBlur: (e) => {
-                                    let currentValue = '';
-                                    if ('target' in e && e.target) {
-                                        currentValue = e.target.value;
-                                    }
-                                    else if ('value' in e) {
-                                        currentValue = e.value ?? '';
-                                    }
-                                    if (currentValue !== '' && currentValue !== prevValue) {
-                                        handleInputChange(key, currentValue);
-                                        setPrevValue(currentValue);
-                                    }
-                                } }))),
+                            (visibleFilters ?? []).map(({ label, key, valueType, options }) => {
+                                // Render CalendarInput for DATE fields
+                                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", date: dateStates[key] || '', onDateSelect: (selectedDate) => handleDateSelect(key, selectedDate) }));
+                                }
+                                // Render SingleSelectField if options exist
+                                if (options && options.options.length > 0) {
+                                    return (React__default.createElement(SingleSelectField, { key: key, label: `${label}:`, selected: inputValues[key] || '', className: "custom-select-input", clearable: true, onChange: ({ selected }) => {
+                                            setInputValues((prevValues) => ({
+                                                ...prevValues,
+                                                [key]: selected ?? '',
+                                            }));
+                                            handleInputChange(key, selected ?? '');
+                                        } }, (options.options ?? []).map((opt) => (React__default.createElement(SingleSelectOption, { key: opt.id, label: opt.name, value: opt.code })))));
+                                }
+                                // Fallback: default InputField
+                                return (React__default.createElement(InputField$1, { key: key, label: `${label}:`, className: "custom-input", value: inputValues[key] || '', clearable: true, onChange: (e) => {
+                                        let currentValue = '';
+                                        if ('target' in e && e.target) {
+                                            currentValue = e.target.value;
+                                        }
+                                        else if ('value' in e) {
+                                            currentValue = e.value ?? '';
+                                        }
+                                        setInputValues((prevValues) => ({
+                                            ...prevValues,
+                                            [key]: currentValue,
+                                        }));
+                                        if (currentValue === '') {
+                                            handleInputChange(key, '');
+                                        }
+                                    }, onBlur: (e) => {
+                                        let currentValue = '';
+                                        if ('target' in e && e.target) {
+                                            currentValue = e.target.value;
+                                        }
+                                        else if ('value' in e) {
+                                            currentValue = e.value ?? '';
+                                        }
+                                        if (currentValue !== '' &&
+                                            currentValue !== prevValue) {
+                                            handleInputChange(key, currentValue);
+                                            setPrevValue(currentValue);
+                                        }
+                                    } }));
+                            }),
                             React__default.createElement(Button$1, { onClick: () => setShowAllFilters(!showAllFilters) }, showAllFilters ? 'Less Filters' : 'More Filters')))),
                     React__default.createElement(DataTable, null,
                         React__default.createElement(TableHead, null,
@@ -4484,11 +4537,11 @@ 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", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected", firstValue: "firstValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["::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 label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!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", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected", firstValue: "firstValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["::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 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,
-            args: [{ selector: 'ng-dhis2-ui-line-list', template: '<ng-content></ng-content>', standalone: false, styles: ["::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 label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}\n"] }]
+            args: [{ selector: 'ng-dhis2-ui-line-list', template: '<ng-content></ng-content>', standalone: false, styles: ["::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 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"] }]
         }], propDecorators: { programId: [{
                 type: Input
             }], orgUnit: [{