fix: logic main columns list, broken offline list

dhis2 · Feb 26, 2020 · 608e558 · 608e558
1 parent dde75ee
commit 608e558
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 68 deletions.
diff --git a/...ules/capture-core/components/EventsList/OfflineEventsList/OfflineList.containerCreator.js b/...ules/capture-core/components/EventsList/OfflineEventsList/OfflineList.containerCreator.js
@@ -20,7 +20,7 @@ const makeMapStateToProps = () => {
         return {
             columns,
             rowIdKey,
-            dataSource: createWorkingListData(eventsContainer),
+            dataSource: createWorkingListData(eventsContainer, columns),
             sortById,
             sortByDirection,
         };

diff --git a/...core_modules/capture-core/components/EventsList/OfflineEventsList/offlineList.selector.js b/...core_modules/capture-core/components/EventsList/OfflineEventsList/offlineList.selector.js
@@ -1,13 +1,17 @@
 // @flow
 import { createSelectorCreator, createSelector, defaultMemoize } from 'reselect';
-
-import { getStageFromProgramIdForEventProgram } from '../../../metaData';
+import log from 'loglevel';
+import { errorCreator } from 'capture-core-utils';
+import {
+    getStageFromProgramIdForEventProgram,
+    OptionSet,
+    Option,
+    DataElement,
+    dataElementTypes,
+} from '../../../metaData';
 import getStageFromEvent from '../../../metaData/helpers/getStageFromEvent';
-import { convertMainEventClientToList } from '../../../events/mainConverters';
 import { convertValue } from '../../../converters/clientToList';
 import RenderFoundation from '../../../metaData/RenderFoundation/RenderFoundation';
-import mainPropertyNames from '../../../events/mainPropertyNames.const';
-import elementTypeKeys from '../../../metaData/DataElement/elementTypes';
 
 type EventContainer = {
     event: CaptureClientEvent,
@@ -18,6 +22,9 @@ type ColumnOrderFromState = {
     id: string,
     visible: boolean,
     isMainProperty?: ?boolean,
+    header?: ?string,
+    type?: ?$Values<typeof dataElementTypes>,
+    options?: ?Array<{text: string, value: string}>,
 };
 
 type ColumnsOrderFromState = Array<ColumnOrderFromState>;
@@ -26,6 +33,26 @@ type ColumnsOrderFromState = Array<ColumnOrderFromState>;
 const programIdSelector = (state, props) => state.workingListsContext[props.listId].programId;
 const columnsOrderStateSelector = (state, props) => state.workingListsColumnsOrder[props.listId];
 
+const createMainPropertyOptionSet = (column: ColumnOrderFromState) => {
+    const dataElement = new DataElement((o) => {
+        o.id = column.id;
+        // $FlowFixMe
+        o.type = column.type;
+    });
+
+    // $FlowFixMe
+    const options = column.options.map(option =>
+        new Option((o) => {
+            o.text = option.text;
+            o.value = option.value;
+        }),
+    );
+    const optionSet = new OptionSet(column.id, options, null, dataElement);
+    dataElement.optionSet = optionSet;
+    return optionSet;
+};
+
+// $FlowFixMe
 export const makeColumnsSelector = () => createSelector(
     programIdSelector,
     columnsOrderStateSelector,
@@ -41,21 +68,18 @@ export const makeColumnsSelector = () => createSelector(
         return columnsOrderFromState
             .map((column) => {
                 if (column.isMainProperty) {
-                    if (column.id === mainPropertyNames.EVENT_DATE) {
-                        return {
-                            ...column,
-                            header: stageForm.getLabel(mainPropertyNames.EVENT_DATE),
-                            type: elementTypeKeys.DATE,
-                        };
-                    }
-                    // fallback
-                    return columnsOrderFromState;
+                    return {
+                        ...column,
+                        header: column.header || stageForm.getLabel(column.id),
+                        optionSet: column.options && createMainPropertyOptionSet(column),
+                    };
                 }
                 const element = stageForm.getElement(column.id);
                 return {
                     ...column,
                     header: element.formName,
                     type: element.type,
+                    optionSet: element.optionSet,
                 };
             });
     },
@@ -74,33 +98,38 @@ const createEventsContainer = (events, eventsValues, sortOrder): Array<EventCont
             eventValues: eventsValues[eventId],
         }));
 
+// $FlowFixMe
 export const makeCreateEventsContainer = () => createSelector(
     eventsMainDataSelector,
     eventsValuesSelector,
     sortOrderSelector,
     createEventsContainer,
 );
 
-const onIsEventsEqual = (prevEventsContainer: Array<EventContainer>, currentEventsContainer: Array<EventContainer>) =>
-    currentEventsContainer.every(
+const onIsEventsEqual = (
+    { eventContainers: prevEventContainers }: { eventContainers: Array<EventContainer> },
+    { eventContainers: currentEventContainers }: { eventContainers: Array<EventContainer> },
+) =>
+    currentEventContainers.every(
         (eventContainer, index) =>
-            eventContainer.event === (prevEventsContainer[index] && prevEventsContainer[index].event) &&
-            eventContainer.eventValues === (prevEventsContainer[index] && prevEventsContainer[index].eventValues),
+            eventContainer.event === (prevEventContainers[index] && prevEventContainers[index].event) &&
+            eventContainer.eventValues === (prevEventContainers[index] && prevEventContainers[index].eventValues),
     ) &&
-    prevEventsContainer.every(
+    prevEventContainers.every(
         (eventContainer, index) =>
-            eventContainer.event === (currentEventsContainer[index] && currentEventsContainer[index].event) &&
-            eventContainer.eventValues === (currentEventsContainer[index] && currentEventsContainer[index].eventValues),
+            eventContainer.event === (currentEventContainers[index] && currentEventContainers[index].event) &&
+            eventContainer.eventValues === (currentEventContainers[index] && currentEventContainers[index].eventValues),
     );
 
 const createDeepEqualSelector = createSelectorCreator(
     defaultMemoize,
     onIsEventsEqual,
 );
 
-const eventsContainerSelector = eventContainers => eventContainers;
-
-const buildWorkingListData = (eventsContainer: Array<EventContainer>) => {
+const buildWorkingListData = (
+    eventsContainer: Array<EventContainer>,
+    columns,
+) => {
     if (eventsContainer.length === 0) {
         return [];
     }
@@ -113,16 +142,41 @@ const buildWorkingListData = (eventsContainer: Array<EventContainer>) => {
     return eventsContainer
         .map((eventContainer) => {
             const convertedValues = stage.stageForm.convertValues(eventContainer.eventValues, convertValue);
-            const convertedMainEvent = convertMainEventClientToList(eventContainer.event);
+            const convertedMainEvent = columns
+                .filter(column => column.isMainProperty)
+                .reduce((acc, mainColumn) => {
+                    const sourceValue = eventContainer.event[mainColumn.id];
+                    if (sourceValue) {
+                        if (mainColumn.options) {
+                            // TODO: Need is equal comparer for types
+                            const option = mainColumn.options.find(o => o.value === sourceValue);
+                            if (!option) {
+                                log.error(
+                                    errorCreator(
+                                        'Missing value in options for main values')(
+                                        { sourceValue, mainColumn }),
+                                );
+                            } else {
+                                acc[mainColumn.id] = option.text;
+                            }
+                        } else {
+                            acc[mainColumn.id] = convertValue(sourceValue, mainColumn.type);
+                        }
+                    }
+                    return acc;
+                }, {});
+
             return {
                 ...convertedMainEvent,
                 ...convertedValues,
+                eventId: eventContainer.event.eventId,
             };
         });
 };
 
-
+// $FlowFixMe
 export const makeCreateWorkingListData = () => createDeepEqualSelector(
-    eventsContainerSelector,
-    buildWorkingListData,
+    (eventContainers, columns) => ({ eventContainers, columns }),
+    ({ eventContainers, columns }) =>
+        buildWorkingListData(eventContainers, columns),
 );
diff --git a/...ture-core/components/Pages/MainPage/EventsList/ListWrapper/EventsListWrapper.component.js b/...ture-core/components/Pages/MainPage/EventsList/ListWrapper/EventsListWrapper.component.js
@@ -62,6 +62,7 @@ type Props = {
     filterButtons: React.Node,
     isUpdatingWithDialog?: ?boolean,
     onSaveColumnOrder: Function,
+    rowIdKey: string,
 };
 
 class EventListWrapper extends React.Component<Props> {
@@ -117,7 +118,6 @@ class EventListWrapper extends React.Component<Props> {
         } = this.props;
         return (
             <EventList
-                rowIdKey={'eventId'}
                 {...passOnProps}
             />
         );

diff --git a/...ture-core/components/Pages/MainPage/EventsList/ListWrapper/EventsListWrapper.container.js b/...ture-core/components/Pages/MainPage/EventsList/ListWrapper/EventsListWrapper.container.js
@@ -21,9 +21,10 @@ const makeMapStateToProps = () => {
             isUpdating: !!state.workingListsUI[listId].isUpdating,
             isUpdatingWithDialog: !!state.workingListsUI[listId].isUpdatingWithDialog,
             columns,
-            dataSource: createWorkingListData(eventsContainer),
+            dataSource: createWorkingListData(eventsContainer, columns),
             sortById,
             sortByDirection,
+            rowIdKey: 'eventId',
         };
     };
     return mapStateToProps;

diff --git a/...ules/capture-core/components/Pages/MainPage/EventsList/ListWrapper/eventsList.selector.js b/...ules/capture-core/components/Pages/MainPage/EventsList/ListWrapper/eventsList.selector.js
@@ -1,12 +1,17 @@
 // @flow
 import { createSelectorCreator, createSelector, defaultMemoize } from 'reselect';
-
-import { getStageFromProgramIdForEventProgram, OptionSet, Option, DataElement } from '../../../../../metaData';
+import log from 'loglevel';
+import { errorCreator } from 'capture-core-utils';
+import {
+    getStageFromProgramIdForEventProgram,
+    OptionSet,
+    Option,
+    DataElement,
+    dataElementTypes,
+} from '../../../../../metaData';
 import getStageFromEvent from '../../../../../metaData/helpers/getStageFromEvent';
-import { convertMainEventClientToList } from '../../../../../events/mainConverters';
 import { convertValue } from '../../../../../converters/clientToList';
 import RenderFoundation from '../../../../../metaData/RenderFoundation/RenderFoundation';
-import elementTypes from '../../../../../metaData/DataElement/elementTypes';
 
 type EventContainer = {
     event: CaptureClientEvent,
@@ -18,17 +23,16 @@ type ColumnOrderFromState = {
     visible: boolean,
     isMainProperty?: ?boolean,
     header?: ?string,
-    type?: ?$Values<typeof elementTypes>,
+    type?: ?$Values<typeof dataElementTypes>,
     options?: ?Array<{text: string, value: string}>,
 };
 
 type ColumnsOrderFromState = Array<ColumnOrderFromState>;
 
 // #HEADERS
-const programIdSelector = state => state.currentSelections.programId;
+const programIdSelector = (state, props) => state.workingListsContext[props.listId].programId;
 const columnsOrderStateSelector = (state, props) => state.workingListsColumnsOrder[props.listId];
 
-
 const createMainPropertyOptionSet = (column: ColumnOrderFromState) => {
     const dataElement = new DataElement((o) => {
         o.id = column.id;
@@ -47,6 +51,7 @@ const createMainPropertyOptionSet = (column: ColumnOrderFromState) => {
     dataElement.optionSet = optionSet;
     return optionSet;
 };
+
 // $FlowFixMe
 export const makeColumnsSelector = () => createSelector(
     programIdSelector,
@@ -86,15 +91,12 @@ const eventsValuesSelector = state => state.eventsValues;
 const sortOrderSelector = (state, props) => state.workingLists[props.listId].order;
 
 
-const createEventsContainer = (events, eventsValues, sortOrder): Array<EventContainer> => {
-    debugger;
-    return sortOrder
-    .map(eventId => ({
-        event: events[eventId],
-        eventValues: eventsValues[eventId],
-    }));
-}
-
+const createEventsContainer = (events, eventsValues, sortOrder): Array<EventContainer> =>
+    sortOrder
+        .map(eventId => ({
+            event: events[eventId],
+            eventValues: eventsValues[eventId],
+        }));
 
 // $FlowFixMe
 export const makeCreateEventsContainer = () => createSelector(
@@ -104,26 +106,30 @@ export const makeCreateEventsContainer = () => createSelector(
     createEventsContainer,
 );
 
-const onIsEventsEqual = (prevEventsContainer: Array<EventContainer>, currentEventsContainer: Array<EventContainer>) =>
-    currentEventsContainer.every(
+const onIsEventsEqual = (
+    { eventContainers: prevEventContainers }: { eventContainers: Array<EventContainer> },
+    { eventContainers: currentEventContainers }: { eventContainers: Array<EventContainer> },
+) =>
+    currentEventContainers.every(
         (eventContainer, index) =>
-            eventContainer.event === (prevEventsContainer[index] && prevEventsContainer[index].event) &&
-            eventContainer.eventValues === (prevEventsContainer[index] && prevEventsContainer[index].eventValues),
+            eventContainer.event === (prevEventContainers[index] && prevEventContainers[index].event) &&
+            eventContainer.eventValues === (prevEventContainers[index] && prevEventContainers[index].eventValues),
     ) &&
-    prevEventsContainer.every(
+    prevEventContainers.every(
         (eventContainer, index) =>
-            eventContainer.event === (currentEventsContainer[index] && currentEventsContainer[index].event) &&
-            eventContainer.eventValues === (currentEventsContainer[index] && currentEventsContainer[index].eventValues),
+            eventContainer.event === (currentEventContainers[index] && currentEventContainers[index].event) &&
+            eventContainer.eventValues === (currentEventContainers[index] && currentEventContainers[index].eventValues),
     );
 
 const createDeepEqualSelector = createSelectorCreator(
     defaultMemoize,
     onIsEventsEqual,
 );
 
-const eventsContainerSelector = eventContainers => eventContainers;
-
-const buildWorkingListData = (eventsContainer: Array<EventContainer>) => {
+const buildWorkingListData = (
+    eventsContainer: Array<EventContainer>,
+    columns,
+) => {
     if (eventsContainer.length === 0) {
         return [];
     }
@@ -136,17 +142,41 @@ const buildWorkingListData = (eventsContainer: Array<EventContainer>) => {
     return eventsContainer
         .map((eventContainer) => {
             const convertedValues = stage.stageForm.convertValues(eventContainer.eventValues, convertValue);
-            const convertedMainEvent = convertMainEventClientToList(eventContainer.event);
+
+            const convertedMainEvent = columns
+                .filter(column => column.isMainProperty)
+                .reduce((acc, mainColumn) => {
+                    const sourceValue = eventContainer.event[mainColumn.id];
+                    if (sourceValue) {
+                        if (mainColumn.options) {
+                            // TODO: Need is equal comparer for types
+                            const option = mainColumn.options.find(o => o.value === sourceValue);
+                            if (!option) {
+                                log.error(
+                                    errorCreator(
+                                        'Missing value in options for main values')(
+                                        { sourceValue, mainColumn }),
+                                );
+                            } else {
+                                acc[mainColumn.id] = option.text;
+                            }
+                        } else {
+                            acc[mainColumn.id] = convertValue(sourceValue, mainColumn.type);
+                        }
+                    }
+                    return acc;
+                }, {});
             return {
                 ...convertedMainEvent,
                 ...convertedValues,
+                eventId: eventContainer.event.eventId, // used as rowkey
             };
         });
 };
 
 // $FlowFixMe
 export const makeCreateWorkingListData = () => createDeepEqualSelector(
-    eventsContainerSelector,
-    eventsContainer =>
-        buildWorkingListData(eventsContainer),
+    (eventContainers, columns) => ({ eventContainers, columns }),
+    ({ eventContainers, columns }) =>
+        buildWorkingListData(eventContainers, columns),
 );