JamaCollectionTile.vue

<template>
  <v-hover>
    <template v-slot:default="{ hover }">
      <v-card
        :id="collection.title"
        draggable
        height="200"
        :title="collection.title"
        class="clickable d-flex flex-column justify-space-between collection-tile"
        :data-metas="metaAttrValues"
        :elevation="hover ? 24 : 1"
        @dragstart="dragStarted($event)"
        @click="select()"
        @dragover.prevent
        @drop.prevent="dropped($event)"
      >
        <v-img
          v-if="collection.represented_by"
          height="80"
          :src="collection.represented_by.urls.m"
        />
        <div v-else />

        <v-icon color="amber lighten-1">
          mdi-folder
        </v-icon>

        <v-card-title class="grey--text body-2">
          {{ label }}
        </v-card-title>
      </v-card>
    </template>
  </v-hover>
</template>

<script>

export default {
  name: "JamaCollectionTile",

  props: {
    collection: {type : Object, default : null},
  },

  data() {
    return {
      titleLimit: 25
    }
  },


  computed: {
    label() {
      return this.collection.title.length > this.titleLimit
          ? this.collection.title.slice(0, this.titleLimit) + '...'
          : this.collection.title
    },

    metaAttrValues() {
      return JSON.stringify(this.collection.metas.map((m) => m.meta.title + ':' + m.value))
    }
  },

  methods: {
    select() {
      this.$emit('collection-selected', this.collection)
    },

    dropped(evt) {
      try {
        let source = JSON.parse(evt.dataTransfer.getData("text/html"))
        if (source) {
          if(source.type === 'collection') {
            this.$emit('move-collection', source, this.collection);
          }
          else{
            this.$emit('move-resource', source, this.collection);
          }
        }
      } catch (e) {
        console.error(e);
      }
      return false;
    },
    dragStarted(evt) {
      evt.dataTransfer.setData('text/html',
          JSON.stringify({
            type: 'collection',
            id: this.collection.id,
            title: this.collection.title
          }));
    }
  }
}
</script>

<style lang="scss">

.jama-collection-card-text {
  position: relative;
}

.collection-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative !important;

  //.collection-avatar {
  //  position: absolute;
  //  width: 100%;
  //  height: 80%;
  //  display: flex;
  //  justify-content: center;
  //  align-items: center;
  //}

  .mdi-folder {
    font-size: 32px;
    position: relative;
    left : 0px;
    top:0px;
  }

  .v-icon {
    position: absolute;
    top: 0;
  }
}


</style>