From c194e36a0973fbaeda94db68d7a5da5bbfbf82a0 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Thu, 11 Aug 2022 16:59:50 +0530 Subject: [PATCH] fix/Added share view --- packages/nc-gui-v2/components.d.ts | 1 + .../nc-gui-v2/components/smartsheet/Grid.vue | 16 ++++++---- .../composables/useGridViewColumnWidth.ts | 10 ++++--- packages/nc-gui-v2/composables/useMetas.ts | 10 ++++++- .../nc-gui-v2/composables/useSharedView.ts | 22 ++++++++++++++ packages/nc-gui-v2/composables/useViewData.ts | 17 ++++++++++- packages/nc-gui-v2/context/index.ts | 1 + .../pages/[projectType]/view/[viewId].vue | 30 +++++++++++++++++++ 8 files changed, 96 insertions(+), 11 deletions(-) create mode 100644 packages/nc-gui-v2/composables/useSharedView.ts create mode 100644 packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts index 2c8304ace6..40939c6f17 100644 --- a/packages/nc-gui-v2/components.d.ts +++ b/packages/nc-gui-v2/components.d.ts @@ -61,6 +61,7 @@ declare module '@vue/runtime-core' { ATextarea: typeof import('ant-design-vue/es')['Textarea'] ATimePicker: typeof import('ant-design-vue/es')['TimePicker'] ATooltip: typeof import('ant-design-vue/es')['Tooltip'] + ATypography: typeof import('ant-design-vue/es')['Typography'] ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle'] AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger'] CilFullscreen: typeof import('~icons/cil/fullscreen')['default'] diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue index 0120b85ec4..cd90ac9fe6 100644 --- a/packages/nc-gui-v2/components/smartsheet/Grid.vue +++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue @@ -23,6 +23,7 @@ import { IsFormInj, IsGridInj, IsLockedInj, + IsPublicInj, MetaInj, PaginationDataInj, ReloadViewDataHookInj, @@ -34,6 +35,8 @@ const meta = inject(MetaInj) const view = inject(ActiveViewInj) +const isPublicView = inject(IsPublicInj, ref(false)) + // keep a root fields variable and will get modified from // fields menu and get used in grid and gallery const fields = inject(FieldsInj, ref([])) @@ -45,8 +48,6 @@ const reloadViewDataHook = inject(ReloadViewDataHookInj) const { isUIAllowed } = useUIPermission() // todo: get from parent ( inject or use prop ) -const isPublicView = false - const isView = false const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null }) @@ -80,8 +81,13 @@ const { } = useViewData(meta, view as any, xWhere) const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any) - -onMounted(loadGridViewColumns) +onMounted(() => { + if (!isPublicView.value) { + loadGridViewColumns() + } else { + loadGridViewColumns(fields.value) + } +}) provide(IsFormInj, ref(false)) @@ -149,7 +155,7 @@ const clearCell = async (ctx: { row: number; col: number }) => { const { copy } = useClipboard() const makeEditable = (row: Row, col: ColumnType) => { - if (isPublicView || editEnabled || isView) { + if (isPublicView.value || editEnabled || isView) { return } if (!isPkAvail.value && !row.rowMeta.new) { diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts index 1e365cc54d..26820d311b 100644 --- a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts +++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts @@ -3,6 +3,7 @@ import type { ColumnType, GridColumnType, GridType } from 'nocodb-sdk' import type { Ref } from 'vue' import { useMetas } from './useMetas' import { useUIPermission } from './useUIPermission' +import { IsPublicInj } from '~/context' export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) | undefined>) { const { css, load: loadCss, unload: unloadCss } = useStyleTag('') @@ -13,6 +14,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) | const gridViewCols = ref>({}) const resizingCol = ref('') const resizingColWidth = ref('200px') + const isPublic = inject(IsPublicInj, ref(false)) const columns = computed(() => metas?.value?.[(view?.value as any)?.fk_model_id as string]?.columns) @@ -34,9 +36,9 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) | { deep: true, immediate: true }, ) - const loadGridViewColumns = async () => { - if (!view.value?.id) return - const colsData: GridColumnType[] = await $api.dbView.gridColumnsList(view.value.id) + const loadGridViewColumns = async (cols?: GridColumnType[] | undefined) => { + if (!view.value?.id && !cols) return + const colsData: GridColumnType[] = cols ?? (await $api.dbView.gridColumnsList(view.value.id)) gridViewCols.value = colsData.reduce>( (o, col) => ({ ...o, @@ -56,7 +58,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) | } // sync with server if allowed - if (isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) { + if (!isPublic.value && isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) { $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, { width, }) diff --git a/packages/nc-gui-v2/composables/useMetas.ts b/packages/nc-gui-v2/composables/useMetas.ts index 732f5393fe..8a780f1793 100644 --- a/packages/nc-gui-v2/composables/useMetas.ts +++ b/packages/nc-gui-v2/composables/useMetas.ts @@ -12,6 +12,14 @@ export function useMetas() { const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({})) const loadingState = useState>('metas-loading-state', () => ({})) + const setMeta = async (model: any) => { + metas.value = { + ...metas.value, + [model.id!]: model, + [model.title]: model, + } + } + const getMeta = async (tableIdOrTitle: string, force = false): Promise => { if (!tableIdOrTitle) return null /** wait until loading is finished if requesting same meta */ @@ -83,5 +91,5 @@ export function useMetas() { } } - return { getMeta, clearAllMeta, metas, removeMeta } + return { getMeta, clearAllMeta, metas, removeMeta, setMeta } } diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts new file mode 100644 index 0000000000..7200acdd23 --- /dev/null +++ b/packages/nc-gui-v2/composables/useSharedView.ts @@ -0,0 +1,22 @@ +import type { ColumnType, TableType, ViewType } from 'nocodb-sdk' +import { useNuxtApp } from '#app' + +export function useSharedView(viewId: string) { + const sharedView = ref() + const meta = computed(() => sharedView.value.model) + const columns = computed(() => sharedView.value?.model?.columns ?? []) + + const { $api } = useNuxtApp() + const { setMeta } = useMetas() + + const loadSharedView = async () => { + const viewMeta = await $api.public.sharedViewMetaGet(viewId) + sharedView.value = viewMeta + setMeta(viewMeta.model) + + const relatedMetas = { ...viewMeta.relatedMetas } + Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key])) + } + + return { sharedView, loadSharedView, meta, columns } +} diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts index 0be745f83c..2a33377ff6 100644 --- a/packages/nc-gui-v2/composables/useViewData.ts +++ b/packages/nc-gui-v2/composables/useViewData.ts @@ -1,7 +1,7 @@ import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk' import type { ComputedRef, Ref } from 'vue' import { message } from 'ant-design-vue' -import { NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports' +import { IsPublicInj, NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports' const formatData = (list: Record[]) => list.map((row) => ({ @@ -39,6 +39,7 @@ export function useViewData( const { project } = useProject() const { $api } = useNuxtApp() + const isPublic = inject(IsPublicInj, ref(false)) const selectedAllRecords = computed({ get() { @@ -59,6 +60,14 @@ export function useViewData( paginationData.value.totalRows = count } + const loadPublicData = async (params: Parameters['dbViewRow']['list']>[4] = {}) => { + const { data } = await $api.public.dataList(viewMeta?.value?.uuid, { + ...params, + }) + formattedData.value = formatData(data.list) + paginationData.value = data.pageInfo + } + const queryParams = computed(() => ({ offset: (paginationData.value?.page ?? 0) - 1, limit: paginationData.value?.pageSize ?? 25, @@ -92,7 +101,13 @@ export function useViewData( } const loadData = async (params: Parameters['dbViewRow']['list']>[4] = {}) => { + if (isPublic.value) { + loadPublicData(params) + return + } + if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return + const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, { ...params, where: where?.value, diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts index d955c93802..c9d3ce92e6 100644 --- a/packages/nc-gui-v2/context/index.ts +++ b/packages/nc-gui-v2/context/index.ts @@ -6,6 +6,7 @@ import type { Row } from '~/composables' import type { TabItem } from '~/composables/useTabs' export const ActiveCellInj: InjectionKey> = Symbol('active-cell') +export const IsPublicInj: InjectionKey> = Symbol('is-public') export const RowInj: InjectionKey> = Symbol('row') export const ColumnInj: InjectionKey> = Symbol('column-injection') export const MetaInj: InjectionKey> = Symbol('meta-injection') diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue new file mode 100644 index 0000000000..44f27701c5 --- /dev/null +++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue @@ -0,0 +1,30 @@ + + +