From eb1b4da20b9ccd01713599505294ba454a3e02ad Mon Sep 17 00:00:00 2001 From: mertmit Date: Sat, 27 Aug 2022 15:42:07 +0300 Subject: [PATCH] feat: move project dependent elements to useProject Signed-off-by: mertmit --- packages/nc-gui-v2/composables/useProject.ts | 29 ++++++++++++----- .../nc-gui-v2/composables/useTheme/index.ts | 31 +++---------------- .../pages/[projectType]/[projectId]/index.vue | 4 +-- 3 files changed, 28 insertions(+), 36 deletions(-) diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts index b6d62b6f07..f9128e9186 100644 --- a/packages/nc-gui-v2/composables/useProject.ts +++ b/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) { const projectRoles = useState>(USER_PROJECT_ROLES, () => ({})) @@ -14,6 +15,7 @@ export function useProject(projectId?: MaybeRef) { const tables = useState('tables', () => [] as TableType[]) const route = useRoute() const { includeM2M } = useGlobal() + const { setTheme } = useTheme() const projectMetaInfo = useState('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) { ) 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) { project.value = await $api.project.read(_projectId!) await loadProjectRoles() await loadTables() + setTheme(projectMeta.value?.theme) } async function updateProject(data: Partial) { @@ -90,13 +101,15 @@ export function useProject(projectId?: MaybeRef) { 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) { + await updateProject({ + meta: JSON.stringify({ + ...projectMeta.value, + theme, + }), + }) + setTheme(theme) + } onScopeDispose(() => { if (isLoaded.value === true) { @@ -104,6 +117,7 @@ export function useProject(projectId?: MaybeRef) { tables.value = [] projectMetaInfo.value = undefined projectRoles.value = {} + setTheme({}) } }) @@ -122,5 +136,6 @@ export function useProject(projectId?: MaybeRef) { loadProjectMetaInfo, projectMetaInfo, projectMeta, + saveTheme, } } diff --git a/packages/nc-gui-v2/composables/useTheme/index.ts b/packages/nc-gui-v2/composables/useTheme/index.ts index a8f0b1c1bc..3ce5492322 100644 --- a/packages/nc-gui-v2/composables/useTheme/index.ts +++ b/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) => { 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) => { /** set theme (persists in localstorage) */ function setTheme(theme: Partial) { - 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) => { }) } - async function saveTheme(theme: Partial) { - await updateProject({ - meta: JSON.stringify({ - ...projectMeta.value, - theme, - }), - }) - setTheme(theme) - } - return { theme: currentTheme, setTheme, - saveTheme, } }, 'theme') diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue index 6b079e0fba..24a81c59c4 100644 --- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue +++ b/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()