From 0a27efe54367ee8ef4c62b810915912091271a5a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 27 Jul 2022 16:46:28 +0200
Subject: [PATCH] chore: shelve

---
 packages/nc-gui-v2/components.d.ts            |  1 +
 .../components/smartsheet/Sidebar.vue         | 44 ++++++++++---------
 packages/nc-gui-v2/composables/useViews.ts    | 17 ++++---
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index f5e940f2ba..ed57313599 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -38,6 +38,7 @@ declare module '@vue/runtime-core' {
     AMenuItemGroup: typeof import('ant-design-vue/es')['MenuItemGroup']
     AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
index 6b5c3d10d8..b97bf86063 100644
--- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
@@ -1,42 +1,46 @@
 <script setup lang="ts">
+import type { FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
-import type { TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
-import { inject, ref } from '#imports'
+import { inject, ref, useViews } from '#imports'
 import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
-import useViews from '~/composables/useViews'
 import { viewIcons } from '~/utils/viewUtils'
 import MdiPlusIcon from '~icons/mdi/plus'
 
 const meta = inject(MetaInj)
-const activeView = inject(ActiveViewInj)
+const activeView = inject(ActiveViewInj, ref())
 
-const { views, loadViews } = useViews(meta as Ref<TableType>)
+const { views } = useViews(meta)
 
 provide(ViewListInj, views)
 
-const _isUIAllowed = (view: string) => {}
-
 // todo decide based on route param
-loadViews().then(() => {
-  if (activeView) activeView.value = views.value?.[0]
-})
+watch(
+  views,
+  (nextViews) => {
+    if (nextViews.length) {
+      activeView.value = nextViews[0]
+    }
+  },
+  { immediate: true },
+)
 
-const toggleDrawer = ref(false)
+const toggleDrawer = $ref(false)
 // todo: identify based on meta
-const isView = ref(false)
-const viewCreateType = ref<ViewTypes>()
-const viewCreateDlg = ref<boolean>(false)
+const isView = $ref(false)
+
+let viewCreateType = $ref<ViewTypes>()
+
+let viewCreateDlg = $ref(false)
 
 const openCreateViewDlg = (type: ViewTypes) => {
-  viewCreateDlg.value = true
-  viewCreateType.value = type
+  viewCreateDlg = true
+  viewCreateType = type
 }
 
-const onViewCreate = (view) => {
+const onViewCreate = (view: GridType | FormType | KanbanType | GalleryType) => {
   views.value?.push(view)
   activeView.value = view
-  viewCreateDlg.value = false
+  viewCreateDlg = false
 }
 </script>
 
@@ -277,5 +281,3 @@ const onViewCreate = (view) => {
     <DlgViewCreate v-if="views" v-model="viewCreateDlg" :type="viewCreateType" @created="onViewCreate" />
   </div>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/composables/useViews.ts b/packages/nc-gui-v2/composables/useViews.ts
index b540b20794..577acf63aa 100644
--- a/packages/nc-gui-v2/composables/useViews.ts
+++ b/packages/nc-gui-v2/composables/useViews.ts
@@ -1,15 +1,20 @@
 import type { FormType, GalleryType, GridType, KanbanType, TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
+import type { MaybeRef } from '@vueuse/core'
 import { useNuxtApp } from '#app'
 
-export default function (meta: Ref<TableType>) {
-  const views = ref<(GridType | FormType | KanbanType | GalleryType)[]>()
+export default function (meta: MaybeRef<TableType | undefined>) {
+  let views = $ref<(GridType | FormType | KanbanType | GalleryType)[]>([])
   const { $api } = useNuxtApp()
 
   const loadViews = async () => {
-    if (meta.value?.id)
-      views.value = (await $api.dbView.list(meta.value?.id)).list as (GridType | FormType | KanbanType | GalleryType)[]
+    const _meta = unref(meta)
+
+    if (_meta && _meta.id) {
+      views = (await $api.dbView.list(_meta.id)).list as (GridType | FormType | KanbanType | GalleryType)[]
+    }
   }
 
-  return { views, loadViews }
+  watch(() => meta, loadViews, { immediate: true })
+
+  return { views: $$(views), loadViews }
 }