Browse Source

chore(gui-v2): hide some right toolbar buttons in form view

pull/3195/head
Wing-Kam Wong 2 years ago
parent
commit
67be2c000f
  1. 25
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
  2. 7
      packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
  3. 16
      packages/nc-gui-v2/components/tabs/Smartsheet.vue

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

@ -3,13 +3,29 @@ 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,
RightSidebarInj,
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()
@ -109,8 +125,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
</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': !isForm }" />
<Toolbar v-if="sidebarOpen" class="flex items-center py-3 px-3 justify-between border-b-1" />
<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,7 +147,7 @@ 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>

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>

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

@ -3,7 +3,16 @@ 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 { computed, inject, provide, useMetas, useProvideSmartsheetStore, watch, watchEffect } from '#imports'
import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, RightSidebarInj, TabMetaInj } from '~/context' import {
ActiveViewInj,
FieldsInj,
IsFormInj,
IsLockedInj,
MetaInj,
ReloadViewDataHookInj,
RightSidebarInj,
TabMetaInj,
} from '~/context'
import type { TabItem } from '~/composables' import type { TabItem } from '~/composables'
const { getMeta, metas } = useMetas() const { getMeta, metas } = useMetas()
@ -27,6 +36,8 @@ watchEffect(async () => {
const reloadEventHook = createEventHook<void>() const reloadEventHook = createEventHook<void>()
const { isGallery, isGrid, isForm } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
// todo: move to store // todo: move to store
provide(MetaInj, meta) provide(MetaInj, meta)
provide(TabMetaInj, tabMeta) provide(TabMetaInj, tabMeta)
@ -35,8 +46,7 @@ provide(IsLockedInj, false)
provide(ReloadViewDataHookInj, reloadEventHook) provide(ReloadViewDataHookInj, reloadEventHook)
provide(FieldsInj, fields) provide(FieldsInj, fields)
provide(RightSidebarInj, ref(false)) provide(RightSidebarInj, ref(false))
provide(IsFormInj, isForm)
const { isGallery, isGrid, isForm } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
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)

Loading…
Cancel
Save