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

src/config/field-overrides/dataSet.js

@@ -1,7 +1,98 @@
+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 log from "loglevel";
+
+class CustomTestComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            renderAsTabs: props.value,
+            displayOptions: this.parseDisplayOptions()
+        };
+
+    }
+
+    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((prevState, _) => ({
+            ...prevState,
+            displayOptions: newDisplayOptions
+        }));
+        this.props.model.displayOptions = JSON.stringify(newDisplayOptions)
+    }
+
+    onDisplayOptionsChanged = (event) =>  {
+        const tabsDirection = event.target.value
+        this.updateTabsDirection(tabsDirection)
+
+    }
+
+    onDisplayAsTabsChanged = (event) =>  {
+        const renderAsTabs = event.target.value
+        const tabsDirection =
+            renderAsTabs
+                ? 'horizontal'
+                : undefined
+
+        this.setState((prevState) => ({
+            ...prevState,
+            renderAsTabs
+        }));
+        this.props.model.renderAsTabs = renderAsTabs
+        this.updateTabsDirection(tabsDirection)
+    }
+
+
+    render() {
+        const state = this.state;
+        return <div>
+           <Checkbox
+            labelText="Render as tabs"
+            value={state.renderAsTabs}
+            onChange={this.onDisplayAsTabsChanged}
+        />
+            {state.renderAsTabs &&
+             <RadioButtonGroup
+                onChange={this.onDisplayOptionsChanged}
+                name="tabsDirection"
+                defaultSelected={
+                    (state.displayOptions && state.displayOptions.tabsDirection) || 'horizontal'  }
+            >
+                <RadioButton
+                    key='horizontal'
+                    value='horizontal'
+                    label='Horizontal'
+                    style={{margin: '10px'}}
+                />
+                <RadioButton
+                    key='vertical'
+                    value='vertical'
+                    label='Vertical'
+                    style={{margin: '10px'}}
+                />
+            </RadioButtonGroup>}
+        </div>
+    }
+}
 
 export default new Map([
     ['categoryCombo', {
@@ -24,4 +115,8 @@ export default new Map([
     ['dataInputPeriods', {
         component: DataInputPeriods,
     }],
+    ['renderAsTabs', {
+        component: CustomTestComponent,
+    }]
 ]);
+