Merge pull request #2885 from dhis2/DHIS2-17506/vertical-and-horizont…

…al-tabs-for-datasets

feat: add option to pick render as tabs direction for data sets

src/config/field-overrides/dataSet.js

@@ -1,7 +1,93 @@
+import React from 'react';
 import OrganisationUnitTreeMultiSelect from '../../forms/form-fields/orgunit-tree-multi-select';
 import DataSetElementField from './data-set/DataSetElementField.component';
 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, context) {
+        super(props);
+        this.state = {
+            displayOptions: this.parseDisplayOptions()
+        };
+        this.translate = context.d2.i18n.getTranslation.bind(
+            context.d2.i18n
+        );
+    }
+
+    parseDisplayOptions = () =>  {
+        try {
+            return this.props
+                && this.props.model['displayOptions']
+                && JSON.parse(this.props.model['displayOptions'])
+        } catch (e) {
+            log.error(e);
+            return undefined
+        }
+    }
+
+    updateTabsDirection = (tabsDirection) => {
+        const newDisplayOptions = {
+            ...this.state.displayOptions,
+            tabsDirection
+        }
+        this.setState({displayOptions: newDisplayOptions});
+        this.props.model.displayOptions = JSON.stringify(newDisplayOptions)
+    }
+
+    onDisplayOptionsChanged = (event) =>  {
+        const tabsDirection = event.target.value
+        this.updateTabsDirection(tabsDirection)
+    }
+
+    onRenderAsTabsChanged = (event) =>  {
+        const renderAsTabs = event.target.value
+        const tabsDirection =
+            renderAsTabs
+                ? 'horizontal'
+                : undefined
+
+        this.props.onChange({ target: { value: renderAsTabs } });
+        this.updateTabsDirection(tabsDirection)
+    }
+
+
+    render() {
+        const state = this.state;
+        const props = this.props;
+        return <div>
+           <Checkbox
+            labelText={this.translate('render_as_tabs')}
+            value={props.value}
+            onChange={this.onRenderAsTabsChanged}
+        />
+            {props.value &&
+             <RadioButtonGroup
+                onChange={this.onDisplayOptionsChanged}
+                name="tabsDirection"
+                defaultSelected={
+                    (state.displayOptions && state.displayOptions.tabsDirection) || 'horizontal'  }
+            >
+                <RadioButton
+                    key='horizontal'
+                    value='horizontal'
+                    label={this.translate('horizontal')}
+                    style={{margin: '10px'}}
+                />
+                <RadioButton
+                    key='vertical'
+                    value='vertical'
+                    label={this.translate('vertical')}
+                    style={{margin: '10px'}}
+                />
+            </RadioButtonGroup>}
+        </div>
+    }
+}
 
 export default new Map([
     ['categoryCombo', {
@@ -24,4 +110,8 @@ export default new Map([
     ['dataInputPeriods', {
         component: DataInputPeriods,
     }],
+    ['renderAsTabs', {
+        component: addD2Context(RenderAsTabsSettings),
+    }]
 ]);
+

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