meal plan style improvements

vue3/src/components/display/MealPlanCalendarItem.vue

@@ -1,39 +1,39 @@
 <template>
-    <div class="card cv-item meal-plan-card p-0"
-         :style="{'top': itemTop, 'height': itemHeight, 'border-color': mealPlan.mealType.color}"
-         :key="value.id"
-         :class="value.classes"
+    <v-card class="card cv-item pa-0" hover
+            :style="{'top': itemTop, 'height': itemHeight, 'border-color': mealPlan.mealType.color}"
+            :key="value.id"
+            :class="value.classes"
     >
-
-        <div class="d-flex flex-row align-items-center">
-            <div class="flex-column">
-                <img class="" style="object-fit: cover" :style="{'height': itemHeight, 'width': itemHeight}" :src="mealPlan.recipe.image"
-                     v-if="mealPlan.recipe != undefined && detailedItems"/>
-                <img class="" style="object-fit: cover" :style="{'height': itemHeight, 'width': itemHeight}" src="../../assets/recipe_no_image.svg"
-                     v-if="detailedItems && ((mealPlan.recipe == undefined && mealPlan.note === '') || (mealPlan.recipe != undefined && mealPlan.recipe.image === null))"/>
-            </div>
-            <div class="flex-column flex-grow-0 align-middle justify-content-center">
-                <div class="card-body p-0 pl-1 align-middle">
+        <v-card-text class="pa-0">
+            <div class="d-flex flex-row align-items-center">
+                <div class="flex-column">
+                    <recipe-image :height="itemHeight" :width="itemHeight" :recipe="mealPlan.recipe"></recipe-image>
+                </div>
+                <div class="flex-column flex-grow-0">
+                    <div class="card-body pl-1 pa-1">
 
                     <span class="font-light" :class="{'two-line-text': detailedItems,'one-line-text': !detailedItems,}">
-                       <i class="fas fa-shopping-cart fa-xs float-left"  v-if="mealPlan.shopping"/>
+                       <i class="fas fa-shopping-cart fa-xs float-left" v-if="mealPlan.shopping"/>
                         {{ itemTitle }}</span>
+                    </div>
                 </div>
             </div>
-        </div>
 
-    </div>
+        </v-card-text>
+
+    </v-card>
 </template>
 
 <script setup lang="ts">
 
 import {computed, PropType} from "vue";
 import {IMealPlanNormalizedCalendarItem} from "@/types/MealPlan";
+import RecipeImage from "@/components/display/RecipeImage.vue";
 
 
 let props = defineProps({
     value: {type: {} as PropType<IMealPlanNormalizedCalendarItem>, required: true},
-    itemHeight: {type: String, default: '2.6rem'},
+    itemHeight: {type: String,},
     itemTop: {type: String,},
     detailedItems: {type: Boolean, default: true}
 })
@@ -52,6 +52,13 @@ const itemTitle = computed(() => {
     }
 })
 
+const itemImage = computed(() => {
+    if (mealPlan.value.recipe != undefined && mealPlan.value.recipe.image != undefined && props.detailedItems){
+        return mealPlan.value.recipe.image
+    } else {
+        return recipeDefaultImage
+    }
+})
 
 </script>
 

vue3/src/components/display/RecipeImage.vue

@@ -0,0 +1,30 @@
+<template>
+    <v-img :cover="cover" :style="{'height': height, 'width': width,}" :src="image" alt="Recipe Image"/>
+</template>
+
+<script setup lang="ts">
+
+import {computed, PropType} from "vue";
+import {Recipe, RecipeOverview} from "@/openapi";
+import recipeDefaultImage from '../../assets/recipe_no_image.svg'
+
+const props = defineProps({
+    recipe: {type: {} as PropType<Recipe|RecipeOverview|undefined>, required: false, default: undefined},
+    height: {type: String},
+    width: {type: String},
+    cover: {type: Boolean, default: true}
+})
+
+const image = computed(() => {
+    if(props.recipe != undefined && props.recipe.image != undefined){
+        return props.recipe.image
+    } else {
+        return recipeDefaultImage
+    }
+})
+
+</script>
+
+<style scoped>
+
+</style>