fix: allow adding/removing/editing columns

frontend/src/components/Controls/GridRowFieldsModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="show" :options="{ size: '3xl' }">
+  <Dialog v-model="show" :options="{ size: '4xl' }">
     <template #body-title>
       <h3
         class="flex items-center gap-2 text-2xl font-semibold leading-6 text-ink-gray-9"

frontend/src/components/FieldLayoutEditor.vue

@@ -72,8 +72,10 @@
         item-key="label"
         class="flex flex-col gap-5.5"
       >
-        <template #item="{ element: section }">
+        <template #item="{ element: section, index: i }">
-          <div class="flex flex-col gap-1.5 p-2.5 bg-surface-gray-2 rounded">
+          <div
+            class="section flex flex-col gap-1.5 p-2.5 bg-surface-gray-2 rounded cursor-grab"
+          >
             <div class="flex items-center justify-between">
               <div
                 class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-medium leading-4 text-ink-gray-9"
@@ -82,9 +84,12 @@
                 <div
                   v-if="!section.editingLabel"
                   class="flex items-center gap-2"
-                  :class="{ 'text-ink-gray-3': section.hideLabel }"
+                  :class="{
+                    'text-ink-gray-3': section.hideLabel || !section.label,
+                    italic: !section.label,
+                  }"
                 >
-                  {{ __(section.label) || __('Untitled') }}
+                  {{ __(section.label) || __('No label') }}
                   <FeatherIcon
                     v-if="section.collapsible"
                     name="chevron-down"
@@ -106,7 +111,7 @@
                   />
                 </div>
               </div>
-              <Dropdown :options="getSectionOptions(section)">
+              <Dropdown :options="getSectionOptions(i, section, tab)">
                 <template #default>
                   <Button variant="ghost">
                     <FeatherIcon name="more-horizontal" class="h-4" />
@@ -114,11 +119,15 @@
                 </template>
               </Dropdown>
             </div>
-            <div class="flex gap-1.5">
+            <Draggable
+              class="flex gap-2"
+              :list="section.columns"
+              group="columns"
+              item-key="fields"
+            >
+              <template #item="{ element: column }">
                 <div
-                class="w-full p-2 border border-dashed border-outline-gray-2 rounded bg-surface-white"
+                  class="flex flex-col gap-1.5 flex-1 p-2 border border-dashed border-outline-gray-2 rounded bg-surface-modal cursor-grab"
-                v-for="(column, index) in section.columns"
-                :key="index"
                 >
                   <Draggable
                     :list="column.fields"
@@ -129,7 +138,7 @@
                   >
                     <template #item="{ element: field }">
                       <div
-                      class="px-2.5 py-2 border border-outline-gray-2 rounded text-base bg-surface-modal text-ink-gray-8 flex items-center leading-4 justify-between gap-2"
+                        class="field px-2.5 py-2 border border-outline-gray-2 rounded text-base bg-surface-modal text-ink-gray-8 flex items-center leading-4 justify-between gap-2"
                       >
                         <div class="flex items-center gap-2 truncate">
                           <DragVerticalIcon class="h-3.5 cursor-grab" />
@@ -140,7 +149,10 @@
                           class="!size-4 rounded-sm"
                           icon="x"
                           @click="
-                          column.fields.splice(column.fields.indexOf(field), 1)
+                            column.fields.splice(
+                              column.fields.indexOf(field),
+                              1,
+                            )
                           "
                         />
                       </div>
@@ -176,7 +188,8 @@
                     </template>
                   </Autocomplete>
                 </div>
-            </div>
+              </template>
+            </Draggable>
           </div>
         </template>
       </Draggable>
@@ -189,7 +202,7 @@
             tabs[tabIndex].sections.push({
               label: __('New Section'),
               opened: true,
-              fields: [],
+              columns: [{ fields: [] }],
             })
           "
         >
@@ -297,12 +310,12 @@ function addField(column, field) {
 function getTabOptions(tab) {
   return [
     {
-      label: 'Edit',
+      label: __('Edit'),
       icon: 'edit',
       onClick: () => (tab.editingLabel = true),
     },
     {
-      label: 'Remove tab',
+      label: __('Remove tab'),
       icon: 'trash-2',
       onClick: () => {
         if (props.tabs.length == 1) {
@@ -316,55 +329,64 @@ function getTabOptions(tab) {
   ]
 }
 
-function getSectionOptions(section) {
+function getSectionOptions(i, section, tab) {
+  let column = section.columns[section.columns.length - 1]
   return [
     {
-      label: 'Edit',
+      group: __('Section'),
+      items: [
+        {
+          label: __('Edit'),
           icon: 'edit',
           onClick: () => (section.editingLabel = true),
           condition: () => section.editable !== false,
         },
         {
-      label: section.collapsible ? 'Uncollapsible' : 'Collapsible',
+          label: section.collapsible ? __('Uncollapsible') : __('Collapsible'),
           icon: section.collapsible ? 'chevron-up' : 'chevron-down',
           onClick: () => (section.collapsible = !section.collapsible),
         },
         {
-      label: section.hideLabel ? 'Show label' : 'Hide label',
+          label: section.hideLabel ? __('Show label') : __('Hide label'),
           icon: section.hideLabel ? 'eye' : 'eye-off',
           onClick: () => (section.hideLabel = !section.hideLabel),
         },
         {
-      label: section.hideBorder ? 'Show border' : 'Hide border',
+          label: section.hideBorder ? __('Show border') : __('Hide border'),
           icon: 'minus',
           onClick: () => (section.hideBorder = !section.hideBorder),
         },
         {
-      label: 'Add column',
+          label: __('Remove section'),
-      icon: 'columns',
-      onClick: () =>
-        (section.columns = section.columns ? section.columns + 1 : 4),
-      condition: () => !section.columns || section.columns < 4,
-    },
-    {
-      label: 'Remove column',
-      icon: 'columns',
-      onClick: () =>
-        (section.columns = section.columns ? section.columns - 1 : 2),
-      condition: () => !section.columns || section.columns > 1,
-    },
-    {
-      label: 'Remove section',
           icon: 'trash-2',
           onClick: () => {
-        let currentTab = props.tabs[tabIndex.value]
+            tab.sections.splice(tab.sections.indexOf(section), 1)
-        currentTab.sections.splice(currentTab.sections.indexOf(section), 1)
           },
           condition: () => section.editable !== false,
         },
         {
-      label: 'Move to previous tab',
+          label: __('Remove and move columns to {0} section', [
+            i == 0 ? __('next') : __('previous'),
+          ]),
           icon: 'trash-2',
+          onClick: () => {
+            let targetSection = tab.sections[i == 0 ? i + 1 : i - 1]
+            if (i == 0) {
+              targetSection.columns = section.columns.concat(
+                targetSection.columns,
+              )
+            } else {
+              targetSection.columns = targetSection.columns.concat(
+                section.columns,
+              )
+            }
+            tab.sections.splice(tab.sections.indexOf(section), 1)
+          },
+          condition: () => section.editable !== false && section.columns.length,
+        },
+        {
+          label: __('Move to previous tab'),
+          icon: 'corner-up-left',
           onClick: () => {
             let previousTab = props.tabs[tabIndex.value - 1]
             previousTab.sections.push(section)
@@ -378,8 +400,8 @@ function getSectionOptions(section) {
             section.editable !== false && props.tabs[tabIndex.value - 1],
         },
         {
-      label: 'Move to next tab',
+          label: __('Move to next tab'),
-      icon: 'trash-2',
+          icon: 'corner-up-right',
           onClick: () => {
             let nextTab = props.tabs[tabIndex.value + 1]
             nextTab.sections.push(section)
@@ -392,20 +414,60 @@ function getSectionOptions(section) {
           condition: () =>
             section.editable !== false && props.tabs[tabIndex.value + 1],
         },
+      ],
+    },
+    {
+      group: __('Column'),
+      items: [
+        {
+          label: __('Add column'),
+          icon: 'columns',
+          onClick: () => {
+            section.columns.push({ label: '', fields: [] })
+          },
+          condition: () => section.columns.length < 4,
+        },
+        {
+          label: __('Remove column'),
+          icon: 'trash-2',
+          onClick: () => section.columns.pop(),
+          condition: () => section.columns.length > 1,
+        },
+        {
+          label: __('Remove and move fields to previous column'),
+          icon: 'trash-2',
+          onClick: () => {
+            let previousColumn = section.columns[section.columns.length - 2]
+            previousColumn.fields = previousColumn.fields.concat(column.fields)
+            section.columns.pop()
+          },
+          condition: () => section.columns.length > 1 && column.fields.length,
+        },
+        {
+          label: __('Move to next section'),
+          icon: 'corner-up-right',
+          onClick: () => {
+            let nextSection = tab.sections[i + 1]
+            nextSection.columns.push(column)
+            section.columns.pop()
+          },
+          condition: () => tab.sections[i + 1],
+        },
+        {
+          label: __('Move to previous section'),
+          icon: 'corner-up-left',
+          onClick: () => {
+            let previousSection = tab.sections[i - 1]
+            previousSection.columns.push(column)
+            section.columns.pop()
+          },
+          condition: () => tab.sections[i - 1],
+        },
+      ],
+    },
   ]
 }
 
-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]
-}
-
 watch(
   () => props.doctype,
   () => fields.fetch(params.value),

frontend/src/components/Modals/DataFieldsModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="show" :options="{ size: '3xl' }">
+  <Dialog v-model="show" :options="{ size: '4xl' }">
     <template #body-title>
       <h3
         class="flex items-center gap-2 text-2xl font-semibold leading-6 text-ink-gray-9"

frontend/src/components/Modals/QuickEntryModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="show" :options="{ size: '3xl' }">
+  <Dialog v-model="show" :options="{ size: '4xl' }">
     <template #body-title>
       <h3
         class="flex items-center gap-2 text-2xl font-semibold leading-6 text-ink-gray-9"