feat(gui-v2): add project delete and edit options

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

packages/nc-gui-v2/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    '(feat(gui-v2)': add project delete and edit options)
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     ALayout: typeof import('ant-design-vue/es')['Layout']
@@ -16,6 +17,7 @@ declare module '@vue/runtime-core' {
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    AModal: typeof import('ant-design-vue/es')['Modal']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ATable: typeof import('ant-design-vue/es')['Table']
     RouterLink: typeof import('vue-router')['RouterLink']

packages/nc-gui-v2/pages/index/index/index.vue

@@ -2,11 +2,11 @@
 import type { ProjectType } from 'nocodb-sdk'
 import { navigateTo } from '#app'
 import useColors from '~/composables/useColors'
-import MdiStarOutline from '~icons/mdi/star-outline'
 import MdiMenuDown from '~icons/mdi/menu-down'
 import MdiDeleteOutline from '~icons/mdi/delete-outline'
 import MdiPlus from '~icons/mdi/plus'
 import MdiDatabaseOutline from '~icons/mdi/database-outline'
+import MdiEditOutline from '~icons/mdi/edit-outline'
 
 interface Props {
   projects: ProjectType[]
@@ -72,18 +72,25 @@ const formatTitle = (title: string) =>
       <div class="thumbnail" :style="{ '--thumbnail-color': getColorByIndex(i) }" @click="openProject(project)">
         {{ formatTitle(project.title) }}
 
-        <MdiStarOutline class="star-icon" @click.stop />
+        <!--        <MdiStarOutline class="star-icon" @click.stop /> -->
 
         <a-dropdown @click.stop>
           <MdiMenuDown class="menu-icon" />
           <template #overlay>
-            <div
-              class="grid grid-cols-6 cursor-pointer flex items-center p-2 border-1 bg-white dark:bg-slate-800 hover:bg-gray-200"
-              @click.stop="emit('delete-project', project)"
-            >
-              <MdiDeleteOutline class="col-span-2 mr-1 mt-[1px] text-red text-lg" />
-              <div class="col-span-4 text-sm xl:text-md">{{ $t('general.delete') }}</div>
-            </div>
+            <a-menu>
+              <a-menu-item @click.stop="emit('delete-project', project)">
+                <div class="grid grid-cols-6 cursor-pointer flex items-center p-2">
+                  <MdiDeleteOutline class="col-span-2 mr-1 mt-[1px] text-red text-lg" />
+                  <div class="col-span-4 text-sm xl:text-md">{{ $t('general.delete') }}</div>
+                </div>
+              </a-menu-item>
+              <a-menu-item>
+                <div class="grid grid-cols-6 cursor-pointer flex items-center p-2">
+                  <MdiEditOutline class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
+                  <div class="col-span-4 text-sm xl:text-md">{{ $t('general.edit') }}</div>
+                </div>
+              </a-menu-item>
+            </a-menu>
           </template>
         </a-dropdown>
       </div>

packages/nc-gui-v2/pages/index/index/list.vue

@@ -2,12 +2,17 @@
 import type { ProjectType } from 'nocodb-sdk'
 import { navigateTo } from '#app'
 
+import MdiDeleteOutline from '~icons/mdi/delete-outline'
+import MdiEditOutline from '~icons/mdi/edit-outline'
+
 interface Props {
   projects: ProjectType[]
 }
 
 const { projects } = defineProps<Props>()
 
+const emit = defineEmits(['delete-project'])
+
 const { $e } = useNuxtApp()
 
 const openProject = async (project: ProjectType) => {
@@ -18,22 +23,27 @@ const openProject = async (project: ProjectType) => {
 
 <template>
   <div class="mx-8">
-    <div class="grid grid-cols-3 gap-2 prose-md p-2 font-semibold">
+    <div class="grid grid-cols-4 gap-2 prose-md p-2 font-semibold">
       <div>{{ $t('general.title') }}</div>
       <div>Status</div>
       <div>Updated At</div>
+      <div></div>
     </div>
 
     <v-divider class="col-span-3" />
 
     <template v-for="project of projects" :key="project.id">
       <div
-        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2"
+        class="cursor-pointer grid grid-cols-4 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 transition-color ease-in duration-100"
         @click="openProject(project)"
       >
         <div class="font-semibold">{{ project.title || 'Untitled' }}</div>
         <div>{{ project.status }}</div>
         <div>{{ project.updated_at }}</div>
+        <div>
+          <MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop @click="emit('delete-project', project)" />
+          <MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop />
+        </div>
       </div>
       <v-divider class="col-span-3" />
     </template>

packages/nc-gui-v2/pages/projects/index.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { createVNode } from '@vue/runtime-core'
+import { Modal } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
 import { navigateTo } from '#app'
@@ -8,9 +10,7 @@ import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
 import MdiPlus from '~icons/mdi/plus'
 import MdiDatabaseOutline from '~icons/mdi/database-outline'
 import MdiFolderOutline from '~icons/mdi/folder-outline'
-import MdiAccountGroup from '~icons/mdi/account-group'
-import MdiClockOutline from '~icons/mdi/clock-outline'
-import MdiStar from '~icons/mdi/star'
+import ExclamationCircleOutlined from '~icons/mdi/information-outline'
 
 const navDrawerOptions = [
   {
@@ -40,14 +40,26 @@ const toast = useToast()
 const response = await $api.project.list({})
 const projects = $ref(response.list)
 const activePage = $ref(navDrawerOptions[0].title)
-const deleteProject = async (project: ProjectType) => {
-  try {
-    await $api.project.delete(project.id as string)
-    projects.splice(projects.indexOf(project), 1)
-  } catch (e) {
-    toast.error(await extractSdkResponseErrorMsg(e))
-  }
+const deleteProject = (project: ProjectType) => {
+  Modal.confirm({
+    title: 'Do you want to delete the project?',
+    // icon: createVNode(ExclamationCircleOutlined),
+    content: 'Some descriptions',
+    okText: 'Yes',
+    okType: 'danger',
+    cancelText: 'No',
+    async onOk() {
+      try {
+        await $api.project.delete(project.id as string)
+        projects.splice(projects.indexOf(project), 1)
+      } catch (e) {
+        toast.error(await extractSdkResponseErrorMsg(e))
+      }
+    },
+  })
 }
+
+const visible = ref(true)
 </script>
 
 <template>
@@ -133,5 +145,7 @@ const deleteProject = async (project: ProjectType) => {
 
       <NuxtPage :projects="projects" @delete-project="deleteProject" />
     </v-container>
+
+    <a-modal></a-modal>
   </NuxtLayout>
 </template>