Merge pull request #4726 from nocodb/fix/4722-project-rename

fix: route problems after editing project name

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

@@ -35,7 +35,7 @@ const { addTab, updateTab } = useTabs()
 
 const { $api, $e } = useNuxtApp()
 
-const { bases, tables, loadTables, isSharedBase } = useProject()
+const { project, loadProject, bases, tables, loadTables, isSharedBase } = useProject()
 
 const { activeTab } = useTabs()
 
@@ -324,6 +324,12 @@ const setIcon = async (icon: string, table: TableType) => {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
+onMounted(async () => {
+  if (!project.value?.id) {
+    await loadProject()
+  }
+})
 </script>
 
 <template>

packages/nc-gui/composables/useProject.ts

@@ -1,6 +1,7 @@
 import type { BaseType, OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import { SqlUiFactory } from 'nocodb-sdk'
 import { isString } from '@vueuse/core'
+import { useRoute } from 'vue-router'
 import {
   ClientType,
   computed,
@@ -11,7 +12,6 @@ import {
   useInjectionState,
   useNuxtApp,
   useRoles,
-  useRoute,
   useRouter,
   useTheme,
 } from '#imports'
@@ -42,9 +42,9 @@ const [setup, use] = useInjectionState(() => {
 
   const lastOpenedViewMap = ref<Record<string, string>>({})
 
-  let forcedProjectId: string | undefined
+  const forcedProjectId = ref<string>()
 
-  const projectId = computed(() => forcedProjectId || (route.params.projectId as string))
+  const projectId = computed(() => forcedProjectId.value || (route.params.projectId as string))
 
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
@@ -107,7 +107,7 @@ const [setup, use] = useInjectionState(() => {
   }
 
   async function loadProject(withTheme = true, forcedId?: string) {
-    if (forcedId) forcedProjectId = forcedId
+    if (forcedId) forcedProjectId.value = forcedId
     if (projectType === 'base') {
       try {
         const baseData = await api.public.sharedBaseGet(route.params.projectId as string)

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

@@ -16,9 +16,7 @@ import {
 
 const route = useRoute()
 
-const { loadProject, updateProject, isLoading } = useProject()
+const { project, loadProject, updateProject, isLoading } = useProject()
-
-loadProject(false)
 
 const nameValidationRules = [
   {
@@ -44,6 +42,12 @@ const renameProject = async () => {
   }
 }
 
+onBeforeMount(async () => {
+  await loadProject(false)
+
+  formState.title = project.value?.title
+})
+
 const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>