@iapps/ng-dhis2-ui 1.2.114 → 1.2.116

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

@@ -5456,7 +5456,17 @@ class FieldDropdown {
             order: this.order,
         };
     }
-    static getDropdownOptions(field, locale) {
+    static getDropdownOptions(field, locale, extension) {
+        if (extension?.organisationUnits &&
+            extension.organisationUnits.length > 0) {
+            return sortBy(extension.organisationUnits.map((orgUnit) => {
+                return new FieldDropdown({
+                    key: orgUnit.id,
+                    value: orgUnit.id,
+                    label: orgUnit.name,
+                });
+            }), 'label');
+        }
         if (field?.valueType === FieldType.BOOLEAN) {
             return [
                 {
@@ -7636,7 +7646,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-/* eslint-disable @angular-eslint/component-selector */
 class SelectionFiltersComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
@@ -7651,9 +7660,20 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             const [selected, setSelected] = useState([]);
             const [rootOrgUnits, setRootOrgUnits] = useState();
             const [config, setConfig] = useState();
+            // TODO: START::: Improve approach on handling observables
+            // useEffect(() => {
+            //   zip(this.getAppConfig(), this.getRootOrgUnits()).subscribe({
+            //     next: ([appConfig, rootOrgUnits]) => {
+            //       setConfig(appConfig);
+            //       setRootOrgUnits(rootOrgUnits);
+            //     },
+            //     error: (error) => console.error(error),
+            //   });
+            // }, []);
+            // TODO: END::: Improve approach on handling observables
             useEffect(() => {
                 const subscription = zip(this.getAppConfig(), this.getRootOrgUnits())
-                    .pipe(take(1))
+                    .pipe(take(1)) // Ensures only one emission
                     .subscribe({
                     next: ([appConfig, rootOrgUnits]) => {
                         setConfig(appConfig);
@@ -7661,7 +7681,9 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                     },
                     error: (error) => console.error(error),
                 });
-                return () => subscription.unsubscribe();
+                return () => {
+                    subscription.unsubscribe(); // Cleanup to avoid memory leaks
+                };
             }, []);
             return config
                 ? React__default.createElement(Provider, {
@@ -7669,7 +7691,7 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                     plugin: false,
                     parentAlertsAdd: undefined,
                     showAlertsInPlugin: false,
-                    children: React__default.createElement(Modal$1, { position: 'middle', large: true }, React__default.createElement(ModalTitle$1, null, this.orgUnitFieldTitle ? this.orgUnitFieldTitle : 'Organisation Unit'), React__default.createElement(ModalContent$1, null, React__default.createElement(OrgUnitDimension, {
+                    children: React__default.createElement(Modal$1, { position: 'middle', large: true }, React__default.createElement(ModalTitle$1, null, 'Organisation unit'), React__default.createElement(ModalContent$1, null, React__default.createElement(OrgUnitDimension, {
                         selected: selected,
                         hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect,
                         hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect,
@@ -7680,10 +7702,16 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                         orgUnitGroupPromise: this.getOrgUnitGroups(),
                         orgUnitLevelPromise: this.getOrgUnitLevels(),
                         roots: rootOrgUnits,
-                    })), React__default.createElement(ModalActions$1, null, React__default.createElement(ButtonStrip$1, { end: true }, React__default.createElement(Button$1, { onClick: onCancelOrgUnit }, 'Cancel'), React__default.createElement(Button$1, {
+                    })), React__default.createElement(ModalActions$1, null, React__default.createElement(ButtonStrip$1, { end: true }, React__default.createElement(Button$1, {
+                        onClick: () => {
+                            onCancelOrgUnit();
+                        },
+                    }, 'Cancel'), React__default.createElement(Button$1, {
                         primary: true,
                         disabled: selected.length === 0,
-                        onClick: () => onSelectOrgUnit(selected),
+                        onClick: () => {
+                            onSelectOrgUnit(selected);
+                        },
                     }, 'Confirm')))),
                 })
                 : React__default.createElement(CircularLoader$1, { small: true });
@@ -7696,9 +7724,8 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             allowSingleSelection: true,
             usageType: 'DATA_ENTRY',
         };
-        // Renamed to avoid shadowing the @Input
-        this.selectedOrgUnitSignal = signal(null, ...(ngDevMode ? [{ debugName: "selectedOrgUnitSignal" }] : []));
-        this.selectedOrgUnit$ = toObservable(this.selectedOrgUnitSignal);
+        this.selectedOrgUnit = signal(null, ...(ngDevMode ? [{ debugName: "selectedOrgUnit" }] : []));
+        this.selectedOrgUnit$ = toObservable(this.selectedOrgUnit);
         this.SelectionFiltersUI = () => {
             const [filters, setFilters] = useState({
                 programAttributesFilters: this.programAttributesFilters || [],
@@ -7716,28 +7743,6 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             const [value, setValue] = useState(null);
             const [showMoreFilters, setShowMoreFilters] = useState(false);
             const toggleMoreFilters = () => setShowMoreFilters((prev) => !prev);
-            useEffect(() => {
-                const su = this.selectedOrgUnit;
-                if (su) {
-                    if (typeof su === 'object') {
-                        const id = su.id ?? su.uid ?? su.code ?? su.value ?? undefined;
-                        if (su.name) {
-                            setDisplayValue(su.name);
-                        }
-                        if (id) {
-                            setSelectedOrganisationUnit(id);
-                            setFilters((prev) => ({ ...prev, organisationUnit: id }));
-                            setValue(id);
-                        }
-                    }
-                    else if (typeof su === 'string') {
-                        setSelectedOrganisationUnit(su);
-                        setFilters((prev) => ({ ...prev, organisationUnit: su }));
-                        setDisplayValue(su);
-                        setValue(su);
-                    }
-                }
-            }, [this.selectedOrgUnit]);
             useEffect(() => {
                 setFilters({
                     programAttributesFilters: this.programAttributesFilters,
@@ -7752,8 +7757,6 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                 this.programStageDataElementFilters,
                 this.startDate,
                 this.endDate,
-                this.program,
-                this.organisationUnit,
             ]);
             const handleAttributeChange = (index, selectedValue) => {
                 setFilters((prevFilters) => {
@@ -7792,36 +7795,62 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             const getAttributeColumnSpan = (index) => {
                 const totalItems = filters.programAttributesFilters.length;
                 if (totalItems <= 4) {
-                    if (totalItems === 1)
+                    if (totalItems === 1) {
                         return 'span 4';
-                    if (totalItems === 2)
+                    }
+                    if (totalItems === 2) {
                         return 'span 2';
-                    return 'span 1';
+                    }
+                    if (totalItems === 3) {
+                        return 'span 1';
+                    }
+                    if (totalItems === 4) {
+                        return 'span 1';
+                    }
                 }
                 else {
-                    if (index % 2 === 0)
+                    const rowIndex = Math.floor(index / 2);
+                    if (index % 2 === 0) {
                         return 'span 2';
-                    if (index === totalItems - 1)
+                    }
+                    else if (index === totalItems - 1) {
                         return 'span 4';
-                    return 'span 2';
+                    }
+                    else {
+                        return 'span 2';
+                    }
                 }
+                return 'span 1';
             };
             const getDataElementColumnSpan = (index) => {
                 const totalItems = filters.programStageDataElementFilters.length;
                 if (totalItems <= 4) {
-                    if (totalItems === 1)
+                    if (totalItems === 1) {
                         return 'span 4';
-                    if (totalItems === 2)
+                    }
+                    if (totalItems === 2) {
                         return 'span 2';
-                    return 'span 1';
+                    }
+                    if (totalItems === 3) {
+                        return 'span 1';
+                    }
+                    if (totalItems === 4) {
+                        return 'span 1';
+                    }
                 }
                 else {
-                    if (index % 2 === 0)
+                    const rowIndex = Math.floor(index / 2);
+                    if (index % 2 === 0) {
                         return 'span 2';
-                    if (index === totalItems - 1)
+                    }
+                    else if (index === totalItems - 1) {
                         return 'span 4';
-                    return 'span 2';
+                    }
+                    else {
+                        return 'span 2';
+                    }
                 }
+                return 'span 1';
             };
             return React__default.createElement('div', {
                 style: {
@@ -7834,32 +7863,40 @@ class SelectionFiltersComponent extends ReactWrapperModule {
             }, React__default.createElement('div', {
                 style: {
                     display: 'grid',
-                    gridTemplateColumns: '1fr 1fr 1fr auto',
+                    gridTemplateColumns: '1fr 1fr 1fr auto', // Ensure proper button sizing
                     gap: '16px',
-                    // 👇 Bottom-align everything in the row so labels don't push inputs higher than the button
-                    alignItems: 'end',
+                    alignItems: 'center', // Align inputs and button on the same row
                     marginBottom: '16px',
                 },
             }, 
-            // Organization Unit
+            /* Organization Unit Selector */
             React__default.createElement('div', { style: { width: '100%' } }, React__default.createElement(InputField$1, {
                 value: displayValue,
-                label: this.orgUnitFieldTitle ? this.orgUnitFieldTitle : 'Organisation Unit',
+                label: 'Organization Unit',
                 readOnly: false,
                 onFocus: () => setShowOrgUnit(true),
+                onBlur: () => {
+                    setTouched(true);
+                },
             }), showOrgUnit &&
                 React__default.createElement(this.FieldOrgUnitSelector, {
-                    onCancelOrgUnit: () => setShowOrgUnit(false),
+                    onCancelOrgUnit: () => {
+                        setShowOrgUnit(false);
+                        setTouched(true);
+                    },
                     onSelectOrgUnit: (selectedOrgUnits) => {
                         if ((selectedOrgUnits || [])[0]) {
                             const selectedOrgUnit = selectedOrgUnits[0];
                             setDisplayValue(selectedOrgUnit.name);
+                            setSelected(selectedOrgUnit.id);
                             setSelectedOrganisationUnit(selectedOrgUnit.id);
+                            setValue(selectedOrgUnit.id);
                             setShowOrgUnit(false);
+                            setTouched(true);
                         }
                     },
                 })), 
-            // Start Date
+            /* Start Date */
             React__default.createElement(InputField$1, {
                 className: 'input-field',
                 label: 'Start Date',
@@ -7867,7 +7904,7 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                 value: filters.startDate,
                 onChange: (event) => setFilters({ ...filters, startDate: event.value }),
             }), 
-            // End Date
+            /* End Date */
             React__default.createElement(InputField$1, {
                 className: 'input-field',
                 label: 'End Date',
@@ -7875,15 +7912,84 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                 value: filters.endDate,
                 onChange: (event) => setFilters({ ...filters, endDate: event.value }),
             }), 
-            // Action Button (same line, bottom-aligned)
+            /* Toggle Button with Hidden Label */
             React__default.createElement('div', {
                 style: {
                     display: 'flex',
-                    justifyContent: 'flex-end',
-                    // 👇 Ensure this cell itself bottoms out in the grid row
-                    alignSelf: 'end',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100%',
+                },
+            }, React__default.createElement('label', {
+                style: {
+                    color: 'transparent', // Hides label text but keeps spacing
+                    fontSize: '14px',
+                    marginBottom: '4px',
                 },
-            }, React__default.createElement(Button$1, { style: { height: '40px' }, onClick: handleSearch }, 'Generate Report'))));
+            }, 'Toggle'), React__default.createElement(Button$1, {
+                style: { height: '40px' }, // Match input field height
+                onClick: () => setShowMoreFilters(!showMoreFilters),
+            }, showMoreFilters ? 'Hide Filters' : 'More Filters')), showMoreFilters &&
+                React__default.createElement(React__default.Fragment, null, 
+                /* Attribute Filters Grid */
+                React__default.createElement('div', {
+                    style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(4, 1fr)',
+                        gap: '16px',
+                    },
+                }, filters.programAttributesFilters.map((filter, index) => React__default.createElement('div', {
+                    key: index,
+                    style: { gridColumn: getAttributeColumnSpan(index) },
+                }, filter.hasOptions && filter.options.length > 0
+                    ? React__default.createElement(SingleSelectField, {
+                        className: 'single-select',
+                        label: filter.name || 'Select Option',
+                        selected: filter.value,
+                        onChange: (event) => handleAttributeChange(index, event.selected),
+                    }, filter.options.map((option, i) => React__default.createElement(SingleSelectOption, {
+                        key: crypto.randomUUID() || i,
+                        label: option.name,
+                        value: option.code,
+                    })))
+                    : React__default.createElement(InputField$1, {
+                        className: 'input-field',
+                        label: filter.name || 'Program name',
+                        type: filter.valueType,
+                        value: filter.value,
+                        onChange: (event) => handleAttributeChange(index, event.value),
+                    })))), 
+                /* Data Element Filters Grid */
+                React__default.createElement('div', {
+                    style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(4, 1fr)',
+                        gap: '16px',
+                    },
+                }, filters.programStageDataElementFilters.map((filter, index) => React__default.createElement('div', {
+                    key: index,
+                    style: { gridColumn: getDataElementColumnSpan(index) },
+                }, filter.hasOptions && filter.options.length > 0
+                    ? React__default.createElement(SingleSelectField, {
+                        className: 'single-select',
+                        label: filter.name || 'Aggregation type',
+                        selected: filter.value,
+                        onChange: (event) => handleDataElementChange(index, event.selected),
+                    }, filter.options.map((option, i) => React__default.createElement(SingleSelectOption, {
+                        key: crypto.randomUUID() || i,
+                        label: option.name,
+                        value: option.code,
+                    })))
+                    : React__default.createElement(InputField$1, {
+                        className: 'input-field',
+                        type: filter.valueType,
+                        label: filter.name || 'Program name',
+                        value: filter.value,
+                        onChange: (event) => handleDataElementChange(index, event.value),
+                    })))), 
+                /* Search Button */
+                React__default.createElement('div', { style: { textAlign: 'right', marginTop: '16px' } }, React__default.createElement(Button$1, { onClick: handleSearch }, 'Search')))));
         };
     }
     async getAppConfig() {
@@ -7918,7 +8024,7 @@ class SelectionFiltersComponent extends ReactWrapperModule {
     onSelectOrgUnit(selectedOrgUnits) {
         this.showOrgUnitTree.set(false);
         if ((selectedOrgUnits || [])[0]) {
-            this.selectedOrgUnitSignal.set(selectedOrgUnits[0]);
+            this.selectedOrgUnit.set(selectedOrgUnits[0]);
         }
     }
     getOrgUnitAttributeByUsage(usageType) {
@@ -7939,11 +8045,11 @@ class SelectionFiltersComponent extends ReactWrapperModule {
         this.render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SelectionFiltersComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: SelectionFiltersComponent, isStandalone: false, selector: "app-selection-filters-ui", inputs: { actionOptions: "actionOptions", programAttributesFilters: "programAttributesFilters", programStageDataElementFilters: "programStageDataElementFilters", startDate: "startDate", endDate: "endDate", program: "program", organisationUnit: "organisationUnit", selectedOrgUnit: "selectedOrgUnit", orgUnitFieldTitle: "orgUnitFieldTitle" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}.clickable-field input{cursor:pointer!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: SelectionFiltersComponent, isStandalone: false, selector: "app-selection-filters-ui", inputs: { actionOptions: "actionOptions", programAttributesFilters: "programAttributesFilters", programStageDataElementFilters: "programStageDataElementFilters", startDate: "startDate", endDate: "endDate", program: "program", organisationUnit: "organisationUnit" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SelectionFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-selection-filters-ui', template: '<ng-content></ng-content>', standalone: false, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}.clickable-field input{cursor:pointer!important}\n"] }]
+            args: [{ selector: 'app-selection-filters-ui', template: '<ng-content></ng-content>', standalone: false, styles: [".react-filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.input-field,.single-select{width:100%}\n"] }]
         }], propDecorators: { actionOptions: [{
                 type: Input
             }], programAttributesFilters: [{
@@ -7958,10 +8064,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 type: Input
             }], organisationUnit: [{
                 type: Input
-            }], selectedOrgUnit: [{
-                type: Input
-            }], orgUnitFieldTitle: [{
-                type: Input
             }], actionSelected: [{
                 type: Output
             }] } });
@@ -8230,9 +8332,9 @@ class ProgramEntryFormFieldUtil {
     get fields() {
         const fields = [...this.attributes, ...this.dataElements]
             .map((field) => {
-            const options = FieldDropdown.getDropdownOptions(field);
-            const hasOptions = options?.length > 0;
             const extension = this.config.formFieldExtensions?.find((fieldExtension) => fieldExtension?.id === field.id);
+            const options = FieldDropdown.getDropdownOptions(field, undefined, extension);
+            const hasOptions = options?.length > 0;
             const autoAssignedValue = this.#getAutoAssignedValue(field);
             if (!isUndefined(autoAssignedValue) &&
                 this.config.hideCustomAssignedFields) {
@@ -8438,6 +8540,14 @@ class ProgramEntryFormMetaData {
             const program = await this.#getProgramMetaData();
             if (program) {
                 this.program = program;
+                if (this.config?.formFieldExtensions &&
+                    this.config.formFieldExtensions.length > 0 &&
+                    this.config.formFieldExtensions[0]?.optionsSourceCode) {
+                    const orgUnitResponse = await this.d2.httpInstance.get(`organisationUnits.json?fields=id,name,code&paging=false&filter=organisationUnitGroups.code:eq:${this.config.formFieldExtensions[0].optionsSourceCode}`);
+                    const orgUnitsResponse = orgUnitResponse?.data?.['organisationUnits'];
+                    const organisationUnits = Array.isArray(orgUnitsResponse) ? orgUnitsResponse : [];
+                    this.config.formFieldExtensions[0].organisationUnits = organisationUnits;
+                }
                 return this.toJson();
             }
             return null;
@@ -8487,9 +8597,6 @@ class ProgramEntryFormModule {
         this.FormLoader = () => {
             return React__default.createElement(CircularLoader$1, { small: true });
         };
-        // dataId = computed(() => {
-        //   return this.instance()?.trackedEntity || this.instance()?.event;
-        // });
         this.dataId = computed(() => {
             if (this.config().formType === 'EVENT') {
                 return this.instance()?.event;