refactor(nc-gui): use LazyCellAttachmentImage

packages/nc-gui/components/cell/attachment/Carousel.vue

@@ -9,7 +9,7 @@ const carouselRef = ref()
 
 const imageItems = computed(() => visibleItems.value.filter((item) => isImage(item.title, item.mimetype)))
 
-const { getAttachmentSrc, showFallback } = useAttachment()
+const { getPossibleAttachmentSrc } = useAttachment()
 
 /** navigate to previous image on button click */
 onKeyDown(
@@ -84,18 +84,15 @@ onClickOutside(carouselRef, () => {
 
           <template #customPaging="props">
             <a>
-              <LazyNuxtImg
-                quality="90"
-                placeholder
+              <LazyCellAttachmentImage
                 class="!block"
                 :alt="imageItems[props.i].title || `#${props.i}`"
-                :src="getAttachmentSrc(imageItems[props.i])"
-                :onerror="(e) => showFallback(e, imageItems[props.i])"
+                :src="getPossibleAttachmentSrc(imageItems[props.i])"
               />
             </a>
           </template>
-          <div v-for="item of imageItems" :key="getAttachmentSrc(item)">
-            <LazyNuxtImg :src="getAttachmentSrc(item)" class="max-w-70vw max-h-70vh" :onerror="(e) => showFallback(e, item)" />
+          <div v-for="(item, idx) of imageItems" :key="idx">
+            <LazyCellAttachmentImage :src="getPossibleAttachmentSrc(item)" class="max-w-70vw max-h-70vh" />
           </div>
         </a-carousel>
       </div>

packages/nc-gui/components/cell/attachment/Modal.vue

@@ -2,7 +2,7 @@
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
 import { useSortable } from './sort'
-import { isImage, openLink, ref, useAttachment, useDropZone, useUIPermission, watch } from '#imports'
+import { isImage, ref, useAttachment, useDropZone, useUIPermission, watch } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -38,7 +38,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
 const { isSharedForm } = useSmartsheetStoreOrThrow()
 
-const { getAttachmentSrc, showFallback } = useAttachment()
+const { getPossibleAttachmentSrc, openAttachment } = useAttachment()
 
 onKeyDown('Escape', () => {
   modalVisible.value = false
@@ -160,11 +160,10 @@ function onRemoveFileClick(title: any, i: number) {
               :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
               class="nc-attachment h-full w-full flex items-center justify-center overflow-hidden"
             >
-              <LazyNuxtImg
+              <LazyCellAttachmentImage
                 v-if="isImage(item.title, item.mimetype)"
-                :src="getAttachmentSrc(item)"
+                :src="getPossibleAttachmentSrc(item)"
                 class="max-w-full max-h-full margin-auto justify-center"
-                :onerror="(e) => showFallback(e, item)"
                 @click.stop="onClick(item)"
               />
 
@@ -173,10 +172,10 @@ function onRemoveFileClick(title: any, i: number) {
                 v-else-if="item.icon"
                 height="150"
                 width="150"
-                @click.stop="openLink(getAttachmentSrc(item))"
+                @click.stop="openAttachment(item)"
               />
 
-              <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openLink(getAttachmentSrc(item))" />
+              <IcOutlineInsertDriveFile v-else height="150" width="150" @click.stop="openAttachment(item)" />
             </div>
           </a-card>
 

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

@@ -10,7 +10,6 @@ import {
   inject,
   isImage,
   nextTick,
-  openLink,
   ref,
   useAttachment,
   useDropZone,
@@ -47,7 +46,7 @@ const currentCellRef = ref<Element | undefined>(dropZoneInjection.value)
 
 const { cellRefs, isSharedForm } = useSmartsheetStoreOrThrow()!
 
-const { getAttachmentSrc, showFallback } = useAttachment()
+const { getPossibleAttachmentSrc, openAttachment } = useAttachment()
 
 const {
   isPublic,
@@ -223,21 +222,13 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
               <div class="text-center w-full">{{ item.title }}</div>
             </template>
 
-            <template v-if="isImage(item.title, item.mimetype ?? item.type) && getAttachmentSrc(item)">
+            <template v-if="isImage(item.title, item.mimetype ?? item.type)">
               <div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item">
-                <LazyNuxtImg
-                  quality="75"
-                  placeholder
-                  fit="cover"
-                  :alt="item.title || `#${i}`"
-                  :src="getAttachmentSrc(item)"
-                  class="max-w-full max-h-full"
-                  :onerror="(e) => showFallback(e, item)"
-                />
+                <LazyCellAttachmentImage :alt="item.title || `#${i}`" :src="getPossibleAttachmentSrc(item)" />
               </div>
             </template>
 
-            <div v-else class="nc-attachment flex items-center justify-center" @click="openLink(item.url || item.data)">
+            <div v-else class="nc-attachment flex items-center justify-center" @click="openAttachment(item)">
               <component :is="FileIcon(item.icon)" v-if="item.icon" />
 
               <IcOutlineInsertDriveFile v-else />

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

@@ -65,7 +65,7 @@ const route = useRoute()
 
 const router = useRouter()
 
-const { getAttachmentSrc, showFallback } = useAttachment()
+const { getPossibleAttachmentSrc } = useAttachment()
 
 const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id))
 
@@ -202,14 +202,11 @@ watch(view, async (nextView) => {
                   <div style="z-index: 1"></div>
                 </template>
 
-                <LazyNuxtImg
+                <LazyCellAttachmentImage
                   v-for="(attachment, index) in attachments(record)"
                   :key="`carousel-${record.row.id}-${index}`"
-                  quality="90"
-                  placeholder
                   class="h-52 object-contain"
-                  :src="getAttachmentSrc(attachment)"
-                  :onerror="(e) => showFallback(e, attachment)"
+                  :src="getPossibleAttachmentSrc(attachment)"
                 />
               </a-carousel>
 

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

@@ -56,7 +56,7 @@ const route = useRoute()
 
 const router = useRouter()
 
-const { getAttachmentSrc, showFallback } = useAttachment()
+const { getPossibleAttachmentSrc } = useAttachment()
 
 const {
   loadKanbanData,
@@ -459,14 +459,11 @@ watch(view, async (nextView) => {
                                       <div style="z-index: 1"></div>
                                     </template>
 
-                                    <LazyNuxtImg
+                                    <LazyCellAttachmentImage
                                       v-for="(attachment, index) in attachments(record)"
                                       :key="`carousel-${record.row.id}-${index}`"
-                                      quality="90"
-                                      placeholder
                                       class="h-52 object-cover"
-                                      :src="getAttachmentSrc(attachment)"
-                                      :onerror="(e) => showFallback(e, attachment)"
+                                      :src="getPossibleAttachmentSrc(attachment)"
                                     />
                                   </a-carousel>