timestrap-django

  1<template>
  2<div
  3  :id="[index ? 'card-' + index : '']"
  4  class="col-md-4 col-lg-3 mb-4"
  5  @dblclick="$emit('detail')">
  6  <div v-if="index !== null" class="card shadow-sm">
  7    <div v-if="delete_perm || change_perm" class="card-options">
  8      <button
  9        id="card-menu"
 10        class="btn btn-light btn-sm btn-icon shadow-sm dropdown-toggle text-muted"
 11        type="button"
 12        data-toggle="dropdown">
 13        <icon :icon="['fas', 'ellipsis-h']"/>
 14      </button>
 15      <div class="dropdown-menu dropdown-menu-right shadow">
 16        <button
 17          id="card-menu-change"
 18          class="dropdown-item"
 19          v-if="change_perm"
 20          @click.exact="$emit('edit')">
 21          Edit
 22        </button>
 23        <button
 24          id="card-menu-delete"
 25          class="dropdown-item"
 26          v-if="delete_perm"
 27          @click.exact="$emit('delete')">
 28          Delete
 29        </button>
 30      </div>
 31    </div>
 32
 33    <div class="card-body">
 34      <slot name="card-body"/>
 35    </div>
 36  </div>
 37  <div v-else-if="add_perm" class="card new" @click="$emit('modal')">
 38    <div class="card-body d-flex justify-content-center align-items-center">
 39      <div class="text-muted">
 40        <icon :icon="['fas', 'plus']" class="mr-1"/>
 41        New
 42      </div>
 43    </div>
 44  </div>
 45</div>
 46</template>
 47
 48
 49<script>
 50export default {
 51  data() {
 52    return {
 53      modal: false,
 54    }
 55  },
 56  props: {
 57    index: {
 58      type: Number,
 59      default: null,
 60    },
 61    delete_perm: {
 62      type: Object,
 63      default: null,
 64    },
 65    change_perm: {
 66      type: Object,
 67      default: null,
 68    },
 69    add_perm: {
 70      type: Object,
 71      default: null,
 72    },
 73  },
 74};
 75</script>
 76
 77
 78<style lang="scss" scoped>
 79.card {
 80  height: 15rem;
 81  cursor: pointer;
 82  -webkit-user-select: none;  // TODO: Not being added automatically?
 83  -moz-user-select: none;  // TODO: Not being added automatically?
 84  user-select: none;
 85
 86  .card-options {
 87    position: absolute;
 88    top: 1.25rem;
 89    right: 1.25rem;
 90  }
 91
 92  .dropdown-toggle {
 93    opacity: 0;
 94    transition: opacity 300ms;
 95  }
 96
 97  &:hover {
 98    background-color: #f8f9fa;
 99
100    .dropdown-toggle {
101      opacity: 1;
102    }
103  }
104
105  &.new {
106    opacity: .5;
107    transition: opacity 300ms, transform 300ms;
108
109    &:hover, &.edit {
110      opacity: 1;
111    }
112  }
113}
114</style>