@iapps/ng-dhis2-ui 1.1.65 → 1.1.67

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

@@ -3300,7 +3300,9 @@ class LineListService {
         this.httpClient = httpClient;
     }
     getProgramMetadata(programId) {
-        return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name]]],programTrackedEntityAttributes[*]`);
+        return this.httpClient.get(`programs/${programId}.json?fields=programType,programStages[id,name,programStageDataElements[dataElement[id,name,shortName,formName,code,optionSetValue,valueType,
+    optionSet[id,name,options[id,name,code]]]]],programTrackedEntityAttributes[*,trackedEntityAttribute[id,name,unique,generated,formName,code,optionSetValue
+    ,valueType,optionSet[id,name,options[id,name,code]]]]`);
     }
     // private getTrackedEntityInstances(
     //   programId: string,
@@ -3353,7 +3355,6 @@ class LineListService {
             // **Step 1:** Extract unique orgUnits from enrollments
             const uniqueOrgUnitIds = new Set();
             if (response && response.trackedEntities) {
-                console.log('THIS IS HERE', JSON.stringify(response));
                 response.trackedEntities.forEach((tei) => {
                     tei.enrollments?.forEach((enrollment) => {
                         if (enrollment.program === programId) {
@@ -3470,25 +3471,151 @@ const getProgramStageData = (response, programStageId, pager) => {
     });
     return { columns: entityColumns, data: dataElementsData };
 };
-const getTrackedEntityData = (response, programId, pager, filters) => {
+// export const getTrackedEntityData = (
+//   response: LineListResponse,
+//   programId: string,
+//   pager: any,
+//   isOptionSetNameVisible: boolean,
+//   filters?: FilterConfig[]
+// ): {
+//   columns: ColumnDefinition[];
+//   data: TableRow[];
+//   filteredEntityColumns: ColumnDefinition[];
+// } => {
+//   let teis =
+//     (response.data as TrackedEntityResponse)?.trackedEntities ??
+//     (response.data as TrackedEntityResponse)?.instances ??
+//     [];
+//   const programMetaData = response.metadata.programTrackedEntityAttributes;
+//   // //organisation units from metadata
+//   // let orgUnitsFromMetaData = response.metadata.organisationUnits;
+//   // //a Map to efficiently look up orgUnit names by ID
+//   // const orgUnitMap = new Map<string, string>(
+//   //   orgUnitsFromMetaData.map((ou: { id: string; name: string }) => [
+//   //     ou.id,
+//   //     ou.name,
+//   //   ])
+//   // );
+//   const orgUnitMap = (response.data as TrackedEntityResponse).orgUnitsMap;
+//   const mappedProgramMetadataAttributes = programMetaData.map((attr) => ({
+//     displayInList: attr.displayInList,
+//     searchable: attr.searchable,
+//     id: attr.trackedEntityAttribute.id,
+//   }));
+//   const programAttributesMap = programMetaData.reduce(
+//     (acc: { [key: string]: string }, attribute: any) => {
+//       if (attribute.displayInList) {
+//         acc[attribute.id] = attribute.displayName;
+//       }
+//       return acc;
+//     },
+//     {}
+//   );
+//   if (filters) {
+//     teis = getFilteredTrackedEntites(teis, filters);
+//   }
+//   const allAttributes = new Set<string>();
+//   teis.forEach((tei: any) => {
+//     const matchingEnrollment = tei.enrollments.find(
+//       (enrollment: any) => enrollment.program === programId
+//     );
+//     const attributes = matchingEnrollment
+//       ? matchingEnrollment.attributes
+//       : tei.attributes;
+//     attributes.forEach((attr: any) => allAttributes.add(attr.attribute));
+//   });
+//   let entityColumns = Array.from(allAttributes).map((attrId: string) => {
+//     const foundAttribute = teis
+//       .flatMap((tei: any) => {
+//         const matchingEnrollment = tei.enrollments.find(
+//           (enrollment: any) => enrollment.program === programId
+//         );
+//         return matchingEnrollment
+//           ? matchingEnrollment.attributes
+//           : tei.attributes;
+//       })
+//       .find((attr: any) => attr.attribute === attrId);
+//     return {
+//       label: foundAttribute?.displayName || attrId,
+//       key: attrId,
+//     };
+//   });
+//   entityColumns = entityColumns.filter((column) => {
+//     // Check if the column label is part of any value in programAttributesMap
+//     return Object.values(programAttributesMap).some((value: string) =>
+//       value.includes(column.label)
+//     );
+//   });
+//   // Add orgUnit as the first column
+//   entityColumns.unshift({
+//     label: 'Location',
+//     key: 'orgUnit',
+//   });
+//   const searchableAttributes = mappedProgramMetadataAttributes
+//     .filter((attr) => attr.searchable && attr.displayInList)
+//     .map((attr) => ({
+//       //  label: attr.trackedEntityAttribute.displayName,
+//       key: attr.id,
+//     }));
+//   // Extract keys from searchableAttributes for quick lookup
+//   const searchableKeys = new Set(searchableAttributes.map((attr) => attr.key));
+//   // Filter entityColumns to keep only those whose key exists in searchableAttributes
+//   const filteredEntityColumns = entityColumns.filter((column) =>
+//     searchableKeys.has(column.key)
+//   );
+//   const attributesData = teis.map((tei: any, idx: number) => {
+//     const row: TableRow = {
+//       trackedEntityInstance: tei.trackedEntity,
+//       index: (pager.page - 1) * pager.pageSize + idx + 1,
+//     };
+//     allAttributes.forEach((attrId: string) => (row[attrId] = ''));
+//     const matchingEnrollment = tei.enrollments.find(
+//       (enrollment: any) => enrollment.program === programId
+//     );
+//     const attributesToUse = matchingEnrollment
+//       ? matchingEnrollment.attributes
+//       : tei.attributes;
+//     console.log('RESPONSE::: ', JSON.stringify(attributesToUse));
+//     console.log('HERE WEARE', JSON.stringify(response.metadata));
+//     if (isOptionSetNameVisible) {
+//       attributesToUse.forEach(
+//         (attr: any) => (row[attr.attribute] = attr.value)
+//       );
+//     } else {
+//       attributesToUse.forEach(
+//         (attr: any) => (row[attr.attribute] = attr.value)
+//       );
+//     }
+//     //include orgUnit in the row for id access
+//     row['orgUnitId'] = matchingEnrollment.orgUnit;
+//     // Access the name of the orgUnit using the Map
+//     //  row['orgUnit'] = matchingEnrollment.orgUnitName;
+//     row['orgUnit'] = orgUnitMap?.get(matchingEnrollment.orgUnit) || 'N/A';
+//     //  row['orgUnit'] =
+//     // orgUnitMap && orgUnitMap[matchingEnrollment.orgUnit]
+//     //   ? orgUnitMap[matchingEnrollment.orgUnit]
+//     //   : 'N/A';
+//     return row;
+//   });
+//   return {
+//     columns: entityColumns,
+//     data: attributesData,
+//     filteredEntityColumns: filteredEntityColumns,
+//   };
+// };
+const getTrackedEntityData = (response, programId, pager, isOptionSetNameVisible, filters) => {
     let teis = response.data?.trackedEntities ??
         response.data?.instances ??
         [];
     const programMetaData = response.metadata.programTrackedEntityAttributes;
-    // //organisation units from metadata
-    // let orgUnitsFromMetaData = response.metadata.organisationUnits;
-    // //a Map to efficiently look up orgUnit names by ID
-    // const orgUnitMap = new Map<string, string>(
-    //   orgUnitsFromMetaData.map((ou: { id: string; name: string }) => [
-    //     ou.id,
-    //     ou.name,
-    //   ])
-    // );
     const orgUnitMap = response.data.orgUnitsMap;
     const mappedProgramMetadataAttributes = programMetaData.map((attr) => ({
         displayInList: attr.displayInList,
         searchable: attr.searchable,
         id: attr.trackedEntityAttribute.id,
+        optionSet: attr.trackedEntityAttribute.optionSetValue
+            ? attr.trackedEntityAttribute.optionSet
+            : null,
     }));
     const programAttributesMap = programMetaData.reduce((acc, attribute) => {
         if (attribute.displayInList) {
@@ -3522,7 +3649,6 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
         };
     });
     entityColumns = entityColumns.filter((column) => {
-        // Check if the column label is part of any value in programAttributesMap
         return Object.values(programAttributesMap).some((value) => value.includes(column.label));
     });
     // Add orgUnit as the first column
@@ -3533,12 +3659,9 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
     const searchableAttributes = mappedProgramMetadataAttributes
         .filter((attr) => attr.searchable && attr.displayInList)
         .map((attr) => ({
-        //  label: attr.trackedEntityAttribute.displayName,
         key: attr.id,
     }));
-    // Extract keys from searchableAttributes for quick lookup
     const searchableKeys = new Set(searchableAttributes.map((attr) => attr.key));
-    // Filter entityColumns to keep only those whose key exists in searchableAttributes
     const filteredEntityColumns = entityColumns.filter((column) => searchableKeys.has(column.key));
     const attributesData = teis.map((tei, idx) => {
         const row = {
@@ -3550,16 +3673,27 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
         const attributesToUse = matchingEnrollment
             ? matchingEnrollment.attributes
             : tei.attributes;
-        attributesToUse.forEach((attr) => (row[attr.attribute] = attr.value));
-        //include orgUnit in the row for id access
+        // If option set names are visible, transform the attribute values
+        if (isOptionSetNameVisible) {
+            attributesToUse.forEach((attr) => {
+                const attributeMeta = programMetaData.find((metadata) => metadata.trackedEntityAttribute.id === attr.attribute);
+                // Check if the attribute has an option set and map value to option name
+                if (attributeMeta?.trackedEntityAttribute.optionSetValue) {
+                    const optionSet = attributeMeta?.trackedEntityAttribute?.optionSet;
+                    const option = optionSet?.options?.find((option) => option.code === attr.value);
+                    row[attr.attribute] = option ? option.name : attr.value;
+                }
+                else {
+                    row[attr.attribute] = attr.value;
+                }
+            });
+        }
+        else {
+            attributesToUse.forEach((attr) => (row[attr.attribute] = attr.value));
+        }
+        // Include orgUnit in the row for id access
         row['orgUnitId'] = matchingEnrollment.orgUnit;
-        // Access the name of the orgUnit using the Map
-        //  row['orgUnit'] = matchingEnrollment.orgUnitName;
         row['orgUnit'] = orgUnitMap?.get(matchingEnrollment.orgUnit) || 'N/A';
-        //  row['orgUnit'] =
-        // orgUnitMap && orgUnitMap[matchingEnrollment.orgUnit]
-        //   ? orgUnitMap[matchingEnrollment.orgUnit]
-        //   : 'N/A';
         return row;
     });
     return {
@@ -3568,7 +3702,47 @@ const getTrackedEntityData = (response, programId, pager, filters) => {
         filteredEntityColumns: filteredEntityColumns,
     };
 };
-const getEventData = (response, pager) => {
+// export const getEventData = (
+//   response: LineListResponse,
+//   pager: any,
+//   isOptionSetNameVisible: boolean
+// ): { columns: ColumnDefinition[]; data: TableRow[] } => {
+//   const events = (response.data as EventsResponse).events;
+//   const uniqueDataElements = new Set<string>();
+//   events?.forEach((event: any) => {
+//     event?.dataValues.forEach((dv: any) =>
+//       uniqueDataElements.add(dv.dataElement)
+//     );
+//   });
+//   const entityColumns = Array.from(uniqueDataElements).map(
+//     (dataElement: string) => ({
+//       label:
+//         response.metadata.programStages[0].programStageDataElements.find(
+//           (psde: any) => psde.dataElement.id === dataElement
+//         )?.dataElement.name || dataElement,
+//       key: dataElement,
+//     })
+//   );
+//   const dataElementsData = events.map((event: any, idx: number) => {
+//     const row: TableRow = {
+//       event: event.event,
+//       index: (pager.page - 1) * pager.pageSize + idx + 1,
+//     };
+//     uniqueDataElements.forEach(
+//       (dataElement: string) => (row[dataElement] = '')
+//     );
+//     event.dataValues.forEach((dv: any) => {
+//       if (isOptionSetNameVisible) {
+//         return (row[dv.dataElement] = dv.value)
+//       } else {
+//         return (row[dv.dataElement] = dv.value)
+//       }
+//     });
+//     return row;
+//   });
+//   return { columns: entityColumns, data: dataElementsData };
+// };
+const getEventData = (response, pager, isOptionSetNameVisible) => {
     const events = response.data.events;
     const uniqueDataElements = new Set();
     events?.forEach((event) => {
@@ -3584,7 +3758,28 @@ const getEventData = (response, pager) => {
             index: (pager.page - 1) * pager.pageSize + idx + 1,
         };
         uniqueDataElements.forEach((dataElement) => (row[dataElement] = ''));
-        event.dataValues.forEach((dv) => (row[dv.dataElement] = dv.value));
+        event.dataValues.forEach((dv) => {
+            if (isOptionSetNameVisible && dv.optionSetValue) {
+                const dataElementMetadata = response.metadata.programStages
+                    .flatMap((programStage) => programStage.programStageDataElements)
+                    .find((psde) => psde.dataElement.id === dv.dataElement)?.dataElement.optionSet;
+                if (dataElementMetadata && dataElementMetadata.options) {
+                    const matchingOption = dataElementMetadata.options.find((option) => option.code === dv.value);
+                    if (matchingOption) {
+                        row[dv.dataElement] = matchingOption.name;
+                    }
+                    else {
+                        row[dv.dataElement] = dv.value;
+                    }
+                }
+                else {
+                    row[dv.dataElement] = dv.value;
+                }
+            }
+            else {
+                row[dv.dataElement] = dv.value;
+            }
+        });
         return row;
     });
     return { columns: entityColumns, data: dataElementsData };
@@ -3795,6 +3990,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.firstValue = new EventEmitter();
         this.filterRootOrgUnit = false;
         this.showFilters = false;
+        this.isOptionSetNameVisible = false;
         this.setReactStateUpdaters = (updaters) => {
             this.reactStateUpdaters = updaters;
         };
@@ -3810,6 +4006,7 @@ class LineListTableComponent extends ReactWrapperModule {
             });
             const paginationRef = useRef(null);
             const [programIdState, setProgramIdState] = useState(this.programId);
+            const [isOptionSetNameVisibleState, setOptionSetNameVisible] = useState(this.isOptionSetNameVisible);
             const [orgUnitState, setOrgUnitState] = useState(this.orgUnit);
             const [programStageIdState, setProgramStageIdState] = useState(this.programStageId);
             const [attributeFiltersState, setAttributeFiltersState] = useState(this.attributeFilters);
@@ -3838,6 +4035,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 setStartDateState,
                 setEndDateState,
                 setIsButtonLoading,
+                setOptionSetNameVisible,
             });
             useEffect(() => {
                 this.setReactStateUpdaters?.(updateRefs.current);
@@ -3866,7 +4064,7 @@ class LineListTableComponent extends ReactWrapperModule {
                             total: responseData.total,
                             pageCount: responseData.pageCount,
                         };
-                        const { columns, data, filteredEntityColumns } = getTrackedEntityData(response, this.programId, pager, this.filters);
+                        const { columns, data, filteredEntityColumns } = getTrackedEntityData(response, this.programId, pager, this.isOptionSetNameVisible, this.filters);
                         entityColumns = columns;
                         entityData = data;
                         //TODO: Should be done on the parent
@@ -3891,7 +4089,7 @@ class LineListTableComponent extends ReactWrapperModule {
                     }
                     else {
                         responsePager = response.data.pager;
-                        const { columns, data } = getEventData(response, pager);
+                        const { columns, data } = getEventData(response, pager, this.isOptionSetNameVisible);
                         entityColumns = columns;
                         entityData = data;
                     }
@@ -3910,6 +4108,7 @@ class LineListTableComponent extends ReactWrapperModule {
                 endDateState,
                 pager.page,
                 pager.pageSize,
+                isOptionSetNameVisibleState,
             ]);
             const getDropdownOptions = (row) => {
                 return (this.actionOptions || []).map((option) => ({
@@ -4076,6 +4275,9 @@ class LineListTableComponent extends ReactWrapperModule {
             if (changes['programId']) {
                 this.reactStateUpdaters.setProgramIdState(this.programId);
             }
+            if (changes['isOptionSetNameVisible']) {
+                this.reactStateUpdaters.setOptionSetNameVisible(this.isOptionSetNameVisible);
+            }
             if (changes['orgUnit']) {
                 this.reactStateUpdaters.setOrgUnitState(this.orgUnit);
             }
@@ -4104,7 +4306,7 @@ class LineListTableComponent extends ReactWrapperModule {
         this.render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "ng-dhis2-ui-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected", firstValue: "firstValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9FADBA!important;border-radius:4px!important;padding-left:16px}::ng-deep .custom-input input{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LineListTableComponent, isStandalone: false, selector: "ng-dhis2-ui-line-list", inputs: { programId: "programId", orgUnit: "orgUnit", programStageId: "programStageId", actionOptions: "actionOptions", attributeFilters: "attributeFilters", useOuModeWithOlderDHIS2Instance: "useOuModeWithOlderDHIS2Instance", startDate: "startDate", endDate: "endDate", filters: "filters", ouMode: "ouMode", dispatchTeis: "dispatchTeis", isButtonLoading: "isButtonLoading", buttonLabel: "buttonLabel", buttonFilter: "buttonFilter", filterRootOrgUnit: "filterRootOrgUnit", showFilters: "showFilters", isOptionSetNameVisible: "isOptionSetNameVisible" }, outputs: { actionSelected: "actionSelected", approvalSelected: "approvalSelected", firstValue: "firstValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["::ng-deep .custom-input{display:flex!important;gap:4px!important;align-items:center!important;border:1px solid #9FADBA!important;border-radius:4px!important;padding-left:16px}::ng-deep .custom-input input{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .custom-input input:focus{border:none!important;box-shadow:none!important}::ng-deep .custom-input label{color:gray!important;opacity:1}::ng-deep .table-top-toolbar{background-color:var(--colors-grey100)!important;color:var(--colors-grey900)!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LineListTableComponent, decorators: [{
             type: Component,
@@ -4147,6 +4349,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 type: Input
             }], showFilters: [{
                 type: Input
+            }], isOptionSetNameVisible: [{
+                type: Input
             }] } });
 
 class LineListModule {