feat: add option to enter custom text to data sets

dhis2 · Oct 14, 2024 · f8a4dd4 · f8a4dd4
1 parent 205d62e
commit f8a4dd4
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 33 deletions.
diff --git a/src/config/field-overrides/dataSet.js b/src/config/field-overrides/dataSet.js
@@ -7,12 +7,13 @@ 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";
+import TextField from "material-ui/TextField/TextField";
 
 class RenderAsTabsSettings extends React.Component {
     constructor(props, context) {
         super(props);
         this.state = {
-            displayOptions: this.parseDisplayOptions()
+            displayOptions: this.parseDisplayOptions(),
         };
         this.translate = context.d2.i18n.getTranslation.bind(
             context.d2.i18n
@@ -30,18 +31,18 @@ class RenderAsTabsSettings extends React.Component {
         }
     }
 
-    updateTabsDirection = (tabsDirection) => {
-        const newDisplayOptions = {
-            ...this.state.displayOptions,
-            tabsDirection
-        }
+    updateDisplayOption = (newDisplayOptions) => {
         this.setState({displayOptions: newDisplayOptions});
         this.props.model.displayOptions = JSON.stringify(newDisplayOptions)
     }
 
     onDisplayOptionsChanged = (event) =>  {
         const tabsDirection = event.target.value
-        this.updateTabsDirection(tabsDirection)
+        const newDisplayOptions = {
+            ...this.state.displayOptions,
+            tabsDirection
+        }
+        this.updateDisplayOption(newDisplayOptions)
     }
 
     onRenderAsTabsChanged = (event) =>  {
@@ -52,39 +53,108 @@ class RenderAsTabsSettings extends React.Component {
                 : undefined
 
         this.props.onChange({ target: { value: renderAsTabs } });
-        this.updateTabsDirection(tabsDirection)
+        const newDisplayOptions = {
+            ...this.state.displayOptions,
+            tabsDirection
+        }
+        this.updateDisplayOption(newDisplayOptions)
+    }
+
+    onAddCustomTextChanged = (event) =>  {
+        const addCustomText = event.target.value
+        const customText =
+            addCustomText
+                ? {header: undefined, subheader: undefined}
+                : undefined
+
+        const newDisplayOptions = {
+            ...this.state.displayOptions,
+            customText
+        }
+        this.updateDisplayOption(newDisplayOptions)
+    }
+
+
+    onCustomTextHeaderChanged = (event) =>  {
+        const customText =
+            {header: event.target.value, subheader: this.state.displayOptions.customText.subheader || undefined}
+
+        const newDisplayOptions = {
+            ...this.state.displayOptions,
+            customText
+        }
+        this.updateDisplayOption(newDisplayOptions)
+    }
+
+    onCustomTextSubheaderChanged = (event) =>  {
+        const customText =
+            {header:  this.state.displayOptions.customText.header || undefined, subheader: event.target.value}
+
+        const newDisplayOptions = {
+            ...this.state.displayOptions,
+            customText
+        }
+        this.updateDisplayOption(newDisplayOptions)
     }
 
 
     render() {
         const state = this.state;
         const props = this.props;
+        const cssStyles = {
+            display: 'flex',
+            flexDirection: 'column'
+        };
         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'}}
+            <div>
+                <Checkbox
+                    labelText={this.translate('render_as_tabs')}
+                    value={props.value}
+                    onChange={this.onRenderAsTabsChanged}
                 />
-            </RadioButtonGroup>}
+                {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>
+            <Checkbox
+                labelText={this.translate('add_custom_text')}
+                value={state.displayOptions && state.displayOptions.customText !== undefined}
+                onChange={this.onAddCustomTextChanged}
+            />
+            {state.displayOptions && state.displayOptions.customText &&
+                <div style={cssStyles}>
+                    <TextField
+                    value={(this.state.displayOptions && state.displayOptions.customText &&
+                        state.displayOptions.customText.header) || ""}
+                    fullWidth={false}
+                    onChange={this.onCustomTextHeaderChanged}
+                    floatingLabelText={this.translate('header')}
+                    />
+                    <TextField
+                        value={(this.state.displayOptions && state.displayOptions.customText &&
+                            state.displayOptions.customText.subheader) || ""}
+                        fullWidth={false}
+                        onChange={this.onCustomTextSubheaderChanged}
+                        floatingLabelText={this.translate('subheader')}
+                    />
+                </div>}
         </div>
     }
 }

diff --git a/src/i18n/i18n_module_en.properties b/src/i18n/i18n_module_en.properties
@@ -626,6 +626,9 @@ render_options_as_radio=Render options as radio
 render_as_tabs=Render sections as tabs
 horizontal=Horizontal
 vertical=Vertical
+add_custom_text=Add custom text
+header=Header
+subheader=Sub-header
 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

diff --git a/webpack.config.js b/webpack.config.js
@@ -55,7 +55,7 @@ const webpackConfig = {
             {
                 test: /\.jsx?$/,
                 include: [
-                    path.resolve(__dirname, 'src/'), 
+                    path.resolve(__dirname, 'src/'),
                     path.resolve(__dirname, 'node_modules/dompurify')
                 ],
                 loader: 'babel-loader',