From fbb10b8a5b10ee3145e09843f241b07e474dbb79 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Wed, 31 Mar 2021 18:50:53 -0800
Subject: [PATCH] add tag pages

---
 .../Recipe/RecipeViewer/RecipeChips.vue       | 16 ++++-
 .../components/Recipe/RecipeViewer/index.vue  |  6 +-
 frontend/src/pages/Recipes/TagPage.vue        | 61 +++++++++++++++++++
 frontend/src/routes/index.js                  |  4 +-
 mealie/routes/recipe/tag_routes.py            |  3 +-
 mealie/schema/category.py                     |  2 +-
 6 files changed, 85 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/pages/Recipes/TagPage.vue

diff --git a/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue b/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue
index 508d9a5f1..f9196f250 100644
--- a/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue
+++ b/frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue
@@ -2,12 +2,12 @@
   <div v-if="items && items.length > 0">
     <h2 class="mt-4">{{ title }}</h2>
     <v-chip
-      :to="`/recipes/${getSlug(category)}`"
       label
       class="ma-1"
       color="accent"
       dark
       v-for="category in items"
+      :to="`/recipes/${urlParam}/${getSlug(category)}`"
       :key="category"
     >
       {{ category }}
@@ -20,7 +20,7 @@ export default {
   props: {
     items: Array,
     title: String,
-    category: {
+    isCategory: {
       default: true,
     },
   },
@@ -28,13 +28,23 @@ export default {
     allCategories() {
       return this.$store.getters.getAllCategories;
     },
+    allTags() {
+      return this.$store.getters.getAllTags;
+    },
+    urlParam() {
+      return this.isCategory ? 'category' : 'tag'
+    }
   },
   methods: {
     getSlug(name) {
       if (!name) return;
-      if (this.category) {
+
+      if (this.isCategory) {
         const matches = this.allCategories.filter(x => x.name == name);
         if (matches.length > 0) return matches[0].slug;
+      } else {
+        const matches = this.allTags.filter(x => x.name == name);
+        if (matches.length > 0) return matches[0].slug;
       }
     },
   },
diff --git a/frontend/src/components/Recipe/RecipeViewer/index.vue b/frontend/src/components/Recipe/RecipeViewer/index.vue
index 845c63c95..d50e8cd01 100644
--- a/frontend/src/components/Recipe/RecipeViewer/index.vue
+++ b/frontend/src/components/Recipe/RecipeViewer/index.vue
@@ -34,7 +34,11 @@
           <Ingredients :ingredients="ingredients" />
           <div v-if="medium">
             <RecipeChips :title="$t('recipe.categories')" :items="categories" />
-            <RecipeChips :title="$t('recipe.tags')" :items="tags" />
+            <RecipeChips
+              :title="$t('recipe.tags')"
+              :items="tags"
+              :isCategory="false"
+            />
             <Notes :notes="notes" />
           </div>
         </v-col>
diff --git a/frontend/src/pages/Recipes/TagPage.vue b/frontend/src/pages/Recipes/TagPage.vue
new file mode 100644
index 000000000..7ad72bf6c
--- /dev/null
+++ b/frontend/src/pages/Recipes/TagPage.vue
@@ -0,0 +1,61 @@
+<template>
+  <v-container>
+    <CategorySidebar />
+    <CardSection
+      :sortable="true"
+      :title="title"
+      :recipes="recipes"
+      :card-limit="9999"
+      @sort="sortAZ"
+      @sort-recent="sortRecent"
+    />
+  </v-container>
+</template>
+
+<script>
+import { api } from "@/api";
+import CardSection from "@/components/UI/CardSection";
+import CategorySidebar from "@/components/UI/CategorySidebar";
+export default {
+  components: {
+    CardSection,
+    CategorySidebar,
+  },
+  data() {
+    return {
+      title: "",
+      recipes: [],
+    };
+  },
+  computed: {
+    currentTag() {
+      return this.$route.params.tag;
+    },
+  },
+  watch: {
+    async currentCategory() {
+      this.getRecipes();
+    },
+  },
+  mounted() {
+    this.getRecipes();
+  },
+  methods: {
+    async getRecipes() {
+      let data = await api.tags.getRecipesInTag(this.currentTag);
+      console.log(data);
+      this.title = data.name;
+      this.recipes = data.recipes;
+    },
+    sortAZ() {
+      this.recipes.sort((a, b) => (a.name > b.name ? 1 : -1));
+    },
+    sortRecent() {
+      this.recipes.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
index cca7aa276..af58a187d 100644
--- a/frontend/src/routes/index.js
+++ b/frontend/src/routes/index.js
@@ -6,6 +6,7 @@ import NewRecipe from "@/pages/Recipe/NewRecipe";
 import CustomPage from "@/pages/Recipes/CustomPage";
 import AllRecipes from "@/pages/Recipes/AllRecipes";
 import CategoryPage from "@/pages/Recipes/CategoryPage";
+import TagPage from "@/pages/Recipes/TagPage";
 import Planner from "@/pages/MealPlan/Planner";
 import Debug from "@/pages/Debug";
 import LoginPage from "@/pages/LoginPage";
@@ -33,7 +34,8 @@ export const routes = [
   { path: "/search", component: SearchPage },
   { path: "/recipes/all", component: AllRecipes },
   { path: "/pages/:customPage", component: CustomPage },
-  { path: "/recipes/:category", component: CategoryPage },
+  { path: "/recipes/tag/:tag", component: TagPage },
+  { path: "/recipes/category/:category", component: CategoryPage },
   { path: "/recipe/:recipe", component: ViewRecipe },
   { path: "/new/", component: NewRecipe },
   { path: "/meal-plan/planner", component: Planner },
diff --git a/mealie/routes/recipe/tag_routes.py b/mealie/routes/recipe/tag_routes.py
index 4fa542ac7..11572316f 100644
--- a/mealie/routes/recipe/tag_routes.py
+++ b/mealie/routes/recipe/tag_routes.py
@@ -2,6 +2,7 @@ from fastapi import APIRouter, Depends
 from mealie.db.database import db
 from mealie.db.db_setup import generate_session
 from mealie.routes.deps import get_current_user
+from mealie.schema.category import RecipeTagResponse
 from mealie.schema.snackbar import SnackResponse
 from sqlalchemy.orm.session import Session
 
@@ -19,7 +20,7 @@ async def get_all_recipe_tags(session: Session = Depends(generate_session)):
     return db.tags.get_all_limit_columns(session, ["slug", "name"])
 
 
-@router.get("/{tag}")
+@router.get("/{tag}", response_model=RecipeTagResponse)
 def get_all_recipes_by_tag(tag: str, session: Session = Depends(generate_session)):
     """ Returns a list of recipes associated with the provided tag. """
     return db.tags.get(session, tag)
diff --git a/mealie/schema/category.py b/mealie/schema/category.py
index 3e8635152..36c6d7ec1 100644
--- a/mealie/schema/category.py
+++ b/mealie/schema/category.py
@@ -27,5 +27,5 @@ class TagBase(CategoryBase):
     pass
 
 
-class RecipeTagResponse(TagBase):
+class RecipeTagResponse(RecipeCategoryResponse):
     pass