@dhis2/analytics 21.2.2 → 21.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [21.2.3](https://github.com/dhis2/analytics/compare/v21.2.2...v21.2.3) (2022-01-05)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* fetch translations for field labels from api ([#1119](https://github.com/dhis2/analytics/issues/1119)) ([e2fcacc](https://github.com/dhis2/analytics/commit/e2fcaccbd058a8e85a99e032f6341e7f15a83b94))
|
|
7
|
+
|
|
1
8
|
## [21.2.2](https://github.com/dhis2/analytics/compare/v21.2.1...v21.2.2) (2021-12-28)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -37,17 +37,13 @@ const TranslationForm = ({
|
|
|
37
37
|
}) => {
|
|
38
38
|
const [newTranslations, setNewTranslations] = (0, _react.useState)();
|
|
39
39
|
const [translationLocale, setTranslationLocale] = (0, _react.useState)();
|
|
40
|
+
const [fieldsTranslations, setFieldsTranslations] = (0, _react.useState)({});
|
|
40
41
|
const {
|
|
41
42
|
show: showError
|
|
42
43
|
} = (0, _appRuntime.useAlert)(error => error, {
|
|
43
44
|
critical: true
|
|
44
45
|
});
|
|
45
46
|
|
|
46
|
-
const formatFieldLabel = field => {
|
|
47
|
-
field.replace(/[a-z][A-Z]/g, match => [match.charAt(0), match.charAt(1)].join(' ')).toLowerCase();
|
|
48
|
-
return field.charAt(0).toUpperCase() + field.slice(1);
|
|
49
|
-
};
|
|
50
|
-
|
|
51
47
|
const camelCaseToUnderscores = field => field.replace(/[a-z][A-Z]/g, match => [match.charAt(0), match.charAt(1)].join('_')).toLowerCase();
|
|
52
48
|
|
|
53
49
|
const getTranslationIndexForField = field => newTranslations.findIndex(element => element.locale === translationLocale && element.property.toLowerCase() === camelCaseToUnderscores(field));
|
|
@@ -69,6 +65,14 @@ const TranslationForm = ({
|
|
|
69
65
|
setNewTranslations(translationIndex === -1 ? [...newTranslations, newTranslation] : newTranslations.map((translation, index) => index === translationIndex ? newTranslation : translation));
|
|
70
66
|
};
|
|
71
67
|
|
|
68
|
+
const [fetchFieldsTranslations] = (0, _appRuntime.useDataMutation)({
|
|
69
|
+
resource: 'i18n',
|
|
70
|
+
type: 'create',
|
|
71
|
+
data: fieldsToTranslate.map(camelCaseToUnderscores)
|
|
72
|
+
}, {
|
|
73
|
+
onComplete: res => setFieldsTranslations(res),
|
|
74
|
+
onError: error => showError(error)
|
|
75
|
+
});
|
|
72
76
|
const translationsMutationRef = (0, _react.useRef)({
|
|
73
77
|
resource: "".concat(resource, "/translations"),
|
|
74
78
|
type: 'update',
|
|
@@ -85,9 +89,7 @@ const TranslationForm = ({
|
|
|
85
89
|
onTranslationSaved();
|
|
86
90
|
onClose();
|
|
87
91
|
},
|
|
88
|
-
onError: error =>
|
|
89
|
-
showError(error);
|
|
90
|
-
}
|
|
92
|
+
onError: error => showError(error)
|
|
91
93
|
});
|
|
92
94
|
|
|
93
95
|
const onLocaleChange = locale => {
|
|
@@ -100,6 +102,11 @@ const TranslationForm = ({
|
|
|
100
102
|
});
|
|
101
103
|
|
|
102
104
|
(0, _react.useEffect)(() => setTranslationLocale(window.sessionStorage.getItem(SESSION_STORAGE_TRANSLATION_LOCALE_KEY)), []);
|
|
105
|
+
(0, _react.useEffect)(() => {
|
|
106
|
+
const fetchTranslations = () => fetchFieldsTranslations(fieldsToTranslate);
|
|
107
|
+
|
|
108
|
+
fetchTranslations();
|
|
109
|
+
}, [fieldsToTranslate]);
|
|
103
110
|
(0, _react.useEffect)(() => setNewTranslations(translations), [translations]);
|
|
104
111
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.ModalContent, null, /*#__PURE__*/_react.default.createElement(_ui.DataTable, {
|
|
105
112
|
layout: "fixed"
|
|
@@ -114,21 +121,17 @@ const TranslationForm = ({
|
|
|
114
121
|
onChange: onLocaleChange
|
|
115
122
|
})))), /*#__PURE__*/_react.default.createElement(_ui.DataTableBody, null, fieldsToTranslate.map((field, index) => /*#__PURE__*/_react.default.createElement(_ui.DataTableRow, {
|
|
116
123
|
key: field
|
|
117
|
-
}, /*#__PURE__*/_react.default.createElement(_ui.DataTableCell, null, /*#__PURE__*/_react.default.createElement(
|
|
118
|
-
|
|
119
|
-
}, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
|
|
120
|
-
label: formatFieldLabel(field),
|
|
124
|
+
}, /*#__PURE__*/_react.default.createElement(_ui.DataTableCell, null, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
|
|
125
|
+
label: fieldsTranslations[field],
|
|
121
126
|
value: objectToTranslate[field],
|
|
122
127
|
readOnly: true
|
|
123
|
-
}))
|
|
124
|
-
|
|
125
|
-
}, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
|
|
126
|
-
label: formatFieldLabel(field),
|
|
128
|
+
})), translationLocale && /*#__PURE__*/_react.default.createElement(_ui.DataTableCell, null, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
|
|
129
|
+
label: fieldsTranslations[field],
|
|
127
130
|
value: getTranslationForField(field),
|
|
128
131
|
onChange: ({
|
|
129
132
|
value
|
|
130
133
|
}) => setTranslationForField(field, value)
|
|
131
|
-
}))
|
|
134
|
+
})), !translationLocale && index === 0 && /*#__PURE__*/_react.default.createElement(_ui.DataTableCell, {
|
|
132
135
|
rowSpan: String(fieldsToTranslate.length)
|
|
133
136
|
}, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, _d2I18n.default.t('Choose a locale to translate from the menu above')))))))), /*#__PURE__*/_react.default.createElement(_TranslationModalActions.TranslationModalActions, {
|
|
134
137
|
onClose: onClose,
|
|
@@ -16,17 +16,13 @@ export const TranslationForm = ({
|
|
|
16
16
|
}) => {
|
|
17
17
|
const [newTranslations, setNewTranslations] = useState();
|
|
18
18
|
const [translationLocale, setTranslationLocale] = useState();
|
|
19
|
+
const [fieldsTranslations, setFieldsTranslations] = useState({});
|
|
19
20
|
const {
|
|
20
21
|
show: showError
|
|
21
22
|
} = useAlert(error => error, {
|
|
22
23
|
critical: true
|
|
23
24
|
});
|
|
24
25
|
|
|
25
|
-
const formatFieldLabel = field => {
|
|
26
|
-
field.replace(/[a-z][A-Z]/g, match => [match.charAt(0), match.charAt(1)].join(' ')).toLowerCase();
|
|
27
|
-
return field.charAt(0).toUpperCase() + field.slice(1);
|
|
28
|
-
};
|
|
29
|
-
|
|
30
26
|
const camelCaseToUnderscores = field => field.replace(/[a-z][A-Z]/g, match => [match.charAt(0), match.charAt(1)].join('_')).toLowerCase();
|
|
31
27
|
|
|
32
28
|
const getTranslationIndexForField = field => newTranslations.findIndex(element => element.locale === translationLocale && element.property.toLowerCase() === camelCaseToUnderscores(field));
|
|
@@ -48,6 +44,14 @@ export const TranslationForm = ({
|
|
|
48
44
|
setNewTranslations(translationIndex === -1 ? [...newTranslations, newTranslation] : newTranslations.map((translation, index) => index === translationIndex ? newTranslation : translation));
|
|
49
45
|
};
|
|
50
46
|
|
|
47
|
+
const [fetchFieldsTranslations] = useDataMutation({
|
|
48
|
+
resource: 'i18n',
|
|
49
|
+
type: 'create',
|
|
50
|
+
data: fieldsToTranslate.map(camelCaseToUnderscores)
|
|
51
|
+
}, {
|
|
52
|
+
onComplete: res => setFieldsTranslations(res),
|
|
53
|
+
onError: error => showError(error)
|
|
54
|
+
});
|
|
51
55
|
const translationsMutationRef = useRef({
|
|
52
56
|
resource: "".concat(resource, "/translations"),
|
|
53
57
|
type: 'update',
|
|
@@ -64,9 +68,7 @@ export const TranslationForm = ({
|
|
|
64
68
|
onTranslationSaved();
|
|
65
69
|
onClose();
|
|
66
70
|
},
|
|
67
|
-
onError: error =>
|
|
68
|
-
showError(error);
|
|
69
|
-
}
|
|
71
|
+
onError: error => showError(error)
|
|
70
72
|
});
|
|
71
73
|
|
|
72
74
|
const onLocaleChange = locale => {
|
|
@@ -79,6 +81,11 @@ export const TranslationForm = ({
|
|
|
79
81
|
});
|
|
80
82
|
|
|
81
83
|
useEffect(() => setTranslationLocale(window.sessionStorage.getItem(SESSION_STORAGE_TRANSLATION_LOCALE_KEY)), []);
|
|
84
|
+
useEffect(() => {
|
|
85
|
+
const fetchTranslations = () => fetchFieldsTranslations(fieldsToTranslate);
|
|
86
|
+
|
|
87
|
+
fetchTranslations();
|
|
88
|
+
}, [fieldsToTranslate]);
|
|
82
89
|
useEffect(() => setNewTranslations(translations), [translations]);
|
|
83
90
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(DataTable, {
|
|
84
91
|
layout: "fixed"
|
|
@@ -93,21 +100,17 @@ export const TranslationForm = ({
|
|
|
93
100
|
onChange: onLocaleChange
|
|
94
101
|
})))), /*#__PURE__*/React.createElement(DataTableBody, null, fieldsToTranslate.map((field, index) => /*#__PURE__*/React.createElement(DataTableRow, {
|
|
95
102
|
key: field
|
|
96
|
-
}, /*#__PURE__*/React.createElement(DataTableCell, null, /*#__PURE__*/React.createElement(
|
|
97
|
-
|
|
98
|
-
}, /*#__PURE__*/React.createElement(InputField, {
|
|
99
|
-
label: formatFieldLabel(field),
|
|
103
|
+
}, /*#__PURE__*/React.createElement(DataTableCell, null, /*#__PURE__*/React.createElement(InputField, {
|
|
104
|
+
label: fieldsTranslations[field],
|
|
100
105
|
value: objectToTranslate[field],
|
|
101
106
|
readOnly: true
|
|
102
|
-
}))
|
|
103
|
-
|
|
104
|
-
}, /*#__PURE__*/React.createElement(InputField, {
|
|
105
|
-
label: formatFieldLabel(field),
|
|
107
|
+
})), translationLocale && /*#__PURE__*/React.createElement(DataTableCell, null, /*#__PURE__*/React.createElement(InputField, {
|
|
108
|
+
label: fieldsTranslations[field],
|
|
106
109
|
value: getTranslationForField(field),
|
|
107
110
|
onChange: ({
|
|
108
111
|
value
|
|
109
112
|
}) => setTranslationForField(field, value)
|
|
110
|
-
}))
|
|
113
|
+
})), !translationLocale && index === 0 && /*#__PURE__*/React.createElement(DataTableCell, {
|
|
111
114
|
rowSpan: String(fieldsToTranslate.length)
|
|
112
115
|
}, /*#__PURE__*/React.createElement(CenteredContent, null, i18n.t('Choose a locale to translate from the menu above')))))))), /*#__PURE__*/React.createElement(TranslationModalActions, {
|
|
113
116
|
onClose: onClose,
|