Browse Source

refactor: move tab composable to pinia store

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5274/head
Pranav C 2 years ago
parent
commit
30cd0c3d42
  1. 1
      packages/nc-gui/components/cell/DateTimePicker.vue
  2. 1
      packages/nc-gui/components/cell/MultiSelect.vue
  3. 1
      packages/nc-gui/components/cell/TimePicker.vue
  4. 2
      packages/nc-gui/components/dashboard/TreeView.vue
  5. 2
      packages/nc-gui/components/dashboard/settings/Metadata.vue
  6. 2
      packages/nc-gui/components/dlg/AirtableImport.vue
  7. 2
      packages/nc-gui/components/smartsheet/sidebar/index.vue
  8. 2
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue
  9. 5
      packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
  10. 22
      packages/nc-gui/store/tab.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2
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:open-key="openDialogKey"
v-model:data-sources-state="dataSourcesState" v-model:data-sources-state="dataSourcesState"
/> />
<NuxtPage :page-key="$route.params.projectId" /> <NuxtPage :page-key="$route.params.projectId" />
<LazyGeneralPreviewAs float /> <LazyGeneralPreviewAs float />
</div> </div>
</NuxtLayout> </NuxtLayout>

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

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

22
packages/nc-gui/store/tab.ts

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

Loading…
Cancel
Save