From fba8f631c7c2a7145421b0bbc9eb60db26a72fdb Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 29 Jul 2022 17:04:59 +0200
Subject: [PATCH] feat(gui-v2): use modal for deletion confirm

---
 .../nc-gui-v2/components/dlg/ViewDelete.vue   | 62 +++++++++++++++++++
 .../components/smartsheet/sidebar/MenuTop.vue | 34 +++++-----
 .../smartsheet/sidebar/RenameableMenuItem.vue | 13 +---
 3 files changed, 79 insertions(+), 30 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/dlg/ViewDelete.vue

diff --git a/packages/nc-gui-v2/components/dlg/ViewDelete.vue b/packages/nc-gui-v2/components/dlg/ViewDelete.vue
new file mode 100644
index 0000000000..7a0cb8a8a4
--- /dev/null
+++ b/packages/nc-gui-v2/components/dlg/ViewDelete.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { notification } from 'ant-design-vue'
+import { extractSdkResponseErrorMsg } from '~/utils'
+import { useApi, useNuxtApp, useVModel } from '#imports'
+
+interface Props {
+  modelValue: boolean
+  view?: Record<string, any>
+}
+
+interface Emits {
+  (event: 'update:modelValue', data: boolean): void
+  (event: 'deleted'): void
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const vModel = useVModel(props, 'modelValue', emits)
+
+const { api, isLoading } = useApi()
+
+const { $e } = useNuxtApp()
+
+/** Delete a view */
+async function onDelete() {
+  if (!props.view) return
+
+  try {
+    await api.dbView.delete(props.view.id)
+
+    notification.success({
+      message: 'View deleted successfully',
+      duration: 3,
+    })
+  } catch (e: any) {
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+      duration: 3,
+    })
+  }
+
+  emits('deleted')
+
+  // telemetry event
+  $e('a:view:delete', { view: props.view.type })
+}
+</script>
+
+<template>
+  <a-modal v-model:visible="vModel" :confirm-loading="isLoading">
+    <template #title> {{ $t('general.delete') }} {{ $t('objects.view') }} </template>
+
+    Are you sure you want to delete this view?
+
+    <template #footer>
+      <a-button key="back" @click="vModel = false">{{ $t('general.cancel') }}</a-button>
+      <a-button key="submit" type="danger" :loading="isLoading" @click="onDelete">{{ $t('general.submit') }}</a-button>
+    </template>
+  </a-modal>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index d5d093b249..0efe9ed656 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -4,7 +4,7 @@ import Sortable from 'sortablejs'
 import type { Menu as AntMenu } from 'ant-design-vue'
 import { notification } from 'ant-design-vue'
 import RenameableMenuItem from './RenameableMenuItem.vue'
-import { computed, inject, onBeforeUnmount, onMounted, ref, unref, useApi, useNuxtApp, useTabs, watch } from '#imports'
+import { computed, inject, onBeforeUnmount, onMounted, ref, unref, useApi, useTabs, watch } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
 import type { TabItem } from '~/composables/useTabs'
 import { TabType } from '~/composables/useTabs'
@@ -22,8 +22,6 @@ const activeView = inject(ActiveViewInj, ref())
 
 const views = inject(ViewListInj, ref([]))
 
-const { $e } = useNuxtApp()
-
 const { addTab } = useTabs()
 
 const { api } = useApi()
@@ -36,6 +34,10 @@ const selected = ref<string[]>([])
 
 const menuRef = ref<typeof AntMenu>()
 
+let deleteModalVisible = $ref(false)
+
+let toDelete = $ref<Record<string, any> | undefined>()
+
 /** Watch currently active view, so we can mark it in the menu */
 watch(activeView, (nextActiveView) => {
   const _nextActiveView = nextActiveView as GridType | FormType | KanbanType
@@ -146,24 +148,14 @@ async function onRename(view: Record<string, any>) {
 
 /** Delete a view */
 async function onDelete(view: Record<string, any>) {
-  try {
-    await api.dbView.delete(view.id)
-
-    notification.success({
-      message: 'View deleted successfully',
-      duration: 3,
-    })
-
-    emits('deleted')
-  } catch (e: any) {
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-      duration: 3,
-    })
-  }
+  toDelete = view
+  deleteModalVisible = true
+}
 
-  // telemetry event
-  $e('a:view:delete', { view: view.type })
+function onDeleted() {
+  emits('deleted')
+  toDelete = undefined
+  deleteModalVisible = false
 }
 
 const sortedViews = computed(() => (views.value as any[]).sort((a, b) => a.order - b.order))
@@ -183,4 +175,6 @@ const sortedViews = computed(() => (views.value as any[]).sort((a, b) => a.order
       @rename="onRename"
     />
   </a-menu>
+
+  <dlg-view-delete v-model="deleteModalVisible" :view="toDelete" @deleted="onDeleted" />
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
index 80955d33cc..3f76ae166e 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -159,22 +159,15 @@ function onStopEdit() {
             <MdiContentCopy class="hidden group-hover:block text-gray-500" @click.stop="onDuplicate" />
           </a-tooltip>
 
-          <a-popconfirm
-            v-if="!vModel.is_default"
-            placement="left"
-            :title="$t('msg.info.deleteProject')"
-            :ok-text="$t('general.yes')"
-            :cancel-text="$t('general.no')"
-            @confirm="onDelete"
-          >
+          <template v-if="!vModel.is_default">
             <a-tooltip placement="left">
               <template #title>
                 {{ $t('activity.deleteView') }}
               </template>
 
-              <MdiTrashCan class="hidden group-hover:block text-red-500" @click.stop />
+              <MdiTrashCan class="hidden group-hover:block text-red-500" @click.stop="onDelete" />
             </a-tooltip>
-          </a-popconfirm>
+          </template>
         </div>
       </template>
     </div>