From e24496c5c9e86b84214ebbf0ce0785938e400be8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 02:06:20 +0200
Subject: [PATCH] fix(gui-v2): carousel not opening correct slide on start

---
 .../components/cell/attachment/Carousel.vue   | 20 ++++++++++++++++---
 .../components/cell/attachment/Modal.vue      |  2 ++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index 1e3ef02b14..a23bd257aa 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -1,16 +1,15 @@
 <script lang="ts" setup>
-import type { Carousel as AntCarousel } from 'ant-design-vue'
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
 import { isImage } from '~/utils'
-import { computed, ref } from '#imports'
+import { computed, onClickOutside, ref, watch } from '#imports'
 import MaterialSymbolsArrowCircleRightRounded from '~icons/material-symbols/arrow-circle-right-rounded'
 import MaterialSymbolsArrowCircleLeftRounded from '~icons/material-symbols/arrow-circle-left-rounded'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
 
-const carouselRef = ref<typeof AntCarousel>()
+const carouselRef = ref()
 
 const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
 
@@ -31,6 +30,21 @@ onKeyDown(
 function onSlideChange(index: number) {
   selectedImage.value = imageItems.value[index]
 }
+
+watch(
+  carouselRef,
+  () => {
+    carouselRef.value?.goTo(
+      imageItems.value.findIndex((item) => item === selectedImage.value),
+      true,
+    )
+  },
+  { immediate: true },
+)
+
+onClickOutside(carouselRef, () => {
+  selectedImage.value = false
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index ad685df8b8..9c1ff958fc 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -26,6 +26,7 @@ const {
   onDrop,
   downloadFile,
   updateModelValue,
+  selectedImage,
 } = useAttachmentCell()!
 
 // todo: replace placeholder var
@@ -102,6 +103,7 @@ onKeyDown('Escape', () => {
                 v-if="isImage(item.title, item.mimetype)"
                 :style="{ backgroundImage: `url('${item.url}')` }"
                 class="w-full h-full bg-contain bg-center bg-no-repeat"
+                @click.stop="() => (selectedImage = item) && (modalVisible = false)"
               />
 
               <component