@iapps/ng-dhis2-ui 1.1.7 → 1.1.9

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

@@ -5400,108 +5400,169 @@ class SelectionFiltersComponent extends ReactWrapperModule {
     constructor() {
         super(...arguments);
         this.actionOptions = [];
-        this.attributeFilters = [];
-        this.dataElementFilters = [];
+        this.programAttributesFilters = [];
+        this.programStageDataElementFilters = [];
         this.actionSelected = new EventEmitter();
+        this.httpClient = inject(NgxDhis2HttpClientService);
+        this.ngZone = inject(NgZone);
+        this.FieldOrgUnitSelector = (props) => {
+            const { onSelectOrgUnit, onCancelOrgUnit } = props;
+            const [selected, setSelected] = useState([]);
+            const [rootOrgUnits, setRootOrgUnits] = useState();
+            const [config, setConfig] = useState();
+            useEffect(() => {
+                zip(this.getAppConfig(), this.getRootOrgUnits()).subscribe({
+                    next: ([appConfig, rootOrgUnits]) => {
+                        setConfig(appConfig);
+                        setRootOrgUnits(rootOrgUnits);
+                    },
+                    error: (error) => console.error(error),
+                });
+            }, []);
+            return config ? (React__default.createElement(Provider, { config: config, plugin: false, parentAlertsAdd: undefined, showAlertsInPlugin: false }, 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, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => {
+                            setSelected(selectionEvent.items);
+                        }, 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, { primary: true, disabled: selected.length === 0, onClick: () => {
+                                onSelectOrgUnit(selected);
+                            } }, "Confirm")))))) : (React__default.createElement(CircularLoader$1, { small: true }));
+        };
+        this.showOrgUnitTree = signal(false);
+        this.orgUnitSelectionConfig = {
+            hideGroupSelect: true,
+            hideLevelSelect: true,
+            hideUserOrgUnits: true,
+            allowSingleSelection: true,
+            usageType: 'DATA_ENTRY',
+        };
+        this.selectedOrgUnit = signal(null);
+        this.selectedOrgUnit$ = toObservable(this.selectedOrgUnit);
         this.SelectionFiltersUI = () => {
             const [filters, setFilters] = useState({
-                attributeFilters: this.attributeFilters || [],
-                dataElementFilters: this.dataElementFilters || [],
+                programAttributesFilters: this.programAttributesFilters || [],
+                programStageDataElementFilters: this.programStageDataElementFilters || [],
+                organizationUnitId: '',
+                startDate: this.startDate || '',
+                endDate: this.endDate || '',
             });
+            const [displayValue, setDisplayValue] = useState(null);
+            const [selected, setSelected] = useState();
+            const [selectedOrganisationUnit, setSelectedOrganisationUnit] = useState();
+            const [touched, setTouched] = useState(false);
+            const [showOrgUnit, setShowOrgUnit] = useState(false);
+            const [value, setValue] = useState(null);
             useEffect(() => {
                 setFilters({
-                    attributeFilters: this.attributeFilters,
-                    dataElementFilters: this.dataElementFilters,
+                    programAttributesFilters: this.programAttributesFilters,
+                    programStageDataElementFilters: this.programStageDataElementFilters,
+                    organizationUnitId: '',
+                    startDate: this.startDate || '',
+                    endDate: this.endDate || '',
                 });
-            }, [this.attributeFilters, this.dataElementFilters]);
+            }, [
+                this.programAttributesFilters,
+                this.programStageDataElementFilters,
+                this.startDate,
+                this.endDate,
+            ]);
             const handleAttributeChange = (index, selectedValue) => {
                 setFilters((prevFilters) => {
-                    const updatedFilters = [...prevFilters.attributeFilters];
-                    updatedFilters[index] = { ...updatedFilters[index], value: selectedValue };
-                    return { ...prevFilters, attributeFilters: updatedFilters };
+                    const updatedFilters = [...prevFilters.programAttributesFilters];
+                    updatedFilters[index] = {
+                        ...updatedFilters[index],
+                        value: selectedValue,
+                    };
+                    return { ...prevFilters, programAttributesFilters: updatedFilters };
                 });
             };
             const handleDataElementChange = (index, selectedValue) => {
                 setFilters((prevFilters) => {
-                    const updatedFilters = [...prevFilters.dataElementFilters];
-                    updatedFilters[index] = { ...updatedFilters[index], value: selectedValue };
-                    return { ...prevFilters, dataElementFilters: updatedFilters };
+                    const updatedFilters = [...prevFilters.programStageDataElementFilters];
+                    updatedFilters[index] = {
+                        ...updatedFilters[index],
+                        value: selectedValue,
+                    };
+                    return {
+                        ...prevFilters,
+                        programStageDataElementFilters: updatedFilters,
+                    };
                 });
             };
             const handleSearch = () => {
-                this.actionSelected.emit(filters);
+                this.actionSelected.emit({
+                    ...filters,
+                    organizationUnit: selectedOrganisationUnit,
+                    organizationUnitId: selectedOrganisationUnit,
+                    startDate: filters.startDate,
+                    endDate: filters.endDate,
+                });
             };
-            // Grid Column Span Logic for Attribute Filters
             const getAttributeColumnSpan = (index) => {
-                const totalItems = filters.attributeFilters.length;
+                const totalItems = filters.programAttributesFilters.length;
                 if (totalItems <= 4) {
-                    // If 1 to 4 items, place them in a single row (span all columns if there's only one item)
                     if (totalItems === 1) {
-                        return 'span 4'; // One item spans all four columns
+                        return 'span 4';
                     }
                     if (totalItems === 2) {
-                        return 'span 2'; // Two items, each spans 2 columns
+                        return 'span 2';
                     }
                     if (totalItems === 3) {
-                        return 'span 1'; // Three items, each spans one column
+                        return 'span 1';
                     }
                     if (totalItems === 4) {
-                        return 'span 1'; // Four items, each spans one column
+                        return 'span 1';
                     }
                 }
                 else {
-                    // More than 4 items, recursively adjust the placement
-                    const rowIndex = Math.floor(index / 2); // Calculate row by pairs
+                    const rowIndex = Math.floor(index / 2);
                     if (index % 2 === 0) {
-                        // For first item in each row, span 2 columns
                         return 'span 2';
                     }
                     else if (index === totalItems - 1) {
-                        // Last item, spans the full row (4 columns)
                         return 'span 4';
                     }
                     else {
-                        // For other items, span 2 columns
                         return 'span 2';
                     }
                 }
-                return 'span 1'; // Default behavior
+                return 'span 1';
             };
-            // Grid Column Span Logic for Data Element Filters
             const getDataElementColumnSpan = (index) => {
-                const totalItems = filters.dataElementFilters.length;
+                const totalItems = filters.programStageDataElementFilters.length;
                 if (totalItems <= 4) {
-                    // If 1 to 4 items, place them in a single row (span all columns if there's only one item)
                     if (totalItems === 1) {
-                        return 'span 4'; // One item spans all four columns
+                        return 'span 4';
                     }
                     if (totalItems === 2) {
-                        return 'span 2'; // Two items, each spans 2 columns
+                        return 'span 2';
                     }
                     if (totalItems === 3) {
-                        return 'span 1'; // Three items, each spans one column
+                        return 'span 1';
                     }
                     if (totalItems === 4) {
-                        return 'span 1'; // Four items, each spans one column
+                        return 'span 1';
                     }
                 }
                 else {
-                    // More than 4 items, recursively adjust the placement
-                    const rowIndex = Math.floor(index / 2); // Calculate row by pairs
+                    const rowIndex = Math.floor(index / 2);
                     if (index % 2 === 0) {
-                        // For first item in each row, span 2 columns
                         return 'span 2';
                     }
                     else if (index === totalItems - 1) {
-                        // Last item, spans the full row (4 columns)
                         return 'span 4';
                     }
                     else {
-                        // For other items, span 2 columns
                         return 'span 2';
                     }
                 }
-                return 'span 1'; // Default behavior
+                return 'span 1';
             };
             return (React__default.createElement("div", { style: {
                     fontFamily: 'Arial, sans-serif',
@@ -5510,20 +5571,102 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                     borderRadius: '8px',
                     boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                 } },
+                React__default.createElement("div", { style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(3, 1fr)',
+                        gap: '16px',
+                        marginBottom: '16px',
+                    } },
+                    React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement(InputField$1, { value: displayValue, label: "Organization Unit", readOnly: false, onFocus: () => {
+                                setShowOrgUnit(true);
+                            }, onBlur: () => {
+                                this.ngZone.run(() => {
+                                    console.log('THIS IS IT::: ');
+                                });
+                                setTouched(true);
+                            } }),
+                        showOrgUnit && (React__default.createElement(this.FieldOrgUnitSelector, { 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);
+                                    // this.ngZone.run(() => {
+                                    //   setDisplayValue(selectedOrgUnit.name);
+                                    //   setSelected(selectedOrgUnit.id)
+                                    //   setSelectedOrganisationUnit(selectedOrgUnit.id)
+                                    //   setValue(selectedOrgUnit.id);
+                                    //   setShowOrgUnit(false);
+                                    // setTouched(true);
+                                    // });
+                                }
+                            } }))),
+                    React__default.createElement(InputField$1, { className: "input-field", label: "Start Date", type: "date", value: filters.startDate, onChange: (event) => setFilters({ ...filters, startDate: event.value }) }),
+                    React__default.createElement(InputField$1, { className: "input-field", label: "End Date", type: "date", value: filters.endDate, onChange: (event) => setFilters({ ...filters, endDate: event.value }) })),
                 React__default.createElement("div", { style: {
                         display: 'grid',
                         gridTemplateColumns: 'repeat(4, 1fr)',
                         gap: '16px',
-                    } }, filters.attributeFilters.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: i, label: option.name, value: option.id }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleAttributeChange(index, event.value) })))))),
+                    } }, 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: i, label: option.name, value: option.id }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleAttributeChange(index, event.value) })))))),
                 React__default.createElement("div", { style: {
                         display: 'grid',
                         gridTemplateColumns: 'repeat(4, 1fr)',
                         gap: '16px',
-                    } }, filters.dataElementFilters.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: i, label: option.name, value: option.id }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleDataElementChange(index, event.value) })))))),
+                    } }, 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: i, label: option.name, value: option.id }))))) : (React__default.createElement(InputField$1, { className: "input-field", label: filter.name || 'Program name', value: filter.value, onChange: (event) => handleDataElementChange(index, event.value) })))))),
                 React__default.createElement("div", { style: { textAlign: 'right', marginTop: '16px' } },
                     React__default.createElement(Button$1, { onClick: handleSearch }, "Search"))));
         };
     }
+    getAppConfig() {
+        return this.httpClient.systemInfo().pipe(map((response) => {
+            const systemInfo = response;
+            return {
+                baseUrl: (document?.location?.host?.includes('localhost')
+                    ? `${document.location.protocol}//${document.location.host}`
+                    : systemInfo['contextPath']),
+                apiVersion: Number(((systemInfo['version'] || '')?.split('.') || [])[1]),
+            };
+        }));
+    }
+    getRootOrgUnits() {
+        const orgUnitAttribute = this.getOrgUnitAttributeByUsage(this.orgUnitSelectionConfig.usageType);
+        return this.httpClient
+            .me()
+            .pipe(map((user) => (user ? user[orgUnitAttribute] : []).map((orgUnit) => orgUnit.id)));
+    }
+    getOrgUnitLevels() {
+        return firstValueFrom(this.httpClient
+            .get('organisationUnitLevels.json?fields=id,level,displayName,name&paging=false')
+            .pipe(map((res) => res?.['organisationUnitLevels'])));
+    }
+    onSelectOrgUnit(selectedOrgUnits) {
+        this.showOrgUnitTree.set(false);
+        if ((selectedOrgUnits || [])[0]) {
+            this.selectedOrgUnit.set(selectedOrgUnits[0]);
+        }
+    }
+    getOrgUnitGroups() {
+        return firstValueFrom(this.httpClient
+            .get('organisationUnitGroups.json?fields=id,displayName,name&paging=false')
+            .pipe(map((res) => res?.['organisationUnitGroups'])));
+    }
+    getOrgUnitAttributeByUsage(usageType) {
+        switch (usageType) {
+            case 'DATA_ENTRY':
+                return 'organisationUnits';
+            case 'DATA_VIEW':
+                return 'dataViewOrganisationUnits';
+            default:
+                return 'organisationUnits';
+        }
+    }
     async ngAfterViewInit() {
         if (!this.elementRef)
             throw new Error('No element ref');
@@ -5532,16 +5675,16 @@ class SelectionFiltersComponent extends ReactWrapperModule {
         this.render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: SelectionFiltersComponent, isStandalone: false, selector: "app-selection-filters-ui", inputs: { actionOptions: "actionOptions", attributeFilters: "attributeFilters", dataElementFilters: "dataElementFilters", startDate: "startDate", endDate: "endDate" }, 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"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: SelectionFiltersComponent, isStandalone: false, selector: "app-selection-filters-ui", inputs: { actionOptions: "actionOptions", programAttributesFilters: "programAttributesFilters", programStageDataElementFilters: "programStageDataElementFilters", startDate: "startDate", endDate: "endDate" }, 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: "19.1.8", 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%}\n"] }]
         }], propDecorators: { actionOptions: [{
                 type: Input
-            }], attributeFilters: [{
+            }], programAttributesFilters: [{
                 type: Input
-            }], dataElementFilters: [{
+            }], programStageDataElementFilters: [{
                 type: Input
             }], startDate: [{
                 type: Input
@@ -5553,14 +5696,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 
 class SelectionFiltersUiModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, declarations: [SelectionFiltersComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule], exports: [SelectionFiltersComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, declarations: [SelectionFiltersComponent], imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule, OrganisationUnitSelectorModule], exports: [SelectionFiltersComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, imports: [CommonModule, SharedDhis2UiModule, OrganisationUnitSelectorModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SelectionFiltersUiModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SelectionFiltersComponent],
-                    imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule],
+                    imports: [CommonModule, SharedDhis2UiModule, ReactWrapperModule, OrganisationUnitSelectorModule],
                     exports: [SelectionFiltersComponent],
                 }]
         }] });