fix: complete translations (DHIS2-8894)

i18n/en.pot

@@ -11,6 +11,12 @@ msgstr ""
 msgid "Data Type"
 msgstr ""
 
+msgid "Totals"
+msgstr ""
+
+msgid "Details"
+msgstr ""
+
 msgid "Detail"
 msgstr ""
 
@@ -44,6 +50,12 @@ msgstr ""
 msgid "Filter dimensions"
 msgstr ""
 
+msgid "Main dimensions"
+msgstr ""
+
+msgid "Your dimensions"
+msgstr ""
+
 msgid "Dimension recommended with selected data"
 msgstr ""
 
@@ -362,12 +374,6 @@ msgstr ""
 msgid "[ All data elements ]"
 msgstr ""
 
-msgid "Totals"
-msgstr ""
-
-msgid "Details"
-msgstr ""
-
 msgid "Data sets"
 msgstr ""
 
@@ -454,3 +460,6 @@ msgstr ""
 
 msgid "Base"
 msgstr ""
+
+msgid "No data"
+msgstr ""

package.json

@@ -26,6 +26,7 @@
     "devDependencies": {
         "@dhis2/cli-app-scripts": "^4.0.7",
         "@dhis2/cli-style": "^7.0.0",
+        "@dhis2/d2-i18n": "^1.0.6",
         "@sambego/storybook-state": "^2.0.1",
         "@storybook/addons": "^5.0.6",
         "@storybook/preset-create-react-app": "^2.1.2",
@@ -37,14 +38,13 @@
         "typeface-roboto": "^0.0.75"
     },
     "peerDependencies": {
+        "@dhis2/d2-i18n": "^1.0.6",
         "prop-types": "^15",
         "react": "^16.3",
         "react-dom": "^16.3"
     },
     "dependencies": {
-        "@dhis2/d2-i18n": "^1.0.4",
         "@dhis2/d2-ui-org-unit-dialog": "^7.0.3",
-        "@dhis2/d2-ui-period-selector-dialog": "^7.0.3",
         "@dhis2/ui-core": "^4.21.1",
         "@material-ui/core": "^3.9.3",
         "@material-ui/icons": "^3.0.2",

src/api/dimensions.js

@@ -93,7 +93,13 @@ export const apiFetchGroups = (d2, dataType, nameProp) => {
             return request(d2, 'dataElementGroups', { paramString: params })
         }
         case 'dataSets': {
-            return Promise.resolve(DATA_SETS_CONSTANTS)
+            const dataSetGroups = DATA_SETS_CONSTANTS.map(
+                ({ id, getName }) => ({
+                    id,
+                    name: getName(),
+                })
+            )
+            return Promise.resolve(dataSetGroups)
         }
         case 'eventDataItems':
         case 'programIndicators': {

src/components/DataDimension/DataTypesSelector.js

@@ -12,7 +12,7 @@ export const DataTypes = ({ currentDataType, onChange }) => (
             label={i18n.t('Data Type')}
             selected={{
                 value: dataTypes[currentDataType]?.id,
-                label: dataTypes[currentDataType]?.name,
+                label: dataTypes[currentDataType]?.getName(),
             }}
             onChange={ref => onChange(ref.selected.value)}
             dense
@@ -21,7 +21,7 @@ export const DataTypes = ({ currentDataType, onChange }) => (
                 <SingleSelectOption
                     value={type.id}
                     key={type.id}
-                    label={type.name}
+                    label={type.getName()}
                 />
             ))}
         </SingleSelectField>

src/components/DataDimension/Detail.js

@@ -2,10 +2,17 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { SingleSelectField, SingleSelectOption } from '@dhis2/ui-core'
+import { TOTALS, DETAIL } from '../../modules/dataTypes'
 
 import styles from './styles/Detail.style'
 
-export const Detail = ({ currentValue, onChange, options }) => {
+const getOptions = () => ({
+    [TOTALS]: i18n.t('Totals'),
+    [DETAIL]: i18n.t('Details'),
+})
+
+export const Detail = ({ currentValue, onChange }) => {
+    const options = getOptions()
     const currentLabel = options[currentValue]
     return (
         <div className="detail-container">
@@ -37,7 +44,6 @@ export const Detail = ({ currentValue, onChange, options }) => {
 
 Detail.propTypes = {
     currentValue: PropTypes.string.isRequired,
-    options: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
 }
 

src/components/DataDimension/Groups.js

@@ -14,10 +14,11 @@ export const Groups = ({
     onDetailChange,
     onGroupChange,
 }) => {
-    const defaultGroup = dataTypes[dataType].defaultGroup
     let optionItems = groups
 
-    if (defaultGroup) {
+    if (dataTypes[dataType].defaultGroup) {
+        const { id, getName } = dataTypes[dataType].defaultGroup
+        const defaultGroup = { id, name: getName() }
         optionItems = [defaultGroup, ...optionItems]
     }
 
@@ -30,7 +31,7 @@ export const Groups = ({
             <style jsx>{styles}</style>
             <div className="group-container">
                 <SingleSelectField
-                    label={dataTypes[dataType].groupLabel}
+                    label={dataTypes[dataType].getGroupLabel()}
                     selected={
                         selected.id && selected.name
                             ? { value: selected.id, label: selected.name }
@@ -54,11 +55,7 @@ export const Groups = ({
                 </SingleSelectField>
             </div>
             {groupDetail && (
-                <Detail
-                    currentValue={detailValue}
-                    onChange={onDetailChange}
-                    options={groupDetail.alternatives}
-                />
+                <Detail currentValue={detailValue} onChange={onDetailChange} />
             )}
         </div>
     )

src/components/DimensionsPanel/List/DimensionItem.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import i18n from '@dhis2/d2-i18n'
 import LockIcon from '@material-ui/icons/Lock'
 
 import DimensionLabel from './DimensionLabel'
@@ -43,8 +42,7 @@ export class DimensionItem extends Component {
                     ...(isDeactivated ? styles.textDeactivated : {}),
                 }}
             >
-                {/* is it needed here or displayName should be used instead?! */}
-                {i18n.t(name)}
+                {name}
             </span>
         )
     }

src/components/DimensionsPanel/List/DimensionList.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
+import i18n from '@dhis2/d2-i18n'
 
 import DimensionItem from './DimensionItem'
 import { styles } from './styles/DimensionList.style'
@@ -62,11 +63,15 @@ export class DimensionList extends Component {
             <div className={classes.container}>
                 <div className={classes.wrapper}>
                     <div className={classes.section}>
-                        <h3 className={classes.header}>Main dimensions</h3>
+                        <h3 className={classes.header}>
+                            {i18n.t('Main dimensions')}
+                        </h3>
                         <ul className={classes.list}>{fixedDimensions}</ul>
                     </div>
                     <div className={classes.section}>
-                        <h3 className={classes.header}>Your dimensions</h3>
+                        <h3 className={classes.header}>
+                            {i18n.t('Your dimensions')}
+                        </h3>
                         <ul className={classes.list}>
                             {nonPredefinedDimensions}
                         </ul>

src/index.js

@@ -1,3 +1,4 @@
+import './locales'
 // Components
 
 export { default as DataDimension } from './components/DataDimension/DataDimension'

src/modules/dataSets.js

@@ -9,22 +9,22 @@ export const EXPECTED_REPORTS = 'EXPECTED_REPORTS'
 export const DATA_SETS_CONSTANTS = [
     {
         id: REPORTING_RATE,
-        name: i18n.t('Reporting rate'),
+        getName: () => i18n.t('Reporting rate'),
     },
     {
         id: REPORTING_RATE_ON_TIME,
-        name: i18n.t('Reporting rate on time'),
+        getName: () => i18n.t('Reporting rate on time'),
     },
     {
         id: ACTUAL_REPORTS,
-        name: i18n.t('Actual reports'),
+        getName: () => i18n.t('Actual reports'),
     },
     {
         id: ACTUAL_REPORTS_ON_TIME,
-        name: i18n.t('Actual reports on time'),
+        getName: () => i18n.t('Actual reports on time'),
     },
     {
         id: EXPECTED_REPORTS,
-        name: i18n.t('Expected reports'),
+        getName: () => i18n.t('Expected reports'),
     },
 ]

src/modules/dataTypes.js

@@ -22,55 +22,52 @@ const DATA_SETS = 'dataSets'
 const EVENT_DATA_ITEMS = 'eventDataItems'
 const PROGRAM_INDICATORS = 'programIndicators'
 
-const TOTALS = 'totals'
-const DETAIL = 'detail'
+export const TOTALS = 'totals'
+export const DETAIL = 'detail'
 
-const programText = i18n.t('Program')
-const selectProgramText = i18n.t('Select a program')
+const getProgramText = () => i18n.t('Program')
+const getSelectProgramText = () => i18n.t('Select a program')
 
 export const dataTypes = {
     [INDICATORS]: {
         id: INDICATORS,
-        name: i18n.t('Indicators'),
-        groupLabel: i18n.t('Select indicator group'),
-        defaultGroup: { id: ALL_ID, name: i18n.t('[ All groups ]') },
+        getName: () => i18n.t('Indicators'),
+        getGroupLabel: () => i18n.t('Select indicator group'),
+        defaultGroup: { id: ALL_ID, getName: () => i18n.t('[ All groups ]') },
         groupDetail: false,
     },
     [DATA_ELEMENTS]: {
         id: DATA_ELEMENTS,
-        name: i18n.t('Data elements'),
-        groupLabel: i18n.t('Select data element group'),
-        defaultGroup: { id: ALL_ID, name: i18n.t('[ All data elements ]') },
-        groupDetail: {
-            alternatives: {
-                [TOTALS]: i18n.t('Totals'),
-                [DETAIL]: i18n.t('Details'),
-            },
-            default: TOTALS,
+        getName: () => i18n.t('Data elements'),
+        getGroupLabel: () => i18n.t('Select data element group'),
+        defaultGroup: {
+            id: ALL_ID,
+            getName: () => i18n.t('[ All data elements ]'),
         },
+        groupDetail: { default: TOTALS },
     },
     [DATA_SETS]: {
         id: DATA_SETS,
-        name: i18n.t('Data sets'),
-        groupLabel: i18n.t('Select data sets'),
-        defaultGroup: { id: ALL_ID, name: i18n.t('[ All metrics ]') },
+        getName: () => i18n.t('Data sets'),
+        getGroupLabel: () => i18n.t('Select data sets'),
+        defaultGroup: { id: ALL_ID, getName: () => i18n.t('[ All metrics ]') },
         groupDetail: false,
         augmentAlternatives: (alternatives, groupId) =>
             getReportingRates(alternatives, groupId),
     },
     [EVENT_DATA_ITEMS]: {
         id: EVENT_DATA_ITEMS,
-        name: i18n.t('Event data items'),
-        groupLabel: programText,
-        placeholder: selectProgramText,
+        getName: () => i18n.t('Event data items'),
+        getGroupLabel: getProgramText,
+        getPlaceholder: getSelectProgramText,
         defaultGroup: null,
         groupDetail: false,
     },
     [PROGRAM_INDICATORS]: {
         id: PROGRAM_INDICATORS,
-        name: i18n.t('Program indicators'),
-        groupLabel: programText,
-        placeholder: selectProgramText,
+        getName: () => i18n.t('Program indicators'),
+        getGroupLabel: getProgramText,
+        getPlaceholder: getSelectProgramText,
         defaultGroup: null,
         groupDetail: false,
     },
@@ -93,30 +90,32 @@ export const DEFAULT_DATATYPE_ID = INDICATORS
 const getReportingRates = (contents, groupSetId) => {
     let dataSets = []
 
-    const reportingRateIndex = DATA_SETS_CONSTANTS.find(
-        item => item.id === groupSetId
-    )
+    if (groupSetId === ALL_ID) {
+        DATA_SETS_CONSTANTS.forEach(
+            reportingRate =>
+                (dataSets = [
+                    ...dataSets,
+                    ...contents.map(dataSet =>
+                        concatReportingRate(dataSet, reportingRate)
+                    ),
+                ])
+        )
+    } else {
+        const reportingRateIndex = DATA_SETS_CONSTANTS.find(
+            item => item.id === groupSetId
+        )
 
-    groupSetId === ALL_ID
-        ? DATA_SETS_CONSTANTS.forEach(
-              reportingRate =>
-                  (dataSets = [
-                      ...dataSets,
-                      ...contents.map(dataSet =>
-                          concatReportingRate(dataSet, reportingRate)
-                      ),
-                  ])
-          )
-        : (dataSets = contents.map(dataSet =>
-              concatReportingRate(dataSet, reportingRateIndex)
-          ))
+        dataSets = contents.map(dataSet =>
+            concatReportingRate(dataSet, reportingRateIndex)
+        )
+    }
 
     return dataSets
 }
 
 const concatReportingRate = (dataSet, reportingRate) => {
     return {
         id: `${dataSet.id}.${reportingRate.id}`,
-        name: `${dataSet.name} (${reportingRate.name})`,
+        name: `${dataSet.name} (${reportingRate.getName()})`,
     }
 }