feat: insert column after/before a column

Signed-off-by: Pranav C <pranavxc@gmail.com>
2 years ago · 44217b0ce4
6 changed files with 63 additions and 19 deletions
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/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"
-                      @cancel="addColumnDropdown = false"
+                      :column-position="columnPosition"
+                      @submit="closeAddColumnMenu"
+                      @cancel="closeAddColumnMenu"
                      @click.stop
                      @keydown.stop
                    />
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/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

--- a/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
+++ b/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>
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/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']"
-              overlay-class-name="nc-dropdown-column-operations">
+  <a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']" 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
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/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) {
--- a/packages/nc-gui/lib/enums.ts
+++ b/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',
 }