多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

373 lines
10 KiB

import type { FilterType, SortType, ViewType, ViewTypes } from 'nocodb-sdk'
import { acceptHMRUpdate, defineStore } from 'pinia'
import type { ViewPageType } from '~/lib'
import { navigateToBlankTargetOpenOption, useMagicKeys } from '#imports'
export const useViewsStore = defineStore('viewsStore', () => {
const { $api } = useNuxtApp()
interface RecentView {
viewName: string
viewId: string | undefined
viewType: ViewTypes
tableID: string
isDefault: boolean
baseName: string
tableName: string
workspaceId: string
baseId: string
}
const router = useRouter()
// Store recent views from all Workspaces
const allRecentViews = ref<RecentView[]>([])
const route = router.currentRoute
const bases = useBases()
const tablesStore = useTablesStore()
const { activeWorkspaceId } = storeToRefs(useWorkspace())
const { meta: metaKey, ctrlKey } = useMagicKeys()
const recentViews = computed<RecentView[]>(() =>
allRecentViews.value.filter((f) => f.workspaceId === activeWorkspaceId.value).splice(0, 10),
)
const viewsByTable = ref<Map<string, ViewType[]>>(new Map())
const views = computed({
get: () => (tablesStore.activeTableId ? viewsByTable.value.get(tablesStore.activeTableId) : []) ?? [],
set: (value) => {
if (!tablesStore.activeTableId) return
if (!value) return viewsByTable.value.delete(tablesStore.activeTableId)
viewsByTable.value.set(tablesStore.activeTableId, value)
},
})
// Both are synced with `useSmartsheetStore` state
// Sort of active view
const activeSorts = ref<SortType[]>([])
// Filters of active view (used for local filters)
const activeNestedFilters = ref<FilterType[]>([])
const isViewsLoading = ref(true)
const isViewDataLoading = ref(true)
const isPublic = computed(() => route.value.meta?.public)
const { activeTable } = storeToRefs(useTablesStore())
const activeViewTitleOrId = computed(() => {
if (!route.value.params.viewTitle?.length) {
// find the default view and navigate to it, if not found navigate to the first one
const defaultView = views.value?.find((v) => v.is_default) || views.value?.[0]
return defaultView?.id
}
return route.value.params.viewTitle
})
// Get view page type acc to route which will be used to open the view page
const openedViewsTab = computed<ViewPageType>(() => {
// For types in ViewPageType type
if (!route.value.params?.slugs || route.value.params.slugs?.length === 0) return 'view'
if (route.value.params.slugs[0] === 'webhook') return 'webhook'
if (route.value.params.slugs[0] === 'field') return 'field'
if (route.value.params.slugs[0] === 'api') return 'api'
if (route.value.params.slugs[0] === 'relation') return 'relation'
return 'view'
})
const { sharedView } = useSharedView()
const activeView = computed<ViewType | undefined>({
get() {
if (sharedView.value) return sharedView.value
if (!activeTable.value) return undefined
if (!activeViewTitleOrId.value) return undefined
return (
views.value.find((v) => v.id === activeViewTitleOrId.value) ??
views.value.find((v) => v.title === activeViewTitleOrId.value)
)
},
set(_view: ViewType | undefined) {
if (sharedView.value) {
sharedView.value = _view
return
}
if (!activeTable.value) return
if (!_view) return
const viewIndex =
views.value.findIndex((v) => v.id === activeViewTitleOrId.value) ??
views.value.findIndex((v) => v.title === activeViewTitleOrId.value)
if (viewIndex === -1) return
views.value[viewIndex] = _view
},
})
const isActiveViewLocked = computed(() => activeView.value?.lock_type === 'locked')
// Used for Grid View Pagination
const isPaginationLoading = ref(true)
const preFillFormSearchParams = ref('')
const loadViews = async ({
tableId,
ignoreLoading,
force,
}: { tableId?: string; ignoreLoading?: boolean; force?: boolean } = {}) => {
tableId = tableId ?? tablesStore.activeTableId
if (tableId) {
if (!force && viewsByTable.value.get(tableId)) return
if (!ignoreLoading) isViewsLoading.value = true
const response = (await $api.dbView.list(tableId)).list as ViewType[]
if (response) {
viewsByTable.value.set(
tableId,
response.sort((a, b) => a.order! - b.order!),
)
}
if (!ignoreLoading) isViewsLoading.value = false
}
}
const onViewsTabChange = (page: ViewPageType) => {
router.push({
name: 'index-typeOrId-baseId-index-index-viewId-viewTitle-slugs',
params: {
typeOrId: route.value.params.typeOrId,
baseId: route.value.params.baseId,
viewId: route.value.params.viewId,
viewTitle: activeViewTitleOrId.value,
slugs: [page],
},
})
}
const changeView = async ({ viewId, tableId, baseId }: { viewId: string | null; tableId: string; baseId: string }) => {
const routeName = 'index-typeOrId-baseId-index-index-viewId-viewTitle'
await router.push({ name: routeName, params: { viewTitle: viewId || '', viewId: tableId, baseId } })
}
const removeFromRecentViews = ({
viewId,
tableId,
baseId,
}: {
viewId?: string | undefined
tableId: string
baseId?: string
}) => {
if (baseId && !viewId && !tableId) {
allRecentViews.value = allRecentViews.value.filter((f) => f.baseId !== baseId)
} else if (baseId && tableId && !viewId) {
allRecentViews.value = allRecentViews.value.filter((f) => f.baseId !== baseId || f.tableID !== tableId)
} else if (tableId && viewId) {
allRecentViews.value = allRecentViews.value.filter((f) => f.viewId !== viewId || f.tableID !== tableId)
}
}
watch(
() => tablesStore.activeTableId,
async (newId, oldId) => {
if (newId === oldId) return
if (isPublic.value) {
isViewsLoading.value = false
return
}
isViewDataLoading.value = true
try {
if (tablesStore.activeTable) tablesStore.activeTable.isViewsLoading = true
await loadViews()
} catch (e) {
console.error(e)
} finally {
if (tablesStore.activeTable) tablesStore.activeTable.isViewsLoading = false
}
},
{ immediate: true },
)
const isLockedView = computed(() => activeView.value?.lock_type === 'locked')
const navigateToView = async ({
view,
baseId,
tableId,
hardReload,
doNotSwitchTab,
}: {
view: ViewType
baseId: string
tableId: string
hardReload?: boolean
doNotSwitchTab?: boolean
}) => {
const cmdOrCtrl = isMac() ? metaKey.value : ctrlKey.value
const routeName = 'index-typeOrId-baseId-index-index-viewId-viewTitle-slugs'
let baseIdOrBaseId = baseId
if (['base'].includes(route.value.params.typeOrId as string)) {
baseIdOrBaseId = route.value.params.baseId as string
}
const slugs = doNotSwitchTab ? router.currentRoute.value.params.slugs : undefined
if (
router.currentRoute.value.query &&
router.currentRoute.value.query.page &&
router.currentRoute.value.query.page === 'fields'
) {
if (cmdOrCtrl) {
await navigateTo(
router.resolve({
name: routeName,
params: {
viewTitle: view.id || '',
viewId: tableId,
baseId: baseIdOrBaseId,
slugs,
},
query: router.currentRoute.value.query,
}).href,
{
open: navigateToBlankTargetOpenOption,
},
)
} else {
await router.push({
name: routeName,
params: {
viewTitle: view.id || '',
viewId: tableId,
baseId: baseIdOrBaseId,
slugs,
},
query: router.currentRoute.value.query,
})
}
} else {
if (cmdOrCtrl) {
await navigateTo(
router.resolve({
name: routeName,
params: {
viewTitle: view.id || '',
viewId: tableId,
baseId: baseIdOrBaseId,
slugs,
},
}).href,
{
open: navigateToBlankTargetOpenOption,
},
)
} else {
await router.push({
name: routeName,
params: {
viewTitle: view.id || '',
viewId: tableId,
baseId: baseIdOrBaseId,
slugs,
},
})
}
}
if (!cmdOrCtrl && hardReload) {
await router
.replace({
name: routeName,
query: { reload: 'true' },
params: {
viewId: tableId,
baseId: baseIdOrBaseId,
viewTitle: view.id || '',
slugs,
},
})
.then(() => {
router.replace({
name: routeName,
query: {},
params: {
viewId: tableId,
viewTitle: view.id || '',
baseId: baseIdOrBaseId,
slugs,
},
})
})
}
}
watch(activeView, (view) => {
if (!view) return
if (!view.base_id) return
const tableName = tablesStore.baseTables.get(view.base_id)?.find((t) => t.id === view.fk_model_id)?.title
const baseName = bases.basesList.find((p) => p.id === view.base_id)?.title
allRecentViews.value = [
{
viewId: view.id,
baseId: view.base_id as string,
tableID: view.fk_model_id,
isDefault: !!view.is_default,
viewName: view.is_default ? (tableName as string) : view.title,
viewType: view.type,
workspaceId: activeWorkspaceId.value,
tableName: tableName as string,
baseName: baseName as string,
},
...allRecentViews.value.filter((f) => f.viewId !== view.id || f.tableID !== view.fk_model_id),
]
})
return {
isLockedView,
isViewsLoading,
isViewDataLoading,
isPaginationLoading,
loadViews,
recentViews,
allRecentViews,
views,
activeView,
openedViewsTab,
onViewsTabChange,
sharedView,
viewsByTable,
activeViewTitleOrId,
navigateToView,
changeView,
removeFromRecentViews,
activeSorts,
activeNestedFilters,
isActiveViewLocked,
preFillFormSearchParams,
}
})
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useViewsStore as any, import.meta.hot))
}