fix: add translations and remove render as tabs from the state

dhis2 · Jul 4, 2024 · 7114ca8 · 7114ca8
1 parent d04efc6
commit 7114ca8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git a/src/config/field-overrides/dataSet.js b/src/config/field-overrides/dataSet.js
@@ -5,15 +5,18 @@ import DataInputPeriods from './data-set/DataInputPeriods.component';
 import PeriodTypeDropDown from '../../forms/form-fields/period-type-drop-down';
 import Checkbox from '../../forms/form-fields/check-box';
 import {RadioButton, RadioButtonGroup} from "material-ui/RadioButton";
+import addD2Context from 'd2-ui/lib/component-helpers/addD2Context';
 import log from "loglevel";
 
 class RenderAsTabsSettings extends React.Component {
-    constructor(props) {
+    constructor(props, context) {
         super(props);
         this.state = {
-            renderAsTabs: props.value,
             displayOptions: this.parseDisplayOptions()
         };
+        this.translate = context.d2.i18n.getTranslation.bind(
+            context.d2.i18n
+        );
     }
 
     parseDisplayOptions = () =>  {
@@ -32,10 +35,7 @@ class RenderAsTabsSettings extends React.Component {
             ...this.state.displayOptions,
             tabsDirection
         }
-        this.setState((prevState, _) => ({
-            ...prevState,
-            displayOptions: newDisplayOptions
-        }));
+        this.setState({displayOptions: newDisplayOptions});
         this.props.model.displayOptions = JSON.stringify(newDisplayOptions)
     }
 
@@ -44,31 +44,28 @@ class RenderAsTabsSettings extends React.Component {
         this.updateTabsDirection(tabsDirection)
     }
 
-    onDisplayAsTabsChanged = (event) =>  {
+    onRenderAsTabsChanged = (event) =>  {
         const renderAsTabs = event.target.value
         const tabsDirection =
             renderAsTabs
                 ? 'horizontal'
                 : undefined
 
-        this.setState((prevState) => ({
-            ...prevState,
-            renderAsTabs
-        }));
         this.props.onChange({ target: { value: renderAsTabs } });
         this.updateTabsDirection(tabsDirection)
     }
 
 
     render() {
         const state = this.state;
+        const props = this.props;
         return <div>
            <Checkbox
-            labelText="Render as tabs"
-            value={state.renderAsTabs}
-            onChange={this.onDisplayAsTabsChanged}
+            labelText={this.translate('render_as_tabs')}
+            value={props.value}
+            onChange={this.onRenderAsTabsChanged}
         />
-            {state.renderAsTabs &&
+            {props.value &&
              <RadioButtonGroup
                 onChange={this.onDisplayOptionsChanged}
                 name="tabsDirection"
@@ -78,13 +75,13 @@ class RenderAsTabsSettings extends React.Component {
                 <RadioButton
                     key='horizontal'
                     value='horizontal'
-                    label='Horizontal'
+                    label={this.translate('horizontal')}
                     style={{margin: '10px'}}
                 />
                 <RadioButton
                     key='vertical'
                     value='vertical'
-                    label='Vertical'
+                    label={this.translate('vertical')}
                     style={{margin: '10px'}}
                 />
             </RadioButtonGroup>}
@@ -114,7 +111,7 @@ export default new Map([
         component: DataInputPeriods,
     }],
     ['renderAsTabs', {
-        component: RenderAsTabsSettings,
+        component: addD2Context(RenderAsTabsSettings),
     }]
 ]);
 
diff --git a/src/i18n/i18n_module_en.properties b/src/i18n/i18n_module_en.properties
@@ -623,6 +623,8 @@ no_value_requires_comment=Missing value requires comment on complete
 skip_offline=Skip offline
 render_options_as_radio=Render options as radio
 render_as_tabs=Render sections as tabs
+horizontal=Horizontal
+vertical=Vertical
 render_horizontally=Render vertically
 compulsory_fields_complete_only=Complete allowed only if compulsory fields are filled
 auto_save_data_entry_forms=Auto-save data entry forms