fix: add column menu position correction

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/smartsheet/header/Cell.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { ColumnReqType } from 'nocodb-sdk'
 import type { ColumnType } from 'nocodb-sdk'
 import { ColumnInj, IsFormInj, IsKanbanInj, inject, provide, ref, toRef, useUIPermission } from '#imports'
+import { SmartsheetStoreEvents } from '~/lib'
 
 const props = defineProps<{ column: ColumnType & { meta: any }; required?: boolean | number; hideMenu?: boolean }>()
 
@@ -17,6 +19,19 @@ const { isUIAllowed } = useUIPermission()
 provide(ColumnInj, column)
 
 const editColumnDropdown = ref(false)
+
+
+const columnOrder = ref<Pick<ColumnReqType, 'columnOrder'> | null>(null)
+
+const addField = async ( payload) => {
+    columnOrder.value = payload
+    editColumnDropdown.value = true
+}
+
+const closeAddColumnMenu = () => {
+  columnOrder.value = null
+  editColumnDropdown.value = false
+}
 </script>
 
 <template>
@@ -39,7 +54,7 @@ const editColumnDropdown = ref(false)
     <template v-if="!hideMenu">
       <div class="flex-1" />
 
-      <LazySmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" @edit="editColumnDropdown = true" />
+      <LazySmartsheetHeaderMenu @add-column="addField" v-if="!isForm && isUIAllowed('edit-column')" @edit="editColumnDropdown = true" />
     </template>
 
     <a-dropdown
@@ -54,10 +69,11 @@ const editColumnDropdown = ref(false)
       <template #overlay>
         <SmartsheetColumnEditOrAddProvider
           v-if="editColumnDropdown"
-          :column="column"
+          :column="columnOrder ? null : column"
+          :column-position="columnOrder"
           class="w-full"
-          @submit="editColumnDropdown = false"
+          @submit="closeAddColumnMenu"
-          @cancel="editColumnDropdown = false"
+          @cancel="closeAddColumnMenu"
           @click.stop
           @keydown.stop
         />

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -20,7 +20,7 @@ import { SmartsheetStoreEvents } from '~/lib'
 
 const { virtual = false } = defineProps<{ virtual?: boolean }>()
 
-const emit = defineEmits(['edit'])
+const emit = defineEmits(['edit', 'addColumn'])
 
 const { eventBus } = useSmartsheetStoreOrThrow()
 
@@ -172,7 +172,13 @@ const addColumn = async (before = false) => {
   } else {
     newColumnOrder = (gridViewColumnList[currentColumnIndex].order! + gridViewColumnList[currentColumnIndex + 1]?.order) / 2
   }
-  eventBus.emit(SmartsheetStoreEvents.FIELD_ADD, {
+  // eventBus.emit(SmartsheetStoreEvents.FIELD_ADD, {
+  //   columnOrder: {
+  //     order: newColumnOrder,
+  //     viewId: view.value?.id as string,
+  //   },
+  // })
+  emit('addColumn',  {
     columnOrder: {
       order: newColumnOrder,
       viewId: view.value?.id as string,

packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
-import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
+import { ColumnReqType, substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
 import {
   ColumnInj,
   IsFormInj,
@@ -99,6 +99,19 @@ const tooltipMsg = computed(() => {
   }
   return ''
 })
+
+
+const columnOrder = ref<Pick<ColumnReqType, 'columnOrder'> | null>(null)
+
+const addField = async ( payload) => {
+  columnOrder.value = payload
+  editColumnDropdown.value = true
+}
+
+const closeAddColumnMenu = () => {
+  columnOrder.value = null
+  editColumnDropdown.value = false
+}
 </script>
 
 <template>
@@ -117,7 +130,7 @@ const tooltipMsg = computed(() => {
     <template v-if="!hideMenu">
       <div class="flex-1" />
 
-      <LazySmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" :virtual="true" @edit="editColumnDropdown = true" />
+      <LazySmartsheetHeaderMenu @add-column="addField"  v-if="!isForm && isUIAllowed('edit-column')" :virtual="true" @edit="editColumnDropdown = true" />
     </template>
 
     <a-dropdown
@@ -128,14 +141,14 @@ const tooltipMsg = computed(() => {
       overlay-class-name="nc-dropdown-edit-column"
     >
       <div />
-
       <template #overlay>
         <SmartsheetColumnEditOrAddProvider
           v-if="editColumnDropdown"
-          :column="column"
+          :column="columnOrder ? null : column"
+          :column-position="columnOrder"
           class="w-full"
-          @submit="editColumnDropdown = false"
+          @submit="closeAddColumnMenu"
-          @cancel="editColumnDropdown = false"
+          @cancel="closeAddColumnMenu"
           @click.stop
           @keydown.stop
         />