Browse Source

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

pull/3209/head
Wing-Kam Wong 2 years ago
parent
commit
ac75a411d8
  1. 1
      packages/nc-gui-v2/components/cell/MultiSelect.vue
  2. 1
      packages/nc-gui-v2/components/cell/SingleSelect.vue
  3. 2
      packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
  4. 2
      packages/nc-gui-v2/components/smartsheet/Form.vue
  5. 35
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
  6. 8
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
  7. 7
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
  8. 7
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
  9. 7
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
  10. 25
      packages/nc-gui-v2/components/tabs/Smartsheet.vue
  11. 5
      packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
  12. 22
      packages/nc-gui-v2/composables/useSidebar/index.ts
  13. 1
      packages/nc-gui-v2/context/index.ts

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

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

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

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

2
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_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 if (!vModel.value.rollup_function) vModel.value.rollup_function = null
const refTables = $computed(() => { const refTables = $computed(() => {

2
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 { 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() await loadFormView()
setFormData() setFormData()
}) })

35
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 MenuTop from './MenuTop.vue'
import MenuBottom from './MenuBottom.vue' import MenuBottom from './MenuBottom.vue'
import Toolbar from './toolbar/index.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 meta = inject(MetaInj, ref())
const activeView = inject(ActiveViewInj, ref()) const activeView = inject(ActiveViewInj, ref())
const isForm = inject(IsFormInj)
const { views, loadViews } = useViews(meta) const { views, loadViews } = useViews(meta)
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
@ -21,9 +36,9 @@ const route = useRoute()
provide(ViewListInj, views) provide(ViewListInj, views)
/** Sidebar visible */ /** 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 */ /** Sidebar ref */
const 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" 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 <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" 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 <MaterialSymbolsChevronLeftRounded
v-else v-else
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle" 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> </div>
</Transition> </Transition>
</a-tooltip> </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]"> <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
<template #start> <template #start>
@ -132,11 +147,11 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
</div> </div>
</a-tooltip> </a-tooltip>
<div class="dot" /> <div v-if="!isForm" class="dot" />
</template> </template>
</Toolbar> </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" /> <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
<a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="my-2" /> <a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="my-2" />

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

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

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

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

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

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

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

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

@ -2,8 +2,24 @@
import type { ColumnType, TableType } from 'nocodb-sdk' import type { ColumnType, TableType } from 'nocodb-sdk'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import SmartsheetGrid from '../smartsheet/Grid.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' import type { TabItem } from '~/composables'
const { getMeta, metas } = useMetas() const { getMeta, metas } = useMetas()
@ -29,6 +45,9 @@ const reloadEventHook = createEventHook<void>()
const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta) 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 // todo: move to store
provide(MetaInj, meta) provide(MetaInj, meta)
provide(TabMetaInj, tabMeta) provide(TabMetaInj, tabMeta)
@ -36,7 +55,7 @@ provide(ActiveViewInj, activeView)
provide(IsLockedInj, isLocked) provide(IsLockedInj, isLocked)
provide(ReloadViewDataHookInj, reloadEventHook) provide(ReloadViewDataHookInj, reloadEventHook)
provide(FieldsInj, fields) provide(FieldsInj, fields)
provide(RightSidebarInj, ref(false)) provide(IsFormInj, isForm)
watch(tabMeta, async (newTabMeta, oldTabMeta) => { watch(tabMeta, async (newTabMeta, oldTabMeta) => {
if (newTabMeta !== oldTabMeta && newTabMeta?.id) await getMeta(newTabMeta.id) if (newTabMeta !== oldTabMeta && newTabMeta?.id) await getMeta(newTabMeta.id)

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

@ -89,7 +89,10 @@ const unlinkRef = async (rec: Record<string, any>) => {
</div> </div>
<div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center"> <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 <MdiPlus
v-if="!readonly" v-if="!readonly"

22
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 { interface UseSidebarProps {
hasSidebar?: boolean hasSidebar?: boolean
isOpen?: 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 * 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 [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( watch(
hasSidebar, hasSidebar,

1
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 ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection') export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-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') export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')

Loading…
Cancel
Save