From 0b4555ada891d5abf3a33a339d7d05b7f2e82608 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 5 Sep 2022 16:51:04 +0300
Subject: [PATCH] fix: gallery view

-IsGalleryInj added

-changed IsGridInj to ref

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/cell/attachment/index.vue        | 17 +++++++++++++----
 .../nc-gui-v2/components/smartsheet/Form.vue    |  2 ++
 .../nc-gui-v2/components/smartsheet/Gallery.vue |  6 ++++--
 .../nc-gui-v2/components/smartsheet/Grid.vue    |  5 ++++-
 packages/nc-gui-v2/context/index.ts             |  3 ++-
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 5d9320f1cd..8c88a86b4e 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/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
+        }
       })
     }
   },
diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index d924b7a29f..6c5c9e30c3 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/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']
diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 7f224634eb..7d2ca2a2c5 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/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"
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index be428f1cae..831102d5d2 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/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)
 
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index e00505b803..a2463cfa08 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/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')