feat: allow pass data types in DataDimension (DHIS2-16433)

dhis2 · Jan 25, 2024 · 4dfa0f8 · 4dfa0f8
1 parent 664ec78
commit 4dfa0f8
Show file tree

Hide file tree

Showing 6 changed files with 226 additions and 125 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-01-17T09:19:49.801Z\n"
-"PO-Revision-Date: 2024-01-17T09:19:49.802Z\n"
+"POT-Creation-Date: 2024-01-25T12:05:03.360Z\n"
+"PO-Revision-Date: 2024-01-25T12:05:03.360Z\n"
 
 msgid "view only"
 msgstr "view only"
@@ -183,6 +183,9 @@ msgstr "No event data items found"
 msgid "No program indicators found"
 msgstr "No program indicators found"
 
+msgid "No calculations found"
+msgstr "No calculations found"
+
 msgid "No indicators found for \"{{- searchTerm}}\""
 msgstr "No indicators found for \"{{- searchTerm}}\""
 
@@ -195,6 +198,9 @@ msgstr "No event data items found for \"{{- searchTerm}}\""
 msgid "No program indicators found for \"{{- searchTerm}}\""
 msgstr "No program indicators found for \"{{- searchTerm}}\""
 
+msgid "No calculations found for \"{{- searchTerm}}\""
+msgstr "No calculations found for \"{{- searchTerm}}\""
+
 msgid "Nothing found for \"{{- searchTerm}}\""
 msgstr "Nothing found for \"{{- searchTerm}}\""
 

diff --git a/src/components/DataDimension/DataDimension.js b/src/components/DataDimension/DataDimension.js
@@ -1,21 +1,46 @@
 import { useConfig } from '@dhis2/app-runtime'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, {
+    createContext,
+    useContext,
+    useCallback,
+    useEffect,
+    useState,
+} from 'react'
+import {
+    dataTypeMap,
+    DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM,
+} from '../../modules/dataTypes.js'
 import { DIMENSION_ID_DATA } from '../../modules/predefinedDimensions.js'
 import ItemSelector from './ItemSelector.js'
 
+const DataDimensionCtx = createContext({})
+
 const DataDimension = ({
     onSelect,
     selectedDimensions,
     displayNameProp,
+    enabledDataTypes,
     infoBoxMessage,
     onCalculationSave,
+    visType,
 }) => {
     const { serverVersion } = useConfig()
-    const supportsEDI =
-        `${serverVersion.major}.${serverVersion.minor}.${
-            serverVersion.patch || 0
-        }` >= '2.40.0'
+
+    const filterDataTypesByVersion = useCallback(
+        (dataTypes) =>
+            dataTypes.filter(({ id }) =>
+                // Calculations only available from 2.40
+                id === DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM
+                    ? serverVersion.minor >= 40
+                    : true
+            ),
+        [serverVersion.minor]
+    )
+
+    const [dataTypes, setDataTypes] = useState(
+        filterDataTypesByVersion(enabledDataTypes || Object.values(dataTypeMap))
+    )
 
     const onSelectItems = (selectedItem) =>
         onSelect({
@@ -28,23 +53,32 @@ const DataDimension = ({
             })),
         })
 
+    useEffect(
+        () =>
+            enabledDataTypes &&
+            setDataTypes(filterDataTypesByVersion(enabledDataTypes)),
+        [enabledDataTypes, filterDataTypesByVersion]
+    )
+
     return (
-        <ItemSelector
-            selectedItems={selectedDimensions.map((item) => ({
-                value: item.id,
-                label: item.name,
-                isActive: item.isActive,
-                type: item.type,
-                expression: item.expression,
-                access: item.access,
-            }))}
-            onSelect={onSelectItems}
-            displayNameProp={displayNameProp}
-            infoBoxMessage={infoBoxMessage}
-            dataTest={'data-dimension'}
-            supportsEDI={supportsEDI}
-            onEDISave={onCalculationSave}
-        />
+        <DataDimensionCtx.Provider value={{ visType }}>
+            <ItemSelector
+                selectedItems={selectedDimensions.map((item) => ({
+                    value: item.id,
+                    label: item.name,
+                    isActive: item.isActive,
+                    type: item.type,
+                    expression: item.expression,
+                    access: item.access,
+                }))}
+                onSelect={onSelectItems}
+                displayNameProp={displayNameProp}
+                infoBoxMessage={infoBoxMessage}
+                dataTest={'data-dimension'}
+                dataTypes={dataTypes}
+                onEDISave={onCalculationSave}
+            />
+        </DataDimensionCtx.Provider>
     )
 }
 
@@ -60,7 +94,9 @@ DataDimension.propTypes = {
         })
     ).isRequired,
     onSelect: PropTypes.func.isRequired,
+    enabledDataTypes: PropTypes.array,
     infoBoxMessage: PropTypes.string,
+    visType: PropTypes.string,
     onCalculationSave: PropTypes.func,
 }
 
@@ -69,4 +105,6 @@ DataDimension.defaultProps = {
     onSelect: Function.prototype,
 }
 
+export const useDataDimensionContext = () => useContext(DataDimensionCtx)
+
 export default DataDimension
diff --git a/src/components/DataDimension/DataTypeSelector.js b/src/components/DataDimension/DataTypeSelector.js
@@ -2,57 +2,73 @@ import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../../locales/index.js'
-import {
-    DIMENSION_TYPE_ALL,
-    dataTypeMap as dataTypes,
-    DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM,
-} from '../../modules/dataTypes.js'
+import { DIMENSION_TYPE_ALL, dataTypeMap } from '../../modules/dataTypes.js'
+import { getDisplayNameByVisType } from '../../modules/visTypes.js'
+import { useDataDimensionContext } from './DataDimension.js'
 import styles from './styles/DataTypeSelector.style.js'
 
 const DataTypeSelector = ({
     currentDataType,
+    dataTypes,
     onChange,
     dataTest,
-    includeCalculations,
-}) => (
-    <div className="container">
-        <SingleSelectField
-            label={i18n.t('Data Type')}
-            dataTest={dataTest}
-            selected={dataTypes[currentDataType]?.id || DIMENSION_TYPE_ALL}
-            onChange={(ref) => onChange(ref.selected)}
-            dense
-        >
-            <SingleSelectOption
-                value={DIMENSION_TYPE_ALL}
-                key={DIMENSION_TYPE_ALL}
-                label={i18n.t('All types')}
-                dataTest={`${dataTest}-option-all`}
-            />
-            {Object.values(dataTypes)
-                .filter(
-                    (type) =>
-                        type.id !== DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM ||
-                        includeCalculations
-                )
-                .map((type) => (
+}) => {
+    const { visType } = useDataDimensionContext()
+
+    return (
+        <div className="container">
+            <SingleSelectField
+                label={i18n.t('Data Type')}
+                dataTest={dataTest}
+                selected={
+                    currentDataType ||
+                    (dataTypes.length === 1
+                        ? dataTypes[0].id
+                        : DIMENSION_TYPE_ALL)
+                }
+                onChange={(ref) => onChange(ref.selected)}
+                dense
+                disabled={dataTypes.length === 1}
+                helpText={
+                    dataTypes.length === 1 && visType
+                        ? i18n.t(
+                              'Only {{dataType}} can be used in {{visType}}',
+                              {
+                                  dataType:
+                                      dataTypeMap[dataTypes[0].id].getName(),
+                                  visType: getDisplayNameByVisType(visType),
+                              }
+                          )
+                        : ''
+                }
+            >
+                {dataTypes.length > 1 && (
+                    <SingleSelectOption
+                        value={DIMENSION_TYPE_ALL}
+                        key={DIMENSION_TYPE_ALL}
+                        label={i18n.t('All types')}
+                        dataTest={`${dataTest}-option-all`}
+                    />
+                )}
+                {dataTypes.map((type) => (
                     <SingleSelectOption
                         value={type.id}
                         key={type.id}
                         label={type.getName()}
                         dataTest={`${dataTest}-option-${type.id}`}
                     />
                 ))}
-        </SingleSelectField>
-        <style jsx>{styles}</style>
-    </div>
-)
+            </SingleSelectField>
+            <style jsx>{styles}</style>
+        </div>
+    )
+}
 
 DataTypeSelector.propTypes = {
     currentDataType: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
     dataTest: PropTypes.string,
-    includeCalculations: PropTypes.bool,
+    dataTypes: PropTypes.array,
 }
 
 export default DataTypeSelector
diff --git a/src/components/DataDimension/GroupSelector.js b/src/components/DataDimension/GroupSelector.js
@@ -28,20 +28,20 @@ const GroupSelector = ({
     const defaultGroup = dataTypes[dataType]?.defaultGroup
     const subGroupType = dataTypes[dataType]?.subGroup
 
-    const fetchGroups = async () => {
-        setIsLoading(true)
-        const result = await apiFetchGroups(
-            dataEngine,
-            dataType,
-            displayNameProp
-        )
-        setGroups(result)
-        setIsLoading(false)
-    }
-
     useEffect(() => {
+        const fetchGroups = async () => {
+            setIsLoading(true)
+            const result = await apiFetchGroups(
+                dataEngine,
+                dataType,
+                displayNameProp
+            )
+            setGroups(result)
+            setIsLoading(false)
+        }
+
         fetchGroups()
-    }, [dataType])
+    }, [dataEngine, dataType, displayNameProp])
 
     return (
         <div className="container">