Merge branch 'develop' into feat/gui-v2-is-locked

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

@@ -129,7 +129,6 @@ watch(isOpen, (n, _o) => {
     v-model:value="vModel"
     mode="multiple"
     class="w-full"
-    :placeholder="!readOnly ? 'Select an option' : ''"
     :bordered="false"
     :show-arrow="!readOnly"
     :show-search="false"

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

@@ -69,7 +69,6 @@ watch(isOpen, (n, _o) => {
     v-model:value="vModel"
     class="w-full"
     :allow-clear="!column.rqd && active"
-    :placeholder="!readOnly ? 'Select an option' : ''"
     :bordered="false"
     :open="isOpen"
     :disabled="readOnly"

packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue

@@ -43,7 +43,7 @@ const aggrFunctionsList = [
 ]
 
 if (!vModel.value.fk_relation_column_id) vModel.value.fk_relation_column_id = null
-if (!vModel.value.fk_rollup_column_id) vModel.value.value.fk_rollup_column_id = null
+if (!vModel.value.fk_rollup_column_id) vModel.value.fk_rollup_column_id = null
 if (!vModel.value.rollup_function) vModel.value.rollup_function = null
 
 const refTables = $computed(() => {

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

@@ -48,7 +48,7 @@ const view = inject(ActiveViewInj)
 
 const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view as any)
 
-const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, false, async () => {
+const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, async () => {
   await loadFormView()
   setFormData()
 })

packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@@ -3,13 +3,28 @@ 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 {
-import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
+  ActiveViewInj,
+  IsFormInj,
+  MetaInj,
+  ViewListInj,
+  computed,
+  inject,
+  provide,
+  ref,
+  useElementHover,
+  useRoute,
+  useRouter,
+  useViews,
+  watch,
+} from '#imports'
 
 const meta = inject(MetaInj, ref())
 
 const activeView = inject(ActiveViewInj, ref())
 
+const isForm = inject(IsFormInj)
+
 const { views, loadViews } = useViews(meta)
 
 const { isUIAllowed } = useUIPermission()
@@ -21,9 +36,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 +111,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"
         >
           <MaterialSymbolsChevronRightRounded
-            v-if="sidebarOpen"
+            v-if="isOpen"
             class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle"
-            @click="sidebarOpen = false"
+            @click="isOpen = false"
           />
 
           <MaterialSymbolsChevronLeftRounded
             v-else
             class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle"
-            @click="sidebarOpen = true"
+            @click="isOpen = true"
           />
         </div>
       </Transition>
     </a-tooltip>
 
-    <Toolbar v-if="sidebarOpen" class="flex items-center py-3 px-3 justify-between border-b-1" />
+    <Toolbar v-if="isOpen" :class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }" />
 
     <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
       <template #start>
@@ -132,11 +147,11 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
           </div>
         </a-tooltip>
 
-        <div class="dot" />
+        <div v-if="!isForm" class="dot" />
       </template>
     </Toolbar>
 
-    <div v-if="sidebarOpen" class="flex-1 flex flex-col">
+    <div v-if="isOpen" class="flex-1 flex flex-col">
       <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
 
       <a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="my-2" />

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue

@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { inject, ref } from '#imports'
-import { RightSidebarInj } from '~/context'
-
 const emits = defineEmits(['addRow'])
-
+const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
-const sidebarOpen = inject(RightSidebarInj, ref(true))
 </script>
 
 <template>
-  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
+  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('activity.addRow') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-primary/75 group nc-sidebar-add-row">

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { inject, ref, useTable } from '#imports'
+import { MetaInj, inject, useTable } from '#imports'
-import { MetaInj, RightSidebarInj } from '~/context'
 
 const meta = inject(MetaInj)!
 
 const { deleteTable } = useTable()
 
-const sidebarOpen = inject(RightSidebarInj, ref(true))
+const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 </script>
 
 <template>
-  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
+  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('activity.deleteTable') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-red-500 group">

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { ReloadViewDataHookInj, RightSidebarInj } from '~/context'
+import { ReloadViewDataHookInj, inject } from '#imports'
-import { inject, ref } from '#imports'
 
 const reloadHook = inject(ReloadViewDataHookInj)!
 
-const sidebarOpen = inject(RightSidebarInj, ref(true))
+const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 
 const onClick = () => reloadHook.trigger()
 </script>
 
 <template>
-  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
+  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('general.reload') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-green-500 group">

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue

@@ -5,9 +5,12 @@ import Reload from './Reload.vue'
 import ExportCache from './ExportCache.vue'
 import DeleteCache from './DeleteCache.vue'
 import DebugMeta from './DebugMeta.vue'
+import { IsFormInj } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
+const isForm = inject(IsFormInj)
+
 const debug = $ref(false)
 
 const clickCount = $ref(0)
@@ -15,6 +18,7 @@ const clickCount = $ref(0)
 
 <template>
   <div
+    v-if="!isForm"
     class="flex gap-2"
     @click="
       () => {
@@ -51,6 +55,9 @@ const clickCount = $ref(0)
 
     <slot name="end" />
   </div>
+  <div v-else>
+    <slot name="start" />
+  </div>
 </template>
 
 <style scoped>

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

@@ -2,8 +2,24 @@
 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 {
-import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, RightSidebarInj, TabMetaInj } from '~/context'
+  ActiveViewInj,
+  FieldsInj,
+  IsFormInj,
+  IsLockedInj,
+  MetaInj,
+  ReloadViewDataHookInj,
+  TabMetaInj,
+  computed,
+  inject,
+  provide,
+  provideSidebar,
+  useMetas,
+  useProvideSmartsheetStore,
+  watch,
+  watchEffect,
+} from '#imports'
+
 import type { TabItem } from '~/composables'
 
 const { getMeta, metas } = useMetas()
@@ -29,6 +45,9 @@ const reloadEventHook = createEventHook<void>()
 
 const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
 
+// provide the sidebar injection state
+provideSidebar({ storageKey: 'nc-right-sidebar' })
+
 // todo: move to store
 provide(MetaInj, meta)
 provide(TabMetaInj, tabMeta)
@@ -36,7 +55,7 @@ provide(ActiveViewInj, activeView)
 provide(IsLockedInj, isLocked)
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(FieldsInj, fields)
-provide(RightSidebarInj, ref(false))
+provide(IsFormInj, isForm)
 
 watch(tabMeta, async (newTabMeta, oldTabMeta) => {
   if (newTabMeta !== oldTabMeta && newTabMeta?.id) await getMeta(newTabMeta.id)

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

@@ -89,7 +89,10 @@ const unlinkRef = async (rec: Record<string, any>) => {
       </div>
 
       <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
-        <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand" @click="childListDlg = true" />
+        <MdiArrowExpand
+          class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
+          @click="childListDlg = true"
+        />
 
         <MdiPlus
           v-if="!readonly"

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)
+  let isOpen = ref(props.isOpen ?? false)
-  const [hasSidebar, toggleHasSidebar] = useToggle(props.hasSidebar ?? true)
+  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,

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

@@ -23,5 +23,4 @@ export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
-export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')
 export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')