Merge pull request #6450 from nocodb/fix/gellery

Fix: shared view gallery

packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue

@@ -4,8 +4,6 @@ import { ViewTypes } from 'nocodb-sdk'
 
 const { $e } = useNuxtApp()
 
-const router = useRouter()
-
 const { refreshCommandPalette } = useCommandPalette()
 const viewsStore = useViewsStore()
 const { views } = storeToRefs(viewsStore)

packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@@ -11,7 +11,6 @@ import {
   ProjectRoleInj,
   ToggleDialogInj,
   extractSdkResponseErrorMsg,
-  isElementInvisible,
   openLink,
   storeToRefs,
   useProjects,

packages/nc-gui/components/dashboard/TreeView/ViewsList.vue

@@ -51,8 +51,6 @@ const views = computed(() => viewsByTable.value.get(table.value.id!)?.filter((v)
 
 const { api } = useApi()
 
-const router = useRouter()
-
 const { refreshCommandPalette } = useCommandPalette()
 
 const { addUndo, defineModelScope } = useUndoRedo()

packages/nc-gui/components/dlg/ViewCreate.vue

@@ -4,7 +4,7 @@ import type { Form as AntForm, SelectProps } from 'ant-design-vue'
 import { capitalize } from '@vue/runtime-core'
 import type { FormType, GalleryType, GridType, KanbanType, MapType, TableType, ViewType } from 'nocodb-sdk'
 import { UITypes, ViewTypes } from 'nocodb-sdk'
-import { computed, message, nextTick, onBeforeMount, reactive, ref, unref, useApi, useI18n, useVModel, watch } from '#imports'
+import { computed, message, nextTick, onBeforeMount, reactive, ref, useApi, useI18n, useVModel, watch } from '#imports'
 
 interface Props {
   modelValue: boolean

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -73,7 +73,7 @@ const { getPossibleAttachmentSrc } = useAttachment()
 
 const fieldsWithoutDisplay = computed(() => fields.value.filter((f) => !isPrimary(f)))
 
-const displayField = computed(() => meta.value?.columns?.find((c) => c.pv) ?? null)
+const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fields.value.includes(c)) ?? null)
 
 const coverImageColumn: any = computed(() =>
   meta.value?.columnsById
@@ -124,13 +124,9 @@ const attachments = (record: any): Attachment[] => {
 }
 
 const expandForm = (row: RowType, state?: Record<string, any>) => {
-  if (isPublic.value) {
-    return
-  }
-
   const rowId = extractPkFromRow(row.row, meta.value!.columns!)
 
-  if (rowId) {
+  if (rowId && !isPublic.value) {
     router.push({
       query: {
         ...route.query,
@@ -248,10 +244,9 @@ watch(
         <div v-for="(record, rowIndex) in data" :key="`record-${record.row.id}`">
           <LazySmartsheetRow :row="record">
             <a-card
-              class="!rounded-lg h-full border-gray-200 border-1 group overflow-hidden break-all max-w-[450px] shadow-sm hover:shadow-md"
+              class="!rounded-lg h-full border-gray-200 border-1 group overflow-hidden break-all max-w-[450px] shadow-sm hover:shadow-md cursor-pointer"
               :body-style="{ padding: '0px' }"
               :data-testid="`nc-gallery-card-${record.row.id}`"
-              :style="isPublic ? { cursor: 'default' } : { cursor: 'pointer' }"
               @click="expandFormClick($event, record)"
               @contextmenu="showContextMenu($event, { row: rowIndex })"
             >
@@ -299,7 +294,7 @@ watch(
                   <img class="object-contain w-[48px] h-[48px]" src="~assets/icons/FileIconImageBox.png" />
                 </div>
               </template>
-              <h2 v-if="displayField" class="text-base mt-6 mx-3 font-bold">
+              <h2 v-if="displayField" class="text-base mt-3 mx-3 font-bold">
                 <LazySmartsheetVirtualCell
                   v-if="isVirtualCol(displayField)"
                   v-model="record.row[displayField.title]"
@@ -319,7 +314,7 @@ watch(
               </h2>
 
               <div v-for="col in fieldsWithoutDisplay" :key="`record-${record.row.id}-${col.id}`">
-                <div class="flex flex-col ml-2 !pr-3.5 !mb-[0.75rem] rounded-lg w-full">
+                <div class="flex flex-col first:mt-3 ml-2 !pr-3.5 !mb-[0.75rem] rounded-lg w-full">
                   <div class="flex flex-row w-full justify-start scale-75">
                     <div class="w-full pb-1 text-gray-300">
                       <LazySmartsheetHeaderVirtualCell

packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@@ -2,6 +2,7 @@
 import { message } from 'ant-design-vue'
 import type { ViewType } from 'nocodb-sdk'
 import {
+  IsPublicInj,
   ReloadRowDataHookInj,
   iconMap,
   isMac,
@@ -20,6 +21,8 @@ const route = useRoute()
 
 const { meta, isSqlView } = useSmartsheetStoreOrThrow()
 
+const isPublic = inject(IsPublicInj, ref(false))
+
 const { commentsDrawer, displayValue, primaryKey, save: _save, loadRow, deleteRowById } = useExpandedFormStoreOrThrow()
 
 const { isNew, syncLTARRefs, state } = useSmartsheetRowStoreOrThrow()
@@ -98,7 +101,7 @@ const onConfirmDeleteRowClick = async () => {
     </h5>
 
     <div class="flex-1" />
-    <a-tooltip placement="bottom">
+    <a-tooltip v-if="!isPublic" placement="bottom">
       <template #title>
         <!-- todo: i18n -->
         <div class="text-center w-full">Copy record URL</div>

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -8,6 +8,7 @@ import {
   FieldsInj,
   IsExpandedFormOpenInj,
   IsKanbanInj,
+  IsPublicInj,
   MetaInj,
   ReloadRowDataHookInj,
   computedInject,
@@ -57,6 +58,8 @@ const meta = toRef(props, 'meta')
 
 const router = useRouter()
 
+const isPublic = inject(IsPublicInj, ref(false))
+
 const { isUIAllowed } = useRoles()
 
 // override cell click hook to avoid unexpected behavior at form fields
@@ -360,6 +363,7 @@ export default {
                   :column="col"
                   :edit-enabled="true"
                   :active="true"
+                  :read-only="isPublic"
                   @update:model-value="changedColumns.add(col.title)"
                 />
               </LazySmartsheetDivDataCell>
@@ -401,6 +405,7 @@ export default {
                     :column="col"
                     :edit-enabled="true"
                     :active="true"
+                    :read-only="isPublic"
                     @update:model-value="changedColumns.add(col.title)"
                   />
                 </LazySmartsheetDivDataCell>

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

@@ -316,7 +316,7 @@ useMenuCloseOnEsc(open)
     <template #overlay>
       <div class="p-4 pr-0 bg-white w-90 rounded-2xl nc-table-toolbar-menu" data-testid="nc-fields-menu" @click.stop>
         <div
-          v-if="!filterQuery && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
+          v-if="!filterQuery && !isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
           class="flex flex-col gap-y-2 pr-6 mb-6"
         >
           <div class="flex text-sm select-none">Select cover image field</div>

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

@@ -36,8 +36,6 @@ const { metas, getMeta } = useMetas()
 
 useSidebar('nc-right-sidebar')
 
-const isPublic = inject(IsPublicInj, ref(false))
-
 const activeTab = toRef(props, 'activeTab')
 
 const fields = ref<ColumnType[]>([])

packages/nc-gui/composables/useExpandedFormStore.ts

@@ -25,8 +25,6 @@ import {
 import type { Row } from '#imports'
 
 const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
-  const { loadKanbanData, addOrEditStackRow } = useKanbanViewStoreOrThrow()
-
   const { $e, $state, $api } = useNuxtApp()
 
   const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
@@ -121,6 +119,13 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     return $state.user?.value?.email === email
   }
 
+  const loadKanbanData = async () => {
+    if (activeView.value?.type === ViewTypes.KANBAN) {
+      const { loadKanbanData: _loadKanbanData } = useKanbanViewStoreOrThrow()
+      await _loadKanbanData()
+    }
+  }
+
   const saveComment = async () => {
     try {
       if (!row.value || !comment.value) return
@@ -180,9 +185,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
             redo: {
               fn: async (rowData: any) => {
                 await $api.dbTableRow.create('noco', project.value.id as string, meta.value.id, { ...pkData, ...rowData })
-                if (activeView.value?.type === ViewTypes.KANBAN) {
-                  await loadKanbanData()
-                }
+                await loadKanbanData()
                 reloadTrigger?.trigger()
               },
               args: [clone(insertObj)],
@@ -199,9 +202,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
                 if (res.message) {
                   throw new Error(res.message)
                 }
-                if (activeView.value?.type === ViewTypes.KANBAN) {
-                  await loadKanbanData()
-                }
+
+                await loadKanbanData()
                 reloadTrigger?.trigger()
               },
               args: [id],
@@ -233,9 +235,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
               redo: {
                 fn: async (id: string, data: Record<string, any>) => {
                   await $api.dbTableRow.update(NOCO, project.value.id as string, meta.value.id, encodeURIComponent(id), data)
-                  if (activeView.value?.type === ViewTypes.KANBAN) {
-                    await loadKanbanData()
-                  }
+                  await loadKanbanData()
+
                   reloadTrigger?.trigger()
                 },
                 args: [id, clone(updateOrInsertObj)],
@@ -243,9 +244,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
               undo: {
                 fn: async (id: string, data: Record<string, any>) => {
                   await $api.dbTableRow.update(NOCO, project.value.id as string, meta.value.id, encodeURIComponent(id), data)
-                  if (activeView.value?.type === ViewTypes.KANBAN) {
-                    await loadKanbanData()
-                  }
+                  await loadKanbanData()
                   reloadTrigger?.trigger()
                 },
                 args: [id, clone(undoObject)],
@@ -265,6 +264,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       }
 
       if (activeView.value?.type === ViewTypes.KANBAN) {
+        const { addOrEditStackRow } = useKanbanViewStoreOrThrow()
         addOrEditStackRow(row.value, isNewRow)
       }
 

packages/nocodb/src/services/public-datas.service.ts

@@ -27,7 +27,8 @@ export class PublicDatasService {
     password?: string;
     query: any;
   }) {
-    const view = await View.getByUUID(param.sharedViewUuid);
+    const { sharedViewUuid, password, query = {} } = param;
+    const view = await View.getByUUID(sharedViewUuid);
 
     if (!view) NcError.notFound('Not found');
     if (
@@ -39,7 +40,7 @@ export class PublicDatasService {
       NcError.notFound('Not found');
     }
 
-    if (view.password && view.password !== param.password) {
+    if (view.password && view.password !== password) {
       return NcError.forbidden(ErrorMessages.INVALID_SHARED_VIEW_PASSWORD);
     }
 
@@ -55,24 +56,23 @@ export class PublicDatasService {
       dbDriver: await NcConnectionMgrv2.get(base),
     });
 
-    const listArgs: any = { ...param.query };
+    const { ast, dependencyFields } = await getAst({
+      model,
+      query: {},
+      view,
+    });
+
+    const listArgs: any = { ...query, ...dependencyFields };
     try {
       listArgs.filterArr = JSON.parse(listArgs.filterArrJson);
     } catch (e) {}
     try {
       listArgs.sortArr = JSON.parse(listArgs.sortArrJson);
     } catch (e) {}
-
     let data = [];
     let count = 0;
 
     try {
-      const { ast } = await getAst({
-        query: param.query,
-        model,
-        view,
-      });
-
       data = await nocoExecute(
         ast,
         await baseModel.list(listArgs),