|
|
@ -3,7 +3,17 @@ import { isVirtualCol } from 'nocodb-sdk' |
|
|
|
import { inject, provide, useViewData } from '#imports' |
|
|
|
import { inject, provide, useViewData } from '#imports' |
|
|
|
import Row from '~/components/smartsheet/Row.vue' |
|
|
|
import Row from '~/components/smartsheet/Row.vue' |
|
|
|
import type { Row as RowType } from '~/composables' |
|
|
|
import type { Row as RowType } from '~/composables' |
|
|
|
import { ActiveViewInj, ChangePageInj, FieldsInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReadonlyInj } from '~/context' |
|
|
|
import { |
|
|
|
|
|
|
|
ActiveViewInj, |
|
|
|
|
|
|
|
ChangePageInj, |
|
|
|
|
|
|
|
FieldsInj, |
|
|
|
|
|
|
|
IsFormInj, |
|
|
|
|
|
|
|
IsGridInj, |
|
|
|
|
|
|
|
MetaInj, |
|
|
|
|
|
|
|
OpenNewRecordFormHookInj, |
|
|
|
|
|
|
|
PaginationDataInj, |
|
|
|
|
|
|
|
ReadonlyInj, |
|
|
|
|
|
|
|
} from '~/context' |
|
|
|
import ImageIcon from '~icons/mdi/file-image-box' |
|
|
|
import ImageIcon from '~icons/mdi/file-image-box' |
|
|
|
|
|
|
|
|
|
|
|
interface Attachment { |
|
|
|
interface Attachment { |
|
|
@ -13,12 +23,21 @@ interface Attachment { |
|
|
|
const meta = inject(MetaInj) |
|
|
|
const meta = inject(MetaInj) |
|
|
|
const view = inject(ActiveViewInj) |
|
|
|
const view = inject(ActiveViewInj) |
|
|
|
const reloadViewDataHook = inject(ReloadViewDataHookInj) |
|
|
|
const reloadViewDataHook = inject(ReloadViewDataHookInj) |
|
|
|
|
|
|
|
const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook()) |
|
|
|
|
|
|
|
|
|
|
|
const expandedFormDlg = ref(false) |
|
|
|
const expandedFormDlg = ref(false) |
|
|
|
const expandedFormRow = ref<RowType>() |
|
|
|
const expandedFormRow = ref<RowType>() |
|
|
|
const expandedFormRowState = ref<Record<string, any>>() |
|
|
|
const expandedFormRowState = ref<Record<string, any>>() |
|
|
|
|
|
|
|
|
|
|
|
const { loadData, paginationData, formattedData: data, loadGalleryData, galleryData, changePage } = useViewData(meta, view as any) |
|
|
|
const { |
|
|
|
|
|
|
|
loadData, |
|
|
|
|
|
|
|
paginationData, |
|
|
|
|
|
|
|
formattedData: data, |
|
|
|
|
|
|
|
loadGalleryData, |
|
|
|
|
|
|
|
galleryData, |
|
|
|
|
|
|
|
changePage, |
|
|
|
|
|
|
|
addEmptyRow, |
|
|
|
|
|
|
|
} = useViewData(meta, view as any) |
|
|
|
|
|
|
|
|
|
|
|
const { isUIAllowed } = useUIPermission() |
|
|
|
const { isUIAllowed } = useUIPermission() |
|
|
|
|
|
|
|
|
|
|
@ -30,7 +49,15 @@ provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable')) |
|
|
|
|
|
|
|
|
|
|
|
const fields = inject(FieldsInj, ref([])) |
|
|
|
const fields = inject(FieldsInj, ref([])) |
|
|
|
|
|
|
|
|
|
|
|
const coverImageColumn = $(computed(() => fields.value.find((col) => col.id === galleryData.value?.fk_cover_image_col_id))) |
|
|
|
const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id)) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const coverImageColumn: any = $( |
|
|
|
|
|
|
|
computed(() => |
|
|
|
|
|
|
|
meta?.value.columnsById |
|
|
|
|
|
|
|
? meta.value.columnsById[galleryData.value?.fk_cover_image_col_id as keyof typeof meta.value.columnsById] |
|
|
|
|
|
|
|
: {}, |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
watch( |
|
|
|
[meta, view], |
|
|
|
[meta, view], |
|
|
@ -52,14 +79,21 @@ const isRowEmpty = (record: any, col: any) => { |
|
|
|
|
|
|
|
|
|
|
|
const attachments = (record: any): Array<Attachment> => { |
|
|
|
const attachments = (record: any): Array<Attachment> => { |
|
|
|
try { |
|
|
|
try { |
|
|
|
return JSON.parse(record.row[coverImageColumn?.title]) ?? [] |
|
|
|
return coverImageColumn?.title && record.row[coverImageColumn.title] ? JSON.parse(record.row[coverImageColumn.title]) : [] |
|
|
|
} catch (e) { |
|
|
|
} catch (e) { |
|
|
|
return [] |
|
|
|
return [] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const reloadAttachments = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
reloadViewDataHook?.on(async () => { |
|
|
|
reloadViewDataHook?.on(async () => { |
|
|
|
await loadData() |
|
|
|
await loadData() |
|
|
|
|
|
|
|
await loadGalleryData() |
|
|
|
|
|
|
|
reloadAttachments.value = true |
|
|
|
|
|
|
|
nextTick(() => { |
|
|
|
|
|
|
|
reloadAttachments.value = false |
|
|
|
|
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const expandForm = (row: RowType, state?: Record<string, any>) => { |
|
|
|
const expandForm = (row: RowType, state?: Record<string, any>) => { |
|
|
@ -68,20 +102,43 @@ const expandForm = (row: RowType, state?: Record<string, any>) => { |
|
|
|
expandedFormRowState.value = state |
|
|
|
expandedFormRowState.value = state |
|
|
|
expandedFormDlg.value = true |
|
|
|
expandedFormDlg.value = true |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const expandFormClick = async (e: MouseEvent, row: RowType) => { |
|
|
|
|
|
|
|
const target = e.target as HTMLElement |
|
|
|
|
|
|
|
if (target && !target.closest('.gallery-carousel')) { |
|
|
|
|
|
|
|
expandForm(row) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
openNewRecordFormHook?.on(async () => { |
|
|
|
|
|
|
|
const newRow = await addEmptyRow() |
|
|
|
|
|
|
|
expandForm(newRow) |
|
|
|
|
|
|
|
}) |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="flex flex-col h-full w-full"> |
|
|
|
<div class="flex flex-col h-full w-full overflow-auto"> |
|
|
|
<div class="nc-gallery-container min-h-0 flex-1 grid grid-cols-4 gap-4 my-4 px-3 overflow-auto"> |
|
|
|
<div class="nc-gallery-container grid w-full min-h-0 gap-2 my-4 px-3"> |
|
|
|
<div v-for="(record, recordIndex) in data" :key="recordIndex" class="flex flex-col" @click="expandForm(record)"> |
|
|
|
<div v-for="record in data" :key="`record-${record.row.id}`"> |
|
|
|
<Row :row="record"> |
|
|
|
<Row :row="record"> |
|
|
|
<a-card hoverable class="!rounded-lg h-full"> |
|
|
|
<a-card hoverable class="!rounded-lg h-full overflow-hidden break-all" @click="expandFormClick($event, record)"> |
|
|
|
<template #cover> |
|
|
|
<template #cover> |
|
|
|
<a-carousel v-if="attachments(record).length !== 0" autoplay> |
|
|
|
<a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows> |
|
|
|
|
|
|
|
<template #customPaging> |
|
|
|
|
|
|
|
<a> |
|
|
|
|
|
|
|
<div class="pt-[12px]"><div></div></div> |
|
|
|
|
|
|
|
</a> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<template #prevArrow> |
|
|
|
|
|
|
|
<div style="z-index: 1"></div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<template #nextArrow> |
|
|
|
|
|
|
|
<div style="z-index: 1"></div> |
|
|
|
|
|
|
|
</template> |
|
|
|
<img |
|
|
|
<img |
|
|
|
v-for="(attachment, index) in attachments(record)" |
|
|
|
v-for="(attachment, index) in attachments(record).filter((attachment) => attachment.url)" |
|
|
|
:key="index" |
|
|
|
:key="`carousel-${record.row.id}-${index}`" |
|
|
|
class="h-52 rounded-t-lg" |
|
|
|
class="h-52" |
|
|
|
:src="attachment.url" |
|
|
|
:src="attachment.url" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</a-carousel> |
|
|
|
</a-carousel> |
|
|
@ -89,8 +146,8 @@ const expandForm = (row: RowType, state?: Record<string, any>) => { |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
<div |
|
|
|
v-for="(col, colIndex) in fields" |
|
|
|
v-for="col in fieldsWithoutCover" |
|
|
|
:key="colIndex" |
|
|
|
:key="`record-${record.row.id}-${col.id}`" |
|
|
|
class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full" |
|
|
|
class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5"> |
|
|
|
<div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5"> |
|
|
@ -112,6 +169,7 @@ const expandForm = (row: RowType, state?: Record<string, any>) => { |
|
|
|
</Row> |
|
|
|
</Row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="flex-1" /> |
|
|
|
<SmartsheetPagination /> |
|
|
|
<SmartsheetPagination /> |
|
|
|
<SmartsheetExpandedForm |
|
|
|
<SmartsheetExpandedForm |
|
|
|
v-if="expandedFormRow && expandedFormDlg" |
|
|
|
v-if="expandedFormRow && expandedFormDlg" |
|
|
@ -125,6 +183,45 @@ const expandForm = (row: RowType, state?: Record<string, any>) => { |
|
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
<style scoped> |
|
|
|
.nc-gallery-container { |
|
|
|
.nc-gallery-container { |
|
|
|
overflow: auto; |
|
|
|
grid-auto-rows: 1fr; |
|
|
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
:depp(.slick-dots li button) { |
|
|
|
|
|
|
|
background-color: black; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.ant-carousel.gallery-carousel :deep(.slick-dots) { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
height: auto; |
|
|
|
|
|
|
|
bottom: 0px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.ant-carousel.gallery-carousel :deep(.slick-dots li div > div) { |
|
|
|
|
|
|
|
background: #000; |
|
|
|
|
|
|
|
border: 0; |
|
|
|
|
|
|
|
border-radius: 1px; |
|
|
|
|
|
|
|
color: transparent; |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
display: block; |
|
|
|
|
|
|
|
font-size: 0; |
|
|
|
|
|
|
|
height: 3px; |
|
|
|
|
|
|
|
opacity: .3; |
|
|
|
|
|
|
|
outline: none; |
|
|
|
|
|
|
|
padding: 0; |
|
|
|
|
|
|
|
transition: all .5s; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.ant-carousel.gallery-carousel :deep(.slick-dots li.slick-active div > div) { |
|
|
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.ant-carousel.gallery-carousel :deep(.slick-prev) { |
|
|
|
|
|
|
|
left: 0; |
|
|
|
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
top: 12px; |
|
|
|
|
|
|
|
width: 50%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.ant-carousel.gallery-carousel :deep(.slick-next) { |
|
|
|
|
|
|
|
right: 0; |
|
|
|
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
top: 12px; |
|
|
|
|
|
|
|
width: 50%; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|