From f1a313d42db72aa983cf47bb30b1021cbae4d074 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 18 Jul 2022 19:38:36 +0530
Subject: [PATCH] feat(gui-v2): add project delete and edit options

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  2 ++
 .../nc-gui-v2/pages/index/index/index.vue     | 25 +++++++++-----
 packages/nc-gui-v2/pages/index/index/list.vue | 14 ++++++--
 packages/nc-gui-v2/pages/projects/index.vue   | 34 +++++++++++++------
 4 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index c7c6c62015..7a7c569e03 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/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']
diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index 16c35bc7f1..c5ba344c60 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/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>
diff --git a/packages/nc-gui-v2/pages/index/index/list.vue b/packages/nc-gui-v2/pages/index/index/list.vue
index 6670452987..e0967af75c 100644
--- a/packages/nc-gui-v2/pages/index/index/list.vue
+++ b/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>
diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index a36b03a9f6..f519bd040e 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/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>