From a3f389b2e6ee9d2931f4359b52f1eb527eac84a2 Mon Sep 17 00:00:00 2001
From: Flaminia Cavallo <flaminiacavallo@FLAMINIAS-MBP.station>
Date: Thu, 27 Jun 2024 14:56:16 +0200
Subject: [PATCH 1/2] feat: add vertical tab rendering of sections in a data
 set

---
 .../section-form/section-form.js              | 23 +++++++++++++++++--
 .../section-form/section.module.css           | 21 ++++++++++++++++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/data-workspace/section-form/section-form.js b/src/data-workspace/section-form/section-form.js
index c59355cd1..4250a3f14 100644
--- 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,7 +63,12 @@ SectionForm.propTypes = {
     globalFilterText: PropTypes.string,
 }
 
-const TabbedSectionForm = ({ dataSetId, sections, globalFilterText }) => {
+const TabbedSectionForm = ({
+    dataSetId,
+    sections,
+    globalFilterText,
+    direction,
+}) => {
     const [sectionId, setSelectedId] = useSectionFilter()
 
     const section = sectionId
@@ -62,7 +76,11 @@ const TabbedSectionForm = ({ dataSetId, sections, globalFilterText }) => {
         : 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
index cbcaea064..20cd56d0f 100644
--- 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)
-}
\ No newline at end of file
+}

From 09e253b1c67769d3543f390d3a5d7713ee7268bf Mon Sep 17 00:00:00 2001
From: Flaminia Cavallo <flaminiacavallo@Flaminias-MBP.station>
Date: Tue, 2 Jul 2024 14:50:49 +0200
Subject: [PATCH 2/2] fix: make sure rendering tabs does not crash if display
 options are in the wrong format

---
 src/data-workspace/section-form/section-form.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/data-workspace/section-form/section-form.js b/src/data-workspace/section-form/section-form.js
index 4250a3f14..2cb3d65ea 100644
--- a/src/data-workspace/section-form/section-form.js
+++ b/src/data-workspace/section-form/section-form.js
@@ -6,6 +6,15 @@ 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
@@ -13,8 +22,7 @@ export const SectionForm = ({ dataSet, globalFilterText }) => {
         : dataSet.sections
 
     const { displayOptions: displayOptionString } = dataSet
-    const displayOptions =
-        displayOptionString && JSON.parse(displayOptionString)
+    const displayOptions = parseDisplayOptions(displayOptionString)
 
     if (dataSet.renderAsTabs) {
         return (