fix: check label instead of no_tabs flag

crm/fcrm/doctype/crm_fields_layout/crm_fields_layout.py

@@ -29,7 +29,7 @@ def get_fields_layout(doctype: str, type: str):
 	has_tabs = tabs[0].get("sections") if tabs and tabs[0] else False
 
 	if not has_tabs:
-		tabs = [{"no_tabs": True, "sections": tabs}]
+		tabs = [{"sections": tabs}]
 
 	allowed_fields = []
 	for tab in tabs:
@@ -92,7 +92,7 @@ def get_default_layout(doctype: str):
 		if field.fieldtype not in ["Tab Break", "Section Break", "Column Break"]
 	]
 
-	return [{"no_tabs": True, "sections": [{"hideLabel": True, "fields": fields}]}]
+	return [{"sections": [{"fields": fields}]}]
 
 
 def getOptions(field):

crm/patches/v1_0/update_fields_layout_to_new_format.py

@@ -30,6 +30,8 @@ def get_new_layout(old_layout, type):
 
 	for tab in old_layout:
 		new_tab = tab.copy()
+		if "no_tabs" in new_tab:
+			new_tab.pop("no_tabs")
 		new_tab["sections"] = []
 		for section in tab.get("sections"):
 			if "contacts" in section:
@@ -55,7 +57,7 @@ def get_new_layout(old_layout, type):
 				continue
 
 			if len(fields) == 1 and column_count > 1:
-				new_section["columns"].append({"fields": fields[0]})
+				new_section["columns"].append({"fields": [fields[0]]})
 				new_section["columns"].append({"fields": []})
 				new_tab["sections"].append(new_section)
 				continue
@@ -73,5 +75,9 @@ def get_new_layout(old_layout, type):
 		new_layout = new_layout[0].get("sections")
 
 	if already_converted:
-		return json.dumps(old_layout)
+		new_layout = old_layout
+
+	if type == "Side Panel" and "sections" in old_layout[0]:
+		new_layout = new_layout[0].get("sections")
+
 	return json.dumps(new_layout)

frontend/src/components/FieldLayout.vue

@@ -284,7 +284,11 @@ const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
   getMeta(props.doctype)
 const { getUser } = usersStore()
 
-const hasTabs = computed(() => !props.tabs[0].no_tabs)
+const hasTabs = computed(() => {
+  return (
+    props.tabs.length > 1 || (props.tabs.length == 1 && props.tabs[0].label)
+  )
+})
 
 const _tabs = computed(() => {
   return props.tabs.map((tab) => {

frontend/src/components/FieldLayoutEditor.vue

@@ -4,7 +4,7 @@
       class="flex items-center gap-2 text-base bg-surface-gray-2 rounded py-2 px-2.5"
     >
       <Draggable
-        v-if="tabs.length && !tabs[tabIndex].no_tabs"
+        v-if="tabs.length && tabs[tabIndex].label"
         :list="tabs"
         item-key="label"
         class="flex items-center gap-2"
@@ -41,7 +41,7 @@
               </div>
             </div>
             <Dropdown
-              v-if="!tab.no_tabs && tabIndex == i"
+              v-if="tab.label && tabIndex == i"
               :options="getTabOptions(tab)"
               class="!h-4"
               @click.stop
@@ -114,12 +114,17 @@
                 </template>
               </Dropdown>
             </div>
+            <div class="flex gap-1.5">
+              <div
+                class="w-full p-2 border border-dashed border-outline-gray-2 rounded bg-surface-white"
+                v-for="(column, index) in section.columns"
+                :key="index"
+              >
                 <Draggable
-              :list="section.fields"
+                  :list="column.fields"
                   group="fields"
                   item-key="label"
-              class="grid gap-1.5"
+                  class="flex flex-col gap-1.5"
-              :class="gridClass(section.columns)"
                   handle=".cursor-grab"
                 >
                   <template #item="{ element: field }">
@@ -135,7 +140,7 @@
                         class="!size-4 rounded-sm"
                         icon="x"
                         @click="
-                      section.fields.splice(section.fields.indexOf(field), 1)
+                          column.fields.splice(column.fields.indexOf(field), 1)
                         "
                       />
                     </div>
@@ -145,7 +150,7 @@
                   v-if="fields.data"
                   value=""
                   :options="fields.data"
-              @change="(e) => addField(section, e)"
+                  @change="(e) => addField(column, e)"
                 >
                   <template #target="{ togglePopover }">
                     <div class="gap-2 w-full">
@@ -171,6 +176,8 @@
                   </template>
                 </Autocomplete>
               </div>
+            </div>
+          </div>
         </template>
       </Draggable>
       <div class="mt-5.5">
@@ -208,7 +215,7 @@ const props = defineProps({
 
 const tabIndex = ref(0)
 const slotName = computed(() => {
-  if (props.tabs.length == 1 && props.tabs[0].no_tabs) {
+  if (props.tabs.length == 1 && !props.tabs[0].label) {
     return 'prefix'
   }
   return 'default'
@@ -252,7 +259,9 @@ const fields = createResource({
 
     for (let tab of props.tabs) {
       for (let section of tab.sections) {
-        existingFields = existingFields.concat(section.fields)
+        for (let column of section.columns) {
+          existingFields = existingFields.concat(column.fields)
+        }
       }
     }
 
@@ -266,22 +275,23 @@ const fields = createResource({
 })
 
 function addTab() {
-  if (props.tabs.length == 1 && props.tabs[0].no_tabs) {
+  if (props.tabs.length == 1 && !props.tabs[0].label) {
-    delete props.tabs[0].no_tabs
+    props.tabs[0].label = __('New Tab')
     return
   }
+
   props.tabs.push({ label: __('New Tab'), sections: [] })
   tabIndex.value = props.tabs.length ? props.tabs.length - 1 : 0
 }
 
-function addField(section, field) {
+function addField(column, field) {
   if (!field) return
   let newFieldObj = {
     ...field,
     name: field.fieldname,
     type: field.fieldtype,
   }
-  section.fields.push(newFieldObj)
+  column.fields.push(newFieldObj)
 }
 
 function getTabOptions(tab) {
@@ -296,7 +306,7 @@ function getTabOptions(tab) {
       icon: 'trash-2',
       onClick: () => {
         if (props.tabs.length == 1) {
-          props.tabs[0].no_tabs = true
+          props.tabs[0].label = ''
           return
         }
         props.tabs.splice(tabIndex.value, 1)

frontend/src/components/Modals/ContactModal.vue

@@ -161,7 +161,7 @@ const filteredSections = computed(() => {
     })
   })
 
-  return [{ no_tabs: true, sections: allSections }]
+  return [{ sections: allSections }]
 })
 
 watch(

frontend/src/components/Modals/DealModal.vue

@@ -168,7 +168,7 @@ const filteredSections = computed(() => {
     }
   })
 
-  return [{ no_tabs: true, sections: _filteredSections }]
+  return [{ sections: _filteredSections }]
 })
 
 const dealStatuses = computed(() => {

frontend/src/components/Modals/OrganizationModal.vue

@@ -160,7 +160,7 @@ const filteredSections = computed(() => {
     })
   })
 
-  return [{ no_tabs: true, sections: allSections }]
+  return [{ sections: allSections }]
 })
 
 watch(

frontend/src/components/Settings/SettingsPage.vue

@@ -106,12 +106,9 @@ const tabs = computed(() => {
   if (fieldsData[0].type != 'Tab Break') {
     let _sections = []
     if (fieldsData[0].type != 'Section Break') {
-      _sections.push({ no_tabs: true, columns: [{ fields: [] }] })
+      _sections.push({ columns: [{ fields: [] }] })
     }
-    _tabs.push({
+    _tabs.push({ sections: _sections })
-      no_tabs: true,
-      sections: _sections,
-    })
   }
 
   fieldsData.forEach((field) => {