nocodb/packages/nc-gui/components/project/spreadsheet/views/GalleryView.vue

<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>