fix: handle columns in settings page

frontend/src/components/FieldLayout.vue

@@ -30,7 +30,7 @@
             class="text-lg font-medium"
             :class="{ 'px-3 sm:px-5': hasTabs }"
             :label="section.label"
-            :hideLabel="section.hideLabel"
+            :hideLabel="section.hideLabel || !section.label"
             :opened="section.opened"
             :collapsible="section.collapsible"
             collapseIconPosition="right"
@@ -290,20 +290,22 @@ const _tabs = computed(() => {
   return props.tabs.map((tab) => {
     tab.sections = tab.sections.map((section) => {
       section.columns = section.columns.map((column) => {
-        column.fields = column.fields.map((field) => {
+        column.fields = column.fields
-          if (field.type == 'Link' && field.options == 'User') {
+          .map((field) => {
-            field.type = 'User'
+            if (field.type == 'Link' && field.options == 'User') {
-          }
+              field.type = 'User'
-          if (
+            }
-            (field.type == 'Check' ||
-              (field.read_only && props.data[field.name]) ||
-              !field.read_only) &&
-            (!field.depends_on || field.display_via_depends_on) &&
-            !field.hidden
-          ) {
             return field
-          }
+          })
-        })
+          .filter((field) => {
+            return (
+              (field.type == 'Check' ||
+                (field.read_only && props.data[field.name]) ||
+                !field.read_only) &&
+              (!field.depends_on || field.display_via_depends_on) &&
+              !field.hidden
+            )
+          })
         return column
       })
       return section
@@ -314,17 +316,6 @@ const _tabs = computed(() => {
 
 const tabIndex = ref(0)
 
-function gridClass(columns) {
-  columns = columns || 3
-  let griColsMap = {
-    1: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-1',
-    2: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2',
-    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
-    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-  }
-  return griColsMap[columns]
-}
-
 const getPlaceholder = (field) => {
   if (field.placeholder) {
     return __(field.placeholder)

frontend/src/components/Settings/SettingsPage.vue

@@ -106,11 +106,7 @@ const tabs = computed(() => {
   if (fieldsData[0].type != 'Tab Break') {
     let _sections = []
     if (fieldsData[0].type != 'Section Break') {
-      _sections.push({
+      _sections.push({ columns: [{ fields: [] }] })
-        hideLabel: true,
-        columns: 1,
-        fields: [],
-      })
     }
     _tabs.push({
       no_tabs: true,
@@ -119,29 +115,26 @@ const tabs = computed(() => {
   }
 
   fieldsData.forEach((field) => {
-    let _sections = _tabs.length ? _tabs[_tabs.length - 1].sections : []
+    let last_tab = _tabs[_tabs.length - 1]
+    let _sections = _tabs.length ? last_tab.sections : []
     if (field.type === 'Tab Break') {
       _tabs.push({
         label: field.label,
-        sections: [
+        name: field.value,
-          {
+        sections: [{ columns: [{ fields: [] }] }],
-            hideLabel: true,
-            columns: 1,
-            fields: [],
-          },
-        ],
       })
     } else if (field.type === 'Section Break') {
       _sections.push({
-        label: field.value,
+        label: field.label,
-        hideLabel: true,
+        name: field.value,
-        columns: 1,
+        columns: [{ fields: [] }],
-        fields: [],
       })
     } else if (field.type === 'Column Break') {
-      _sections[_sections.length - 1].columns += 1
+      _sections[_sections.length - 1].columns.push({ fields: [] })
     } else {
-      _sections[_sections.length - 1].fields.push({
+      let last_section = _sections[_sections.length - 1]
+      let last_column = last_section.columns[last_section.columns.length - 1]
+      last_column.fields.push({
         ...field,
         filters: field.link_filters && JSON.parse(field.link_filters),
         display_via_depends_on: evaluateDependsOnValue(
@@ -169,14 +162,16 @@ function update() {
 function validateMandatoryFields() {
   if (!tabs.value) return false
   for (let section of tabs.value[0].sections) {
-    for (let field of section.fields) {
+    for (let column of section.columns) {
-      if (
+      for (let field of column.fields) {
-        (field.mandatory ||
+        if (
-          (field.mandatory_depends_on && field.mandatory_via_depends_on)) &&
+          (field.mandatory ||
-        !data.doc[field.name]
+            (field.mandatory_depends_on && field.mandatory_via_depends_on)) &&
-      ) {
+          !data.doc[field.name]
-        error.value = __('{0} is mandatory', [__(field.label)])
+        ) {
-        return true
+          error.value = __('{0} is mandatory', [__(field.label)])
+          return true
+        }
       }
     }
   }