@iapps/ng-dhis2-ui 1.0.9 → 1.1.0

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { NgModule, Directive, Input, ContentChild, Component, EventEmitter, Output, Injectable, inject } from '@angular/core';
-import { IconEdit16, spacers, colors, theme, Tooltip, Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination } from '@dhis2/ui';
+import { IconEdit16, spacers, colors, theme, Tooltip, Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16, Layer as Layer$1, Popper, FlyoutMenu, MenuItem as MenuItem$1, IconMore24, CircularLoader as CircularLoader$1, DataTable, TableHead, DataTableRow, DataTableColumnHeader, TableBody, DataTableCell, TableFoot, Pagination } from '@dhis2/ui';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -27,7 +27,7 @@ import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
 import parse from 'html-react-parser';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
 import { isObject, isString } from 'lodash';
-import { switchMap, map as map$1 } from 'rxjs/operators';
+import { map as map$1, switchMap } from 'rxjs/operators';
 
 const TransferOption = ({ disabled, label, highlighted, selected, onClick, onDoubleClick, value, icon, active, tooltipText, dataTest, onEditClick, }) => {
     const renderContent = () => (React__default.createElement("div", { className: cx('chip', {
@@ -1151,9 +1151,6 @@ class ReactWrapperComponent {
         this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
         this.render();
     }
-    ngOnChanges() {
-        // if (this.elementRef) this.render();
-    }
     ngOnDestroy() {
         this.reactDomRoot?.unmount();
     }
@@ -1174,7 +1171,7 @@ class ReactWrapperComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ReactWrapperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: ReactWrapperComponent, isStandalone: false, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: ReactWrapperComponent, isStandalone: false, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ReactWrapperComponent, decorators: [{
             type: Directive,
@@ -2964,11 +2961,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+// export function buildFilters(filters: AttributeFilter[]): string {
+//   return filters
+//     .map(({ attribute, operator, value }) => `filter=${attribute}:${operator}:${value}`)
+//     .join('&');
+// }
 function buildFilters(filters) {
     return filters
-        .map(({ attribute, operator, value }) => `filter=${attribute}:${operator}:${value}`)
+        .map(({ attribute, dataElement, operator, value }) => {
+        // Check if attribute is defined, otherwise use dataElement
+        const field = attribute || dataElement;
+        return field ? `filter=${field}:${operator}:${value}` : '';
+    })
+        .filter(Boolean) // Remove any empty strings
         .join('&');
 }
+const matchesCondition = (eventValue, operator, filterValue) => {
+    if (typeof eventValue === 'number' && typeof filterValue === 'number') {
+        switch (operator) {
+            case '=':
+                return eventValue === filterValue;
+            case '!=':
+                return eventValue !== filterValue;
+            case '>':
+                return eventValue > filterValue;
+            case '<':
+                return eventValue < filterValue;
+            case '>=':
+                return eventValue >= filterValue;
+            case '<=':
+                return eventValue <= filterValue;
+            default:
+                return false;
+        }
+    }
+    const strEventValue = String(eventValue);
+    const strFilterValue = String(filterValue);
+    switch (operator) {
+        case '=':
+            return strEventValue === strFilterValue;
+        case '!=':
+            return strEventValue !== strFilterValue;
+        case 'contains':
+            return strEventValue.includes(strFilterValue);
+        case 'startsWith':
+            return strEventValue.startsWith(strFilterValue);
+        case 'endsWith':
+            return strEventValue.endsWith(strFilterValue);
+        case 'regex':
+            return new RegExp(strFilterValue).test(strEventValue);
+        default:
+            return false;
+    }
+};
+const getFilteredTrackedEntityInstances = (trackedEntityInstance, filters) => {
+    return trackedEntityInstance.filter((trackedEntityInstance) => trackedEntityInstance.enrollments.some((enrollment) => enrollment.events.some((event) => filters.every((filter) => event.programStage === filter.programStage &&
+        event.dataValues.some((dataValue) => dataValue.dataElement === filter.dataElement &&
+            matchesCondition(dataValue.value, filter.operator, filter.value))))));
+};
 
 class LineListService {
     constructor(httpClient) {
@@ -2980,18 +3030,28 @@ class LineListService {
     getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
         const filterParams = buildFilters(filters);
         const dateFilter = startDate && endDate ? `&programStartDate=${startDate}&programEndDate=${endDate}` : '';
-        return this.httpClient.get(`trackedEntityInstances.json?program=${programId}&ou=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=trackedEntityInstance,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}`);
+        return this.httpClient.get(`trackedEntityInstances.json?program=${programId}&ou=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=trackedEntityInstance,attributes[*],enrollments[*]&totalPages=true&${filterParams}${dateFilter}`).pipe(map$1((response) => {
+            response.trackedEntityInstances.forEach((tei) => {
+                // Filter attributes to only include those with displayInList=true
+                tei.attributes = tei.attributes.filter((attr) => attr.displayInList);
+            });
+            return response;
+        }));
     }
-    getEvents(programId, orgUnit, page, pageSize) {
-        return this.httpClient.get(`events.json?program=${programId}&orgUnit=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=event,programStage,dataValues[dataElement,value]&totalPages=true`);
+    getEvents(programId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+        const filterParams = buildFilters(filters);
+        const dateFilter = startDate && endDate ? `&startDate=${startDate}&endDate=${endDate}` : '';
+        return this.httpClient.get(`events.json?program=${programId}&orgUnit=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
     }
-    getEventsByProgramStage(programStageId, orgUnit, page, pageSize) {
-        return this.httpClient.get(`events.json?programStage=${programStageId}&orgUnit=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=event,dataValues[dataElement,value]&totalPages=true`);
+    getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters = [], startDate, endDate) {
+        const filterParams = buildFilters(filters);
+        const dateFilter = startDate && endDate ? `&startDate=${startDate}&endDate=${endDate}` : '';
+        return this.httpClient.get(`events.json?programStage=${programStageId}&orgUnit=${orgUnit}&page=${page}&pageSize=${pageSize}&fields=*&totalPages=true&${filterParams}${dateFilter}`);
     }
     getLineListData(programId, orgUnit = '', programStageId, page = 1, pageSize = 10, filters = [], startDate, endDate) {
         return this.getProgramMetadata(programId).pipe(switchMap((programMetadata) => {
             if (programStageId) {
-                return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize).pipe(map$1((events) => ({
+                return this.getEventsByProgramStage(programStageId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((events) => ({
                     metadata: programMetadata,
                     data: events,
                 })));
@@ -3003,7 +3063,7 @@ class LineListService {
                 })));
             }
             else {
-                return this.getEvents(programId, orgUnit, page, pageSize).pipe(map$1((events) => ({
+                return this.getEvents(programId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((events) => ({
                     metadata: programMetadata,
                     data: events,
                 })));
@@ -3091,11 +3151,11 @@ const ContextMenu = (params) => {
     const [CurrentModal, setCurrentModal] = useCurrentModal();
     const styles = useDynamicStyles(dropdownStyles);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Layer$1, { onBackdropClick: onClose, className: styles.layer },
+        React__default.createElement(Layer$1, { onBackdropClick: (event, data) => onClose(event, data), className: styles.layer },
             React__default.createElement(Popper, { reference: anchorRef, placement: "bottom-start" },
                 React__default.createElement(FlyoutMenu, null, dropDownOptions.map((dropDownOption, index) => (React__default.createElement(MenuItem$1, { key: index, destructive: dropDownOption.destructive, label: dropDownOption.label, icon: dropDownOption.icon, onClick: () => {
-                        // onMenuClick(dropDownOption);
-                        //onClose();
+                        onMenuClick(dropDownOption);
+                        onClose();
                     }, dense: true })))))),
         CurrentModal && (React__default.createElement(CurrentModal, { onClose: () => {
                 onClose();
@@ -3138,8 +3198,12 @@ const getProgramStageData = (response, programStageId, pager) => {
     });
     return { columns: entityColumns, data: dataElementsData };
 };
-const getTrackedEntityData = (response, programId, pager) => {
-    const teis = response.data.trackedEntityInstances;
+const getTrackedEntityData = (response, programId, pager, filters) => {
+    let teis = response.data
+        .trackedEntityInstances;
+    if (filters) {
+        teis = getFilteredTrackedEntityInstances(teis, filters);
+    }
     const allAttributes = new Set();
     teis.forEach((tei) => {
         const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
@@ -3207,9 +3271,15 @@ const addActionsColumn = (columns, actionOptions) => {
     ];
 };
 
+// src/app/line-list-table.component.ts
 class LineListTableComponent extends ReactWrapperComponent {
     constructor() {
         super(...arguments);
+        this.actionSelected = new EventEmitter();
+        this.reactStateUpdaters = null;
+        this.setReactStateUpdaters = (updaters) => {
+            this.reactStateUpdaters = updaters;
+        };
         this.lineListService = inject(LineListService);
         this.LineList = () => {
             const [columns, setColumns] = useState([]);
@@ -3221,20 +3291,40 @@ class LineListTableComponent extends ReactWrapperComponent {
                 pageCount: 1,
             });
             const paginationRef = useRef(null);
+            const [programIdState, setProgramIdState] = useState(this.programId);
+            const [orgUnitState, setOrgUnitState] = useState(this.orgUnit);
+            const [programStageIdState, setProgramStageIdState] = useState(this.programStageId);
+            const [attributeFiltersState, setAttributeFiltersState] = useState(this.attributeFilters);
+            const [startDateState, setStartDateState] = useState(this.startDate);
+            const [endDateState, setEndDateState] = useState(this.endDate);
+            const [loading, setLoading] = useState(false);
+            // Store updaters in refs for Angular to access
+            const updateRefs = useRef({
+                setProgramIdState,
+                setOrgUnitState,
+                setProgramStageIdState,
+                setAttributeFiltersState,
+                setStartDateState,
+                setEndDateState,
+            });
             useEffect(() => {
-                setTimeout(() => {
-                    const paginationContainer = document.querySelector('[data-test="dhis2-uiwidgets-pagination"]');
-                    if (paginationContainer) {
-                        paginationContainer.style.setProperty('display', 'flex', 'important');
-                        paginationContainer.style.setProperty('flex-direction', 'row', 'important');
-                        paginationContainer.style.setProperty('justify-content', 'space-between', 'important');
-                        paginationContainer.style.setProperty('align-items', 'center', 'important');
-                    }
-                }, 1000);
-                if (paginationRef.current) {
-                    paginationRef.current.style.setProperty('display', 'flex', 'important');
-                    paginationRef.current.style.setProperty('flex-direction', 'row', 'important');
+                this.setReactStateUpdaters?.(updateRefs.current);
+            }, []);
+            useEffect(() => {
+                if (!loading) {
+                    setTimeout(() => {
+                        const paginationContainer = document.querySelector('[data-test="dhis2-uiwidgets-pagination"]');
+                        if (paginationContainer) {
+                            paginationContainer.style.display = 'flex';
+                            paginationContainer.style.flexDirection = 'row';
+                            paginationContainer.style.justifyContent = 'space-between';
+                            paginationContainer.style.alignItems = 'center';
+                        }
+                    }, 500); // Short delay to ensure styles apply after data renders
                 }
+            }, [loading]);
+            useEffect(() => {
+                setLoading(true);
                 this.lineListService
                     .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, this.attributeFilters, this.startDate, this.endDate)
                     .subscribe((response) => {
@@ -3250,7 +3340,7 @@ class LineListTableComponent extends ReactWrapperComponent {
                     else if ('trackedEntityInstances' in response.data) {
                         responsePager = response.data
                             .pager;
-                        const { columns, data } = getTrackedEntityData(response, this.programId, pager);
+                        const { columns, data } = getTrackedEntityData(response, this.programId, pager, this.filters);
                         entityColumns = columns;
                         entityData = data;
                     }
@@ -3261,27 +3351,41 @@ class LineListTableComponent extends ReactWrapperComponent {
                         entityData = data;
                     }
                     const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...entityColumns], this.actionOptions);
-                    setColumns(finalColumns);
-                    setData(entityData);
-                    setPager(responsePager);
+                    setLoading(false);
+                    console.log('hey');
+                    setColumns(...[finalColumns]);
+                    setData(...[entityData]);
+                    setPager(...[responsePager]);
+                    console.log('columns', columns);
+                    console.log('data', data);
                 });
-            }, [pager.page, pager.pageSize]);
-            console.log('columns', columns);
-            console.log('data', data);
+            }, [
+                programIdState,
+                orgUnitState,
+                programStageIdState,
+                attributeFiltersState,
+                startDateState,
+                endDateState,
+                pager.page,
+                pager.pageSize,
+            ]);
             const getDropdownOptions = (row) => {
                 return (this.actionOptions || []).map((option) => ({
                     ...option,
-                    onClick: () => option.onClick?.(row),
+                    onClick: () => {
+                        option.onClick?.(row);
+                        this.actionSelected.emit({ action: option.label, row });
+                    },
                 }));
             };
-            return (React__default.createElement("div", null,
-                React__default.createElement(DataTable, null,
+            return (React__default.createElement("div", null, loading ? (React__default.createElement(CircularLoader$1, null)) :
+                (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.map((row) => (React__default.createElement(DataTableRow, { key: row.index }, columns.map((col) => (React__default.createElement(DataTableCell, { key: col.key }, col.key === 'actions' ? (React__default.createElement(DropdownMenu, { dropdownOptions: getDropdownOptions(row), onClick: (option) => option.onClick?.() })) : (row[col.key])))))))),
                     React__default.createElement(TableFoot, null,
                         React__default.createElement(DataTableRow, null,
-                            React__default.createElement(DataTableCell, { colSpan: columns.length },
+                            React__default.createElement(DataTableCell, { colSpan: columns.length.toString() },
                                 React__default.createElement("div", null,
                                     React__default.createElement(Pagination, { page: pager.page, pageCount: pager.pageCount, pageSize: pager.pageSize, total: pager.total, onPageChange: (page) => setPager((prev) => ({ ...prev, page })), onPageSizeChange: (pageSize) => {
                                             const newPageSize = Number(pageSize);
@@ -3290,9 +3394,31 @@ class LineListTableComponent extends ReactWrapperComponent {
                                                 page: 1,
                                                 pageSize: newPageSize,
                                             }));
-                                        }, pageSizes: ['5', '10', '20', '50'] }))))))));
+                                        }, pageSizes: ['5', '10', '20', '50'] })))))))));
         };
     }
+    ngOnChanges(changes) {
+        if (this.reactStateUpdaters) {
+            if (changes['programId']) {
+                this.reactStateUpdaters.setProgramIdState(this.programId);
+            }
+            if (changes['orgUnit']) {
+                this.reactStateUpdaters.setOrgUnitState(this.orgUnit);
+            }
+            if (changes['programStageId']) {
+                this.reactStateUpdaters.setProgramStageIdState(this.programStageId);
+            }
+            if (changes['attributeFilters']) {
+                this.reactStateUpdaters.setAttributeFiltersState(this.attributeFilters);
+            }
+            if (changes['startDate']) {
+                this.reactStateUpdaters.setStartDateState(this.startDate);
+            }
+            if (changes['endDate']) {
+                this.reactStateUpdaters.setEndDateState(this.endDate);
+            }
+        }
+    }
     async ngAfterViewInit() {
         if (!this.elementRef)
             throw new Error('No element ref');
@@ -3301,11 +3427,11 @@ class LineListTableComponent extends ReactWrapperComponent {
         this.render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: LineListTableComponent, isStandalone: false, selector: "app-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", startDate: "startDate", endDate: "endDate", filters: "filters" }, outputs: { actionSelected: "actionSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-line-list', template: '<ng-content></ng-content>', standalone: false }]
+            args: [{ selector: 'app-line-list', template: '<ng-content></ng-content>', standalone: false, styles: ["[data-test=dhis2-uiwidgets-pagination]{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}\n"] }]
         }], propDecorators: { programId: [{
                 type: Input
             }], orgUnit: [{
@@ -3320,6 +3446,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 type: Input
             }], endDate: [{
                 type: Input
+            }], filters: [{
+                type: Input
+            }], actionSelected: [{
+                type: Output
             }] } });
 
 class LineListModule {