refactor: move tab composable to pinia store

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

packages/nc-gui/components/cell/DateTimePicker.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { storeToRefs } from 'pinia'
 import {
   ActiveCellInj,
   ColumnInj,

packages/nc-gui/components/cell/MultiSelect.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { onUnmounted } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
-import { storeToRefs } from 'pinia'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType, SelectOptionsType } from 'nocodb-sdk'

packages/nc-gui/components/cell/TimePicker.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { storeToRefs } from 'pinia'
 import { ActiveCellInj, ReadonlyInj, inject, onClickOutside, useProject, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {

packages/nc-gui/components/dashboard/TreeView.vue

@@ -41,7 +41,7 @@ const projectStore = useProject()
 const { loadTables } = projectStore
 const { bases, tables, isSharedBase } = storeToRefs(projectStore)
 
-const { activeTab } = useTabs()
+const { activeTab } = storeToRefs(useTabs())
 
 const { deleteTable } = useTable()
 

packages/nc-gui/components/dashboard/settings/Metadata.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Empty, extractSdkResponseErrorMsg, h, message, useI18n, useNuxtApp, useProject } from '#imports'
 import { storeToRefs } from 'pinia'
+import { Empty, extractSdkResponseErrorMsg, h, message, useI18n, useNuxtApp, useProject } from '#imports'
 
 const props = defineProps<{
   baseId: string

packages/nc-gui/components/dlg/AirtableImport.vue

@@ -32,7 +32,7 @@ const baseURL = appInfo.ncSiteUrl
 const { $state } = useNuxtApp()
 
 const projectStore = useProject()
-const { loadProject } = projectStore
+
 const { project } = projectStore
 
 const showGoToDashboardButton = ref(false)

packages/nc-gui/components/smartsheet/sidebar/index.vue

@@ -22,7 +22,7 @@ const meta = inject(MetaInj, ref())
 
 const activeView = inject(ActiveViewInj, ref())
 
-const { activeTab } = useTabs()
+const { activeTab } = storeToRefs(useTabs())
 
 const { views, loadViews, isLoading } = useViews(meta)
 

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -581,9 +581,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         v-model:open-key="openDialogKey"
         v-model:data-sources-state="dataSourcesState"
       />
-
       <NuxtPage :page-key="$route.params.projectId" />
-
       <LazyGeneralPreviewAs float />
     </div>
   </NuxtLayout>

packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import { storeToRefs } from 'pinia'
 import type { TabItem } from '~/lib'
 import { TabType } from '~/lib'
 import { TabMetaInj, iconMap, provide, useGlobal, useSidebar, useTabs } from '#imports'
 
-const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
+const tabStore = useTabs()
+const { closeTab } = tabStore
+const { tabs, activeTabIndex, activeTab } = storeToRefs(tabStore)
 
 const { isLoading } = useGlobal()
 

packages/nc-gui/store/tab.ts

@@ -1,6 +1,6 @@
 import type { WritableComputedRef } from '@vue/reactivity'
-import { storeToRefs } from 'pinia'
+import { defineStore } from 'pinia'
-import { computed, createSharedComposable, navigateTo, ref, useProject, useRouter, watch } from '#imports'
+import { computed, navigateTo, ref, useProject, useRouter, watch } from '#imports'
 import type { TabItem } from '~/lib'
 import { TabType } from '~/lib'
 
@@ -11,7 +11,7 @@ function getPredicate(key: Partial<TabItem>) {
     (!('type' in key) || tab.type === key.type)
 }
 
-export const useTab = createSharedComposable(() => {
+export const useTabs = defineStore('tabStore', () => {
   const tabs = ref<TabItem[]>([])
 
   const router = useRouter()
@@ -20,8 +20,6 @@ export const useTab = createSharedComposable(() => {
 
   const projectStore = useProject()
 
-  const { bases, tables } = storeToRefs(projectStore)
-
   const projectType = $computed(() => route.params.projectType as string)
 
   const previousActiveTabIndex = ref(-1)
@@ -29,14 +27,14 @@ export const useTab = createSharedComposable(() => {
     get() {
       const routeName = route.name as string
 
-      if (routeName.startsWith('projectType-projectId-index-index-type-title-viewTitle') && tables.value.length) {
+      if (routeName.startsWith('projectType-projectId-index-index-type-title-viewTitle') && projectStore.tables.length) {
         const tab: TabItem = { type: route.params.type as TabType, title: route.params.title as string }
 
-        const currentTable = tables.value.find((t) => t.id === tab.title || t.title === tab.title)
+        const currentTable = projectStore.tables.find((t) => t.id === tab.title || t.title === tab.title)
 
         if (!currentTable) return -1
 
-        const currentBase = bases.value.find((b) => b.id === currentTable.base_id)
+        const currentBase = projectStore.bases.find((b) => b.id === currentTable.base_id)
 
         tab.id = currentTable.id
 
@@ -47,7 +45,7 @@ export const useTab = createSharedComposable(() => {
         tab.meta = currentTable.meta
 
         // append base alias to tab title if duplicate titles exist on other bases
-        if (tables.value.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
+        if (projectStore.tables.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
           tab.title = `${tab.title}${currentBase?.alias ? ` (${currentBase.alias})` : ``}`
 
         if (index === -1) {
@@ -94,13 +92,13 @@ export const useTab = createSharedComposable(() => {
     }
     // if tab not found add it
     else {
-      const currentTable = tables.value.find((t) => t.id === tabMeta.id || t.title === tabMeta.id)
+      const currentTable = projectStore.tables.find((t) => t.id === tabMeta.id || t.title === tabMeta.id)
-      const currentBase = bases.value.find((b) => b.id === currentTable?.base_id)
+      const currentBase = projectStore.bases.find((b) => b.id === currentTable?.base_id)
 
       tabMeta.meta = currentTable?.meta
 
       // append base alias to tab title if duplicate titles exist on other bases
-      if (tables.value.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
+      if (projectStore.tables.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
         tabMeta.title = `${tabMeta.title}${currentBase?.alias ? ` (${currentBase.alias})` : ``}`
 
       tabs.value = [...(tabs.value || []), tabMeta]