consolidate tag/category pages

frontend/src/pages/Recipes/CategoryTagPage.vue

@@ -22,6 +22,12 @@ export default {
     currentCategory() {
       return this.$route.params.category;
     },
+    currentTag() {
+      return this.$route.params.tag;
+    },
+    TagOrCategory() {
+      return this.currentCategory || this.currentTag;
+    },
     shownRecipes() {
       if (this.sortedResults.length > 0) {
         return this.sortedResults;
@@ -31,7 +37,8 @@ export default {
     },
   },
   watch: {
-    async currentCategory() {
+    async TagOrCategory() {
+      console.log(this.currentCategory, this.currentTag);
       this.sortedResults = [];
       this.getRecipes();
     },
@@ -42,7 +49,16 @@ export default {
   },
   methods: {
     async getRecipes() {
-      let data = await api.categories.getRecipesInCategory(this.currentCategory);
+      if (!this.TagOrCategory === null) return;
+      console.log(this.TagOrCategory);
+
+      let data = {};
+      if (this.currentCategory) {
+        data = await api.categories.getRecipesInCategory(this.TagOrCategory);
+      } else {
+        data = await api.tags.getRecipesInTag(this.TagOrCategory);
+      }
+      console.log(data);
       this.title = data.name;
       this.recipes = data.recipes;
     },

frontend/src/pages/Recipes/CustomPage.vue

@@ -69,10 +69,7 @@ export default {
   methods: {
     async buildPage() {
       this.page = await api.siteSettings.getPage(this.pageSlug);
-    },
+      this.tab = this.page.categories[0];
-    filterRecipe(slug) {
-      const storeCategory = this.recipeStore.find(element => element.slug === slug);
-      return storeCategory ? storeCategory.recipes : [];
     },
     sortRecipes(sortedRecipes, destKey) {
       this.page.categories[destKey].recipes = sortedRecipes;

frontend/src/pages/Recipes/TagPage.vue

@@ -1,57 +0,0 @@
-<template>
-  <v-container>
-    <CardSection :sortable="true" :title="title" :recipes="shownRecipes" @sort="assignSorted" />
-  </v-container>
-</template>
-
-<script>
-import { api } from "@/api";
-import CardSection from "@/components/UI/CardSection";
-export default {
-  components: {
-    CardSection,
-  },
-  data() {
-    return {
-      title: "",
-      recipes: [],
-      sortedResults: [],
-    };
-  },
-  computed: {
-    currentTag() {
-      return this.$route.params.tag;
-    },
-    shownRecipes() {
-      if (this.sortedResults.length > 0) {
-        return this.sortedResults;
-      } else {
-        return this.recipes;
-      }
-    },
-  },
-  watch: {
-    async currentTag() {
-      this.getRecipes();
-      this.sortedResults = [];
-    },
-  },
-  mounted() {
-    this.getRecipes();
-    this.sortedResults = [];
-  },
-  methods: {
-    async getRecipes() {
-      let data = await api.tags.getRecipesInTag(this.currentTag);
-      this.title = data.name;
-      this.recipes = data.recipes;
-    },
-    assignSorted(val) {
-      console.log(val);
-      this.sortedResults = val.slice();
-    },
-  },
-};
-</script>
-
-<style></style>

frontend/src/routes/recipes.js

@@ -2,15 +2,14 @@ import ViewRecipe from "@/pages/Recipe/ViewRecipe";
 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 CategoryTagPage from "@/pages/Recipes/CategoryTagPage";
-import TagPage from "@/pages/Recipes/TagPage";
 import { api } from "@/api";
 
 export const recipeRoutes = [
   // Recipes
   { path: "/recipes/all", component: AllRecipes },
-  { path: "/recipes/tag/:tag", component: TagPage },
+  { path: "/recipes/tag/:tag", component: CategoryTagPage },
-  { path: "/recipes/category/:category", component: CategoryPage },
+  { path: "/recipes/category/:category", component: CategoryTagPage },
   // Misc
   { path: "/new/", component: NewRecipe },
   { path: "/pages/:customPage", component: CustomPage },