feat: insert column after/before a column

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

packages/nc-gui/components/smartsheet/Grid.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnReqType, ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import {
   ActiveViewInj,
@@ -42,7 +42,7 @@ import {
   watch,
 } from '#imports'
 import type { Row } from '~/lib'
-import { NavigateDir } from '~/lib'
+import { NavigateDir, SmartsheetStoreEvents } from '~/lib'
 
 const { t } = useI18n()
 
@@ -71,7 +71,7 @@ const isView = false
 
 let editEnabled = $ref(false)
 
-const { xWhere, isPkAvail, isSqlView } = useSmartsheetStoreOrThrow()
+const { xWhere, isPkAvail, isSqlView, eventBus } = useSmartsheetStoreOrThrow()
 
 const visibleColLength = $computed(() => fields.value?.length)
 
@@ -544,6 +544,20 @@ watch(
   },
   { immediate: true },
 )
+
+const columnPosition = ref<Pick<ColumnReqType, 'columnOrder'> | null>(null)
+
+eventBus.on(async (event, payload) => {
+  if (event === SmartsheetStoreEvents.FIELD_ADD) {
+    columnPosition.value = payload
+    addColumnDropdown.value = true
+  }
+})
+
+const closeAddColumnMenu = () => {
+  columnPosition.value = null
+  addColumnDropdown.value = false
+}
 </script>
 
 <template>
@@ -619,8 +633,9 @@ watch(
                   <template #overlay>
                     <SmartsheetColumnEditOrAddProvider
                       v-if="addColumnDropdown"
-                      @submit="addColumnDropdown = false"
+                      :column-position="columnPosition"
-                      @cancel="addColumnDropdown = false"
+                      @submit="closeAddColumnMenu"
+                      @cancel="closeAddColumnMenu"
                       @click.stop
                       @keydown.stop
                     />

packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@@ -1,12 +1,15 @@
 <script lang="ts" setup>
 import { useEventListener } from '@vueuse/core'
-import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import type { ColumnReqType } from 'nocodb-sdk'
+import { ColumnType, UITypes, isVirtualCol } from 'nocodb-sdk'
 import {
   IsFormInj,
   IsKanbanInj,
   MetaInj,
   ReloadViewDataHookInj,
   computed,
+  defineEmits,
+  defineProps,
   inject,
   message,
   onMounted,
@@ -22,6 +25,10 @@ import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 import MdiIdentifierIcon from '~icons/mdi/identifier'
 
+const props = defineProps<{
+  columnPosition?: Pick<ColumnReqType, 'columnOrder'>
+}>()
+
 const emit = defineEmits(['submit', 'cancel'])
 
 const { formState, generateNewColumnMeta, addOrUpdate, onAlter, onUidtOrIdTypeChange, validateInfos, isEdit } =
@@ -71,7 +78,7 @@ const reloadMetaAndData = async () => {
 }
 
 async function onSubmit() {
-  const saved = await addOrUpdate(reloadMetaAndData)
+  const saved = await addOrUpdate(reloadMetaAndData, props.columnPosition)
 
   if (!saved) return
 

packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 // todo: Remove this "Provider" component and use the "EditOrAdd" component directly
-import type { ColumnType } from 'nocodb-sdk'
+import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
 import { MetaInj, inject, ref, toRef, useProvideColumnCreateStore } from '#imports'
 
 interface Props {
   column?: ColumnType & { meta: any }
+  columnPosition?: Pick<ColumnReqType, 'columnOrder'>
 }
 
 const props = defineProps<Props>()
@@ -19,5 +20,5 @@ useProvideColumnCreateStore(meta, column)
 </script>
 
 <template>
-  <SmartsheetColumnEditOrAdd @submit="emit('submit')" @cancel="emit('cancel')" />
+  <SmartsheetColumnEditOrAdd :column-position="props.columnPosition" @submit="emit('submit')" @cancel="emit('cancel')" />
 </template>

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

@@ -132,7 +132,6 @@ const duplicateColumn = async () => {
   }
 
   try {
-
     const gridViewColumnList = await $api.dbViewColumn.list(view.value?.id as string)
 
     const currentColumnIndex = gridViewColumnList.findIndex((f) => f.fk_column_id === column!.value.id)
@@ -141,7 +140,7 @@ const duplicateColumn = async () => {
       return
     }
 
-    let newColumnOrder = (gridViewColumnList[currentColumnIndex].order! + gridViewColumnList[currentColumnIndex + 1]?.order) / 2
+    const newColumnOrder = (gridViewColumnList[currentColumnIndex].order! + gridViewColumnList[currentColumnIndex + 1]?.order) / 2
 
     await $api.dbTableColumn.create(meta!.value!.id!, {
       ...columnCreatePayload,
@@ -152,17 +151,38 @@ const duplicateColumn = async () => {
     })
     await getMeta(meta!.value!.id!, true)
 
-
     eventBus.emit(SmartsheetStoreEvents.FIELD_RELOAD)
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
+const addColumn = async (before = false) => {
+  const gridViewColumnList = await $api.dbViewColumn.list(view.value?.id as string)
+
+  const currentColumnIndex = gridViewColumnList.findIndex((f) => f.fk_column_id === column!.value.id)
+
+  // if (currentColumnIndex === gridViewColumnList.length - 2) {
+  //   return
+  // }
+
+  let newColumnOrder
+  if (before) {
+    newColumnOrder = (gridViewColumnList[currentColumnIndex].order! + gridViewColumnList[currentColumnIndex - 1]?.order) / 2
+  } else {
+    newColumnOrder = (gridViewColumnList[currentColumnIndex].order! + gridViewColumnList[currentColumnIndex + 1]?.order) / 2
+  }
+  eventBus.emit(SmartsheetStoreEvents.FIELD_ADD, {
+    columnOrder: {
+      order: newColumnOrder,
+      viewId: view.value?.id as string,
+    },
+  })
+}
 </script>
 
 <template>
-  <a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']"
+  <a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']" overlay-class-name="nc-dropdown-column-operations">
-              overlay-class-name="nc-dropdown-column-operations">
     <MdiMenuDown class="h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0" />
 
     <template #overlay>
@@ -183,13 +203,13 @@ const duplicateColumn = async () => {
             Duplicate
           </div>
         </a-menu-item>
-        <a-menu-item @click="emit('edit')">
+        <a-menu-item @click="addColumn()">
           <div class="nc-column-insert-after nc-header-menu-item">
             <MdiTableColumnPlusAfter class="text-primary" />
             Insert After
           </div>
         </a-menu-item>
-        <a-menu-item @click="emit('edit')">
+        <a-menu-item @click="addColumn(true)">
           <div class="nc-column-insert-before nc-header-menu-item">
             <MdiTableColumnPlusBefore class="text-primary" />
             Insert before

packages/nc-gui/composables/useColumnCreateStore.ts

@@ -1,5 +1,5 @@
 import clone from 'just-clone'
-import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { ColumnReqType, ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import {
@@ -191,7 +191,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       if (cdf) formState.value.cdf = formState.value.cdf || null
     }
 
-    const addOrUpdate = async (onSuccess: () => void) => {
+    const addOrUpdate = async (onSuccess: () => void, columnPosition?: Pick<ColumnReqType, 'columnOrder'>) => {
       try {
         if (!(await validate())) return
       } catch (e) {
@@ -228,7 +228,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
             //   };
             // }
           }
-          await $api.dbTableColumn.create(meta.value?.id as string, formState.value)
+          await $api.dbTableColumn.create(meta.value?.id as string, { ...formState.value, ...columnPosition })
 
           /** if LTAR column then force reload related table meta */
           if (formState.value.uidt === UITypes.LinkToAnotherRecord && meta.value?.id !== formState.value.childId) {

packages/nc-gui/lib/enums.ts

@@ -83,4 +83,5 @@ export enum SmartsheetStoreEvents {
   FILTER_RELOAD = 'filter-reload',
   DATA_RELOAD = 'data-reload',
   FIELD_RELOAD = 'field-reload',
+  FIELD_ADD = 'field-add',
 }