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

dhis2 · Jun 27, 2024 · a3f389b · a3f389b
1 parent 30037eb
commit a3f389b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/src/data-workspace/section-form/section-form.js b/src/data-workspace/section-form/section-form.js
@@ -1,4 +1,5 @@
 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'
@@ -11,12 +12,17 @@ export const SectionForm = ({ dataSet, globalFilterText }) => {
         ? dataSet.sections.filter((s) => s.id === sectionId)
         : dataSet.sections
 
+    const { displayOptions: displayOptionString } = dataSet
+    const displayOptions =
+        displayOptionString && JSON.parse(displayOptionString)
+
     if (dataSet.renderAsTabs) {
         return (
             <TabbedSectionForm
                 globalFilterText={globalFilterText}
                 sections={dataSet.sections}
                 dataSetId={dataSet.id}
+                direction={displayOptions?.tabsDirection}
             />
         )
     }
@@ -37,6 +43,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 +63,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 +105,7 @@ const TabbedSectionForm = ({ dataSetId, sections, globalFilterText }) => {
 
 TabbedSectionForm.propTypes = {
     dataSetId: PropTypes.string,
+    direction: PropTypes.oneOf(['vertical', 'horizontal']),
     globalFilterText: PropTypes.string,
     sections: PropTypes.arrayOf(
         PropTypes.shape({

diff --git a/src/data-workspace/section-form/section.module.css b/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)
-}
+}