From 5006f18f9cde97b6bf64391ce7412032778090c4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 21 Jul 2022 11:47:50 +0530
Subject: [PATCH] fix(gui-v2): project create/update/list corrections

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/index/index.vue      | 38 +++++++++++++------
 .../nc-gui-v2/pages/project/index/[id].vue    | 10 +++--
 .../nc-gui-v2/pages/project/index/create.vue  | 12 ++++--
 packages/nc-gui-v2/plugins/api.ts             |  4 +-
 4 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 7d353de95e..ca01d3bd8e 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -2,6 +2,7 @@
 import { Modal } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
+import { navigateTo } from '#app'
 import { computed, onMounted } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 
@@ -12,7 +13,7 @@ import MdiMenuDown from '~icons/mdi/menu-down'
 import MdiPlus from '~icons/mdi/plus'
 import MdiDatabaseOutline from '~icons/mdi/database-outline'
 
-const { $api } = useNuxtApp()
+const { $api, $state } = useNuxtApp()
 const toast = useToast()
 
 const filterQuery = ref('')
@@ -34,15 +35,14 @@ const filteredProjects = computed(() => {
 
 const deleteProject = (project: ProjectType) => {
   Modal.confirm({
-    title: 'Do you want to delete the project?',
-    content: 'Some descriptions',
+    title: `Do you want to delete '${project.title}' project?`,
     okText: 'Yes',
     okType: 'danger',
     cancelText: 'No',
     async onOk() {
       try {
         await $api.project.delete(project.id as string)
-        projects.splice(projects.indexOf(project), 1)
+        projects.value.splice(projects.value.indexOf(project), 1)
       } catch (e) {
         toast.error(await extractSdkResponseErrorMsg(e))
       }
@@ -53,6 +53,9 @@ const deleteProject = (project: ProjectType) => {
 onMounted(() => {
   loadProjects()
 })
+
+// hide sidebar
+$state.sidebarOpen.value = false
 </script>
 
 <template>
@@ -74,10 +77,10 @@ onMounted(() => {
         <div class="flex-grow"></div>
 
         <a-dropdown @click.stop>
-          <a-button
-            >
-            <div class="flex align-center" >{{ $t('title.newProj') }}
-            <MdiMenuDown class="menu-icon" />
+          <a-button>
+            <div class="flex align-center">
+              {{ $t('title.newProj') }}
+              <MdiMenuDown class="menu-icon" />
             </div>
           </a-button>
 
@@ -106,17 +109,26 @@ onMounted(() => {
         <a-skeleton />
       </div>
 
-      <a-table v-else :data-source="filteredProjects" :pagination="{ position: ['bottomCenter'] }">
+      <a-table
+        v-else
+        :custom-row="
+          (record) => ({
+            onClick: () => navigateTo(`/nc/${record.id}`),
+          })
+        "
+        :data-source="filteredProjects"
+        :pagination="{ position: ['bottomCenter'] }"
+      >
         <a-table-column key="title" title="Title" data-index="title">
           <template #default="{ text }">
             <div class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap" :title="text">{{ text }}</div>
           </template>
         </a-table-column>
         <a-table-column key="id" title="Actions" data-index="id">
-          <template #default="{ text }">
+          <template #default="{ text, record }">
             <div class="flex align-center">
               <MdiEditOutline class="nc-action-btn" @click.stop="navigateTo(`/project/${text}`)" />
-              <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(text)" />
+              <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
             </div>
           </template>
         </a-table-column>
@@ -133,4 +145,8 @@ onMounted(() => {
 :deep(.ant-table-cell) {
   @apply py-1;
 }
+
+:deep(.ant-table-row) {
+  @apply cursor-pointer;
+}
 </style>
diff --git a/packages/nc-gui-v2/pages/project/index/[id].vue b/packages/nc-gui-v2/pages/project/index/[id].vue
index 581201b845..fca09dec64 100644
--- a/packages/nc-gui-v2/pages/project/index/[id].vue
+++ b/packages/nc-gui-v2/pages/project/index/[id].vue
@@ -3,6 +3,7 @@ import { onMounted } from '@vue/runtime-core'
 import type { Form } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { ref } from 'vue'
+import { useToast } from 'vue-toastification'
 import { navigateTo, useNuxtApp, useRoute } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { projectTitleValidator } from '~/utils/projectCreateUtils'
@@ -10,7 +11,8 @@ import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-l
 
 const loading = ref(false)
 
-const { $api, $toast, $state } = useNuxtApp()
+const { $api, $state } = useNuxtApp()
+const toast = useToast()
 const route = useRoute()
 
 const nameValidationRules = [
@@ -30,7 +32,7 @@ const getProject = async () => {
     const result: ProjectType = await $api.project.read(route.params.id as string)
     formState.title = result.title as string
   } catch (e: any) {
-    $toast.error(await extractSdkResponseErrorMsg(e))
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
 }
 const renameProject = async () => {
@@ -40,7 +42,7 @@ const renameProject = async () => {
 
     navigateTo(`/nc/${route.params.id}`)
   } catch (e) {
-    $toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000)
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
   loading.value = false
 }
@@ -68,7 +70,7 @@ onMounted(async () => {
   <a-card class="w-[500px] mx-auto !mt-100px shadow-md">
     <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.editProject') }}</h3>
 
-    <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="renameProject">
+    <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @finish="renameProject">
       <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
         <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
diff --git a/packages/nc-gui-v2/pages/project/index/create.vue b/packages/nc-gui-v2/pages/project/index/create.vue
index f1447d9f02..564b2aeb91 100644
--- a/packages/nc-gui-v2/pages/project/index/create.vue
+++ b/packages/nc-gui-v2/pages/project/index/create.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, onUpdated } from '@vue/runtime-core'
 import type { Form } from 'ant-design-vue'
+import { useToast } from 'vue-toastification'
 import { nextTick, ref } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -11,7 +12,8 @@ const name = ref('')
 const loading = ref(false)
 const valid = ref(false)
 
-const { $api, $toast, $state } = useNuxtApp()
+const { $api, $state } = useNuxtApp()
+const toast = useToast()
 
 const nameValidationRules = [
   {
@@ -32,9 +34,11 @@ const createProject = async () => {
       title: formState.title,
     })
 
+    debugger
     await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
-    $toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000)
+    debugger
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
   loading.value = false
 }
@@ -42,7 +46,7 @@ const createProject = async () => {
 const form = ref<typeof Form>()
 
 // hide sidebar
-// $state.sidebarOpen.value = false
+$state.sidebarOpen.value = false
 
 // select and focus title field on load
 onMounted(async () => {
@@ -61,7 +65,7 @@ onMounted(async () => {
   <a-card class="w-[500px] mx-auto !mt-100px shadow-md">
     <h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.createProject') }}</h3>
 
-    <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="createProject">
+    <a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @finish="createProject">
       <a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
         <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
diff --git a/packages/nc-gui-v2/plugins/api.ts b/packages/nc-gui-v2/plugins/api.ts
index 16b352fbca..be280baadd 100644
--- a/packages/nc-gui-v2/plugins/api.ts
+++ b/packages/nc-gui-v2/plugins/api.ts
@@ -43,14 +43,14 @@ function addAxiosInterceptors(api: Api<any>, app: { $state: GlobalState }) {
 
       // Return any error which is not due to authentication back to the calling service
       if (!error.response || error.response.status !== 401) {
-        return error
+        return Promise.reject(error)
       }
 
       // Logout user if token refresh didn't work or user is disabled
       if (error.config.url === '/auth/refresh-token') {
         app.$state.signOut()
 
-        return error
+        return Promise.reject(error)
       }
 
       // Try request again with new token