From a94816f96476425a0de95a186a6a28511656b923 Mon Sep 17 00:00:00 2001
From: Flaminia Cavallo <flaminia@dhis2.org>
Date: Mon, 14 Oct 2024 11:18:58 +0200
Subject: [PATCH 1/5] feat: add option to enter custom text to data sets

---
 src/config/field-overrides/dataSet.js | 134 ++++++++++++++++++++------
 src/i18n/i18n_module_en.properties    |   3 +
 webpack.config.js                     |   2 +-
 3 files changed, 106 insertions(+), 33 deletions(-)

diff --git a/src/config/field-overrides/dataSet.js b/src/config/field-overrides/dataSet.js
index b43624c25..0a341b160 100644
--- 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
index 2dc211e6f..e47630673 100644
--- 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
index 46f51ac8b..9b216dcd7 100644
--- 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',

From feae172a4bb686ed88569fa976f5bb7b5de1d603 Mon Sep 17 00:00:00 2001
From: Flaminia Cavallo <flaminia@dhis2.org>
Date: Mon, 14 Oct 2024 11:38:32 +0200
Subject: [PATCH 2/5] feat: fix copy for dataset title and subtitle

---
 src/config/field-overrides/dataSet.js | 4 ++--
 src/i18n/i18n_module_en.properties    | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/config/field-overrides/dataSet.js b/src/config/field-overrides/dataSet.js
index 0a341b160..9dfa13393 100644
--- a/src/config/field-overrides/dataSet.js
+++ b/src/config/field-overrides/dataSet.js
@@ -145,14 +145,14 @@ class RenderAsTabsSettings extends React.Component {
                         state.displayOptions.customText.header) || ""}
                     fullWidth={false}
                     onChange={this.onCustomTextHeaderChanged}
-                    floatingLabelText={this.translate('header')}
+                    floatingLabelText={this.translate('data_set_title')}
                     />
                     <TextField
                         value={(this.state.displayOptions && state.displayOptions.customText &&
                             state.displayOptions.customText.subheader) || ""}
                         fullWidth={false}
                         onChange={this.onCustomTextSubheaderChanged}
-                        floatingLabelText={this.translate('subheader')}
+                        floatingLabelText={this.translate('data_set_subtitle')}
                     />
                 </div>}
         </div>
diff --git a/src/i18n/i18n_module_en.properties b/src/i18n/i18n_module_en.properties
index e47630673..24a4dc0df 100644
--- a/src/i18n/i18n_module_en.properties
+++ b/src/i18n/i18n_module_en.properties
@@ -626,9 +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
+add_custom_text=Add custom title/subtitle
+data_set_title=Title
+data_set_subtitle=Subtitle
 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

From 7a73419cc1a46b372ca11b1af71208ad29f16107 Mon Sep 17 00:00:00 2001
From: Flaminia Cavallo <flaminia@dhis2.org>
Date: Mon, 14 Oct 2024 15:22:04 +0200
Subject: [PATCH 3/5] feat: add radio to decide how to align title and subtitle

---
 src/config/field-overrides/dataSet.js | 56 +++++++++++++++++++++++----
 src/i18n/i18n_module_en.properties    |  1 +
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/config/field-overrides/dataSet.js b/src/config/field-overrides/dataSet.js
index 9dfa13393..2a29fcff4 100644
--- a/src/config/field-overrides/dataSet.js
+++ b/src/config/field-overrides/dataSet.js
@@ -45,6 +45,7 @@ class RenderAsTabsSettings extends React.Component {
         this.updateDisplayOption(newDisplayOptions)
     }
 
+
     onRenderAsTabsChanged = (event) =>  {
         const renderAsTabs = event.target.value
         const tabsDirection =
@@ -64,7 +65,7 @@ class RenderAsTabsSettings extends React.Component {
         const addCustomText = event.target.value
         const customText =
             addCustomText
-                ? {header: undefined, subheader: undefined}
+                ? {header: undefined, subheader: undefined, alignemt: 'center'}
                 : undefined
 
         const newDisplayOptions = {
@@ -74,10 +75,21 @@ class RenderAsTabsSettings extends React.Component {
         this.updateDisplayOption(newDisplayOptions)
     }
 
+    onCustomTextAlignmentChanged = (event) =>  {
+        const customText =
+            {...this.state.displayOptions.customText,  align: event.target.value}
+
+        const newDisplayOptions = {
+            ...this.state.displayOptions,
+            customText
+        }
+        this.updateDisplayOption(newDisplayOptions)
+    }
+
 
     onCustomTextHeaderChanged = (event) =>  {
         const customText =
-            {header: event.target.value, subheader: this.state.displayOptions.customText.subheader || undefined}
+            {...this.state.displayOptions.customText, header: event.target.value}
 
         const newDisplayOptions = {
             ...this.state.displayOptions,
@@ -88,7 +100,7 @@ class RenderAsTabsSettings extends React.Component {
 
     onCustomTextSubheaderChanged = (event) =>  {
         const customText =
-            {header:  this.state.displayOptions.customText.header || undefined, subheader: event.target.value}
+            {...this.state.displayOptions.customText,  subheader: event.target.value}
 
         const newDisplayOptions = {
             ...this.state.displayOptions,
@@ -97,13 +109,13 @@ class RenderAsTabsSettings extends React.Component {
         this.updateDisplayOption(newDisplayOptions)
     }
 
-
     render() {
         const state = this.state;
         const props = this.props;
-        const cssStyles = {
+        const customTextCssStyles = {
             display: 'flex',
-            flexDirection: 'column'
+            flexDirection: 'column',
+            marginLeft: '16px'
         };
         return <div>
             <div>
@@ -133,13 +145,42 @@ class RenderAsTabsSettings extends React.Component {
                         />
                     </RadioButtonGroup>}
             </div>
+            <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}>
+                <RadioButtonGroup
+                    onChange={this.onCustomTextAlignmentChanged}
+                    name="customTextAlignment"
+                    defaultSelected={
+                        (state.displayOptions && state.displayOptions.customText && state.displayOptions.customText.align) || 'left'}
+                >
+                    <RadioButton
+                        key='left'
+                        value='left'
+                        label={this.translate('left')}
+                        style={{margin: '10px'}}
+                    />
+                    <RadioButton
+                        key='center'
+                        value='center'
+                        label={this.translate('center')}
+                        style={{margin: '10px'}}
+                    />
+                    <RadioButton
+                        key='right'
+                        value='right'
+                        label={this.translate('right')}
+                        style={{margin: '10px'}}
+                    />
+                </RadioButtonGroup>}
+
+                {state.displayOptions && state.displayOptions.customText &&
+                <div style={customTextCssStyles}>
                     <TextField
                     value={(this.state.displayOptions && state.displayOptions.customText &&
                         state.displayOptions.customText.header) || ""}
@@ -155,6 +196,7 @@ class RenderAsTabsSettings extends React.Component {
                         floatingLabelText={this.translate('data_set_subtitle')}
                     />
                 </div>}
+            </div>
         </div>
     }
 }
diff --git a/src/i18n/i18n_module_en.properties b/src/i18n/i18n_module_en.properties
index 24a4dc0df..34ff3c49a 100644
--- a/src/i18n/i18n_module_en.properties
+++ b/src/i18n/i18n_module_en.properties
@@ -711,6 +711,7 @@ edit_right_side= Edit right side
 select_operator= Select operator
 left= Left
 right= Right
+center=Center
 textual_expression_description= Textual expression description
 edit_validation_rule= Edit validation rule
 validation_rule= Validation rule

From 337536aac5762c9a713e32bc00e3d9cc98b749ae Mon Sep 17 00:00:00 2001
From: Flaminia Cavallo <flaminia@dhis2.org>
Date: Wed, 16 Oct 2024 14:11:13 +0200
Subject: [PATCH 4/5] fix: small fixes

---
 src/config/field-overrides/dataSet.js | 34 ++++++++++-----------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/config/field-overrides/dataSet.js b/src/config/field-overrides/dataSet.js
index 2a29fcff4..e8c8fb676 100644
--- a/src/config/field-overrides/dataSet.js
+++ b/src/config/field-overrides/dataSet.js
@@ -65,7 +65,7 @@ class RenderAsTabsSettings extends React.Component {
         const addCustomText = event.target.value
         const customText =
             addCustomText
-                ? {header: undefined, subheader: undefined, alignemt: 'center'}
+                ? {header: undefined, subheader: undefined, align: 'center'}
                 : undefined
 
         const newDisplayOptions = {
@@ -75,9 +75,9 @@ class RenderAsTabsSettings extends React.Component {
         this.updateDisplayOption(newDisplayOptions)
     }
 
-    onCustomTextAlignmentChanged = (event) =>  {
+    onCustomTextChanged = (event, field) =>  {
         const customText =
-            {...this.state.displayOptions.customText,  align: event.target.value}
+            {...this.state.displayOptions.customText,  [field]: event.target.value}
 
         const newDisplayOptions = {
             ...this.state.displayOptions,
@@ -86,27 +86,17 @@ class RenderAsTabsSettings extends React.Component {
         this.updateDisplayOption(newDisplayOptions)
     }
 
+    onCustomTextAlignmentChanged = (event) =>  {
+        this.onCustomTextChanged(event, 'align')
+    }
 
-    onCustomTextHeaderChanged = (event) =>  {
-        const customText =
-            {...this.state.displayOptions.customText, header: event.target.value}
 
-        const newDisplayOptions = {
-            ...this.state.displayOptions,
-            customText
-        }
-        this.updateDisplayOption(newDisplayOptions)
+    onCustomTextHeaderChanged = (event) =>  {
+        this.onCustomTextChanged(event, 'header')
     }
 
     onCustomTextSubheaderChanged = (event) =>  {
-        const customText =
-            {...this.state.displayOptions.customText,  subheader: event.target.value}
-
-        const newDisplayOptions = {
-            ...this.state.displayOptions,
-            customText
-        }
-        this.updateDisplayOption(newDisplayOptions)
+        this.onCustomTextChanged(event, 'subheader')
     }
 
     render() {
@@ -157,7 +147,7 @@ class RenderAsTabsSettings extends React.Component {
                     onChange={this.onCustomTextAlignmentChanged}
                     name="customTextAlignment"
                     defaultSelected={
-                        (state.displayOptions && state.displayOptions.customText && state.displayOptions.customText.align) || 'left'}
+                        (state.displayOptions && state.displayOptions.customText && state.displayOptions.customText.align) || 'center'}
                 >
                     <RadioButton
                         key='left'
@@ -182,14 +172,14 @@ class RenderAsTabsSettings extends React.Component {
                 {state.displayOptions && state.displayOptions.customText &&
                 <div style={customTextCssStyles}>
                     <TextField
-                    value={(this.state.displayOptions && state.displayOptions.customText &&
+                    value={(state.displayOptions && state.displayOptions.customText &&
                         state.displayOptions.customText.header) || ""}
                     fullWidth={false}
                     onChange={this.onCustomTextHeaderChanged}
                     floatingLabelText={this.translate('data_set_title')}
                     />
                     <TextField
-                        value={(this.state.displayOptions && state.displayOptions.customText &&
+                        value={(state.displayOptions && state.displayOptions.customText &&
                             state.displayOptions.customText.subheader) || ""}
                         fullWidth={false}
                         onChange={this.onCustomTextSubheaderChanged}

From 99806d0ab191707002758a57121899a05e0f58cb Mon Sep 17 00:00:00 2001
From: Flaminia Cavallo <flaminia@dhis2.org>
Date: Thu, 17 Oct 2024 08:54:31 +0200
Subject: [PATCH 5/5] fix: change text alignment in data set display options
 from left and right to line start and line end

---
 src/config/field-overrides/dataSet.js | 12 ++++++------
 src/i18n/i18n_module_en.properties    |  4 +++-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/config/field-overrides/dataSet.js b/src/config/field-overrides/dataSet.js
index e8c8fb676..1164516a3 100644
--- a/src/config/field-overrides/dataSet.js
+++ b/src/config/field-overrides/dataSet.js
@@ -150,9 +150,9 @@ class RenderAsTabsSettings extends React.Component {
                         (state.displayOptions && state.displayOptions.customText && state.displayOptions.customText.align) || 'center'}
                 >
                     <RadioButton
-                        key='left'
-                        value='left'
-                        label={this.translate('left')}
+                        key='line-start'
+                        value='line-start'
+                        label={this.translate('line_start')}
                         style={{margin: '10px'}}
                     />
                     <RadioButton
@@ -162,9 +162,9 @@ class RenderAsTabsSettings extends React.Component {
                         style={{margin: '10px'}}
                     />
                     <RadioButton
-                        key='right'
-                        value='right'
-                        label={this.translate('right')}
+                        key='line-end'
+                        value='line-end'
+                        label={this.translate('line_end')}
                         style={{margin: '10px'}}
                     />
                 </RadioButtonGroup>}
diff --git a/src/i18n/i18n_module_en.properties b/src/i18n/i18n_module_en.properties
index 34ff3c49a..7e2a03067 100644
--- a/src/i18n/i18n_module_en.properties
+++ b/src/i18n/i18n_module_en.properties
@@ -711,7 +711,9 @@ edit_right_side= Edit right side
 select_operator= Select operator
 left= Left
 right= Right
-center=Center
+center= Center
+line_start= Line start
+line_end= Line end
 textual_expression_description= Textual expression description
 edit_validation_rule= Edit validation rule
 validation_rule= Validation rule