@iapps/ng-dhis2-ui 1.1.76 → 1.1.78

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

@@ -3955,7 +3955,38 @@ 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));
     const attributesData = teis.map((tei, idx) => {
         const row = {
             trackedEntityInstance: tei.trackedEntity,
@@ -4181,6 +4212,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 +4301,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 +4317,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 +4344,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 &&
@@ -4337,7 +4390,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 // <div>
                 //   <div/>
                 React__default.createElement("div", null,
-                    React__default.createElement(Modal$1, { hide: hide },
+                    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) => {
@@ -4367,60 +4420,61 @@ 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,
                             React__default.createElement(DataTableRow, null, columns.map((col) => (React__default.createElement(DataTableColumnHeader, { key: col.key }, col.label))))),
                         React__default.createElement(TableBody, null, data.length > 0 ? (data.map((row) => (React__default.createElement(DataTableRow, { key: row.index }, columns.map((col) => (React__default.createElement(DataTableCell, { key: col.key }, col.key === 'actions'
                             ? this.actionOptions && (React__default.createElement(DataTableActions, { actionOptions: this.actionOptions, actionOptionOrientation: this.actionOptionOrientation, onClick: (option) => {
+                                    if (option.onClick) {
+                                        option.onClick(row);
+                                    }
                                     this.actionSelected.emit({
                                         action: option.label,
                                         row,
@@ -4484,11 +4538,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: [{
@@ -4552,6 +4606,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+// Copyright 2025 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
 const dropdownStyles = {
     layer: {
         zIndex: '1 !important',
@@ -5429,9 +5487,20 @@ class MetadataRule {
 class FormMetadataSection {
     constructor(params) {
         this.params = params;
+        this.inheritedAttributes = [];
+        this.inheritedAttributes =
+            (this.params.program['trackedEntityType'] || {})['trackedEntityTypeAttributes'] || [];
     }
     get attributes() {
-        return (this.params.program['programTrackedEntityAttributes'] || []).map((programTrackedEntityAttribute) => {
+        let programTrackedEntityAttributes = this.params.program['programTrackedEntityAttributes'] || [];
+        if (this.params.excludeInheritedAttributes) {
+            programTrackedEntityAttributes = programTrackedEntityAttributes.filter((programTrackedEntityAttribute) => {
+                return !this.inheritedAttributes.find((inheritedAttribute) => inheritedAttribute['trackedEntityAttribute']?.id ===
+                    programTrackedEntityAttribute['trackedEntityAttribute']
+                        ?.id);
+            });
+        }
+        return programTrackedEntityAttributes.map((programTrackedEntityAttribute) => {
             return {
                 ...programTrackedEntityAttribute['trackedEntityAttribute'],
                 formName: (programTrackedEntityAttribute['trackedEntityAttribute'] || {})['name'],
@@ -5471,7 +5540,7 @@ class FormMetadataSection {
         return {
             id: this.params.section?.id,
             name: this.params.section?.name,
-            fieldGroups: this.fieldGroups,
+            fieldGroups: this.fieldGroups.filter((fieldGroup) => fieldGroup.fields?.length > 0),
         };
     }
 }
@@ -5579,6 +5648,7 @@ class FormMetaData {
                 },
                 program,
                 locale: this.params.locale,
+                excludeInheritedAttributes: this.params.excludeInheritedAttributes,
             }).toJson();
         });
     }
@@ -5607,6 +5677,7 @@ class FormMetaData {
             },
             program,
             locale: this.params.locale,
+            excludeInheritedAttributes: this.params.excludeInheritedAttributes,
         }).toJson();
     }
     #getReportingDateSection(program) {
@@ -5643,6 +5714,7 @@ class FormMetaData {
             },
             program,
             locale: this.params.locale,
+            excludeInheritedAttributes: this.params.excludeInheritedAttributes,
         }).toJson();
     }
     #getRegistrationSection(program) {
@@ -5675,6 +5747,7 @@ class FormMetaData {
             },
             program,
             locale: this.params.locale,
+            excludeInheritedAttributes: this.params.excludeInheritedAttributes,
         }).toJson();
     }
     #getMergedRegistrationSection(program) {
@@ -5750,6 +5823,7 @@ class FormMetaData {
             },
             program,
             locale: this.params.locale,
+            excludeInheritedAttributes: this.params.excludeInheritedAttributes,
         }).toJson();
     }
     toJson() {
@@ -5840,18 +5914,6 @@ const FileUploadField = (props) => {
             else {
                 onChange(file);
             }
-            // this.ngZone.run(() => {
-            //   this.form().get(this.field().id) ||
-            //     this.form()
-            //       .get(this.field().key)
-            //       ?.setValue((event?.files || [])[0]);
-            //   this.update.emit({
-            //     form: this.form(),
-            //     value: (event?.files || [])[0],
-            //   });
-            // });
-            // setValue((event?.files || [])[0]);
-            // setTouched(true);
         } }, file && (React__default.createElement(FileListItem, { cancelText: "Cancel", label: file.name, loading: uploading, onRemove: () => {
             setFile(null);
         }, removeText: "Remove" }))));
@@ -7362,6 +7424,7 @@ class TrackerFormComponent {
                 programs: [program],
                 programStage: this.programStage(),
                 disableEnrollmentDate: true,
+                excludeInheritedAttributes: true,
             }).toJson();
         }
     }
@@ -7477,7 +7540,14 @@ class ProgramEntryFormFieldUtil {
         this.config = config;
     }
     get attributes() {
-        return (this.program.programTrackedEntityAttributes || []).map((programTrackedEntityAttribute) => {
+        let programTrackedEntityAttributes = this.program.programTrackedEntityAttributes || [];
+        if (this.config.excludeInheritedAttributes) {
+            programTrackedEntityAttributes = programTrackedEntityAttributes.filter((programTrackedEntityAttribute) => {
+                return !(this.program.trackedEntityType?.trackedEntityTypeAttributes || []).find((inheritedAttribute) => inheritedAttribute.trackedEntityAttribute?.id ===
+                    programTrackedEntityAttribute?.trackedEntityAttribute?.id);
+            });
+        }
+        return programTrackedEntityAttributes.map((programTrackedEntityAttribute) => {
             return {
                 ...programTrackedEntityAttribute.trackedEntityAttribute,
                 sortOrder: programTrackedEntityAttribute.sortOrder,
@@ -7639,6 +7709,11 @@ class ProgramEntryFormMetaData {
             'useFirstStageDuringRegistration',
             'trackedEntityType',
         ])
+            .with(this.d2.programModule.trackedEntityType
+            .select(['id', 'name'])
+            .with(this.d2.programModule.trackedEntityTypeAttribute.select([
+            'trackedEntityAttribute',
+        ])), 'ToOne')
             .with(this.d2.programModule.programTrackedEntityAttribute.with(this.d2.programModule.trackedEntityAttribute.with(this.d2.optionSetModule.optionSet.with(this.d2.optionSetModule.option), 'ToOne'), 'ToOne'))
             .with(this.d2.programModule.programRuleVariable
             .with(this.d2.dataElementModule.dataElement.select([