feat(DHIS2-17002): configure text to display before and after section (…

…#2812) * feat(DHIS2-17002): configure text to display before and after section * refactor: apply code review comments
dhis2 · Mar 18, 2024 · 94ba5d3 · 94ba5d3
1 parent e244c9b
commit 94ba5d3
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
     "ckeditor": "4.6.1",
     "d2": "^30.2.3",
     "d2-ui": "29.0.34",
+    "dompurify": "^3.0.9",
     "lodash": "^4.17.11",
     "material-design-icons-iconfont": "^4.0.5",
     "material-ui": "^0.17.0",

diff --git a/src/EditModel/SectionDialog.component.js b/src/EditModel/SectionDialog.component.js
@@ -18,11 +18,21 @@ import modelToEditStore from './modelToEditStore';
 import SelectField from 'material-ui/SelectField';
 import { MenuItem } from 'material-ui/DropDownMenu';
 
+import { sanitize } from 'dompurify';
+
 const dataElementStore = Store.create();
 const assignedDataElementStore = Store.create();
 const indicatorStore = Store.create();
 const assignedIndicatorStore = Store.create();
 
+const cleanDisplayOptions = (displayOptions) => {
+    return {
+        ...displayOptions,
+        beforeSectionText: sanitize(displayOptions.beforeSectionText),
+        afterSectionText: sanitize(displayOptions.afterSectionText),
+    }
+}
+
 class SectionDialog extends React.Component {
     constructor(props, context) {
         super(props, context);
@@ -291,14 +301,17 @@ class SectionDialog extends React.Component {
         const sectionModel = this.props.sectionModel.id
             ? this.props.sectionModel
             : this.props.sectionModel.modelDefinition.create();
+
+        const displayOptions = cleanDisplayOptions(this.state.displayOptions)
+
         Object.assign(sectionModel, {
             dataSet: { id: modelToEditStore.state.id },
             name: this.state.name,
             code: this.state.code,
             description: this.state.description,
             showRowTotals: this.state.showRowTotals,
             showColumnTotals: this.state.showColumnTotals,
-            displayOptions: JSON.stringify(this.state.displayOptions),
+            displayOptions: JSON.stringify(displayOptions),
             disableDataElementAutoGroup: this.state.disableDataElementAutoGroup,
             dataElements: assignedDataElementStore.state.map(de => ({
                 id: de,
@@ -359,6 +372,17 @@ class SectionDialog extends React.Component {
         });
     };
 
+    handleSectionTextUpdate = (fieldName) => (ev, text) => {
+        this.setState(prevState => {
+            return {
+                displayOptions: {
+                    ...prevState.displayOptions,
+                    [fieldName]: text,
+                }
+            }
+        });
+    }
+
     renderSectionDisplayConfigurationOptions = () => {
         const pivotOptions = [
             {
@@ -389,6 +413,7 @@ class SectionDialog extends React.Component {
                     {pivotOptions.map(({ value, text }) => {
                         return (
                             <RadioButton
+                                key={value}
                                 value={value}
                                 label={text}
                                 style={{ margin: '10px' }}
@@ -416,6 +441,25 @@ class SectionDialog extends React.Component {
                         })}
                     </SelectField>
                 )}
+                <div style={{marginTop: '16px'}}>
+                    <label>{this.getTranslation('section_text_descriptions')}</label>
+                    <TextField
+                        fullWidth
+                        hintText={this.getTranslation(
+                            'section_before_text'
+                        )}
+                        defaultValue={this.state.displayOptions.beforeSectionText}
+                        onChange={this.handleSectionTextUpdate('beforeSectionText')}
+                    />
+                    <TextField
+                        fullWidth
+                        hintText={this.getTranslation(
+                            'section_after_text'
+                        )}
+                        defaultValue={this.state.displayOptions.afterSectionText}
+                        onChange={this.handleSectionTextUpdate('afterSectionText')}
+                    />
+                </div>
             </div>
         );
     };

diff --git a/src/i18n/i18n_module_en.properties b/src/i18n/i18n_module_en.properties
@@ -1786,6 +1786,9 @@ pivot_default=Default: data elements as rows, categories as columns
 pivot_move_data_elements_to_column=Pivot: categories as rows, data elements as columns
 pivot_move_category_to_row=Move a category to rows: default mode with one category moved to rows
 pivot_category_to_move_to_row=Category to move to rows
+section_text_descriptions=Content before and after section (HTML links and basic styling allowed)
+section_before_text=Content displayed before section
+section_after_text=Content displayed after section
 show_column_totals=Show column totals
 category_combo_filter=Category combo filter
 no_filter=<No filter>

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

diff --git a/yarn.lock b/yarn.lock
@@ -3407,6 +3407,11 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
+dompurify@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.9.tgz#b3f362f24b99f53498c75d43ecbd784b0b3ad65e"
+  integrity sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ==
+
 domutils@1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"