feat: add title and subtitle to data sets if set in display options

dhis2 · Oct 14, 2024 · 005f130 · 005f130
1 parent 3a3274b
commit 005f130
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 28 deletions.
diff --git a/...space/section-form/section-description.js → ...-workspace/section-form/sanitized-text.js b/...space/section-form/section-description.js → ...-workspace/section-form/sanitized-text.js
@@ -1,9 +1,8 @@
 import * as DOMPurify from 'dompurify'
 import PropTypes from 'prop-types'
 import React from 'react'
-import styles from './section.module.css'
 
-export const SectionDescription = ({ children }) => {
+export const SanitizedText = ({ children, className }) => {
     if (!children) {
         return null
     }
@@ -12,13 +11,11 @@ export const SectionDescription = ({ children }) => {
     })
 
     return (
-        <div
-            className={styles.sectionDescription}
-            dangerouslySetInnerHTML={{ __html: html }}
-        ></div>
+        <p className={className} dangerouslySetInnerHTML={{ __html: html }}></p>
     )
 }
 
-SectionDescription.propTypes = {
+SanitizedText.propTypes = {
     children: PropTypes.node,
+    className: PropTypes.string,
 }
diff --git a/src/data-workspace/section-form/section-form.js b/src/data-workspace/section-form/section-form.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { useSectionFilter } from '../../shared/index.js'
 import { getDisplayOptions } from './displayOptions.js'
+import { SanitizedText } from './sanitized-text.js'
 import { SectionFormSection } from './section.js'
 import styles from './section.module.css'
 
@@ -15,28 +16,47 @@ export const SectionForm = ({ dataSet, globalFilterText }) => {
 
     const displayOptions = getDisplayOptions(dataSet)
 
-    if (dataSet.renderAsTabs) {
-        return (
-            <TabbedSectionForm
-                globalFilterText={globalFilterText}
-                sections={dataSet.sections}
-                dataSetId={dataSet.id}
-                direction={displayOptions?.tabsDirection}
-            />
-        )
-    }
-
     return (
         <>
-            {filteredSections.map((s) => (
-                <SectionFormSection
-                    section={s}
-                    dataSetId={dataSet.id}
-                    key={s.id}
+            <div
+                className={cx(styles.sectionsCustomerText, {
+                    [styles.textLeft]:
+                        displayOptions.customText?.align === 'left',
+                    [styles.textCenter]:
+                        displayOptions.customText?.align === 'center',
+                    [styles.textRight]:
+                        displayOptions.customText?.align === 'right',
+                })}
+            >
+                {displayOptions.customText?.header && (
+                    <SanitizedText className={styles.sectionsTitle}>
+                        {displayOptions.customText?.header}
+                    </SanitizedText>
+                )}
+                {displayOptions.customText?.subheader && (
+                    <SanitizedText className={styles.sectionsSubtitle}>
+                        {displayOptions.customText?.subheader}
+                    </SanitizedText>
+                )}
+            </div>
+            {dataSet.renderAsTabs ? (
+                <TabbedSectionForm
                     globalFilterText={globalFilterText}
-                    collapsible
+                    sections={dataSet.sections}
+                    dataSetId={dataSet.id}
+                    direction={displayOptions?.tabsDirection}
                 />
-            ))}
+            ) : (
+                filteredSections.map((s) => (
+                    <SectionFormSection
+                        section={s}
+                        dataSetId={dataSet.id}
+                        key={s.id}
+                        globalFilterText={globalFilterText}
+                        collapsible
+                    />
+                ))
+            )}
         </>
     )
 }

diff --git a/src/data-workspace/section-form/section.js b/src/data-workspace/section-form/section.js
@@ -18,7 +18,7 @@ import { PivotedCategoryComboTableBody } from '../category-combo-table-body-pivo
 import { getFieldId } from '../get-field-id.js'
 import { IndicatorsTableBody } from '../indicators-table-body/indicators-table-body.js'
 import { getDisplayOptions } from './displayOptions.js'
-import { SectionDescription } from './section-description.js'
+import { SanitizedText } from './sanitized-text.js'
 import styles from './section.module.css'
 
 export function SectionFormSection({
@@ -97,7 +97,9 @@ export function SectionFormSection({
 
     return (
         <div>
-            <SectionDescription>{beforeSectionText}</SectionDescription>
+            <SanitizedText className={styles.sectionDescription}>
+                {beforeSectionText}
+            </SanitizedText>
             <Table className={styles.table} suppressZebraStriping>
                 <TableHead>
                     <TableRowHead>
@@ -189,7 +191,9 @@ export function SectionFormSection({
                     />
                 )}
             </Table>
-            <SectionDescription>{afterSectionText}</SectionDescription>
+            <SanitizedText className={styles.sectionDescription}>
+                {afterSectionText}
+            </SanitizedText>
         </div>
     )
 }

diff --git a/src/data-workspace/section-form/section.module.css b/src/data-workspace/section-form/section.module.css
@@ -91,9 +91,30 @@
     outline: 3px solid var(--theme-focus);
 }
 
+.sectionsTitle {
+    margin: 4px;
+    font-size: 2em;
+}
+.sectionsSubtitle{
+    margin: 2px;
+    font-size: 1.5em;
+}
+.sectionsCustomerText{
+    width: 100%;
+    padding: 16px;
+}
 .sectionTab {
     margin-bottom: 8px;
 }
+.textLeft{
+    text-align: left;
+}
+.textCenter{
+    text-align: center;
+}
+.textRight{
+    text-align: right;
+}
 
 .verticalSectionTabWrapper .sectionTab div {
     flex-direction: column;