Browse Source

code cleanup

pull/5248/head
Daniel Spaude 2 years ago
parent
commit
f281035348
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
  1. 94
      packages/nc-gui/components/smartsheet/SharedMapMarkerPopup.vue

94
packages/nc-gui/components/smartsheet/SharedMapMarkerPopup.vue

@ -2,36 +2,26 @@
import type { ColumnType, TableType } from 'nocodb-sdk' import type { ColumnType, TableType } from 'nocodb-sdk'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { ViewTypes, isVirtualCol } from 'nocodb-sdk' import { isVirtualCol } from 'nocodb-sdk'
import { import {
ActiveViewInj, ActiveViewInj,
ChangePageInj, ChangePageInj,
FieldsInj, FieldsInj,
IsFormInj, IsFormInj,
IsGalleryInj,
IsGridInj, IsGridInj,
MetaInj, MetaInj,
PaginationDataInj, PaginationDataInj,
ReloadRowDataHookInj, ReloadRowDataHookInj,
ReloadViewDataHookInj, ReloadViewDataHookInj,
ReloadViewMetaHookInj,
computed,
inject, inject,
isImage,
isLTAR, isLTAR,
nextTick,
onMounted, onMounted,
provide, provide,
ref, ref,
useAttachment,
useViewData, useViewData,
} from '#imports' } from '#imports'
import type { Row } from '~/lib' import type { Row } from '~/lib'
interface Attachment {
url: string
}
const props = defineProps<{ const props = defineProps<{
fields: ColumnType[] fields: ColumnType[]
row: Row row: Row
@ -39,31 +29,17 @@ const props = defineProps<{
const meta = inject(MetaInj, ref()) const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref()) const view = inject(ActiveViewInj, ref())
const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
const reloadViewDataHook = inject(ReloadViewDataHookInj) const reloadViewDataHook = inject(ReloadViewDataHookInj)
const { loadData, paginationData, loadGalleryData, galleryData, changePage } = useViewData(meta, view) const { loadData, paginationData, changePage } = useViewData(meta, view)
provide(IsFormInj, ref(false)) provide(IsFormInj, ref(false))
provide(IsGalleryInj, ref(true))
provide(IsGridInj, ref(false)) provide(IsGridInj, ref(false))
provide(PaginationDataInj, paginationData) provide(PaginationDataInj, paginationData)
provide(ChangePageInj, changePage) provide(ChangePageInj, changePage)
const fields = inject(FieldsInj, ref([])) const fields = inject(FieldsInj, ref([]))
const { getPossibleAttachmentSrc } = useAttachment()
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]
: {},
),
)
const isRowEmpty = (record: any, col: any) => { const isRowEmpty = (record: any, col: any) => {
const val = record.row[col.title] const val = record.row[col.title]
if (!val) return true if (!val) return true
@ -71,49 +47,16 @@ const isRowEmpty = (record: any, col: any) => {
return Array.isArray(val) && val.length === 0 return Array.isArray(val) && val.length === 0
} }
const attachments = (record: any): Attachment[] => {
try {
if (coverImageColumn?.title && record.row[coverImageColumn.title]) {
return typeof record.row[coverImageColumn.title] === 'string'
? JSON.parse(record.row[coverImageColumn.title])
: record.row[coverImageColumn.title]
}
return []
} catch (e) {
return []
}
}
const reloadAttachments = ref(false)
reloadViewMetaHook?.on(async () => {
await loadGalleryData()
reloadAttachments.value = true
nextTick(() => {
reloadAttachments.value = false
})
})
reloadViewDataHook?.on(async () => { reloadViewDataHook?.on(async () => {
await loadData() await loadData()
}) })
onMounted(async () => { onMounted(async () => {
await loadData() await loadData()
await loadGalleryData()
}) })
provide(ReloadRowDataHookInj, reloadViewDataHook) provide(ReloadRowDataHookInj, reloadViewDataHook)
watch(view, async (nextView) => {
if (nextView?.type === ViewTypes.GALLERY) {
await loadData()
await loadGalleryData()
}
})
const currentRow = toRef(props, 'row') const currentRow = toRef(props, 'row')
const { row } = useProvideSmartsheetRowStore(meta as Ref<TableType>, currentRow) const { row } = useProvideSmartsheetRowStore(meta as Ref<TableType>, currentRow)
@ -126,38 +69,7 @@ const { row } = useProvideSmartsheetRowStore(meta as Ref<TableType>, currentRow)
class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]" class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
:data-testid="`nc-shared-map-marker-popup-card-${row.row.id}`" :data-testid="`nc-shared-map-marker-popup-card-${row.row.id}`"
> >
<template v-if="galleryData?.fk_cover_image_col_id" #cover> <div v-for="col in fields" :key="`record-${row.row.id}-${col.id}`">
<a-carousel v-if="!reloadAttachments && attachments(row).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>
<template v-for="(attachment, index) in attachments(row)">
<LazyCellAttachmentImage
v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
:key="`carousel-${row.row.id}-${index}`"
class="h-52 object-contain"
:srcs="getPossibleAttachmentSrc(attachment)"
/>
</template>
</a-carousel>
<MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
</template>
<div v-for="col in fieldsWithoutCover" :key="`record-${row.row.id}-${col.id}`">
<div <div
v-if="!isRowEmpty(row, col) || isLTAR(col.uidt)" v-if="!isRowEmpty(row, col) || isLTAR(col.uidt)"
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"

Loading…
Cancel
Save