|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import Draggable from 'vuedraggable' |
|
|
|
|
import { UITypes, ViewTypes, isVirtualCol } from 'nocodb-sdk' |
|
|
|
|
import { ViewTypes, isVirtualCol } from 'nocodb-sdk' |
|
|
|
|
import { |
|
|
|
|
ActiveViewInj, |
|
|
|
|
FieldsInj, |
|
|
|
@ -16,7 +16,6 @@ import {
|
|
|
|
|
iconMap, |
|
|
|
|
inject, |
|
|
|
|
isImage, |
|
|
|
|
isLTAR, |
|
|
|
|
onBeforeUnmount, |
|
|
|
|
provide, |
|
|
|
|
useAttachment, |
|
|
|
@ -56,6 +55,8 @@ const expandedFormRow = ref<RowType>()
|
|
|
|
|
|
|
|
|
|
const expandedFormRowState = ref<Record<string, any>>() |
|
|
|
|
|
|
|
|
|
provide(RowHeightInj, ref(1 as const)) |
|
|
|
|
|
|
|
|
|
const deleteStackVModel = ref(false) |
|
|
|
|
|
|
|
|
|
const stackToBeDeleted = ref('') |
|
|
|
@ -107,7 +108,9 @@ const hasEditPermission = computed(() => isUIAllowed('dataEdit'))
|
|
|
|
|
|
|
|
|
|
const fields = inject(FieldsInj, ref([])) |
|
|
|
|
|
|
|
|
|
const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== kanbanMetaData.value?.fk_cover_image_col_id)) |
|
|
|
|
const fieldsWithoutDisplay = computed(() => fields.value.filter((f) => !isPrimary(f))) |
|
|
|
|
|
|
|
|
|
const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fields.value.includes(c)) ?? null) |
|
|
|
|
|
|
|
|
|
const coverImageColumn: any = computed(() => |
|
|
|
|
meta.value?.columnsById |
|
|
|
@ -209,6 +212,8 @@ const expandedFormOnRowIdDlg = computed({
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const expandFormClick = async (e: MouseEvent, row: RowType) => { |
|
|
|
|
const target = e.target as HTMLElement |
|
|
|
|
if (target.closest('.arrow') || target.closest('.slick-dots')) return |
|
|
|
|
if (e.target as HTMLElement) { |
|
|
|
|
expandForm(row) |
|
|
|
|
} |
|
|
|
@ -380,6 +385,11 @@ watch(
|
|
|
|
|
immediate: true, |
|
|
|
|
}, |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
const getRowId = (row: RowType) => { |
|
|
|
|
const pk = extractPkFromRow(row.row, meta.value!.columns!) |
|
|
|
|
return pk ? `row-${pk}` : '' |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
@ -425,7 +435,7 @@ watch(
|
|
|
|
|
<!-- Non Collapsed Stacks --> |
|
|
|
|
<a-card |
|
|
|
|
v-if="!stack.collapsed" |
|
|
|
|
:key="stack.id" |
|
|
|
|
:key="`${stack.id}-${stackIdx}`" |
|
|
|
|
class="mx-4 !bg-gray-100 flex flex-col w-80 h-full !rounded-xl overflow-y-hidden" |
|
|
|
|
:class="{ |
|
|
|
|
'not-draggable': stack.title === null || isLocked || isPublic || !hasEditPermission, |
|
|
|
@ -516,95 +526,123 @@ watch(
|
|
|
|
|
@end="(e) => e.target.classList.remove('grabbing')" |
|
|
|
|
@change="onMove($event, stack.title)" |
|
|
|
|
> |
|
|
|
|
<template #item="{ element: record }"> |
|
|
|
|
<template #item="{ element: record, index }"> |
|
|
|
|
<div class="nc-kanban-item py-2 pl-3 pr-2"> |
|
|
|
|
<LazySmartsheetRow :row="record"> |
|
|
|
|
<a-card |
|
|
|
|
hoverable |
|
|
|
|
:key="`${getRowId(record)}-${index}`" |
|
|
|
|
class="!rounded-lg h-full border-gray-200 border-1 group overflow-hidden break-all max-w-[450px] shadow-sm hover:shadow-md cursor-pointer" |
|
|
|
|
:body-style="{ padding: '0px' }" |
|
|
|
|
:data-stack="stack.title" |
|
|
|
|
class="!rounded-xl h-full overflow-hidden break-all max-w-[450px]" |
|
|
|
|
:data-testid="`nc-gallery-card-${record.row.id}`" |
|
|
|
|
:class="{ |
|
|
|
|
'not-draggable': isLocked || !hasEditPermission || isPublic, |
|
|
|
|
'!cursor-default': isLocked || !hasEditPermission || isPublic, |
|
|
|
|
}" |
|
|
|
|
:body-style="{ padding: '10px' }" |
|
|
|
|
@click="expandFormClick($event, record)" |
|
|
|
|
@contextmenu="showContextMenu($event, record)" |
|
|
|
|
> |
|
|
|
|
<template v-if="kanbanMetaData?.fk_cover_image_col_id" #cover> |
|
|
|
|
<a-carousel |
|
|
|
|
v-if="!reloadAttachments && attachments(record).length" |
|
|
|
|
autoplay |
|
|
|
|
class="gallery-carousel" |
|
|
|
|
arrows |
|
|
|
|
> |
|
|
|
|
<template #customPaging> |
|
|
|
|
<a> |
|
|
|
|
<div class="pt-[12px]"> |
|
|
|
|
<div></div> |
|
|
|
|
<template v-if="!reloadAttachments && attachments(record).length"> |
|
|
|
|
<a-carousel |
|
|
|
|
:key="attachments(record).reduce((acc, curr) => acc + curr?.path, '')" |
|
|
|
|
class="gallery-carousel !border-b-1 !border-gray-200" |
|
|
|
|
> |
|
|
|
|
<template #customPaging> |
|
|
|
|
<a> |
|
|
|
|
<div class="pt-[12px]"> |
|
|
|
|
<div></div> |
|
|
|
|
</div> |
|
|
|
|
</a> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template #prevArrow> |
|
|
|
|
<div class="z-10 arrow"> |
|
|
|
|
<MdiChevronLeft |
|
|
|
|
class="text-gray-700 w-6 h-6 absolute left-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</a> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template #prevArrow> |
|
|
|
|
<div style="z-index: 1"></div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template #nextArrow> |
|
|
|
|
<div style="z-index: 1"></div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template v-for="(attachment, index) in attachments(record)"> |
|
|
|
|
<LazyCellAttachmentImage |
|
|
|
|
v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)" |
|
|
|
|
:key="`carousel-${record.row.id}-${index}`" |
|
|
|
|
class="h-52 object-cover" |
|
|
|
|
:srcs="getPossibleAttachmentSrc(attachment)" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
</a-carousel> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<component :is="iconMap.imagePlaceholder" v-else class="w-full h-48 my-4 text-cool-gray-200" /> |
|
|
|
|
<template #nextArrow> |
|
|
|
|
<div class="z-10 arrow"> |
|
|
|
|
<MdiChevronRight |
|
|
|
|
class="text-gray-700 w-6 h-6 absolute right-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template v-for="attachment in attachments(record)"> |
|
|
|
|
<LazyCellAttachmentImage |
|
|
|
|
v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)" |
|
|
|
|
:key="attachment.path" |
|
|
|
|
class="h-52 object-cover" |
|
|
|
|
:srcs="getPossibleAttachmentSrc(attachment)" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
</a-carousel> |
|
|
|
|
</template> |
|
|
|
|
<div |
|
|
|
|
v-else |
|
|
|
|
class="h-52 w-full !flex flex-row !border-b-1 !border-gray-200 items-center justify-center" |
|
|
|
|
> |
|
|
|
|
<img class="object-contain w-[48px] h-[48px]" src="~assets/icons/FileIconImageBox.png" /> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<div |
|
|
|
|
v-for="col in fieldsWithoutCover" |
|
|
|
|
:key="`record-${record.row.id}-${col.id}`" |
|
|
|
|
class="flex flex-col rounded-lg w-full" |
|
|
|
|
> |
|
|
|
|
<div v-if="!isRowEmpty(record, col) || isLTAR(col.uidt, col.colOptions)"> |
|
|
|
|
<!-- Smartsheet Header (Virtual) Cell --> |
|
|
|
|
<div class="flex flex-row w-full justify-start pt-2"> |
|
|
|
|
<div class="w-full text-gray-400"> |
|
|
|
|
<h2 v-if="displayField" class="text-base mt-3 mx-3 font-bold"> |
|
|
|
|
<LazySmartsheetVirtualCell |
|
|
|
|
v-if="isVirtualCol(displayField)" |
|
|
|
|
v-model="record.row[displayField.title]" |
|
|
|
|
class="!text-gray-600" |
|
|
|
|
:column="displayField" |
|
|
|
|
:row="record" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetCell |
|
|
|
|
v-else |
|
|
|
|
v-model="record.row[displayField.title]" |
|
|
|
|
class="!text-gray-600" |
|
|
|
|
:column="displayField" |
|
|
|
|
:edit-enabled="false" |
|
|
|
|
:read-only="true" |
|
|
|
|
/> |
|
|
|
|
</h2> |
|
|
|
|
|
|
|
|
|
<div v-for="col in fieldsWithoutDisplay" :key="`record-${record.row.id}-${col.id}`"> |
|
|
|
|
<div class="flex flex-col first:mt-3 ml-2 !pr-3.5 !mb-[0.75rem] rounded-lg w-full"> |
|
|
|
|
<div class="flex flex-row w-full justify-start scale-75"> |
|
|
|
|
<div class="w-full pb-1 text-gray-300"> |
|
|
|
|
<LazySmartsheetHeaderVirtualCell |
|
|
|
|
v-if="isVirtualCol(col)" |
|
|
|
|
:column="col" |
|
|
|
|
:hide-menu="true" |
|
|
|
|
:hide-icon="true" |
|
|
|
|
/> |
|
|
|
|
<LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" /> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" :hide-icon="true" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- Smartsheet (Virtual) Cell --> |
|
|
|
|
<div |
|
|
|
|
class="flex flex-row w-full items-center justify-start" |
|
|
|
|
:class="{ '!ml-[-12px] pl-3': col.uidt === UITypes.SingleSelect }" |
|
|
|
|
v-if="!isRowEmpty(record, col)" |
|
|
|
|
class="flex flex-row w-full text-gray-700 px-1 mt-[-0.25rem] items-center justify-start" |
|
|
|
|
> |
|
|
|
|
<LazySmartsheetVirtualCell |
|
|
|
|
v-if="col.title && isVirtualCol(col)" |
|
|
|
|
v-if="isVirtualCol(col)" |
|
|
|
|
v-model="record.row[col.title]" |
|
|
|
|
class="text-sm pt-1 pl-5" |
|
|
|
|
:column="col" |
|
|
|
|
:row="record" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetCell |
|
|
|
|
v-else-if="col.title" |
|
|
|
|
v-else |
|
|
|
|
v-model="record.row[col.title]" |
|
|
|
|
class="text-sm pt-1 pl-7.25" |
|
|
|
|
:column="col" |
|
|
|
|
:edit-enabled="false" |
|
|
|
|
:read-only="true" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div v-else class="flex flex-row w-full h-[1.375rem] pl-1 items-center justify-start">-</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</a-card> |
|
|
|
@ -755,4 +793,37 @@ watch(
|
|
|
|
|
transform-origin: left top 0px; |
|
|
|
|
transition: left 0.2s ease-in-out 0s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.slick-dots li button) { |
|
|
|
|
@apply !bg-black; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ant-carousel.gallery-carousel :deep(.slick-dots) { |
|
|
|
|
@apply !w-auto absolute h-auto bottom-[-15px] absolute h-auto; |
|
|
|
|
height: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ant-carousel.gallery-carousel :deep(.slick-dots li div > div) { |
|
|
|
|
@apply rounded-full border-0 cursor-pointer block opacity-100 p-0 outline-none transition-all duration-500 text-transparent h-2 w-2 bg-[#d9d9d9]; |
|
|
|
|
font-size: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ant-carousel.gallery-carousel :deep(.slick-dots li.slick-active div > div) { |
|
|
|
|
@apply bg-brand-500 opacity-100; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ant-carousel.gallery-carousel :deep(.slick-dots li) { |
|
|
|
|
@apply !w-auto; |
|
|
|
|
} |
|
|
|
|
.ant-carousel.gallery-carousel :deep(.slick-prev) { |
|
|
|
|
@apply left-0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ant-carousel.gallery-carousel :deep(.slick-next) { |
|
|
|
|
@apply right-0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.slick-slide) { |
|
|
|
|
@apply !pointer-events-none; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|