<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" :ripple="!isLocked" @click="!isLocked && $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.title]" :key="col.title" class="col-12 mt-1 mb-2 " > <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey--text"> <virtual-header-cell v-if="isVirtualCol(col)" :column="col" :nodes="nodes" :is-form="true" :meta="meta" /> <header-cell v-else :is-form="true" :value="col.title" :column="col" /> </label> <virtual-cell v-if="isVirtualCol(col)" ref="virtual" :column="col" :row="row" :nodes="nodes" :meta="meta" /> <table-cell v-else :value="row[col.title]" :column="col" :sql-ui="sqlUi" :is-locked="isLocked" 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 { isVirtualCol } from 'nocodb-sdk' 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', 'viewId', 'isLocked' ], data() { return { galleryView: {} } }, computed: { attachmentColumn() { return this.coverImageField && this.meta && this.meta.columns && this.meta.columns.find(c => c.id === 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.title) && !((this.meta.v || []).some(v => v.bt && v.bt.title === c.title)) ) || [] } } }, watch: { async coverImageField(v) { if (this.galleryView && v !== this.galleryView.fk_cover_image_col_id) { (await this.$api.dbView.galleryUpdate(this.viewId, { ...this.galleryView, fk_cover_image_col_id: v })) } } }, created() { this.loadView() }, methods: { isVirtualCol, async loadView() { this.galleryView = (await this.$api.dbView.galleryRead(this.viewId)) this.$emit('update:coverImageField', this.galleryView.fk_cover_image_col_id) }, getCovers(row) { if (this.attachmentColumn && row[this.attachmentColumn.title] && row[this.attachmentColumn.title][0] && row[this.attachmentColumn.title]) { try { return JSON.parse(row[this.attachmentColumn.title]) } catch (e) { } } return [{ url: 'https://via.placeholder.com/700?text=No%20image%20found' }] } } } </script> <style scoped> </style>