TandoorRecipes/vue/src/components/MealPlanCard.vue

<template>
    <div
        v-hover
        class="card cv-item meal-plan-card p-0"
        :key="value.id"
        :draggable="true"
        :style="`top:${top};max-height:${item_height}`"
        @dragstart="onDragItemStart(value, $event)"
        @click="onClickItem(value, $event)"
        :aria-grabbed="value == currentDragItem"
        :class="value.classes"
        @contextmenu.prevent="$emit('open-context-menu', $event, value)"
    >
        <div class="card-header p-1 text-center text-primary border-bottom-0" v-if="detailed" :style="`background-color: ${background_color}`">
            <span class="font-light text-center" v-if="entry.entry.meal_type.icon != null">{{ entry.entry.meal_type.icon }}</span>
            <span class="font-light d-none d-md-inline">{{ entry.entry.meal_type.name }}</span>
            <span v-if="entry.entry.shopping" class="font-light"><i class="fas fa-shopping-cart fa-xs float-left" v-b-tooltip.hover.top :title="$t('in_shopping')"/></span>
        </div>
        <div class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right p-0" v-if="detailed">
            <a>
                <div style="position: static">
                    <div class="dropdown b-dropdown position-static btn-group">
                        <button
                            aria-haspopup="true"
                            aria-expanded="false"
                            type="button"
                            class="btn btn-link text-decoration-none text-body pr-2 dropdown-toggle-no-caret"
                            @click.stop="$emit('open-context-menu', $event, value)"
                        >
                            <i class="fas fa-ellipsis-v fa-lg"></i>
                        </button>
                    </div>
                </div>
            </a>
        </div>
        <div class="card-header p-1 text-center" v-if="detailed" :style="`background-color: ${background_color}`">
            <span class="font-light">{{ title }}</span>
        </div>
        <b-img fluid class="card-img-bottom" :src="entry.entry.recipe.image" v-if="hasRecipe && detailed"></b-img>
        <b-img fluid class="card-img-bottom" :src="image_placeholder" v-if="detailed && ((!hasRecipe && entry.entry.note === '') || (hasRecipe && entry.entry.recipe.image === null))"></b-img>
        <div class="card-body p-1" v-if="detailed && entry.entry.recipe == null" :style="`background-color: ${background_color}`">
            <p>{{ entry.entry.note }}</p>
        </div>

        <div class="row p-1 flex-nowrap" v-if="!detailed" :style="`background-color: ${background_color}`">
            <div class="col-10 d-inline-block text-truncate" :style="`max-height:${item_height}`">
                <span class="font-light">{{ title }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "MealPlanCard.vue",
    components: {},
    props: {
        value: Object,
        weekStartDate: Date,
        top: String,
        detailed: Boolean,
        item_height: String,
    },
    data: function () {
        return {
            dateSelectionOrigin: null,
            currentDragItem: null,
            image_placeholder: window.IMAGE_PLACEHOLDER,
        }
    },
    mounted() {
    },
    computed: {
        entry: function () {
            return this.value.originalItem
        },
        title: function () {
            if (this.entry.entry.title != null && this.entry.entry.title !== "") {
                return this.entry.entry.title
            } else {
                return this.entry.entry.recipe_name
            }
        },
        hasRecipe: function () {
            return this.entry.entry.recipe != null
        },
        background_color: function () {
            if (this.entry.entry.meal_type.color != null && this.entry.entry.meal_type.color !== "") {
                return this.entry.entry.meal_type.color
            } else {
                return "#fff"
            }
        },
    },
    methods: {
        onDragItemStart(calendarItem, windowEvent) {
            this.$emit("dragstart", calendarItem, windowEvent)
            return true
        },
        onContextMenuOpen(calendarItem, windowEvent) {
            this.$emit("dragstart", calendarItem, windowEvent)
            return true
        },
        onClickItem(calendarItem, windowEvent) {
            this.$emit("click-item", calendarItem)
            return true
        },
    },
    directives: {
        hover: {
            inserted: (el) => {
                el.addEventListener("mouseenter", () => {
                    el.classList.add("shadow")
                })
                el.addEventListener("mouseleave", () => {
                    el.classList.remove("shadow")
                })
            },
        },
    },
}
</script>

<style scoped>
.meal-plan-card {
    background-color: #fff;
}

@media (max-width: 767.9px) {
    .meal-plan-card {
        font-size: 13px;
    }
}
</style>