|
|
|
@ -2,6 +2,7 @@ |
|
|
|
import { isVirtualCol } from 'nocodb-sdk' |
|
|
|
import { isVirtualCol } from 'nocodb-sdk' |
|
|
|
import { IsFormInj, isImage, useAttachment } from '#imports' |
|
|
|
import { IsFormInj, isImage, useAttachment } from '#imports' |
|
|
|
import MaximizeIcon from '~icons/nc-icons/maximize' |
|
|
|
import MaximizeIcon from '~icons/nc-icons/maximize' |
|
|
|
|
|
|
|
import LinkIcon from '~icons/nc-icons/link' |
|
|
|
|
|
|
|
|
|
|
|
const { row, fields, relatedTableDisplayValueProp, isLoading, isLinked, attachment } = defineProps<{ |
|
|
|
const { row, fields, relatedTableDisplayValueProp, isLoading, isLinked, attachment } = defineProps<{ |
|
|
|
row: any |
|
|
|
row: any |
|
|
|
@ -46,42 +47,40 @@ const attachments: Attachment[] = computed(() => { |
|
|
|
<a-card |
|
|
|
<a-card |
|
|
|
class="!border-1 group transition-all !rounded-xl relative !mb-2 !border-gray-200 hover:bg-gray-50" |
|
|
|
class="!border-1 group transition-all !rounded-xl relative !mb-2 !border-gray-200 hover:bg-gray-50" |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
|
'!bg-white !border-blue-500': isLoading, |
|
|
|
'!bg-white': isLoading, |
|
|
|
'!border-brand-500 !bg-brand-50 !border-2 !hover:bg-brand-50 !hover:border-brand-500': isLinked, |
|
|
|
' !border-1': isLinked, |
|
|
|
'!hover:border-gray-400': !isLinked, |
|
|
|
'!hover:border-gray-400': !isLinked, |
|
|
|
}" |
|
|
|
}" |
|
|
|
:body-style="{ padding: 0 }" |
|
|
|
:body-style="{ padding: 0 }" |
|
|
|
:hoverable="false" |
|
|
|
:hoverable="false" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="flex flex-row items-center gap-2 w-full"> |
|
|
|
<div class="flex flex-row items-center justify-start w-full"> |
|
|
|
<a-carousel |
|
|
|
<a-carousel v-if="attachment && attachments && attachments.length" autoplay class="!w-24 !h-24"> |
|
|
|
v-if="attachment && attachments && attachments.length" |
|
|
|
|
|
|
|
autoplay |
|
|
|
|
|
|
|
class="!w-24 border-1 bg-white border-gray-200 !rounded-md !h-24" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<template #customPaging> </template> |
|
|
|
<template #customPaging> </template> |
|
|
|
<template v-for="(attachmen, index) in attachments"> |
|
|
|
<template v-for="(attachmen, index) in attachments"> |
|
|
|
<LazyCellAttachmentImage |
|
|
|
<LazyCellAttachmentImage |
|
|
|
v-if="isImage(attachmen.title, attachmen.mimetype ?? attachmen.type)" |
|
|
|
v-if="isImage(attachmen.title, attachmen.mimetype ?? attachmen.type)" |
|
|
|
:key="`carousel-${attachmen.title}-${index}`" |
|
|
|
:key="`carousel-${attachmen.title}-${index}`" |
|
|
|
class="!h-24 !w-24 object-cover !rounded-md" |
|
|
|
class="!h-24 !w-24 object-cover !rounded-l-xl" |
|
|
|
:srcs="getPossibleAttachmentSrc(attachmen)" |
|
|
|
:srcs="getPossibleAttachmentSrc(attachmen)" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-carousel> |
|
|
|
</a-carousel> |
|
|
|
<div v-else-if="attachment" class="h-24 w-24 w-full !flex flex-row items-center justify-center"> |
|
|
|
<div v-else-if="attachment" class="h-24 w-24 w-full !flex flex-row items-center !rounded-l-xl justify-center"> |
|
|
|
<img class="object-contain h-24 w-24" src="~assets/icons/FileIconImageBox.png" /> |
|
|
|
<img class="object-contain h-24 w-24" src="~assets/icons/FileIconImageBox.png" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flex flex-col gap-1 flex-grow justify-center"> |
|
|
|
<div class="flex flex-col m-[.75rem] gap-1 flex-grow justify-center"> |
|
|
|
<div class="flex justify-between"> |
|
|
|
<div class="flex justify-between"> |
|
|
|
<span class="font-bold text-gray-800 ml-1 nc-display-value"> {{ row[relatedTableDisplayValueProp] }} </span> |
|
|
|
<span class="font-semibold text-gray-800 nc-display-value"> {{ row[relatedTableDisplayValueProp] }} </span> |
|
|
|
<MdiCheck |
|
|
|
<div v-if="isLinked" class="text-brand-500 text-0.875"> |
|
|
|
v-if="isLinked" |
|
|
|
<LinkIcon |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
|
'!group-hover:mr-8': fields.length === 0, |
|
|
|
'!group-hover:mr-8': fields.length === 0, |
|
|
|
}" |
|
|
|
}" |
|
|
|
class="w-6 h-6 !text-brand-500" |
|
|
|
class="w-4 h-4" |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
Linked |
|
|
|
|
|
|
|
</div> |
|
|
|
<MdiLoading |
|
|
|
<MdiLoading |
|
|
|
v-else-if="isLoading" |
|
|
|
v-else-if="isLoading" |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
|
@ -91,7 +90,7 @@ const attachments: Attachment[] = computed(() => { |
|
|
|
/> |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div v-if="fields.length > 0 && !isPublic && !isForm" class="flex flex-row gap-4 w-10/12"> |
|
|
|
<div v-if="fields.length > 0 && !isPublic && !isForm" class="flex ml-[-0.25rem] flex-row gap-4 w-10/12"> |
|
|
|
<div v-for="field in fields" :key="field.id" :class="attachment ? 'w-1/3' : 'w-1/4'"> |
|
|
|
<div v-for="field in fields" :key="field.id" :class="attachment ? 'w-1/3' : 'w-1/4'"> |
|
|
|
<div class="flex flex-col gap-[-1] max-w-72"> |
|
|
|
<div class="flex flex-col gap-[-1] max-w-72"> |
|
|
|
<LazySmartsheetHeaderVirtualCell |
|
|
|
<LazySmartsheetHeaderVirtualCell |
|
|
|
@ -121,7 +120,7 @@ const attachments: Attachment[] = computed(() => { |
|
|
|
v-if="!isForm && !isPublic" |
|
|
|
v-if="!isForm && !isPublic" |
|
|
|
type="text" |
|
|
|
type="text" |
|
|
|
size="lg" |
|
|
|
size="lg" |
|
|
|
class="!px-2 nc-expand-item !group-hover:block !hidden !absolute right-1 bottom-1" |
|
|
|
class="!px-2 nc-expand-item !group-hover:block !hidden !border-1 !shadow-sm !border-gray-200 !bg-white !absolute right-3 bottom-3" |
|
|
|
@click.stop="$emit('expand', row)" |
|
|
|
@click.stop="$emit('expand', row)" |
|
|
|
> |
|
|
|
> |
|
|
|
<MaximizeIcon class="w-4 h-4" /> |
|
|
|
<MaximizeIcon class="w-4 h-4" /> |
|
|
|
|
DarkPhoenix2704
1 year ago
