From 53e97c5315945f0764606dd793d43cd472946eba Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Thu, 20 May 2021 19:48:29 -0800
Subject: [PATCH] fallback to icon when no image (#414)

Co-authored-by: hay-kot <hay-kot@pm.me>
---
 .../components/Recipe/MobileRecipeCard.vue    | 19 ++++++++++++-------
 frontend/src/components/Recipe/RecipeCard.vue | 18 +++++++++++++++++-
 .../components/UI/Dialogs/BackupDialog.vue    |  1 -
 .../src/components/UI/Dialogs/BaseDialog.vue  |  1 -
 .../Admin/ManageUsers/TheSignUpTable.vue      |  2 +-
 frontend/src/pages/Admin/Profile/UserCard.vue |  2 +-
 frontend/src/pages/Recipe/ViewRecipe.vue      |  1 -
 7 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Recipe/MobileRecipeCard.vue b/frontend/src/components/Recipe/MobileRecipeCard.vue
index 32bc163303ee..6dc9b2c08823 100644
--- a/frontend/src/components/Recipe/MobileRecipeCard.vue
+++ b/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);
diff --git a/frontend/src/components/Recipe/RecipeCard.vue b/frontend/src/components/Recipe/RecipeCard.vue
index ded883e0f071..d84aa9565b47 100644
--- a/frontend/src/components/Recipe/RecipeCard.vue
+++ b/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>
diff --git a/frontend/src/components/UI/Dialogs/BackupDialog.vue b/frontend/src/components/UI/Dialogs/BackupDialog.vue
index 6789154c46d2..3bd3d04162a9 100644
--- a/frontend/src/components/UI/Dialogs/BackupDialog.vue
+++ b/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");
diff --git a/frontend/src/components/UI/Dialogs/BaseDialog.vue b/frontend/src/components/UI/Dialogs/BaseDialog.vue
index c928f23334f5..0a83ce0dfa8c 100644
--- a/frontend/src/components/UI/Dialogs/BaseDialog.vue
+++ b/frontend/src/components/UI/Dialogs/BaseDialog.vue
@@ -95,7 +95,6 @@ export default {
   },
   methods: {
     submitEvent() {
-      console.log("Submit");
       this.$emit("submit");
       this.submitted = true;
     },
diff --git a/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue b/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
index 6610935c2003..9130595a403b 100644
--- a/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
+++ b/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
@@ -70,7 +70,7 @@
       <v-data-table :headers="headers" :items="links" sort-by="calories">
         <template v-slot:item.token="{ item }">
           {{ `${baseURL}/sign-up/${item.token}` }}
-          <TheCopyButton :copy-text="`${baseURL}/sign-up/${item.token}`"/>
+          <TheCopyButton :copy-text="`${baseURL}/sign-up/${item.token}`" />
         </template>
         <template v-slot:item.admin="{ item }">
           <v-btn small :color="item.admin ? 'success' : 'error'" text>
diff --git a/frontend/src/pages/Admin/Profile/UserCard.vue b/frontend/src/pages/Admin/Profile/UserCard.vue
index 5995fe51df50..a134228364c0 100644
--- a/frontend/src/pages/Admin/Profile/UserCard.vue
+++ b/frontend/src/pages/Admin/Profile/UserCard.vue
@@ -138,7 +138,7 @@ export default {
   },
 
   watch: {
-    user() {
+    userProfileImage() {
       this.hideImage = false;
     },
   },
diff --git a/frontend/src/pages/Recipe/ViewRecipe.vue b/frontend/src/pages/Recipe/ViewRecipe.vue
index d1d31564e1fa..198e0cb9e5fd 100644
--- a/frontend/src/pages/Recipe/ViewRecipe.vue
+++ b/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);