feat: move project dependent elements to useProject

Signed-off-by: mertmit <mertmit99@gmail.com>

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

@@ -4,6 +4,7 @@ import type { MaybeRef } from '@vueuse/core'
 import { useNuxtApp, useRoute, useState } from '#app'
 import type { ProjectMetaInfo } from '~/lib'
 import { USER_PROJECT_ROLES } from '~/lib'
+import type { ThemeConfig } from '@/composables/useTheme'
 
 export function useProject(projectId?: MaybeRef<string>) {
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
@@ -14,6 +15,7 @@ export function useProject(projectId?: MaybeRef<string>) {
   const tables = useState<TableType[]>('tables', () => [] as TableType[])
   const route = useRoute()
   const { includeM2M } = useGlobal()
+  const { setTheme } = useTheme()
   const projectMetaInfo = useState<ProjectMetaInfo | undefined>('projectMetaInfo')
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
@@ -28,6 +30,14 @@ export function useProject(projectId?: MaybeRef<string>) {
   )
   const isSharedBase = computed(() => projectType === 'base')
 
+  const projectMeta = computed(() => {
+    try {
+      return typeof project.value.meta === 'string' ? JSON.parse(project.value.meta) : project.value.meta
+    } catch (e) {
+      return {}
+    }
+  })
+
   async function loadProjectMetaInfo(force?: boolean) {
     if (!projectMetaInfo.value || force) {
       const data = await $api.project.metaGet(project.value.id!, {}, {})
@@ -76,6 +86,7 @@ export function useProject(projectId?: MaybeRef<string>) {
     project.value = await $api.project.read(_projectId!)
     await loadProjectRoles()
     await loadTables()
+    setTheme(projectMeta.value?.theme)
   }
 
   async function updateProject(data: Partial<ProjectType>) {
@@ -90,13 +101,15 @@ export function useProject(projectId?: MaybeRef<string>) {
     await $api.project.update(_projectId, data)
   }
 
-  const projectMeta = computed(() => {
-    try {
-      return typeof project.value.meta === 'string' ? JSON.parse(project.value.meta) : project.value.meta
-    } catch (e) {
-      return {}
-    }
+  async function saveTheme(theme: Partial<ThemeConfig>) {
+    await updateProject({
+      meta: JSON.stringify({
+        ...projectMeta.value,
+        theme,
+      }),
     })
+    setTheme(theme)
+  }
 
   onScopeDispose(() => {
     if (isLoaded.value === true) {
@@ -104,6 +117,7 @@ export function useProject(projectId?: MaybeRef<string>) {
       tables.value = []
       projectMetaInfo.value = undefined
       projectRoles.value = {}
+      setTheme({})
     }
   })
 
@@ -122,5 +136,6 @@ export function useProject(projectId?: MaybeRef<string>) {
     loadProjectMetaInfo,
     projectMetaInfo,
     projectMeta,
+    saveTheme,
   }
 }

packages/nc-gui-v2/composables/useTheme/index.ts

@@ -1,9 +1,9 @@
 import { ConfigProvider } from 'ant-design-vue'
 import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
 import tinycolor from 'tinycolor2'
-import { hexToRGB, themeV2Colors, useCssVar, useInjectionState, useProject } from '#imports'
+import { hexToRGB, themeV2Colors, useCssVar, useInjectionState } from '#imports'
 
-interface ThemeConfig extends AntTheme {
+export interface ThemeConfig extends AntTheme {
   primaryColor: string
   accentColor: string
 }
@@ -12,22 +12,10 @@ const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
   const primaryColor = useCssVar('--color-primary', typeof document !== 'undefined' ? document.documentElement : null)
   const accentColor = useCssVar('--color-accent', typeof document !== 'undefined' ? document.documentElement : null)
 
-  const { project, projectMeta, updateProject } = useProject()
-
-  // set theme based on active project
-  watch(project, () => {
-    setTheme({
-      primaryColor: themeV2Colors['royal-blue'].DEFAULT,
-      accentColor: themeV2Colors.pink['500'],
-      ...projectMeta.value?.theme,
-    })
-  })
-
   /** current theme config */
   const currentTheme = ref({
     primaryColor: themeV2Colors['royal-blue'].DEFAULT,
     accentColor: themeV2Colors.pink['500'],
-    ...projectMeta.value?.theme,
   })
 
   /** set initial config */
@@ -35,8 +23,8 @@ const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
 
   /** set theme (persists in localstorage) */
   function setTheme(theme: Partial<ThemeConfig>) {
-    const themePrimary = tinycolor(theme.primaryColor)
-    const themeAccent = tinycolor(theme.accentColor)
+    const themePrimary = theme?.primaryColor ? tinycolor(theme.primaryColor) : tinycolor(themeV2Colors['royal-blue'].DEFAULT)
+    const themeAccent = theme?.accentColor ? tinycolor(theme.accentColor) : tinycolor(themeV2Colors.pink['500'])
 
     // convert hex colors to rgb values
     primaryColor.value = themePrimary.isValid()
@@ -54,20 +42,9 @@ const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
     })
   }
 
-  async function saveTheme(theme: Partial<ThemeConfig>) {
-    await updateProject({
-      meta: JSON.stringify({
-        ...projectMeta.value,
-        theme,
-      }),
-    })
-    setTheme(theme)
-  }
-
   return {
     theme: currentTheme,
     setTheme,
-    saveTheme,
   }
 }, 'theme')
 

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

@@ -31,7 +31,7 @@ const route = useRoute()
 
 const { appInfo, token, signOut, signedIn, user } = useGlobal()
 
-const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo } = useProject()
+const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo, saveTheme } = useProject()
 
 const { addTab, clearTabs } = useTabs()
 
@@ -57,7 +57,7 @@ const sidebar = ref()
 
 const email = computed(() => user.value?.email ?? '---')
 
-const { saveTheme, theme } = useTheme()
+const { theme } = useTheme()
 
 const logout = () => {
   signOut()