From 289eceab710d35fbea701f2fb5ca647ccf34c7a6 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Fri, 2 Apr 2021 22:26:34 -0800
Subject: [PATCH] add categories to cards

---
 frontend/src/components/Recipe/RecipeCard.vue | 18 ++++++++++++++++--
 .../Recipe/RecipeViewer/RecipeChips.vue       | 19 ++++++++++++++-----
 frontend/src/components/UI/CardSection.vue    |  7 ++++---
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Recipe/RecipeCard.vue b/frontend/src/components/Recipe/RecipeCard.vue
index b71cf9308..2890dc094 100644
--- a/frontend/src/components/Recipe/RecipeCard.vue
+++ b/frontend/src/components/Recipe/RecipeCard.vue
@@ -5,6 +5,7 @@
       :elevation="hover ? 12 : 2"
       :to="route ? `/recipe/${slug}` : ''"
       @click="$emit('click')"
+      min-height="275"
     >
       <v-img height="200" :src="getImage(image)">
         <v-expand-transition v-if="description">
@@ -25,9 +26,9 @@
         </div>
       </v-card-title>
 
-      <v-card-actions class="">
+      <v-card-actions>
         <v-rating
-          class="mr-2"
+          class="mr-2 my-auto"
           color="secondary"
           background-color="secondary lighten-3"
           dense
@@ -36,14 +37,24 @@
           :value="rating"
         ></v-rating>
         <v-spacer></v-spacer>
+        <RecipeChips
+          :items="categories"
+          :title="false"
+          :limit="2"
+          :small="true"
+        />
       </v-card-actions>
     </v-card>
   </v-hover>
 </template>
 
 <script>
+import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
 import { api } from "@/api";
 export default {
+  components: {
+    RecipeChips,
+  },
   props: {
     name: String,
     slug: String,
@@ -54,6 +65,9 @@ export default {
     route: {
       default: true,
     },
+    categories: {
+      default: true,
+    },
   },
   methods: {
     getImage(image) {
diff --git a/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue b/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue
index f9196f250..5fc2821fb 100644
--- a/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue
+++ b/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue
@@ -1,12 +1,13 @@
 <template>
   <div v-if="items && items.length > 0">
-    <h2 class="mt-4">{{ title }}</h2>
+    <h2 v-if="title" class="mt-4">{{ title }}</h2>
     <v-chip
       label
       class="ma-1"
       color="accent"
+      :small="small"
       dark
-      v-for="category in items"
+      v-for="category in items.slice(0, limit)"
       :to="`/recipes/${urlParam}/${getSlug(category)}`"
       :key="category"
     >
@@ -19,10 +20,18 @@
 export default {
   props: {
     items: Array,
-    title: String,
+    title: {
+      default: null,
+    },
     isCategory: {
       default: true,
     },
+    limit: {
+      default: 999,
+    },
+    small: {
+      default: false,
+    },
   },
   computed: {
     allCategories() {
@@ -32,8 +41,8 @@ export default {
       return this.$store.getters.getAllTags;
     },
     urlParam() {
-      return this.isCategory ? 'category' : 'tag'
-    }
+      return this.isCategory ? "category" : "tag";
+    },
   },
   methods: {
     getSlug(name) {
diff --git a/frontend/src/components/UI/CardSection.vue b/frontend/src/components/UI/CardSection.vue
index 82ff6c141..29b9d3a32 100644
--- a/frontend/src/components/UI/CardSection.vue
+++ b/frontend/src/components/UI/CardSection.vue
@@ -15,9 +15,9 @@
             <v-menu offset-y v-if="sortable">
               <template v-slot:activator="{ on, attrs }">
                 <v-btn-toggle group>
-                  <v-btn text v-bind="attrs" v-on="on">{{
-                    $t("general.sort")
-                  }}</v-btn>
+                  <v-btn text v-bind="attrs" v-on="on">
+                    {{ $t("general.sort") }}
+                  </v-btn>
                 </v-btn-toggle>
               </template>
               <v-list>
@@ -53,6 +53,7 @@
             :slug="recipe.slug"
             :rating="recipe.rating"
             :image="recipe.image"
+            :categories="recipe.recipeCategory"
           />
         </v-col>
       </v-row>