mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
1.8 KiB
80 lines
1.8 KiB
<template> |
|
<v-container fluid> |
|
<v-row> |
|
<v-col |
|
v-for="({row, rowMeta},rowIndex) in data" :key="rowIndex" class="col-md-4 col-lg-3 col-sm-6 col-12"> |
|
|
|
<v-hover v-slot:default="{hover}"> |
|
|
|
<v-card |
|
:elevation="hover ? 4 : 1" @click="$emit('expandForm', {row,rowIndex,rowMeta})"> |
|
|
|
|
|
<v-carousel |
|
:continuous="false" |
|
:cycle="true" |
|
:show-arrows="false" |
|
hide-delimiter-background |
|
delimiter-icon="mdi-minus" |
|
height="200" |
|
> |
|
<v-carousel-item |
|
v-for="(cover, i) in getCovers(row)" |
|
:key="i" |
|
> |
|
<v-img |
|
height="200" |
|
:src="cover.url" |
|
:alt="cover.title" |
|
></v-img> |
|
</v-carousel-item> |
|
</v-carousel> |
|
|
|
<v-card-title |
|
class="text-capitalize" |
|
v-text="row[primaryValueColumn]"></v-card-title> |
|
|
|
</v-card> |
|
</v-hover> |
|
</v-col> |
|
</v-row> |
|
</v-container> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: "galleryView", |
|
props: [ |
|
"nodes", |
|
"table", |
|
"showFields", |
|
"availableColumns", |
|
"meta", |
|
"data", |
|
'primaryValueColumn' |
|
], |
|
computed: { |
|
attachmentColumn() { |
|
return this.meta && this.meta.columns && this.meta.columns.find(c => c.uidt === "Attachment") |
|
} |
|
}, |
|
methods: { |
|
getCovers(row) { |
|
if (this.attachmentColumn |
|
&& row[this.attachmentColumn.cn] && row[this.attachmentColumn.cn][0] |
|
&& row[this.attachmentColumn.cn]) { |
|
try { |
|
return JSON.parse(row[this.attachmentColumn.cn]) |
|
} catch (e) { |
|
|
|
} |
|
} |
|
return [{url: 'https://via.placeholder.com/700?text=No%20image%20found'}] |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
|
|
</style>
|
|
|