feature/favorite-recipes (#443)

* add favorites options

* bump dependencies

* add badges to all cards

* typo

* remove console.log

* fix site-loader viewport

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

frontend/src/components/Recipe/FavoriteBadge.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-btn
+    small
+    @click.prevent="toggleFavorite"
+    v-if="isFavorite || showAlways"
+    :color="isFavorite && buttonStyle ? 'secondary' : 'primary'"
+    :icon="!buttonStyle"
+    :fab="buttonStyle"
+  >
+    <v-icon :small="!buttonStyle" color="secondary">
+      {{ isFavorite ? "mdi-heart" : "mdi-heart-outline" }}
+    </v-icon>
+  </v-btn>
+</template>
+
+<script>
+import { api } from "@/api";
+export default {
+  props: {
+    slug: {
+      default: "",
+    },
+    showAlways: {
+      type: Boolean,
+      default: false,
+    },
+    buttonStyle: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    user() {
+      return this.$store.getters.getUserData;
+    },
+    isFavorite() {
+      return this.user.favoriteRecipes.indexOf(this.slug) !== -1;
+    },
+  },
+  methods: {
+    async toggleFavorite() {
+      if (!this.isFavorite) {
+        await api.users.addFavorite(this.user.id, this.slug);
+      } else {
+        await api.users.removeFavorite(this.user.id, this.slug);
+      }
+      this.$store.dispatch("requestUserData");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -23,6 +23,7 @@
           <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">
+            <FavoriteBadge v-if="loggedIn" :slug="slug" show-always />
             <v-rating
               color="secondary"
               class="ml-auto"
@@ -42,10 +43,12 @@
 </template>
 
 <script>
+import FavoriteBadge from "@/components/Recipe/FavoriteBadge";
 import ContextMenu from "@/components/Recipe/ContextMenu";
 import { api } from "@/api";
 export default {
   components: {
+    FavoriteBadge,
     ContextMenu,
   },
   props: {
@@ -71,6 +74,11 @@ export default {
       return api.recipes.recipeSmallImage(slug, this.image);
     },
   },
+  computed: {
+    loggedIn() {
+      return this.$store.getters.getIsLoggedIn;
+    },
+  },
 };
 </script>
 

frontend/src/components/Recipe/RecipeCard.vue

@@ -23,6 +23,7 @@
       </v-card-title>
 
       <v-card-actions>
+        <FavoriteBadge v-if="loggedIn" :slug="slug" show-always />
         <Rating :value="rating" :name="name" :slug="slug" :small="true" />
         <v-spacer></v-spacer>
         <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :isCategory="false" />
@@ -33,18 +34,14 @@
 </template>
 
 <script>
+import FavoriteBadge from "@/components/Recipe/FavoriteBadge";
 import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
 import ContextMenu from "@/components/Recipe/ContextMenu";
 import CardImage from "@/components/Recipe/CardImage";
 import Rating from "@/components/Recipe/Parts/Rating";
 import { api } from "@/api";
 export default {
-  components: {
-    RecipeChips,
-    ContextMenu,
-    Rating,
-    CardImage,
-  },
+  components: { FavoriteBadge, RecipeChips, ContextMenu, Rating, CardImage },
   props: {
     name: String,
     slug: String,
@@ -64,6 +61,11 @@ export default {
       fallBackImage: false,
     };
   },
+  computed: {
+    loggedIn() {
+      return this.$store.getters.getIsLoggedIn;
+    },
+  },
   methods: {
     getImage(slug) {
       return api.recipes.recipeSmallImage(slug, this.image);