From 8e6f67c2e05fcf3b306e0e671dd443fb5e73be70 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Sep 2023 19:22:59 +0800
Subject: [PATCH] fix(nc-gui): ListItem

---
 .../virtual-cell/components/ListItem.vue      | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index 097642c5f9..d86efbbdb3 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
@@ -1,6 +1,19 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
-import { IsFormInj, isImage, useAttachment } from '#imports'
+import {
+  type ComputedRef,
+  IsExpandedFormOpenInj,
+  IsFormInj,
+  IsPublicInj,
+  RowHeightInj,
+  computed,
+  inject,
+  isImage,
+  provide,
+  ref,
+  useAttachment,
+  useVModel,
+} from '#imports'
 import MaximizeIcon from '~icons/nc-icons/maximize'
 import LinkIcon from '~icons/nc-icons/link'
 
@@ -12,14 +25,15 @@ const props = defineProps<{
   isLoading: boolean
   isLinked: boolean
 }>()
+
 defineEmits(['expand'])
 
 provide(IsExpandedFormOpenInj, ref(true))
 
-const isForm = inject(IsFormInj, ref(false))
-
 provide(RowHeightInj, ref(1 as const))
 
+const isForm = inject(IsFormInj, ref(false))
+
 const row = useVModel(props, 'row')
 
 const isPublic = inject(IsPublicInj, ref(false))
@@ -35,7 +49,7 @@ interface Attachment {
 
 const attachments: ComputedRef<Attachment[]> = computed(() => {
   try {
-    if (props.attachment && props.row[props.attachment.title]) {
+    if (props.attachment && row.value[props.attachment.title]) {
       return typeof row.value[props.attachment.title] === 'string'
         ? JSON.parse(row.value[props.attachment.title])
         : row.value[props.attachment.title]
@@ -61,12 +75,12 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
     <div class="flex flex-row items-center justify-start w-full">
       <a-carousel v-if="attachment && attachments && attachments.length" autoplay class="!w-24 !h-24">
         <template #customPaging> </template>
-        <template v-for="(attachmen, index) in attachments">
+        <template v-for="(attachmentObj, index) in attachments">
           <LazyCellAttachmentImage
-            v-if="isImage(attachmen.title, attachmen.mimetype ?? attachmen.type)"
-            :key="`carousel-${attachmen.title}-${index}`"
+            v-if="isImage(attachmentObj.title, attachmentObj.mimetype ?? attachmentObj.type)"
+            :key="`carousel-${attachmentObj.title}-${index}`"
             class="!h-24 !w-24 object-cover !rounded-l-xl"
-            :srcs="getPossibleAttachmentSrc(attachmen)"
+            :srcs="getPossibleAttachmentSrc(attachmentObj)"
           />
         </template>
       </a-carousel>