@iapps/ng-dhis2-ui 1.1.67 → 1.1.69

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

@@ -8,7 +8,7 @@ import { NgxDhis2HttpClientService } from '@iapps/ngx-dhis2-http-client';
 import * as React from 'react';
 import React__default, { useState, useCallback, useRef, useEffect, createContext, useContext, useMemo } from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { catchError, of, map, zip, firstValueFrom, filter, Subject, takeUntil } from 'rxjs';
+import { catchError, of, map, zip, firstValueFrom, take, filter, Subject, takeUntil } from 'rxjs';
 import i18n from '@dhis2/d2-i18n';
 import { colors, theme, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
@@ -3446,31 +3446,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i1.NgxDhis2HttpClientService }] });
 
-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) => {
-        const 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 };
-};
+// export const getProgramStageData = (
+//   response: LineListResponse,
+//   programStageId: string,
+//   pager: any,
+//   isOptionSetNameVisible: boolean
+// ): { columns: ColumnDefinition[]; data: TableRow[] } => {
+//   const events = (response.data as EventsResponse).events;
+//   const allDataElements = new Set<string>();
+//   events.forEach((event: any) => {
+//     event.dataValues.forEach((dv: any) => allDataElements.add(dv.dataElement));
+//   });
+//   const stageFromMetaData = response.metadata.programStages.find(
+//     (stage: any) => stage.id === programStageId
+//   );
+//   if (!stageFromMetaData) {
+//     throw new Error(`Program stage with ID ${programStageId} not found`);
+//   }
+//   const entityColumns = Array.from(allDataElements).map(
+//     (dataElementId: string) => ({
+//       label:
+//         stageFromMetaData.programStageDataElements.find(
+//           (psde: any) => psde.dataElement.id === dataElementId
+//         )?.dataElement.name || dataElementId,
+//       key: dataElementId,
+//     })
+//   );
+//   const dataElementsData: TableRow[] = events.map((event: any, idx: number) => {
+//     const row: TableRow = {
+//       event: event.event,
+//       index: (pager.page - 1) * pager.pageSize + idx + 1,
+//     };
+//     allDataElements.forEach(
+//       (dataElementId: string) => (row[dataElementId] = '')
+//     );
+//     if (isOptionSetNameVisible) {
+//       event.dataValues.forEach((dv: any) => (row[dv.dataElement] = dv.value));
+//     } else {
+//       event.dataValues.forEach((dv: any) => (row[dv.dataElement] = dv.value));
+//     }
+//     return row;
+//   });
+//   return { columns: entityColumns, data: dataElementsData };
+// };
 // export const getTrackedEntityData = (
 //   response: LineListResponse,
 //   programId: string,
@@ -3603,6 +3621,44 @@ const getProgramStageData = (response, programStageId, pager) => {
 //     filteredEntityColumns: filteredEntityColumns,
 //   };
 // };
+const getProgramStageData = (response, programStageId, pager, isOptionSetNameVisible) => {
+    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) => {
+        const dataElementMeta = stageFromMetaData.programStageDataElements.find((psde) => psde.dataElement.id === dataElementId);
+        return {
+            label: dataElementMeta?.dataElement.name || dataElementId,
+            key: dataElementId,
+        };
+    });
+    const dataElementsData = events.map((event, idx) => {
+        const row = {
+            event: event.event,
+            index: (pager.page - 1) * pager.pageSize + idx + 1,
+        };
+        allDataElements.forEach((dataElementId) => (row[dataElementId] = ''));
+        event.dataValues.forEach((dv) => {
+            const dataElementMeta = stageFromMetaData.programStageDataElements.find((psde) => psde.dataElement.id === dv.dataElement);
+            if (isOptionSetNameVisible && dataElementMeta?.dataElement.optionSet) {
+                const optionSet = dataElementMeta.dataElement.optionSet;
+                const matchingOption = optionSet.options.find((option) => option.code === dv.value);
+                row[dv.dataElement] = matchingOption ? matchingOption.name : dv.value;
+            }
+            else {
+                row[dv.dataElement] = dv.value;
+            }
+        });
+        return row;
+    });
+    return { columns: entityColumns, data: dataElementsData };
+};
 const getTrackedEntityData = (response, programId, pager, isOptionSetNameVisible, filters) => {
     let teis = response.data?.trackedEntities ??
         response.data?.instances ??
@@ -4040,10 +4096,132 @@ class LineListTableComponent extends ReactWrapperModule {
             useEffect(() => {
                 this.setReactStateUpdaters?.(updateRefs.current);
             }, []);
+            // TODO: START: Improve the approach of handling observables 
+            // useEffect(() => {
+            //   setLoading(true);
+            //   this.lineListService
+            //     .getLineListData(
+            //       this.programId,
+            //       orgUnitState,
+            //       this.programStageId,
+            //       pager.page,
+            //       pager.pageSize,
+            //       attributeFiltersState,
+            //       startDateState,
+            //       endDateState,
+            //       this.ouMode,
+            //       this.filterRootOrgUnit,
+            //       this.useOuModeWithOlderDHIS2Instance
+            //     )
+            //     .subscribe((response: LineListResponse) => {
+            //       let entityColumns: ColumnDefinition[] = [];
+            //       let responsePager: Pager;
+            //       let entityData: TableRow[] = [];
+            //       let filteredDataColumns: ColumnDefinition[] = [];
+            //       if (this.programStageId) {
+            //         responsePager = (response.data as EventsResponse).pager;
+            //         const { columns, data } = getProgramStageData(
+            //           response,
+            //           this.programStageId,
+            //           pager,
+            //           this.isOptionSetNameVisible
+            //         );
+            //         entityColumns = columns;
+            //         entityData = data;
+            //       } else if (
+            //         'trackedEntities' in response.data ||
+            //         'instances' in response.data
+            //       ) {
+            //         const responseData: any = response.data as TrackedEntityResponse;
+            //         responsePager = (response.data as TrackedEntityResponse).pager || {
+            //           page: responseData.page,
+            //           pageSize: responseData.pageSize,
+            //           total: responseData.total,
+            //           pageCount: responseData.pageCount,
+            //         };
+            //         const { columns, data, filteredEntityColumns } =
+            //           getTrackedEntityData(
+            //             response,
+            //             this.programId,
+            //             pager,
+            //             this.isOptionSetNameVisible,
+            //             this.filters
+            //           );
+            //         entityColumns = columns;
+            //         entityData = data;
+            //         //TODO: Should be done on the parent
+            //         const checkValues = [
+            //           ...new Set(
+            //             (
+            //               response.data as TrackedEntityResponse
+            //             )?.trackedEntities?.[0]?.enrollments?.[0]?.events?.flatMap(
+            //               (event) =>
+            //                 event.dataValues
+            //                   .filter((dataValue) =>
+            //                     /^[A-Za-z]{3}$/.test(dataValue.value)
+            //                   )
+            //                   .map((dataValue) => dataValue.value)
+            //             ) ??
+            //               (
+            //                 response.data as TrackedEntityResponse
+            //               )?.instances?.[0]?.enrollments?.[0]?.events?.flatMap(
+            //                 (event) =>
+            //                   event.dataValues
+            //                     .filter((dataValue) =>
+            //                       /^[A-Za-z]{3}$/.test(dataValue.value)
+            //                     )
+            //                     .map((dataValue) => dataValue.value)
+            //               )
+            //           ),
+            //         ];
+            //         if (checkValues) {
+            //           // this.firstValue.emit(firstTei);
+            //           setCheckValue(checkValues);
+            //           setValuesMatch(!checkValues.includes(this.buttonFilter));
+            //         }
+            //         //  setFilteredColumns(filteredEntityColumns);
+            //         // Ensure filter inputs do not disappear when no data is returned
+            //         // If filteredEntityColumns is empty, keep the previous columns instead of clearing them
+            //         setFilteredColumns((prev) =>
+            //           filteredEntityColumns.length > 0 ? filteredEntityColumns : prev
+            //         );
+            //         filteredDataColumns = filteredEntityColumns;
+            //       } else {
+            //         responsePager = (response.data as EventsResponse).pager;
+            //         const { columns, data } = getEventData(
+            //           response,
+            //           pager,
+            //           this.isOptionSetNameVisible
+            //         );
+            //         entityColumns = columns;
+            //         entityData = data;
+            //       }
+            //       const finalColumns: ColumnDefinition[] = addActionsColumn(
+            //         [{ label: '#', key: 'index' }, ...entityColumns],
+            //         this.actionOptions
+            //       );
+            //       setLoading(false);
+            //       setColumns(...[finalColumns]);
+            //       setData(...[entityData]);
+            //       setPager(...[responsePager]);
+            //     });
+            // }, [
+            //   programIdState,
+            //   orgUnitState,
+            //   programStageIdState,
+            //   attributeFiltersState,
+            //   startDateState,
+            //   endDateState,
+            //   pager.page,
+            //   pager.pageSize,
+            //   isOptionSetNameVisibleState,
+            // ]);
+            // TODO: END: Improve the approach of handling observables 
             useEffect(() => {
                 setLoading(true);
-                this.lineListService
+                const subscription = this.lineListService
                     .getLineListData(this.programId, orgUnitState, this.programStageId, pager.page, pager.pageSize, attributeFiltersState, startDateState, endDateState, this.ouMode, this.filterRootOrgUnit, this.useOuModeWithOlderDHIS2Instance)
+                    .pipe(take(1)) // Automatically unsubscribe after the first emission
                     .subscribe((response) => {
                     let entityColumns = [];
                     let responsePager;
@@ -4051,14 +4229,14 @@ class LineListTableComponent extends ReactWrapperModule {
                     let filteredDataColumns = [];
                     if (this.programStageId) {
                         responsePager = response.data.pager;
-                        const { columns, data } = getProgramStageData(response, this.programStageId, pager);
+                        const { columns, data } = getProgramStageData(response, this.programStageId, pager, this.isOptionSetNameVisible);
                         entityColumns = columns;
                         entityData = data;
                     }
-                    else if ('trackedEntities' in response.data ||
-                        'instances' in response.data) {
+                    else if ("trackedEntities" in response.data ||
+                        "instances" in response.data) {
                         const responseData = response.data;
-                        responsePager = response.data.pager || {
+                        responsePager = responseData.pager || {
                             page: responseData.page,
                             pageSize: responseData.pageSize,
                             total: responseData.total,
@@ -4067,23 +4245,18 @@ class LineListTableComponent extends ReactWrapperModule {
                         const { columns, data, filteredEntityColumns } = getTrackedEntityData(response, this.programId, pager, this.isOptionSetNameVisible, this.filters);
                         entityColumns = columns;
                         entityData = data;
-                        //TODO: Should be done on the parent
                         const checkValues = [
-                            ...new Set(response.data?.trackedEntities?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
+                            ...new Set(responseData?.trackedEntities?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
                                 .filter((dataValue) => /^[A-Za-z]{3}$/.test(dataValue.value))
                                 .map((dataValue) => dataValue.value)) ??
-                                response.data?.instances?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
+                                responseData?.instances?.[0]?.enrollments?.[0]?.events?.flatMap((event) => event.dataValues
                                     .filter((dataValue) => /^[A-Za-z]{3}$/.test(dataValue.value))
                                     .map((dataValue) => dataValue.value))),
                         ];
-                        if (checkValues) {
-                            // this.firstValue.emit(firstTei);
+                        if (checkValues.length > 0) {
                             setCheckValue(checkValues);
                             setValuesMatch(!checkValues.includes(this.buttonFilter));
                         }
-                        //  setFilteredColumns(filteredEntityColumns);
-                        // Ensure filter inputs do not disappear when no data is returned
-                        // If filteredEntityColumns is empty, keep the previous columns instead of clearing them
                         setFilteredColumns((prev) => filteredEntityColumns.length > 0 ? filteredEntityColumns : prev);
                         filteredDataColumns = filteredEntityColumns;
                     }
@@ -4093,12 +4266,15 @@ class LineListTableComponent extends ReactWrapperModule {
                         entityColumns = columns;
                         entityData = data;
                     }
-                    const finalColumns = addActionsColumn([{ label: '#', key: 'index' }, ...entityColumns], this.actionOptions);
+                    const finalColumns = addActionsColumn([{ label: "#", key: "index" }, ...entityColumns], this.actionOptions);
                     setLoading(false);
-                    setColumns(...[finalColumns]);
-                    setData(...[entityData]);
-                    setPager(...[responsePager]);
+                    setColumns(finalColumns);
+                    setData(entityData);
+                    setPager(responsePager);
                 });
+                return () => {
+                    subscription.unsubscribe(); // Ensure cleanup on unmount
+                };
             }, [
                 programIdState,
                 orgUnitState,
@@ -4119,20 +4295,64 @@ class LineListTableComponent extends ReactWrapperModule {
                     },
                 }));
             };
+            // TODO: START::: Improve the approach on handling observables 
+            // const handleApprovalClick = () => {
+            //   setIsButtonLoading(true);
+            //   this.lineListService
+            //     .getLineListData(
+            //       this.programId,
+            //       this.orgUnit,
+            //       this.programStageId,
+            //       pager.page,
+            //       1000,
+            //       this.attributeFilters,
+            //       this.startDate,
+            //       this.endDate,
+            //       this.ouMode
+            //     )
+            //     .subscribe((response: LineListResponse) => {
+            //       if (
+            //         'trackedEntities' in response.data ||
+            //         'instances' in response.data
+            //       ) {
+            //         const trackedEntityInstances = (
+            //           response.data as TrackedEntityResponse
+            //         ).trackedEntities;
+            //         // Map TEIs to objects with teiId and enrollmentId
+            //         const teiEnrollmentList = trackedEntityInstances
+            //           .map((tei) => {
+            //             // Find the enrollment where program matches this.programId
+            //             const matchingEnrollment = tei.enrollments?.find(
+            //               (enrollment) => enrollment.program === this.programId
+            //             );
+            //             // Return object with teiId and enrollmentId (if found)
+            //             return matchingEnrollment
+            //               ? {
+            //                   teiId: tei.trackedEntity,
+            //                   enrollmentId: matchingEnrollment.enrollment,
+            //                 }
+            //               : null;
+            //           })
+            //           .filter((item) => item !== null); // Remove null entries (no matching enrollment)
+            //         this.approvalSelected.emit(teiEnrollmentList);
+            //       } else {
+            //         this.approvalSelected.emit([]); // Emit empty array if no TEIs
+            //       }
+            //     });
+            // };
+            // TODO: END::: Improve the approach on handling observables 
             const handleApprovalClick = () => {
                 setIsButtonLoading(true);
-                this.lineListService
+                const subscription = this.lineListService
                     .getLineListData(this.programId, this.orgUnit, this.programStageId, pager.page, 1000, this.attributeFilters, this.startDate, this.endDate, this.ouMode)
+                    .pipe(take(1)) // Ensures the observable emits only once
                     .subscribe((response) => {
-                    if ('trackedEntities' in response.data ||
-                        'instances' in response.data) {
+                    if ("trackedEntities" in response.data || "instances" in response.data) {
                         const trackedEntityInstances = response.data.trackedEntities;
                         // Map TEIs to objects with teiId and enrollmentId
                         const teiEnrollmentList = trackedEntityInstances
                             .map((tei) => {
-                            // Find the enrollment where program matches this.programId
                             const matchingEnrollment = tei.enrollments?.find((enrollment) => enrollment.program === this.programId);
-                            // Return object with teiId and enrollmentId (if found)
                             return matchingEnrollment
                                 ? {
                                     teiId: tei.trackedEntity,
@@ -4140,13 +4360,17 @@ class LineListTableComponent extends ReactWrapperModule {
                                 }
                                 : null;
                         })
-                            .filter((item) => item !== null); // Remove null entries (no matching enrollment)
+                            .filter(Boolean); // Removes null entries
                         this.approvalSelected.emit(teiEnrollmentList);
                     }
                     else {
                         this.approvalSelected.emit([]); // Emit empty array if no TEIs
                     }
+                    setIsButtonLoading(false); // Stop loading after processing
                 });
+                return () => {
+                    subscription.unsubscribe(); // Cleanup to avoid potential memory leaks
+                };
             };
             const handleInputChange = (key, value) => {
                 setInputValues((prevValues) => ({
@@ -5919,9 +6143,24 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                     checkValueUniqueness();
                 }
             }, [this.isValueAssigned()]);
+            // TODO: START: Improve the approach of handling observables 
+            // useEffect(() => {
+            //   const fieldErrorSubscription = this.fieldError$
+            //     .pipe(filter((error) => error !== initialError))
+            //     .subscribe({
+            //       next: (error: string | undefined) => {
+            //         setInitialError(error);
+            //       },
+            //     });
+            //   return () => {
+            //     fieldErrorSubscription.unsubscribe();
+            //   };
+            // });
+            // TODO: END: Improve the approach of handling observables 
             useEffect(() => {
                 const fieldErrorSubscription = this.fieldError$
-                    .pipe(filter((error) => error !== initialError))
+                    .pipe(filter((error) => error !== initialError), take(1) // Take only the first emitted value, then unsubscribe
+                )
                     .subscribe({
                     next: (error) => {
                         setInitialError(error);
@@ -5930,7 +6169,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                 return () => {
                     fieldErrorSubscription.unsubscribe();
                 };
-            });
+            }, [initialError]); // Add initialError as a dependency to avoid stale closures
             const onChange = (payload) => setSelected(payload.selected);
             const arrayValue = useMemo(() => {
                 if (value && value.length > 0) {
@@ -6817,14 +7056,30 @@ 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(() => {
-                zip(this.getAppConfig(), this.getRootOrgUnits()).subscribe({
+                const subscription = zip(this.getAppConfig(), this.getRootOrgUnits())
+                    .pipe(take(1)) // Ensures only one emission
+                    .subscribe({
                     next: ([appConfig, rootOrgUnits]) => {
                         setConfig(appConfig);
                         setRootOrgUnits(rootOrgUnits);
                     },
                     error: (error) => console.error(error),
                 });
+                return () => {
+                    subscription.unsubscribe(); // Cleanup to avoid memory leaks
+                };
             }, []);
             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"),