Merge pull request #3501 from nocodb/fix/gallery-attachment-field

fix: gallery view

packages/nc-gui-v2/components/cell/attachment/index.vue

@@ -6,6 +6,7 @@ import Modal from './Modal.vue'
 import Carousel from './Carousel.vue'
 import {
   IsFormInj,
+  IsGalleryInj,
   inject,
   isImage,
   nextTick,
@@ -32,6 +33,8 @@ const emits = defineEmits<Emits>()
 
 const isForm = inject(IsFormInj, ref(false))
 
+const isGallery = inject(IsGalleryInj, ref(false))
+
 const attachmentCellRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
@@ -57,15 +60,21 @@ const currentCellRef = ref()
 watch(
   [() => rowIndex, isForm],
   () => {
-    if (!rowIndex && isForm.value) {
+    if (!rowIndex && isForm.value && isGallery.value) {
       currentCellRef.value = attachmentCellRef.value
     } else {
       nextTick(() => {
-        currentCellRef.value = cellRefs.value.reduceRight((cell, curr) => {
-          if (!Object.keys(cell).length && curr.dataset.key === `${rowIndex}${column.value.id}`) cell = curr
+        const nextCell = cellRefs.value.reduceRight((cell, curr) => {
+          if (!cell && curr.dataset.key === `${rowIndex}${column.value.id}`) cell = curr
 
           return cell
-        }, {} as HTMLTableDataCellElement)
+        }, undefined as HTMLTableDataCellElement | undefined)
+
+        if (!nextCell) {
+          currentCellRef.value = attachmentCellRef.value
+        } else {
+          currentCellRef.value = nextCell
+        }
       })
     }
   },

packages/nc-gui-v2/components/smartsheet/Form.vue

@@ -7,6 +7,7 @@ import type { Permission } from '~/composables/useUIPermission/rolePermissions'
 import {
   ActiveViewInj,
   IsFormInj,
+  IsGalleryInj,
   MetaInj,
   computed,
   extractSdkResponseErrorMsg,
@@ -25,6 +26,7 @@ import {
 } from '#imports'
 
 provide(IsFormInj, ref(true))
+provide(IsGalleryInj, ref(false))
 
 // todo: generate hideCols based on default values
 const hiddenCols = ['created_at', 'updated_at']

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

@@ -8,6 +8,7 @@ import {
   ChangePageInj,
   FieldsInj,
   IsFormInj,
+  IsGalleryInj,
   IsGridInj,
   MetaInj,
   OpenNewRecordFormHookInj,
@@ -42,7 +43,8 @@ const {
 const { isUIAllowed } = useUIPermission()
 
 provide(IsFormInj, ref(false))
-provide(IsGridInj, false)
+provide(IsGalleryInj, ref(true))
+provide(IsGridInj, ref(false))
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
 provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
@@ -140,7 +142,7 @@ openNewRecordFormHook?.on(async () => {
                   <div style="z-index: 1"></div>
                 </template>
                 <img
-                  v-for="(attachment, index) in attachments(record).filter((attachment) => attachment.url)"
+                  v-for="(attachment, index) in attachments(record)"
                   :key="`carousel-${record.row.id}-${index}`"
                   class="h-52"
                   :src="attachment.url"

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

@@ -8,6 +8,7 @@ import {
   ChangePageInj,
   FieldsInj,
   IsFormInj,
+  IsGalleryInj,
   IsGridInj,
   IsLockedInj,
   MetaInj,
@@ -98,7 +99,9 @@ onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
 
-provide(IsGridInj, true)
+provide(IsGalleryInj, ref(false))
+
+provide(IsGridInj, ref(true))
 
 provide(PaginationDataInj, paginationData)
 

packages/nc-gui-v2/context/index.ts

@@ -15,7 +15,8 @@ export const PaginationDataInj: InjectionKey<ReturnType<typeof useViewData>['pag
   Symbol('pagination-data-injection')
 export const ChangePageInj: InjectionKey<ReturnType<typeof useViewData>['changePage']> = Symbol('pagination-data-injection')
 export const IsFormInj: InjectionKey<Ref<boolean>> = Symbol('is-form-injection')
-export const IsGridInj: InjectionKey<boolean> = Symbol('is-grid-injection')
+export const IsGridInj: InjectionKey<Ref<boolean>> = Symbol('is-grid-injection')
+export const IsGalleryInj: InjectionKey<Ref<boolean>> = Symbol('is-gallery-injection')
 export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injection')
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')