Merge pull request #389 from dhis2/DHIS2-17506/vertical-and-horizonta…

…l-tabs

feat: add vertical tab rendering of sections in a data set

src/data-workspace/section-form/section-form.js

@@ -1,22 +1,36 @@
 import { Tab, TabBar } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useSectionFilter } from '../../shared/index.js'
 import { SectionFormSection } from './section.js'
 import styles from './section.module.css'
 
+const parseDisplayOptions = (displayOptionString) => {
+    try {
+        return displayOptionString && JSON.parse(displayOptionString)
+    } catch (e) {
+        console.error(e)
+        return undefined
+    }
+}
+
 export const SectionForm = ({ dataSet, globalFilterText }) => {
     const [sectionId] = useSectionFilter()
     const filteredSections = sectionId
         ? dataSet.sections.filter((s) => s.id === sectionId)
         : dataSet.sections
 
+    const { displayOptions: displayOptionString } = dataSet
+    const displayOptions = parseDisplayOptions(displayOptionString)
+
     if (dataSet.renderAsTabs) {
         return (
             <TabbedSectionForm
                 globalFilterText={globalFilterText}
                 sections={dataSet.sections}
                 dataSetId={dataSet.id}
+                direction={displayOptions?.tabsDirection}
             />
         )
     }
@@ -37,6 +51,9 @@ export const SectionForm = ({ dataSet, globalFilterText }) => {
 
 SectionForm.propTypes = {
     dataSet: PropTypes.shape({
+        displayOptions: PropTypes.shape({
+            tabsDirection: PropTypes.oneOf(['vertical', 'horizontal']),
+        }),
         id: PropTypes.string,
         renderAsTabs: PropTypes.bool,
         sections: PropTypes.arrayOf(
@@ -54,15 +71,24 @@ SectionForm.propTypes = {
     globalFilterText: PropTypes.string,
 }
 
-const TabbedSectionForm = ({ dataSetId, sections, globalFilterText }) => {
+const TabbedSectionForm = ({
+    dataSetId,
+    sections,
+    globalFilterText,
+    direction,
+}) => {
     const [sectionId, setSelectedId] = useSectionFilter()
 
     const section = sectionId
         ? sections.find((s) => s.id === sectionId)
         : sections[0]
 
     return (
-        <div>
+        <div
+            className={cx(styles.sectionTabWrapper, {
+                [styles.verticalSectionTabWrapper]: direction === 'vertical',
+            })}
+        >
             <TabBar className={styles.sectionTab}>
                 {sections.map((s) => (
                     <Tab
@@ -87,6 +113,7 @@ const TabbedSectionForm = ({ dataSetId, sections, globalFilterText }) => {
 
 TabbedSectionForm.propTypes = {
     dataSetId: PropTypes.string,
+    direction: PropTypes.oneOf(['vertical', 'horizontal']),
     globalFilterText: PropTypes.string,
     sections: PropTypes.arrayOf(
         PropTypes.shape({

src/data-workspace/section-form/section.module.css

@@ -65,6 +65,25 @@
 
 .sectionTab {
     margin-bottom: 8px;
+
+}
+
+.verticalSectionTabWrapper .sectionTab div{
+    flex-direction: column;
+}
+
+.sectionTab button{
+    align-self: stretch;
+}
+
+.sectionTabWrapper{
+    display: flex;
+    gap: 6px;
+    flex-direction: column;
+}
+
+.verticalSectionTabWrapper{
+    flex-direction: row;
 }
 
 @media print {
@@ -85,4 +104,4 @@
 .sectionDescription :global(a):hover,
 .sectionDescription :global(a):active {
     color: var(--colors-blue700)
-}
+}