github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

geo map: work on popup

pull/5247/head
Daniel Spaude 2 years ago
parent
855a5d0c88
commit
b9a6374500
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
2 changed files with 169 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      packages/nc-gui/components.d.ts
  2. 230
      packages/nc-gui/components/smartsheet/MyPopupComponent.vue

1
packages/nc-gui/components.d.ts vendored
Unescape View File

@ -103,6 +103,7 @@ declare module '@vue/runtime-core' {
MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
MaterialSymbolsKeyboardReturn: typeof import('~icons/material-symbols/keyboard-return')['default']
MaterialSymbolsLightModeOutline: typeof import('~icons/material-symbols/light-mode-outline')['default']
MaterialSymbolsMobileFriendly: typeof import('~icons/material-symbols/mobile-friendly')['default']
MaterialSymbolsRocketLaunchOutline: typeof import('~icons/material-symbols/rocket-launch-outline')['default']
MaterialSymbolsSendOutline: typeof import('~icons/material-symbols/send-outline')['default']
MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']

230
packages/nc-gui/components/smartsheet/MyPopupComponent.vue
Unescape View File

@ -1,7 +1,11 @@
<script lang="ts" setup>
import type { ColumnType, TableType } from 'nocodb-sdk'
import { isVirtualCol } from 'nocodb-sdk'
// import { isVirtualCol } from 'nocodb-sdk'
import type { Ref } from 'vue'
// import type { Row } from '~/lib'
// const props =
import { ViewTypes, isVirtualCol } from 'nocodb-sdk'
import {
ActiveViewInj,
ChangePageInj,
@ -10,15 +14,11 @@ import {
IsGalleryInj,
IsGridInj,
MetaInj,
NavigateDir,
OpenNewRecordFormHookInj,
PaginationDataInj,
ReloadRowDataHookInj,
ReloadViewDataHookInj,
ReloadViewMetaHookInj,
computed,
createEventHook,
extractPkFromRow,
inject,
isImage,
isLTAR,
@ -29,13 +29,95 @@ import {
useAttachment,
useViewData,
} from '#imports'
// import type { Row } from '~/lib'
// const props =
import type { Row } from '~/lib'
interface Attachment {
url: string
}
const props = defineProps<{
fields: ColumnType[]
row: Row
}>()
const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref())
const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
const reloadViewDataHook = inject(ReloadViewDataHookInj)
const { loadData, paginationData, loadGalleryData, galleryData, changePage, addEmptyRow } = useViewData(meta, view)
provide(IsFormInj, ref(false))
provide(IsGalleryInj, ref(true))
provide(IsGridInj, ref(false))
provide(PaginationDataInj, paginationData)
provide(ChangePageInj, changePage)
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 val = record.row[col.title]
if (!val) return true
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 () => {
await loadData()
})
onMounted(async () => {
await loadData()
await loadGalleryData()
})
// provide view data reload hook as fallback to row data reload
provide(ReloadRowDataHookInj, reloadViewDataHook)
watch(view, async (nextView) => {
if (nextView?.type === ViewTypes.GALLERY) {
await loadData()
await loadGalleryData()
}
})
// defineProps({
// // popupIsOpen: {
// // type: Boolean,
@ -57,12 +139,12 @@ const props = defineProps<{
const currentRow = toRef(props, 'row')
const { meta } = useSmartsheetStoreOrThrow()
// const { meta } = useSmartsheetStoreOrThrow()
// const rowStore = useProvideSmartsheetRowStore(meta as Ref<TableType>, currentRow)
const { row } = useProvideSmartsheetRowStore(meta as Ref<TableType>, currentRow)
console.log('rowStore', row.value.row)
// console.log('rowStore', row.value.row)
// const { currentRow: row } = useSmartsheetRowStoreOrThrow()
// const cellValueByColum = (column: ColumnType) => {
@ -73,65 +155,89 @@ console.log('rowStore', row.value.row)
// set() {},
// }
// }
const isRowEmpty = (record: any, col: any) => {
const val = record.row[col.title]
if (!val) return true
return Array.isArray(val) && val.length === 0
}
</script>
<template>
<!-- <div v-if="popupIsOpen" ref="popupContainer"> -->
<div ref="popupContainer">
<!-- FOO: {{ JSON.stringify(rowStore.row._object.fields) }} -->
<!-- currenetRow: {{ JSON.stringify(currentRow) }} <br />
meta: {{ JSON.stringify(meta) }} <br /> -->
<!-- rowStore: {{ JSON.stringify(rowStore.row) }} -->
<!-- FOO
{{ JSON.stringify(row) }} -->
<div v-for="col in fields" :key="col.id">
<div
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"
>
<div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
<div class="w-full text-gray-600">
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
<LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
<LazySmartsheetRow :row="row">
<a-card
hoverable
class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
:data-testid="`nc-gallery-card-${row.row.id}`"
>
<template v-if="galleryData?.fk_cover_image_col_id" #cover>
<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
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"
>
<div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
<div class="w-full text-gray-600">
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
<LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
</div>
</div>
</div>
<div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
<LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :column="col" :row="row" />
<div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
<LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :column="col" :row="row" />
<LazySmartsheetCell v-else v-model="row.row[col.title]" :column="col" :edit-enabled="false" :read-only="true" />
<LazySmartsheetCell v-else v-model="row.row[col.title]" :column="col" :edit-enabled="false" :read-only="true" />
</div>
</div>
</div>
<!-- <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :column="col" :row="row" />
<LazySmartsheetCell v-else v-model="row.row[col.title]" :column="col" :edit-enabled="false" :read-only="true" /> -->
<!-- {{ JSON.stringify(column) }} -->
<!-- <LazySmartsheetCell v-else v-model="row.row[column.title]" :column="column" :edit-enabled="false" :read-only="true" /> -->
<!-- <LazySmartsheetVirtualCell
v-if="isVirtualCol(column)"
v-model="rowStore.row[column.title]"
:column="column"
:row="props.row"
/>
<LazySmartsheetCell
v-if="!isVirtualCol(column)"
v-model="rowStore.row[column.title]"
:column="column"
:edit-enabled="false"
:read-only="true"
/> -->
<!-- <LazyCellTextArea v-if="isTextArea(column)" v-model="cellValueByColum(column)" /> -->
</div>
<!-- <div>{{ popUpRow?.row.Title }}</div> -->
</div>
</a-card>
</LazySmartsheetRow>
<!-- <div ref="popupContainer">
<div v-for="col in fields" :key="col.id">
<div
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"
>
<div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
<div class="w-full text-gray-600">
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
<LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
</div>
</div>
<div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
<LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :column="col" :row="row" />
<LazySmartsheetCell v-else v-model="row.row[col.title]" :column="col" :edit-enabled="false" :read-only="true" />
</div>
</div>
</div>
</div> -->
</template>

Write Preview
Loading…
Cancel
Save