refactor(nc-gui): move logic to useAttachment

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

@@ -12,6 +12,7 @@ import {
   nextTick,
   openLink,
   ref,
+  useAttachment,
   useDropZone,
   useSelectedCellKeyupListener,
   useSmartsheetRowStoreOrThrow,
@@ -42,12 +43,12 @@ const attachmentCellRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { appInfo } = useGlobal()
-
 const currentCellRef = ref<Element | undefined>(dropZoneInjection.value)
 
 const { cellRefs, isSharedForm } = useSmartsheetStoreOrThrow()!
 
+const { getAttachmentSrc, showFallback } = useAttachment()
+
 const {
   isPublic,
   isForm,
@@ -96,20 +97,6 @@ const { state: rowState } = useSmartsheetRowStoreOrThrow()
 
 const { isOverDropZone } = useDropZone(currentCellRef as any, onDrop)
 
-const getImgSrc = (item: Record<string, any>) => {
-  if (item.data) {
-    return item.data
-  } else if (item.path) {
-    return `${appInfo.value.ncSiteUrl}/${item.path}`
-  }
-  return item.url
-}
-
-const showFallback = (evt: any, item: Record<string, any>) => {
-  evt.onerror = null
-  evt.target.src = item.url
-}
-
 /** on new value, reparse our stored attachments */
 watch(
   () => modelValue,
@@ -236,14 +223,14 @@ 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) && getImgSrc(item)">
+            <template v-if="isImage(item.title, item.mimetype ?? item.type) && getAttachmentSrc(item)">
               <div class="nc-attachment flex items-center justify-center" @click.stop="selectedImage = item">
                 <LazyNuxtImg
                   quality="75"
                   placeholder
                   fit="cover"
                   :alt="item.title || `#${i}`"
-                  :src="getImgSrc(item)"
+                  :src="getAttachmentSrc(item)"
                   class="max-w-full max-h-full"
                   :onerror="(e) => showFallback(e, item)"
                 />

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

@@ -23,6 +23,7 @@ import {
   onMounted,
   provide,
   ref,
+  useAttachment,
   useViewData,
 } from '#imports'
 import type { Row as RowType } from '~/lib'
@@ -64,6 +65,8 @@ const route = useRoute()
 
 const router = useRouter()
 
+const { getAttachmentSrc, showFallback } = useAttachment()
+
 const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id))
 
 const coverImageColumn: any = $(
@@ -168,22 +171,6 @@ watch(view, async (nextView) => {
     await loadGalleryData()
   }
 })
-
-const { appInfo } = useGlobal()
-
-const getImgSrc = (item: Record<string, any>) => {
-  if (item.data) {
-    return item.data
-  } else if (item.path) {
-    return `${appInfo.value.ncSiteUrl}/${item.path}`
-  }
-  return item.url
-}
-
-const showFallback = (evt: any, item: Record<string, any>) => {
-  evt.onerror = null
-  evt.target.src = item.url
-}
 </script>
 
 <template>
@@ -221,7 +208,7 @@ const showFallback = (evt: any, item: Record<string, any>) => {
                   quality="90"
                   placeholder
                   class="h-52 object-contain"
-                  :src="getImgSrc(attachment)"
+                  :src="getAttachmentSrc(attachment)"
                   :onerror="(e) => showFallback(e, attachment)"
                 />
               </a-carousel>

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

@@ -17,6 +17,7 @@ import {
   onBeforeMount,
   onBeforeUnmount,
   provide,
+  useAttachment,
   useKanbanViewStoreOrThrow,
 } from '#imports'
 import type { Row as RowType } from '~/lib'
@@ -55,6 +56,8 @@ const route = useRoute()
 
 const router = useRouter()
 
+const { getAttachmentSrc, showFallback } = useAttachment()
+
 const {
   loadKanbanData,
   loadMoreKanbanData,
@@ -312,20 +315,6 @@ watch(view, async (nextView) => {
     }
   }
 })
-
-const getImgSrc = (item: Record<string, any>) => {
-  if (item.data) {
-    return item.data
-  } else if (item.path) {
-    return `${appInfo.ncSiteUrl}/${item.path}`
-  }
-  return item.url
-}
-
-const showFallback = (evt: any, item: Record<string, any>) => {
-  evt.onerror = null
-  evt.target.src = item.url
-}
 </script>
 
 <template>
@@ -476,7 +465,7 @@ const showFallback = (evt: any, item: Record<string, any>) => {
                                       quality="90"
                                       placeholder
                                       class="h-52 object-cover"
-                                      :src="getImgSrc(attachment)"
+                                      :src="getAttachmentSrc(attachment)"
                                       :onerror="(e) => showFallback(e, attachment)"
                                     />
                                   </a-carousel>