fix: convert options to client values

dhis2 · Jan 15, 2025 · f713632 · f713632
1 parent 60b9cbe
commit f713632
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 23 deletions.
diff --git a/...e-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js b/...e-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js
@@ -27,6 +27,7 @@ import { getProgramAndStageForProgram } from '../../../../../metaData/helpers';
 import type { Props } from './stageDetail.types';
 import { EventRow } from './EventRow';
 import { errorCreator } from '../../../../../../capture-core-utils';
+import { useClientDataElements } from './hooks/useClientDataElements';
 
 
 const styles = {
@@ -113,8 +114,8 @@ const StageDetailPlain = (props: Props) => {
     };
     const { stage } = getProgramAndStageForProgram(programId, stageId);
     const headerColumns = useComputeHeaderColumn(dataElements, hideDueDate, enableUserAssignment, stage?.stageForm);
-    const { loading, value: dataSource, error } = useComputeDataFromEvent(dataElements, events);
-
+    const dataElementsClient = useClientDataElements(dataElements);
+    const { loading, value: dataSource, error } = useComputeDataFromEvent(dataElementsClient, events);
 
     const [{ columnName, sortDirection }, setSortInstructions] = useState(defaultSortState);
     const [displayedRowNumber, setDisplayedRowNumber] = useState(DEFAULT_NUMBER_OF_ROW);
@@ -178,7 +179,7 @@ const StageDetailPlain = (props: Props) => {
                 return sortDataFromEvent({ dataA, dataB, type, columnName, direction: sortDirection });
             })
             .slice(0, displayedRowNumber)
-            .map(row => formatRowForView(row, dataElements))
+            .map(row => formatRowForView(row, dataElementsClient))
             .map((row: Object) => {
                 const cells = headerColumns.map(({ id }) => (
                     <Tooltip

diff --git a/...s/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/hooks/helpers.js b/...s/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/hooks/helpers.js
@@ -5,7 +5,7 @@ import i18n from '@dhis2/d2-i18n';
 import { statusTypes, translatedStatusTypes } from 'capture-core/events/statusTypes';
 import { convertMomentToDateFormatString } from '../../../../../../utils/converters/date';
 import { getSubValues } from '../../getEventDataWithSubValue';
-import type { StageDataElement } from '../../../../types/common.types';
+import type { StageDataElementClient } from '../../../../types/common.types';
 import { Notes } from '../Notes.component';
 import type { QuerySingleResource } from '../../../../../../utils/api/api.types';
 import { isEventOverdue } from '../../../../../../utils/isEventOverdue';
@@ -69,7 +69,7 @@ const convertNoteForView = (event: ApiEnrollmentEvent) => <Notes event={event} /
 
 const groupRecordsByType = async (
     events: Array<ApiEnrollmentEvent>,
-    dataElements: Array<StageDataElement>,
+    dataElements: Array<StageDataElementClient>,
     querySingleResource: QuerySingleResource,
     absoluteApiPath: string,
 ) => {

diff --git a/.../components/WidgetStagesAndEvents/Stages/Stage/StageDetail/hooks/useClientDataElements.js b/.../components/WidgetStagesAndEvents/Stages/Stage/StageDetail/hooks/useClientDataElements.js
@@ -0,0 +1,29 @@
+// @flow
+import { useMemo } from 'react';
+import { convertValue } from 'capture-core/converters/serverToClient';
+import type { StageDataElement, StageDataElementClient } from '../../../../types/common.types';
+
+const convertToClientDataElement = (dataElement: StageDataElement): StageDataElementClient => {
+    const { options, type, ...rest } = dataElement;
+
+    const convertedOptions = options
+        ? Object.entries(options).map(([key, value]) => ({
+            value: convertValue(key, type),
+            text: value,
+        }))
+        : [];
+
+    return {
+        ...rest,
+        type,
+        options: convertedOptions,
+    };
+};
+
+export const useClientDataElements = (dataElements: Array<StageDataElement>) =>
+    useMemo < Array<StageDataElementClient>>(() => {
+        if (!dataElements) {
+            return [];
+        }
+        return dataElements.map(convertToClientDataElement);
+    }, [dataElements]);
diff --git a/...ture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/hooks/useEventList.js b/...ture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/hooks/useEventList.js
@@ -6,7 +6,7 @@ import { useDataEngine, useConfig } from '@dhis2/app-runtime';
 import { makeQuerySingleResource } from 'capture-core/utils/api';
 import { errorCreator, buildUrl } from 'capture-core-utils';
 import { dataElementTypes, DataElement, OptionSet, Option } from '../../../../../../metaData';
-import type { StageDataElement } from '../../../../types/common.types';
+import type { StageDataElement, StageDataElementClient } from '../../../../types/common.types';
 import { convertValue as convertClientToList } from '../../../../../../converters/clientToList';
 import { convertValue as convertServerToClient } from '../../../../../../converters/serverToClient';
 import {
@@ -46,8 +46,8 @@ const getBaseColumns = props => baseFields.map((key, index) => ({ ...key, ...get
 
 const getAllFieldsWithValue = (
     eventId: string,
-    dataElements: Array<StageDataElement>,
-    dataElementsByType: Array<{type: string, eventId: string, ids: Object}>,
+    dataElements: Array<StageDataElementClient>,
+    dataElementsByType: Array<{ type: string, eventId: string, ids: Object }>,
 ) => dataElements
     .reduce((acc, { id, type }) => {
         const value = dataElementsByType
@@ -60,7 +60,7 @@ const getAllFieldsWithValue = (
         return acc;
     }, {});
 
-const useComputeDataFromEvent = (dataElements: Array<StageDataElement>, events: Array<ApiEnrollmentEvent>) => {
+const useComputeDataFromEvent = (dataElements: Array<StageDataElementClient>, events: Array<ApiEnrollmentEvent>) => {
     const [value, setValue] = useState(null);
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -133,42 +133,40 @@ const useComputeHeaderColumn = (dataElements: Array<StageDataElement>, hideDueDa
     return headerColumns;
 };
 
-const getDataElement = (stageDataElement, type) => {
+function getDataElement(stageDataElement: StageDataElementClient, type) {
     if (!stageDataElement) {
         return null;
     }
-
     const dataElement = new DataElement((o) => {
         o.id = stageDataElement.id;
         o.type = type;
     });
 
     if (stageDataElement.options) {
-        const options = Object.keys(stageDataElement.options).map(
-            (code: string) =>
-                new Option((o) => {
-                    // $FlowFixMe
-                    o.text = stageDataElement.options[code];
-                    o.value = code;
-                }),
-        );
+        const options = stageDataElement.options.map(({ value, text }) =>
+            new Option((o) => {
+                // $FlowFixMe
+                o.text = text;
+                o.value = value;
+            }));
         const optionSet = new OptionSet(stageDataElement.id, options);
         dataElement.optionSet = optionSet;
     }
     return dataElement;
-};
+}
 
-const formatRowForView = (row: Object, dataElements: Array<StageDataElement>) => Object.keys(row).reduce((acc, id) => {
+const formatRowForView = (row: Object, dataElements: Array<StageDataElementClient>) => Object.keys(row).reduce((acc, id) => {
     const { type: predefinedType } = baseFields.find(f => f.id === id) || {};
     const stageDataElement = dataElements.find(el => el.id === id);
     const { type } = stageDataElement || {};
     const value = row[id];
     if (predefinedType) {
         acc[id] = convertClientToList(value, predefinedType);
-    } else if (!type) {
+    } else if (!type || !stageDataElement) {
         acc[id] = value;
     } else {
         const dataElement = getDataElement(stageDataElement, type);
+        console.log('dataElement', dataElement);
         acc[id] = convertClientToList(value, type, dataElement);
     }
     return acc;

diff --git a/src/core_modules/capture-core/components/WidgetStagesAndEvents/types/common.types.js b/src/core_modules/capture-core/components/WidgetStagesAndEvents/types/common.types.js
@@ -6,6 +6,7 @@ import { dataElementTypes, Option } from '../../../metaData';
 type StageOptions = {
     [code: string]: string;
 }
+
 export type StageDataElement = {
     id: string,
     name: string,
@@ -15,6 +16,15 @@ export type StageDataElement = {
     optionSet?: { options: Array<Option> },
 }
 
+export type StageDataElementClient = {
+    id: string,
+    name: string,
+    formName: string,
+    type: $Keys<typeof dataElementTypes>,
+    options?: Array<{ value: any, text: any }>,
+    optionSet?: { options: Array<any> },
+};
+
 export type Stage = {
     id: string,
     name: string,

diff --git a/src/core_modules/capture-core/metaData/OptionSet/OptionSet.js b/src/core_modules/capture-core/metaData/OptionSet/OptionSet.js
@@ -142,7 +142,7 @@ export class OptionSet {
     }
 
     getOption(value: Value): ?Option {
-        const option = this.options.find(o => o.value == value);
+        const option = this.options.find(o => o.value === value);
         if (!option) {
             log.warn(
                 errorCreator(OptionSet.errorMessages.OPTION_NOT_FOUND)({ OptionSet: this, value }),