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.
152 lines
4.4 KiB
152 lines
4.4 KiB
<template> |
|
<v-container fluid> |
|
<v-row class="align-stretch"> |
|
<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="{hover}"> |
|
<v-card |
|
class="h-100" |
|
:elevation="hover ? 4 : 1" |
|
@click="$emit('expandForm', {row,rowIndex,rowMeta})" |
|
> |
|
<v-carousel |
|
v-if="attachmentColumn" |
|
: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-carousel-item> |
|
</v-carousel> |
|
|
|
<!-- <v-card-title--> |
|
<!-- class="text-capitalize"--> |
|
<!-- v-text="row[primaryValueColumn]"--> |
|
<!-- />--> |
|
<v-card-text> |
|
<v-container> |
|
<v-row class=""> |
|
<v-col |
|
v-for="(col) in fields" |
|
v-show="showFields[col.alias|| col._cn]" |
|
:key="col.alias || col._cn" |
|
class="col-12 mt-1 mb-2 " |
|
> |
|
<label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize caption grey--text"> |
|
<virtual-header-cell |
|
v-if="col.virtual" |
|
:column="col" |
|
:nodes="nodes" |
|
:is-form="true" |
|
:meta="meta" |
|
/> |
|
<header-cell |
|
v-else |
|
:is-form="true" |
|
:value="col._cn" |
|
:column="col" |
|
/> |
|
|
|
</label> |
|
|
|
<virtual-cell |
|
v-if="col.virtual" |
|
ref="virtual" |
|
:column="col" |
|
:row="row" |
|
:nodes="nodes" |
|
:meta="meta" |
|
/> |
|
<table-cell |
|
v-else |
|
:value="row[col._cn]" |
|
:column="col" |
|
:sql-ui="sqlUi" |
|
class="xc-input body-2" |
|
:meta="meta" |
|
/> |
|
</v-col> |
|
</v-row> |
|
</v-container> |
|
</v-card-text> |
|
</v-card> |
|
</v-hover> |
|
</v-col> |
|
</v-row> |
|
</v-container> |
|
</template> |
|
|
|
<script> |
|
import VirtualHeaderCell from '../components/virtualHeaderCell' |
|
import HeaderCell from '../components/headerCell' |
|
import VirtualCell from '../components/virtualCell' |
|
import TableCell from '../components/cell' |
|
export default { |
|
name: 'GalleryView', |
|
components: { TableCell, VirtualCell, HeaderCell, VirtualHeaderCell }, |
|
props: [ |
|
'nodes', |
|
'table', |
|
'showFields', |
|
'availableColumns', |
|
'meta', |
|
'data', |
|
'primaryValueColumn', |
|
'showSystemFields', |
|
'sqlUi', |
|
'coverImageField' |
|
], |
|
computed: { |
|
attachmentColumn() { |
|
return this.coverImageField && this.meta && this.meta.columns && this.meta.columns.find(c => c._cn === this.coverImageField) |
|
}, |
|
fields() { |
|
if (this.availableColumns) { |
|
return this.availableColumns |
|
} |
|
|
|
const hideCols = ['created_at', 'updated_at'] |
|
|
|
if (this.showSystemFields) { |
|
return this.meta.columns || [] |
|
} else { |
|
return this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.cn) && |
|
!((this.meta.v || []).some(v => v.bt && v.bt.cn === c.cn)) |
|
) || [] |
|
} |
|
} |
|
}, |
|
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>
|
|
|