fallback to icon when no image (#414)

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -1,14 +1,16 @@
 <template>
   <v-card :ripple="false" class="mx-auto" hover :to="`/recipe/${slug}`" @click="$emit('selected')">
     <v-list-item three-line>
-      <v-list-item-avatar tile size="125" color="grey" class="v-mobile-img rounded-sm my-0 ml-n4">
-        <v-img :src="getImage(slug)" lazy-src=""></v-img
-      ></v-list-item-avatar>
+      <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0 ml-n4">
+        <v-img v-if="!fallBackImage" :src="getImage(slug)" @error="fallBackImage = true"></v-img>
+        <v-icon color="primary" class="icon-position" size="100">
+          mdi-silverware-variant
+        </v-icon>
+      </v-list-item-avatar>
       <v-list-item-content>
         <v-list-item-title class=" mb-1">{{ name }} </v-list-item-title>
         <v-list-item-subtitle> {{ description }} </v-list-item-subtitle>
         <div class="d-flex justify-center align-center">
-          <RecipeChips :truncate="true" :items="tags" :title="false" :limit="1" :small="true" :isCategory="false" />
           <v-rating
             color="secondary"
             class="ml-auto"
@@ -18,6 +20,7 @@
             size="15"
             :value="rating"
           ></v-rating>
+          <v-spacer></v-spacer>
           <ContextMenu :slug="slug" menu-icon="mdi-dots-horizontal" />
         </div>
       </v-list-item-content>
@@ -26,12 +29,10 @@
 </template>
 
 <script>
-import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
 import ContextMenu from "@/components/Recipe/ContextMenu";
 import { api } from "@/api";
 export default {
   components: {
-    RecipeChips,
     ContextMenu,
   },
   props: {
@@ -47,7 +48,11 @@ export default {
       default: true,
     },
   },
-
+  data() {
+    return {
+      fallBackImage: false,
+    };
+  },
   methods: {
     getImage(image) {
       return api.recipes.recipeSmallImage(image);

frontend/src/components/Recipe/RecipeCard.vue

@@ -7,7 +7,10 @@
       @click="$emit('click')"
       min-height="275"
     >
-      <v-img height="200" :src="getImage(slug)">
+      <v-img height="200" class="d-flex" :src="getImage(slug)" @error="fallBackImage = true">
+        <v-icon v-if="fallBackImage" color="primary" class="icon-position" size="200">
+          mdi-silverware-variant
+        </v-icon>
         <v-expand-transition v-if="description">
           <div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal  " style="height: 100%;">
             <v-card-text class="v-card--text-show white--text">
@@ -57,6 +60,11 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      fallBackImage: false,
+    };
+  },
   methods: {
     getImage(image) {
       return api.recipes.recipeSmallImage(image);
@@ -83,4 +91,12 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.icon-position {
+  opacity: 0.8;
+  display: flex !important;
+  position: relative;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
 </style>

frontend/src/components/UI/Dialogs/BackupDialog.vue

@@ -128,7 +128,6 @@ export default {
         templates: this.selectedTemplates,
       };
 
-      console.log(data);
 
       if (await api.backups.create(data)) {
         this.$emit("created");

frontend/src/components/UI/Dialogs/BaseDialog.vue

@@ -95,7 +95,6 @@ export default {
   },
   methods: {
     submitEvent() {
-      console.log("Submit");
       this.$emit("submit");
       this.submitted = true;
     },

frontend/src/pages/Admin/Profile/UserCard.vue

@@ -138,7 +138,7 @@ export default {
   },
 
   watch: {
-    user() {
+    userProfileImage() {
       this.hideImage = false;
     },
   },

frontend/src/pages/Recipe/ViewRecipe.vue

@@ -102,7 +102,6 @@ export default {
     this.jsonEditor = false;
     this.form = this.$route.query.edit === "true" && this.loggedIn;
 
-    console.log(this.$route.query.print);
     if (this.$route.query.print) {
       this.printPage();
       this.$router.push(this.$route.path);