feat: add option to make a data set sections collapsible

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

Hide file tree

Showing 3 changed files with 104 additions and 87 deletions.
diff --git a/src/config/field-overrides/data-set/RenderAsTabs.component.js b/src/config/field-overrides/data-set/RenderAsTabs.component.js
@@ -0,0 +1,99 @@
+import React from "react";
+import log from "loglevel";
+import Checkbox from "../../../forms/form-fields/check-box";
+import {RadioButton, RadioButtonGroup} from "material-ui/RadioButton";
+
+class RenderAsTabs 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
+        }
+    }
+
+    updateDisplayOptions = (newDisplayOptions) => {
+        this.setState({displayOptions: newDisplayOptions});
+        this.props.model.displayOptions = JSON.stringify(newDisplayOptions)
+    }
+
+    onCollapsibleSectionsChanged = (event) =>  {
+        const newDisplayOptions = {
+            ...this.state.displayOptions,
+            collapsibleSections: event.target.value
+        }
+        this.updateDisplayOptions(newDisplayOptions)
+    }
+
+    onTabDirectionChanged = (event) =>  {
+        const newDisplayOptions = {
+            ...this.state.displayOptions,
+            tabsDirection: event.target.value
+        }
+        this.updateDisplayOptions(newDisplayOptions)
+    }
+
+    onRenderAsTabsChanged = (event) =>  {
+        const renderAsTabs = event.target.value
+        this.props.onChange({ target: { value: renderAsTabs } });
+        const newDisplayOptions = {
+            ...this.state.displayOptions,
+            tabsDirection:           renderAsTabs ? 'horizontal' : undefined
+        }
+        this.updateDisplayOptions(newDisplayOptions)
+    }
+
+    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.onTabDirectionChanged}
+                    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>}
+            <Checkbox
+                labelText={this.translate('make_sections_collapsible')}
+                value={ (state.displayOptions && state.displayOptions.collapsibleSections) || false  }
+                onChange={this.onCollapsibleSectionsChanged}
+            />
+        </div>
+
+    }
+}
+
+export default RenderAsTabs;
diff --git a/src/config/field-overrides/dataSet.js b/src/config/field-overrides/dataSet.js
@@ -1,93 +1,9 @@
-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>
-    }
-}
+import RenderAsTabs from "./data-set/RenderAsTabs.component";
 
 export default new Map([
     ['categoryCombo', {
@@ -111,7 +27,8 @@ export default new Map([
         component: DataInputPeriods,
     }],
     ['renderAsTabs', {
-        component: addD2Context(RenderAsTabsSettings),
-    }]
+        component: addD2Context(RenderAsTabs),
+    }
+    ],
 ]);
 
diff --git a/src/i18n/i18n_module_en.properties b/src/i18n/i18n_module_en.properties
@@ -625,6 +625,7 @@ render_options_as_radio=Render options as radio
 render_as_tabs=Render sections as tabs
 horizontal=Horizontal
 vertical=Vertical
+make_sections_collapsible=Make sections collapsible
 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