Browse Source

refactor/gui-v2-added hiding column to Share view

pull/3083/head
Muhammed Mustafa 2 years ago
parent
commit
3b4eb68332
  1. 2
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
  2. 4
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  3. 8
      packages/nc-gui-v2/components/smartsheet/Toolbar.vue
  4. 7
      packages/nc-gui-v2/composables/useSharedView.ts
  5. 41
      packages/nc-gui-v2/composables/useViewColumns.ts
  6. 3
      packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue

2
packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@ -21,7 +21,7 @@ const {
showAll,
hideAll,
saveOrUpdate,
} = useViewColumns(activeView, meta, false, () => reloadDataHook.trigger())
} = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
watch(
() => (activeView.value as any)?.id,

4
packages/nc-gui-v2/components/smartsheet/Grid.vue

@ -100,8 +100,10 @@ provide(ChangePageInj, changePage)
provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
reloadViewDataHook?.on(async () => {
if (!isPublicView) {
loadAggCommentsCount()
}
await loadData()
loadAggCommentsCount()
})
const selectCell = (row: number, col: number) => {

8
packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@ -1,18 +1,20 @@
<script setup lang="ts">
import { useSmartsheetStoreOrThrow } from '~/composables'
import { IsPublicInj } from '~/context'
const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
const isPublic = inject(IsPublicInj, ref(false))
</script>
<template>
<div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
<SmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
<SmartsheetToolbarFieldsMenu v-if="(isGrid && !isPublic) || isGallery" :show-system-fields="false" class="ml-1" />
<SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
<SmartsheetToolbarSortListMenu v-if="isGrid || isGallery" />
<SmartsheetToolbarSortListMenu v-if="(isGrid && !isPublic) || isGallery" />
<SmartsheetToolbarShareView v-if="isForm || isGrid" />
<SmartsheetToolbarShareView v-if="(isForm || isGrid) && !isPublic" />
<SmartsheetToolbarMoreActions v-if="isGrid" />
<div class="flex-1" />

7
packages/nc-gui-v2/composables/useSharedView.ts

@ -3,8 +3,8 @@ import { useNuxtApp } from '#app'
export function useSharedView(viewId: string) {
const sharedView = ref<ViewType>()
const meta = computed<TableType>(() => sharedView.value.model)
const columns = computed<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
const meta = ref<TableType>(() => sharedView.value.model)
const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
const { $api } = useNuxtApp()
const { setMeta } = useMetas()
@ -12,6 +12,9 @@ export function useSharedView(viewId: string) {
const loadSharedView = async () => {
const viewMeta = await $api.public.sharedViewMetaGet(viewId)
sharedView.value = viewMeta
meta.value = sharedView.value.model
columns.value = sharedView.value.model.columns
setMeta(viewMeta.model)
const relatedMetas = { ...viewMeta.relatedMetas }

41
packages/nc-gui-v2/composables/useViewColumns.ts

@ -3,13 +3,10 @@ import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
import { watch } from 'vue'
import type { ComputedRef, Ref } from 'vue'
import { useNuxtApp } from '#app'
import { IsPublicInj } from '~/context'
export function useViewColumns(
view: Ref<ViewType> | undefined,
meta: ComputedRef<TableType>,
isPublic = false,
reloadData?: () => void,
) {
export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
const isPublic = inject(IsPublicInj, ref(false))
const fields = ref<
{
order: number
@ -31,7 +28,7 @@ export function useViewColumns(
let order = 1
if (view.value?.id) {
const data = (await $api.dbViewColumn.list(view.value.id)) as any[]
const data = (isPublic.value ? meta.value?.columns : await $api.dbViewColumn.list(view.value.id)) as any[]
const fieldById = data.reduce<Record<string, any>>((acc, curr) => {
curr.show = !!curr.show
@ -54,8 +51,6 @@ export function useViewColumns(
}
})
.sort((a, b) => a.order - b.order)
} else if (isPublic) {
fields.value = meta.value.columns as any
}
}
@ -89,6 +84,22 @@ export function useViewColumns(
}
const saveOrUpdate = async (field: any, index: number) => {
if (isPublic && fields.value) {
fields.value[index] = field
meta.value.columns = meta.value?.columns?.map((column) => {
if (column.id === field.fk_column_id) {
return {
...column,
...field,
}
}
return column
})
reloadData?.()
return
}
if (isUIAllowed('fieldsSync')) {
if (field.id && view?.value?.id) {
await $api.dbViewColumn.update(view.value.id, field.id, field)
@ -118,11 +129,13 @@ export function useViewColumns(
},
set(v: boolean) {
if (view?.value?.id) {
$api.dbView
.update(view.value.id, {
show_system_fields: v,
})
.finally(() => reloadData?.())
if (!isPublic.value) {
$api.dbView
.update(view.value.id, {
show_system_fields: v,
})
.finally(() => reloadData?.())
}
;(view.value as any).show_system_fields = v
}
},

3
packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue

@ -17,7 +17,7 @@ await loadSharedView()
provide(ReloadViewDataHookInj, reloadEventHook)
provide(MetaInj, meta)
provide(ActiveViewInj, sharedView)
provide(FieldsInj, ref(columns))
provide(FieldsInj, columns)
provide(IsPublicInj, ref(true))
const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
@ -25,6 +25,7 @@ const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
<template>
<NuxtLayout id="content" class="flex">
<SmartsheetToolbar />
<SmartsheetGrid :is-public-view="true" />
</NuxtLayout>
</template>

Loading…
Cancel
Save