Merge pull request #2803 from nocodb/refactor/useProject

refactor(gui-v2): move injection keys to context dir

packages/nc-gui-v2/components/cell/Attachment.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
-import { inject, ref, watchEffect } from '#imports'
+import { inject, ref, useProject, watchEffect } from '#imports'
 import { useNuxtApp } from '#app'
-import { ColumnInj, MetaInj } from '~/components'
-import useProject from '~/composables/useProject'
+import { ColumnInj, MetaInj } from '~/context'
 import { NOCO } from '~/lib/constants'
 import { isImage } from '~/utils/fileUtils'
 import MaterialPlusIcon from '~icons/mdi/plus'

packages/nc-gui-v2/components/cell/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject } from '#imports'
-import { ColumnInj, IsFormInj } from '~/components'
+import { ColumnInj, IsFormInj } from '~/context'
 
 interface Props {
   modelValue?: boolean | undefined | number

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { computed, ref } from '#imports'
-import useProject from '~/composables/useProject'
+import { computed, ref, useProject } from '#imports'
 
 interface Props {
   modelValue?: string

packages/nc-gui-v2/components/cell/Duration.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, ref } from '#imports'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import { convertDurationToSeconds, convertMS2Duration, durationOptions } from '~/utils/durationHelper'
 
 interface Props {

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 
 interface Props {
   modelValue: string

packages/nc-gui-v2/components/cell/Rating.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject } from '#imports'
-import { ColumnInj, IsFormInj } from '~/components'
+import { ColumnInj, IsFormInj } from '~/context'
 import MdiStarIcon from '~icons/mdi/star'
 import MdiStarOutlineIcon from '~icons/mdi/star-outline'
 

packages/nc-gui-v2/components/cell/SingleSelect.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 
 interface Props {
   modelValue: string

packages/nc-gui-v2/components/cell/Url.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from '#imports'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import { isValidURL } from '~/utils/urlUtils'
 
 interface Props {

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import useProject from '~/composables/useProject'
-import useTabs from '~/composables/useTabs'
+import { useProject, useTabs } from '#imports'
 import MdiSettingIcon from '~icons/mdi/cog'
 
 const { tables } = useProject()

packages/nc-gui-v2/components/dlg/TableCreate.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from '@vue/runtime-core'
-import useTableCreate from '../../composables/useTableCreate'
-import useProject from '~/composables/useProject'
-import useTabs from '~/composables/useTabs'
+import { useProject, useTableCreate, useTabs } from '#imports'
 import { validateTableName } from '~/utils/validation'
 
 const { modelValue = false } = defineProps<{ modelValue?: boolean }>()

packages/nc-gui-v2/components/dlg/ViewCreate.vue

@@ -3,7 +3,7 @@ import { inject } from '@vue/runtime-core'
 import type { TableType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import type { Ref } from '#imports'
-import { ActiveViewInj, MetaInj, ViewListInj } from '~/components'
+import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
 import useViewCreate from '~/composables/useViewCreate'
 
 const { modelValue, type } = defineProps<{ type: ViewTypes; modelValue: boolean }>()

packages/nc-gui-v2/components/smartsheet-header/Cell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { ColumnInj } from '../index'
+import { ColumnInj } from '../../context'
 
 const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
 provide(ColumnInj, column)

packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import useColumn from '~/composables/useColumn'
 import KeyIcon from '~icons/mdi/key-variant'
 import JSONIcon from '~icons/mdi/code-json'

packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { ColumnInj } from '../index'
+import { ColumnInj } from '../../context'
 import { provide } from '#imports'
 
 const { column } = defineProps<{ column: ColumnType & { meta: any } }>()

packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { LinkToAnotherRecordType, RelationTypes, UITypes } from "nocodb-sdk";
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import GenericIcon from '~icons/mdi/square-rounded'
 import HMIcon from '~icons/mdi/table-arrow-right'
 import BTIcon from '~icons/mdi/table-arrow-left'

packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue

@@ -4,7 +4,7 @@ import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
 import { useNuxtApp } from '#app'
 import { inject } from '#imports'
 import { comparisonOpList } from '~/utils/filterUtils'
-import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/components'
+import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import useViewFilters from '~/composables/useViewFilters'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 

packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // todo: move to persisted state
 import { useState } from '#app'
-import { IsLockedInj } from '~/components'
+import { IsLockedInj } from '~/context'
 import MdiFilterIcon from '~icons/mdi/filter-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 

packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MetaInj } from '~/components'
+import { MetaInj } from '~/context'
 
 interface Props {
   modelValue?: string

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue'
-import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/components'
+import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import useViewColumns from '~/composables/useViewColumns'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 import MdiEyeIcon from '~icons/mdi/eye-off-outline'

packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
 import { computed, inject } from '#imports'
-import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/components'
+import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import useViewSorts from '~/composables/useViewSorts'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 import MdiSortIcon from '~icons/mdi/sort'

packages/nc-gui-v2/components/smartsheet/Cell.vue

@@ -2,7 +2,7 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { provide } from 'vue'
 import { computed } from '#imports'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import useColumn from '~/composables/useColumn'
 
 interface Props {

packages/nc-gui-v2/components/smartsheet/Gallery.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
 import { inject, onKeyStroke, onMounted, provide } from '#imports'
-import { ActiveViewInj, ChangePageInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReadonlyInj } from '~/components'
+import { ActiveViewInj, ChangePageInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReadonlyInj } from '~/context'
 import useViewData from '~/composables/useViewData'
 
 const meta = inject(MetaInj)

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -11,7 +11,7 @@ import {
   MetaInj,
   PaginationDataInj,
   ReloadViewDataHookInj,
-} from '~/components'
+} from '~/context'
 import useViewData from '~/composables/useViewData'
 
 const meta = inject(MetaInj)

packages/nc-gui-v2/components/smartsheet/Pagination.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue'
-import { ChangePageInj, PaginationDataInj } from '~/components'
+import { ChangePageInj, PaginationDataInj } from '~/context'
 import MdiKeyboardIcon from '~icons/mdi/keyboard-return'
 
 const paginatedData = inject(PaginationDataInj)

packages/nc-gui-v2/components/smartsheet/Sidebar.vue

@@ -3,7 +3,7 @@ import { ViewTypes } from 'nocodb-sdk'
 import type { TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { inject, ref } from '#imports'
-import { ActiveViewInj, MetaInj, ViewListInj } from '~/components'
+import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
 import useViews from '~/composables/useViews'
 import { viewIcons } from '~/utils/viewUtils'
 import MdiPlusIcon from '~icons/mdi/plus'

packages/nc-gui-v2/components/smartsheet/VirtualCell.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { provide } from '#imports'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import useVirtualCell from '~/composables/useVirtualCell'
 
 interface Props {

packages/nc-gui-v2/components/tabs/Smartsheet.vue

@@ -3,7 +3,7 @@ import { useEventBus } from '@vueuse/core'
 import type { ColumnType, FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import { computed, onMounted, provide, watch } from '#imports'
-import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, TabMetaInj } from '~/components'
+import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, TabMetaInj } from '~/context'
 import useMetas from '~/composables/useMetas'
 
 const { tabMeta } = defineProps({

packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import useBelongsTo from '~/composables/useBelongsTo'
 
 const column = inject(ColumnInj)

packages/nc-gui-v2/components/virtual-cell/Formula.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { computed } from '#imports'
-import { ColumnInj } from '~/components'
+import { computed, useProject } from '#imports'
+import { ColumnInj } from '~/context'
 import { handleTZ } from '~/utils/dateTimeUtils'
 import { replaceUrlsWithLink } from '~/utils/urlUtils'
+
 const column = inject(ColumnInj)
 const value = inject('value')
 

packages/nc-gui-v2/components/virtual-cell/HasMany.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import useHasMany from '~/composables/useHasMany'
 const column = inject(ColumnInj)
 const value = inject('value')

packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import useManyToMany from '~/composables/useManyToMany'
 const column = inject(ColumnInj)
 const value = inject('value')

packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ReadonlyInj } from '~/components'
+import { ReadonlyInj } from '~/context'
 import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
 interface Props {

packages/nc-gui-v2/composables/useColumn.ts

@@ -1,6 +1,6 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
-import useProject from '~/composables/useProject'
+import { useProject } from '#imports'
 
 export default (column: ColumnType) => {
   const { project } = useProject()

packages/nc-gui-v2/composables/useMetas.ts

@@ -1,6 +1,6 @@
 import type { TableType } from 'nocodb-sdk'
 import { useNuxtApp, useState } from '#app'
-import useProject from '~/composables/useProject'
+import { useProject } from '#imports'
 
 export default () => {
   const { $api } = useNuxtApp()

packages/nc-gui-v2/composables/useProject.ts

@@ -1,17 +1,19 @@
 import { SqlUiFactory } from 'nocodb-sdk'
 import type { ProjectType, TableType } from 'nocodb-sdk'
+import type { MaybeRef } from '@vueuse/core'
 import { useNuxtApp, useState } from '#app'
 import { USER_PROJECT_ROLES } from '~/lib/constants'
 
-export default () => {
+export default (projectId?: MaybeRef<string>) => {
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
-
   const { $api } = useNuxtApp()
 
+  const _projectId = $computed(() => unref(projectId))
+
   const project = useState<ProjectType>('project')
-  const tables = useState<TableType[]>('tables')
+  const tables = useState<TableType[]>('tables', () => [] as TableType[])
 
-  const loadProjectRoles = async () => {
+  async function loadProjectRoles() {
     projectRoles.value = {}
 
     if (project.value.id) {
@@ -19,21 +21,30 @@ export default () => {
       projectRoles.value = user.roles
     }
   }
-  const loadTables = async () => {
+  async function loadTables() {
     if (project.value.id) {
       const tablesResponse = await $api.dbTable.list(project.value.id)
       if (tablesResponse.list) tables.value = tablesResponse.list
     }
   }
 
-  const loadProject = async (projectId: string) => {
-    project.value = await $api.project.read(projectId)
+  async function loadProject(id: string) {
+    project.value = await $api.project.read(id)
     await loadProjectRoles()
   }
 
-  const isMysql = computed(() => ['mysql', 'mysql2'].includes(project.value?.bases?.[0]?.type || ''))
-  const isPg = computed(() => project.value?.bases?.[0]?.type === 'pg')
-  const sqlUi = computed(() => SqlUiFactory.create({ client: project.value?.bases?.[0]?.type || '' }))
+  watchEffect(async () => {
+    if (_projectId) {
+      await loadProject(_projectId)
+      await loadTables()
+    }
+  })
+
+  const projectBaseType = $computed(() => project.value?.bases?.[0]?.type || '')
+
+  const isMysql = computed(() => ['mysql', 'mysql2'].includes(projectBaseType))
+  const isPg = computed(() => projectBaseType === 'pg')
+  const sqlUi = computed(() => SqlUiFactory.create({ client: projectBaseType }))
 
-  return { project, tables, loadProject, loadTables, isMysql, isPg, sqlUi }
+  return { project, tables, loadProjectRoles, loadProject, loadTables, isMysql, isPg, sqlUi }
 }

packages/nc-gui-v2/composables/useTableCreate.ts

@@ -1,6 +1,7 @@
 import type { TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
+import { useProject } from '#imports'
 
 export default (onTableCreate?: (tableMeta: TableType) => void) => {
   const table = reactive<{ title: string; table_name: string; columns: string[] }>({

packages/nc-gui-v2/composables/useViewData.ts

@@ -1,7 +1,7 @@
 import type { Api, FormType, GalleryType, GridType, PaginatedType, TableType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
-import useProject from '~/composables/useProject'
+import { useProject } from '#imports'
 import { NOCO } from '~/lib/constants'
 
 const formatData = (list: Record<string, any>[]) =>

packages/nc-gui-v2/context/index.ts

@@ -1,7 +1,7 @@
 import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import type { InjectionKey, Ref } from 'vue'
 import type { EventHook } from '@vueuse/core'
-import type useViewData from '~/composables/useViewData'
+import type { useViewData } from '#imports'
 
 export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
 export const MetaInj: InjectionKey<Ref<TableType>> = Symbol('meta-injection')

packages/nc-gui-v2/pages/nc/[projectId].vue

@@ -1,17 +1,9 @@
 <script setup lang="ts">
-import { watch } from 'vue'
-import useProject from '~/composables/useProject'
-import useTabs from '~/composables/useTabs'
-
 const route = useRoute()
-const { loadProject, loadTables } = useProject()
+const { loadProject, loadTables } = useProject(route.params.projectId as string)
 const { clearTabs, addTab } = useTabs()
 
-onMounted(async () => {
-  await loadProject(route.params.projectId as string)
-  await loadTables()
 addTab({ type: 'auth', title: 'Team & Auth' })
-})
 
 watch(
   () => route.params.projectId,