From 05351b43beb5e9e343fc8283ebdb50028b1be86c Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Tue, 16 Aug 2022 16:12:46 +0800 Subject: [PATCH 01/10] feat(gui-v2): extend localStorage in useSidebar --- .../nc-gui-v2/composables/useSidebar/index.ts | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/nc-gui-v2/composables/useSidebar/index.ts b/packages/nc-gui-v2/composables/useSidebar/index.ts index bcfa661452..8acd61abec 100644 --- a/packages/nc-gui-v2/composables/useSidebar/index.ts +++ b/packages/nc-gui-v2/composables/useSidebar/index.ts @@ -1,8 +1,10 @@ -import { useInjectionState, useToggle, watch } from '#imports' +import { useStorage } from '@vueuse/core' +import { useInjectionState, watch } from '#imports' interface UseSidebarProps { hasSidebar?: boolean isOpen?: boolean + storageKey?: string // if a storageKey is passed, use that key for localStorage } /** @@ -14,8 +16,22 @@ interface UseSidebarProps { * If `provideSidebar` is not called explicitly, `useSidebar` will trigger the provider if no injection state can be found */ const [setup, use] = useInjectionState((props: UseSidebarProps = {}) => { - const [isOpen, toggle] = useToggle(props.isOpen ?? false) - const [hasSidebar, toggleHasSidebar] = useToggle(props.hasSidebar ?? true) + let isOpen = ref(props.isOpen ?? false) + let hasSidebar = ref(props.hasSidebar ?? true) + + function toggle(state?: boolean) { + isOpen.value = state ?? !isOpen.value + } + + function toggleHasSidebar(state?: boolean) { + hasSidebar.value = state ?? !hasSidebar.value + } + + if (props.storageKey) { + const storage = toRefs(useStorage(props.storageKey, { isOpen, hasSidebar }, localStorage, { mergeDefaults: true }).value) + isOpen = storage.isOpen + hasSidebar = storage.hasSidebar + } watch( hasSidebar, From 36b0b45ab490c16ff844362c5cb09fa4428d4bc4 Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Tue, 16 Aug 2022 16:13:09 +0800 Subject: [PATCH 02/10] feat(gui-v2): provide the sidebar injection state --- packages/nc-gui-v2/components/tabs/Smartsheet.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue index 012e0a4b38..5618e2b7ac 100644 --- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue +++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue @@ -34,7 +34,9 @@ provide(ActiveViewInj, activeView) provide(IsLockedInj, false) provide(ReloadViewDataHookInj, reloadEventHook) provide(FieldsInj, fields) -provide(RightSidebarInj, ref(false)) + +// provide the sidebar injection state +provideSidebar({ storageKey: 'nc-right-sidebar' }) const { isGallery, isGrid, isForm } = useProvideSmartsheetStore(activeView as Ref, meta) From 4875f22c1714d1fa4339067390a9e2bc00baf3b5 Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Tue, 16 Aug 2022 16:13:20 +0800 Subject: [PATCH 03/10] feat(gui-v2): use useSidebar with storageKey --- .../components/smartsheet/sidebar/index.vue | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue index 92ab9dd635..f4d99b0e53 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue @@ -21,9 +21,9 @@ const route = useRoute() provide(ViewListInj, views) /** Sidebar visible */ -const sidebarOpen = inject(RightSidebarInj, ref(true)) +const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' }) -const sidebarCollapsed = computed(() => !sidebarOpen.value) +const sidebarCollapsed = computed(() => !isOpen.value) /** Sidebar ref */ const sidebar = ref() @@ -96,21 +96,21 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) { class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full" > - + -
+
From d124698324432f9ecc9bb01a1f1a86bc6ad3ed33 Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Tue, 16 Aug 2022 16:16:49 +0800 Subject: [PATCH 04/10] refactor(gui-v2): remove RightSidebarInj --- .../components/smartsheet/sidebar/index.vue | 16 ++++++++++++++-- .../nc-gui-v2/components/tabs/Smartsheet.vue | 17 +++++++++++++++-- packages/nc-gui-v2/context/index.ts | 1 - 3 files changed, 29 insertions(+), 5 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue index f4d99b0e53..ea296878dd 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue @@ -3,8 +3,20 @@ import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'noc import MenuTop from './MenuTop.vue' import MenuBottom from './MenuBottom.vue' import Toolbar from './toolbar/index.vue' -import { computed, inject, provide, ref, useElementHover, useRoute, useRouter, useViews, watch } from '#imports' -import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context' +import { + ActiveViewInj, + MetaInj, + ViewListInj, + computed, + inject, + provide, + ref, + useElementHover, + useRoute, + useRouter, + useViews, + watch, +} from '#imports' const meta = inject(MetaInj, ref()) diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue index 5618e2b7ac..96a795333e 100644 --- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue +++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue @@ -2,8 +2,21 @@ import type { ColumnType, TableType } from 'nocodb-sdk' import type { Ref } from 'vue' import SmartsheetGrid from '../smartsheet/Grid.vue' -import { computed, inject, provide, useMetas, useProvideSmartsheetStore, watch, watchEffect } from '#imports' -import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, RightSidebarInj, TabMetaInj } from '~/context' +import { + ActiveViewInj, + FieldsInj, + IsLockedInj, + MetaInj, + ReloadViewDataHookInj, + TabMetaInj, + computed, + inject, + provide, + useMetas, + useProvideSmartsheetStore, + watch, + watchEffect, +} from '#imports' import type { TabItem } from '~/composables' const { getMeta, metas } = useMetas() diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts index d955c93802..50cd0e5b45 100644 --- a/packages/nc-gui-v2/context/index.ts +++ b/packages/nc-gui-v2/context/index.ts @@ -22,5 +22,4 @@ export const ReadonlyInj: InjectionKey = Symbol('readonly-injection') export const ReloadViewDataHookInj: InjectionKey> = Symbol('reload-view-data-injection') export const FieldsInj: InjectionKey> = Symbol('fields-injection') export const ViewListInj: InjectionKey> = Symbol('view-list-injection') -export const RightSidebarInj: InjectionKey> = Symbol('right-sidebar-injection') export const EditModeInj: InjectionKey> = Symbol('edit-mode-injection') From 497c87c94c135792b3dce3d67b81363af88b302f Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Tue, 16 Aug 2022 16:17:18 +0800 Subject: [PATCH 05/10] feat(gui-v2): use useSidebar with storageKey --- .../components/smartsheet/sidebar/toolbar/AddRow.vue | 8 ++------ .../components/smartsheet/sidebar/toolbar/DeleteTable.vue | 7 +++---- .../components/smartsheet/sidebar/toolbar/Reload.vue | 7 +++---- 3 files changed, 8 insertions(+), 14 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue index ac0010f7d7..1664254663 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue +++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue @@ -1,14 +1,10 @@