feat(gui-v2): delete column and set primary column

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

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Modal } from 'ant-design-vue'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { inject } from 'vue'
@@ -6,74 +7,13 @@ import { ColumnInj, MetaInj } from '~/context'
 import { useProvideColumnCreateStore } from '#imports'
 
 const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
+
 provide(ColumnInj, column)
+
 const meta = inject(MetaInj)
 
 // instantiate column update store
 useProvideColumnCreateStore(meta as Ref<TableType>, column)
-
-/*
-import { UITypes } from 'nocodb-sdk'
-import cell from '@/components/project/spreadsheet/mixins/cell'
-import EditColumn from '~/components/project/spreadsheet/components/EditColumn'
-
-export default {
-  name: 'HeaderCell',
-  components: { EditColumn },
-  mixins: [cell],
-  props: [
-    'value',
-    'column',
-    'isForeignKey',
-    'meta',
-    'nodes',
-    'columnIndex',
-    'isForm',
-    'isPublicView',
-    'isVirtual',
-    'required',
-    'isLocked',
-  ],
-  data: () => ({
-    editColumnMenu: false,
-    columnDeleteDialog: false,
-  }),
-  methods: {
-    showColumnEdit() {
-      if (this.column.uidt === UITypes.ID) {
-        return this.$toast.info('Primary key column edit is not allowed.').goAway(3000)
-      }
-      this.editColumnMenu = true
-    },
-    async deleteColumn() {
-      try {
-        const column = { ...this.column, cno: this.column.column_name }
-        column.altered = 4
-        const columns = this.meta.columns.slice()
-        columns[this.columnIndex] = column
-        await this.$api.dbTableColumn.delete(column.id)
-
-        this.$emit('colDelete')
-        this.$emit('saved')
-        this.columnDeleteDialog = false
-      } catch (e) {
-        console.log(e)
-      }
-    },
-    async setAsPrimaryValue() {
-      // todo: pass only updated fields
-      try {
-        await this.$api.dbTableColumn.primaryColumnSet(this.column.id)
-        this.$toast.success('Successfully updated as primary column').goAway(3000)
-      } catch (e) {
-        console.log(e)
-        this.$toast.error('Failed to update primary column').goAway(3000)
-      }
-      this.$emit('saved')
-      this.columnDeleteDialog = false
-    },
-  },
-} */
 </script>
 
 <template>

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

@@ -1,10 +1,53 @@
 <script lang="ts" setup>
+import { Modal } from 'ant-design-vue'
+import { inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toastification'
+import { useNuxtApp } from '#app'
+import useMetas from '~/composables/useMetas'
+import { ColumnInj, MetaInj } from '~/context'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiEditIcon from '~icons/mdi/pencil'
 import MdiStarIcon from '~icons/mdi/star'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
 const editColumnDropdown = $ref(false)
+
+const column = inject(ColumnInj)
+const meta = inject(MetaInj)
+
+const { $api } = useNuxtApp()
+const { t } = useI18n()
+const toast = useToast()
+const { getMeta } = useMetas()
+
+const deleteColumn = () =>
+  Modal.confirm({
+    title: h('div', { innerHTML: `Do you want to delete <span class="font-weight-bold">'${column?.title}'</span> column ?` }),
+    okText: t('general.delete'),
+    okType: 'danger',
+    cancelText: t('general.cancel'),
+    async onOk() {
+      try {
+        await $api.dbTableColumn.delete(column?.id as string)
+        getMeta(meta?.value?.id as string, true)
+      } catch (e) {
+        toast.error(await extractSdkResponseErrorMsg(e))
+      }
+    },
+  })
+
+const setAsPrimaryValue = async () => {
+  try {
+    await $api.dbTableColumn.primaryColumnSet(column?.id as string)
+    getMeta(meta?.value?.id as string, true)
+    toast.success('Successfully updated as primary column')
+  } catch (e) {
+    console.log(e)
+    toast.error('Failed to update primary column')
+  }
+}
 </script>
 
 <template>
@@ -23,7 +66,7 @@ const editColumnDropdown = $ref(false)
           <!-- Edit -->
           {{ $t('general.edit') }}
         </div>
-        <div v-t="['a:column:set-primary']" class="nc-menu-item">
+        <div v-t="['a:column:set-primary']" class="nc-menu-item" @click="setAsPrimaryValue">
           <MdiStarIcon class="text-primary" />
 
           <!--       todo : tooltip -->
@@ -31,7 +74,7 @@ const editColumnDropdown = $ref(false)
           {{ $t('activity.setPrimary') }}
           <!--        <span class="caption font-weight-bold">Primary value will be shown in place of primary key</span> -->
         </div>
-        <div class="nc-column-delete nc-menu-item">
+        <div class="nc-column-delete nc-menu-item" @click="deleteColumn">
           <MdiDeleteIcon class="text-error" />
           <!-- Delete -->
           {{ $t('general.delete') }}