@iapps/ng-dhis2-ui 1.0.8 → 1.0.9

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 } 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 } from '@dhis2/ui';
+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 cx from 'classnames';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -27,6 +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';
 
 const TransferOption = ({ disabled, label, highlighted, selected, onClick, onDoubleClick, value, icon, active, tooltipText, dataTest, onEditClick, }) => {
     const renderContent = () => (React__default.createElement("div", { className: cx('chip', {
@@ -1179,7 +1180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             type: Directive,
             args: [{
                     selector: 'ng-dhis2-ui-wrapper',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { props: [{
                 type: Input
@@ -2963,9 +2964,382 @@ 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.
 
+function buildFilters(filters) {
+    return filters
+        .map(({ attribute, operator, value }) => `filter=${attribute}:${operator}:${value}`)
+        .join('&');
+}
+
+class LineListService {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+    }
+    getProgramMetadata(programId) {
+        return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name]]],organisationUnits[id,name]`);
+    }
+    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}`);
+    }
+    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`);
+    }
+    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`);
+    }
+    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) => ({
+                    metadata: programMetadata,
+                    data: events,
+                })));
+            }
+            if (programMetadata.programType === 'WITH_REGISTRATION') {
+                return this.getTrackedEntityInstances(programId, orgUnit, page, pageSize, filters, startDate, endDate).pipe(map$1((teis) => ({
+                    metadata: programMetadata,
+                    data: teis,
+                })));
+            }
+            else {
+                return this.getEvents(programId, orgUnit, page, pageSize).pipe(map$1((events) => ({
+                    metadata: programMetadata,
+                    data: events,
+                })));
+            }
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListService, deps: [{ token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.NgxDhis2HttpClientService }] });
+
+const dropdownStyles = {
+    layer: {
+        zIndex: '1 !important',
+    },
+};
+
+// Helper function to generate a unique class name
+const generateClassName = (base) => `${base}-${Math.random().toString(36).substr(2, 9)}`;
+// Helper function to convert camelCased properties to hyphenated CSS properties
+const convertStylesToCSS = (className, styles) => {
+    let cssString = `.${className} {`;
+    for (const key in styles) {
+        if (typeof styles[key] === "object" && key.startsWith("@media")) {
+            const mediaStyles = convertStylesToCSS(className, styles[key]);
+            cssString += `${key} { ${mediaStyles} }`;
+        }
+        else if (key.startsWith("&:")) {
+            const pseudoClass = key.replace("&", "");
+            cssString += `${pseudoClass} { ${convertStylesToCSS("", styles[key])} }`;
+        }
+        else {
+            const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+            cssString += `${cssKey}: ${styles[key]}; `;
+        }
+    }
+    cssString += "}";
+    return cssString;
+};
+// Custom hook for dynamic styles with generics
+const useDynamicStyles = (stylesObj) => {
+    const [classNames, setClassNames] = useState({});
+    useEffect(() => {
+        const convertedStyles = Object.keys(stylesObj).map((key) => {
+            const className = generateClassName(key);
+            const styleElement = document.createElement("style");
+            styleElement.innerHTML = convertStylesToCSS(className, stylesObj[key]);
+            document.head.appendChild(styleElement);
+            return {
+                key,
+                className,
+                styleElement,
+            };
+        });
+        setClassNames(convertedStyles.reduce((classNameEntity, convertedStyle) => {
+            return {
+                ...classNameEntity,
+                [convertedStyle.key]: convertedStyle.className,
+            };
+        }, {}));
+        return () => {
+            convertedStyles.forEach((convertedStyle) => {
+                document.head.removeChild(convertedStyle.styleElement);
+            });
+        };
+    }, []);
+    return classNames;
+};
+
+const useCurrentModal = () => {
+    const [CurrentModal, setCurrentModal] = useState();
+    return [
+        CurrentModal,
+        (Modal) => {
+            // As setState supports functional updates, we can't pass functional
+            // components directly
+            setCurrentModal(() => Modal);
+        },
+    ];
+};
+const ContextMenu = (params) => {
+    const { onClose, onMenuClick, anchorRef, dropDownOptions } = 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(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();
+                    }, dense: true })))))),
+        CurrentModal && (React__default.createElement(CurrentModal, { onClose: () => {
+                onClose();
+                setCurrentModal(null);
+            } }))));
+};
+const DropdownMenu = (props) => {
+    const ref = useRef();
+    const [visible, setVisible] = useState(false);
+    const { dropdownOptions, onClick } = props;
+    return (React__default.createElement("div", { ref: ref, style: { display: "inline-block" } },
+        React__default.createElement(Button$1, { small: true, secondary: true, icon: React__default.createElement(IconMore24, { color: colors.grey600 }), onClick: () => setVisible(true) }),
+        visible && (React__default.createElement(ContextMenu, { dropDownOptions: dropdownOptions, anchorRef: ref, onClose: () => setVisible(false), onMenuClick: (dropDownOption) => {
+                onClick(dropDownOption);
+            } }))));
+};
+
+const getProgramStageData = (response, programStageId, pager) => {
+    const events = response.data.events;
+    const allDataElements = new Set();
+    events.forEach((event) => {
+        event.dataValues.forEach((dv) => allDataElements.add(dv.dataElement));
+    });
+    const stageFromMetaData = response.metadata.programStages.find((stage) => stage.id === programStageId);
+    if (!stageFromMetaData) {
+        throw new Error(`Program stage with ID ${programStageId} not found`);
+    }
+    const entityColumns = Array.from(allDataElements).map((dataElementId) => ({
+        label: stageFromMetaData.programStageDataElements.find((psde) => psde.dataElement.id === dataElementId)?.dataElement.name || dataElementId,
+        key: dataElementId,
+    }));
+    const dataElementsData = events.map((event, idx) => {
+        let row = {
+            event: event.event,
+            index: (pager.page - 1) * pager.pageSize + idx + 1,
+        };
+        allDataElements.forEach((dataElementId) => (row[dataElementId] = ''));
+        event.dataValues.forEach((dv) => (row[dv.dataElement] = dv.value));
+        return row;
+    });
+    return { columns: entityColumns, data: dataElementsData };
+};
+const getTrackedEntityData = (response, programId, pager) => {
+    const teis = response.data.trackedEntityInstances;
+    const allAttributes = new Set();
+    teis.forEach((tei) => {
+        const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
+        const attributes = matchingEnrollment
+            ? matchingEnrollment.attributes
+            : tei.attributes;
+        attributes.forEach((attr) => allAttributes.add(attr.attribute));
+    });
+    const entityColumns = 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);
+        return {
+            label: foundAttribute?.displayName || attrId,
+            key: attrId,
+        };
+    });
+    const attributesData = teis.map((tei, idx) => {
+        let row = {
+            trackedEntityInstance: tei.trackedEntityInstance,
+            index: (pager.page - 1) * pager.pageSize + idx + 1,
+        };
+        allAttributes.forEach((attrId) => (row[attrId] = ''));
+        const matchingEnrollment = tei.enrollments.find((enrollment) => enrollment.program === programId);
+        const attributesToUse = matchingEnrollment
+            ? matchingEnrollment.attributes
+            : tei.attributes;
+        attributesToUse.forEach((attr) => (row[attr.attribute] = attr.value));
+        return row;
+    });
+    return { columns: entityColumns, data: attributesData };
+};
+const getEventData = (response, pager) => {
+    const events = response.data.events;
+    const uniqueDataElements = new Set();
+    events.forEach((event) => {
+        event.dataValues.forEach((dv) => uniqueDataElements.add(dv.dataElement));
+    });
+    const entityColumns = Array.from(uniqueDataElements).map((dataElement) => ({
+        label: response.metadata.programStages[0].programStageDataElements.find((psde) => psde.dataElement.id === dataElement)?.dataElement.name || dataElement,
+        key: dataElement,
+    }));
+    const dataElementsData = events.map((event, idx) => {
+        let row = {
+            event: event.event,
+            index: (pager.page - 1) * pager.pageSize + idx + 1,
+        };
+        uniqueDataElements.forEach((dataElement) => (row[dataElement] = ''));
+        event.dataValues.forEach((dv) => (row[dv.dataElement] = dv.value));
+        return row;
+    });
+    return { columns: entityColumns, data: dataElementsData };
+};
+const addActionsColumn = (columns, actionOptions) => {
+    return [
+        ...columns,
+        ...(actionOptions && actionOptions.length > 0
+            ? [{ label: 'Actions', key: 'actions' }]
+            : []),
+    ];
+};
+
+class LineListTableComponent extends ReactWrapperComponent {
+    constructor() {
+        super(...arguments);
+        this.lineListService = inject(LineListService);
+        this.LineList = () => {
+            const [columns, setColumns] = useState([]);
+            const [data, setData] = useState([]);
+            const [pager, setPager] = useState({
+                page: 1,
+                pageSize: 10,
+                total: 0,
+                pageCount: 1,
+            });
+            const paginationRef = useRef(null);
+            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.lineListService
+                    .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, pager.pageSize, this.attributeFilters, this.startDate, this.endDate)
+                    .subscribe((response) => {
+                    let entityColumns = [];
+                    let responsePager;
+                    let entityData = [];
+                    if (this.programStageId) {
+                        responsePager = response.data.pager;
+                        const { columns, data } = getProgramStageData(response, this.programStageId, pager);
+                        entityColumns = columns;
+                        entityData = data;
+                    }
+                    else if ('trackedEntityInstances' in response.data) {
+                        responsePager = response.data
+                            .pager;
+                        const { columns, data } = getTrackedEntityData(response, this.programId, pager);
+                        entityColumns = columns;
+                        entityData = data;
+                    }
+                    else {
+                        responsePager = response.data.pager;
+                        const { columns, data } = getEventData(response, pager);
+                        entityColumns = columns;
+                        entityData = data;
+                    }
+                    const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...entityColumns], this.actionOptions);
+                    setColumns(finalColumns);
+                    setData(entityData);
+                    setPager(responsePager);
+                });
+            }, [pager.page, pager.pageSize]);
+            console.log('columns', columns);
+            console.log('data', data);
+            const getDropdownOptions = (row) => {
+                return (this.actionOptions || []).map((option) => ({
+                    ...option,
+                    onClick: () => option.onClick?.(row),
+                }));
+            };
+            return (React__default.createElement("div", 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("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);
+                                            setPager((prev) => ({
+                                                ...prev,
+                                                page: 1,
+                                                pageSize: newPageSize,
+                                            }));
+                                        }, pageSizes: ['5', '10', '20', '50'] }))))))));
+        };
+    }
+    async ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        this.component = this.LineList;
+        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: [""] }); }
+}
+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 }]
+        }], propDecorators: { programId: [{
+                type: Input
+            }], orgUnit: [{
+                type: Input
+            }], programStageId: [{
+                type: Input
+            }], actionOptions: [{
+                type: Input
+            }], attributeFilters: [{
+                type: Input
+            }], startDate: [{
+                type: Input
+            }], endDate: [{
+                type: Input
+            }] } });
+
+class LineListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: LineListModule, declarations: [LineListTableComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [LineListTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListModule, providers: [LineListService], imports: [CommonModule, SharedDhis2UiModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LineListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LineListTableComponent],
+                    exports: [LineListTableComponent],
+                    imports: [CommonModule, SharedDhis2UiModule],
+                    providers: [LineListService],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, ButtonModule, HeaderBarComponent, HeaderBarModule, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperComponent, ReactWrapperModule };
+export { ButtonComponent, ButtonModule, HeaderBarComponent, HeaderBarModule, LineListModule, LineListTableComponent, OrganisationUnitSelectionConfig, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperComponent, ReactWrapperModule };
 //# sourceMappingURL=iapps-ng-dhis2-ui.mjs.map