@iapps/ng-dhis2-ui 1.1.7 → 1.1.8

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

@@ -5403,105 +5403,163 @@ class SelectionFiltersComponent extends ReactWrapperModule {
         this.attributeFilters = [];
         this.dataElementFilters = [];
         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 || [],
+                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,
+                    organizationUnitId: '',
+                    startDate: this.startDate || '',
+                    endDate: this.endDate || '',
                 });
-            }, [this.attributeFilters, this.dataElementFilters]);
+            }, [
+                this.attributeFilters,
+                this.dataElementFilters,
+                this.startDate,
+                this.endDate,
+            ]);
             const handleAttributeChange = (index, selectedValue) => {
                 setFilters((prevFilters) => {
                     const updatedFilters = [...prevFilters.attributeFilters];
-                    updatedFilters[index] = { ...updatedFilters[index], value: selectedValue };
+                    updatedFilters[index] = {
+                        ...updatedFilters[index],
+                        value: selectedValue,
+                    };
                     return { ...prevFilters, attributeFilters: updatedFilters };
                 });
             };
             const handleDataElementChange = (index, selectedValue) => {
                 setFilters((prevFilters) => {
                     const updatedFilters = [...prevFilters.dataElementFilters];
-                    updatedFilters[index] = { ...updatedFilters[index], value: selectedValue };
+                    updatedFilters[index] = {
+                        ...updatedFilters[index],
+                        value: selectedValue,
+                    };
                     return { ...prevFilters, dataElementFilters: 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;
                 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;
                 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,6 +5568,45 @@ 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)',
@@ -5524,6 +5621,49 @@ class SelectionFiltersComponent extends ReactWrapperModule {
                     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');
@@ -5553,14 +5693,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],
                 }]
         }] });