From 29d23d78c5aaf44b5d4bfa405ac9f7531b3df74b Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 1 Jan 2025 03:28:54 +0530
Subject: [PATCH] fix: allow adding/removing/editing columns

---
 .../Controls/GridRowFieldsModal.vue           |   2 +-
 frontend/src/components/FieldLayoutEditor.vue | 362 ++++++++++--------
 .../src/components/Modals/DataFieldsModal.vue |   2 +-
 .../src/components/Modals/QuickEntryModal.vue |   2 +-
 4 files changed, 215 insertions(+), 153 deletions(-)

diff --git a/frontend/src/components/Controls/GridRowFieldsModal.vue b/frontend/src/components/Controls/GridRowFieldsModal.vue
index 894baf72..e5e95354 100644
--- a/frontend/src/components/Controls/GridRowFieldsModal.vue
+++ b/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"
diff --git a/frontend/src/components/FieldLayoutEditor.vue b/frontend/src/components/FieldLayoutEditor.vue
index e4be9144..0befa77c 100644
--- a/frontend/src/components/FieldLayoutEditor.vue
+++ b/frontend/src/components/FieldLayoutEditor.vue
@@ -72,8 +72,10 @@
         item-key="label"
         class="flex flex-col gap-5.5"
       >
-        <template #item="{ element: section }">
-          <div class="flex flex-col gap-1.5 p-2.5 bg-surface-gray-2 rounded">
+        <template #item="{ element: section, index: i }">
+          <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,69 +119,77 @@
                 </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="column.fields"
-                  group="fields"
-                  item-key="label"
-                  class="flex flex-col gap-1.5"
-                  handle=".cursor-grab"
+            <Draggable
+              class="flex gap-2"
+              :list="section.columns"
+              group="columns"
+              item-key="fields"
+            >
+              <template #item="{ element: column }">
+                <div
+                  class="flex flex-col gap-1.5 flex-1 p-2 border border-dashed border-outline-gray-2 rounded bg-surface-modal cursor-grab"
                 >
-                  <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"
-                    >
-                      <div class="flex items-center gap-2 truncate">
-                        <DragVerticalIcon class="h-3.5 cursor-grab" />
-                        <div class="truncate">{{ field.label }}</div>
-                      </div>
-                      <Button
-                        variant="ghost"
-                        class="!size-4 rounded-sm"
-                        icon="x"
-                        @click="
-                          column.fields.splice(column.fields.indexOf(field), 1)
-                        "
-                      />
-                    </div>
-                  </template>
-                </Draggable>
-                <Autocomplete
-                  v-if="fields.data"
-                  value=""
-                  :options="fields.data"
-                  @change="(e) => addField(column, e)"
-                >
-                  <template #target="{ togglePopover }">
-                    <div class="gap-2 w-full">
-                      <Button
-                        class="w-full !h-8 !bg-surface-modal"
-                        variant="outline"
-                        @click="togglePopover()"
-                        :label="__('Add Field')"
+                  <Draggable
+                    :list="column.fields"
+                    group="fields"
+                    item-key="label"
+                    class="flex flex-col gap-1.5"
+                    handle=".cursor-grab"
+                  >
+                    <template #item="{ element: field }">
+                      <div
+                        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"
                       >
-                        <template #prefix>
-                          <FeatherIcon name="plus" class="h-4" />
-                        </template>
-                      </Button>
-                    </div>
-                  </template>
-                  <template #item-label="{ option }">
-                    <div class="flex flex-col gap-1 text-ink-gray-9">
-                      <div>{{ option.label }}</div>
-                      <div class="text-ink-gray-4 text-sm">
-                        {{ `${option.fieldname} - ${option.fieldtype}` }}
+                        <div class="flex items-center gap-2 truncate">
+                          <DragVerticalIcon class="h-3.5 cursor-grab" />
+                          <div class="truncate">{{ field.label }}</div>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          class="!size-4 rounded-sm"
+                          icon="x"
+                          @click="
+                            column.fields.splice(
+                              column.fields.indexOf(field),
+                              1,
+                            )
+                          "
+                        />
                       </div>
-                    </div>
-                  </template>
-                </Autocomplete>
-              </div>
-            </div>
+                    </template>
+                  </Draggable>
+                  <Autocomplete
+                    v-if="fields.data"
+                    value=""
+                    :options="fields.data"
+                    @change="(e) => addField(column, e)"
+                  >
+                    <template #target="{ togglePopover }">
+                      <div class="gap-2 w-full">
+                        <Button
+                          class="w-full !h-8 !bg-surface-modal"
+                          variant="outline"
+                          @click="togglePopover()"
+                          :label="__('Add Field')"
+                        >
+                          <template #prefix>
+                            <FeatherIcon name="plus" class="h-4" />
+                          </template>
+                        </Button>
+                      </div>
+                    </template>
+                    <template #item-label="{ option }">
+                      <div class="flex flex-col gap-1 text-ink-gray-9">
+                        <div>{{ option.label }}</div>
+                        <div class="text-ink-gray-4 text-sm">
+                          {{ `${option.fieldname} - ${option.fieldtype}` }}
+                        </div>
+                      </div>
+                    </template>
+                  </Autocomplete>
+                </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,96 +329,145 @@ function getTabOptions(tab) {
   ]
 }
 
-function getSectionOptions(section) {
+function getSectionOptions(i, section, tab) {
+  let column = section.columns[section.columns.length - 1]
   return [
     {
-      label: 'Edit',
-      icon: 'edit',
-      onClick: () => (section.editingLabel = true),
-      condition: () => section.editable !== false,
+      group: __('Section'),
+      items: [
+        {
+          label: __('Edit'),
+          icon: 'edit',
+          onClick: () => (section.editingLabel = true),
+          condition: () => section.editable !== false,
+        },
+        {
+          label: section.collapsible ? __('Uncollapsible') : __('Collapsible'),
+          icon: section.collapsible ? 'chevron-up' : 'chevron-down',
+          onClick: () => (section.collapsible = !section.collapsible),
+        },
+        {
+          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'),
+          icon: 'minus',
+          onClick: () => (section.hideBorder = !section.hideBorder),
+        },
+        {
+          label: __('Remove section'),
+          icon: 'trash-2',
+          onClick: () => {
+            tab.sections.splice(tab.sections.indexOf(section), 1)
+          },
+          condition: () => section.editable !== false,
+        },
+        {
+          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)
+            props.tabs[tabIndex.value].sections.splice(
+              props.tabs[tabIndex.value].sections.indexOf(section),
+              1,
+            )
+            tabIndex.value -= 1
+          },
+          condition: () =>
+            section.editable !== false && props.tabs[tabIndex.value - 1],
+        },
+        {
+          label: __('Move to next tab'),
+          icon: 'corner-up-right',
+          onClick: () => {
+            let nextTab = props.tabs[tabIndex.value + 1]
+            nextTab.sections.push(section)
+            props.tabs[tabIndex.value].sections.splice(
+              props.tabs[tabIndex.value].sections.indexOf(section),
+              1,
+            )
+            tabIndex.value += 1
+          },
+          condition: () =>
+            section.editable !== false && props.tabs[tabIndex.value + 1],
+        },
+      ],
     },
     {
-      label: section.collapsible ? 'Uncollapsible' : 'Collapsible',
-      icon: section.collapsible ? 'chevron-up' : 'chevron-down',
-      onClick: () => (section.collapsible = !section.collapsible),
-    },
-    {
-      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',
-      icon: 'minus',
-      onClick: () => (section.hideBorder = !section.hideBorder),
-    },
-    {
-      label: 'Add column',
-      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]
-        currentTab.sections.splice(currentTab.sections.indexOf(section), 1)
-      },
-      condition: () => section.editable !== false,
-    },
-    {
-      label: 'Move to previous tab',
-      icon: 'trash-2',
-      onClick: () => {
-        let previousTab = props.tabs[tabIndex.value - 1]
-        previousTab.sections.push(section)
-        props.tabs[tabIndex.value].sections.splice(
-          props.tabs[tabIndex.value].sections.indexOf(section),
-          1,
-        )
-        tabIndex.value -= 1
-      },
-      condition: () =>
-        section.editable !== false && props.tabs[tabIndex.value - 1],
-    },
-    {
-      label: 'Move to next tab',
-      icon: 'trash-2',
-      onClick: () => {
-        let nextTab = props.tabs[tabIndex.value + 1]
-        nextTab.sections.push(section)
-        props.tabs[tabIndex.value].sections.splice(
-          props.tabs[tabIndex.value].sections.indexOf(section),
-          1,
-        )
-        tabIndex.value += 1
-      },
-      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),
diff --git a/frontend/src/components/Modals/DataFieldsModal.vue b/frontend/src/components/Modals/DataFieldsModal.vue
index 04c3c6f7..e512d426 100644
--- a/frontend/src/components/Modals/DataFieldsModal.vue
+++ b/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"
diff --git a/frontend/src/components/Modals/QuickEntryModal.vue b/frontend/src/components/Modals/QuickEntryModal.vue
index c9e83790..88fd1401 100644
--- a/frontend/src/components/Modals/QuickEntryModal.vue
+++ b/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"