From 0f82523cddbeec58637bc985c0231a962a87861c Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Tue, 22 Mar 2022 21:08:06 -0800
Subject: [PATCH] Fix/category link (#1087)

* fix and refactor chip links

* fix missing UI components for data management

* fix button text
---
 .../components/Domain/Recipe/RecipeCard.vue   |  2 +-
 .../components/Domain/Recipe/RecipeChips.vue  | 20 +++++++++----------
 .../Domain/Recipe/RecipeDataTable.vue         |  4 ++--
 frontend/pages/group/data.vue                 |  6 ++++++
 frontend/pages/group/data/recipes.vue         | 11 ++--------
 frontend/pages/group/mealplan/settings.vue    |  4 ++--
 frontend/pages/recipe/_slug/index.vue         |  4 ++--
 frontend/pages/shared/recipes/_id.vue         |  4 ++--
 8 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeCard.vue b/frontend/components/Domain/Recipe/RecipeCard.vue
index a7d7997f0fde..0bf6d418f753 100644
--- a/frontend/components/Domain/Recipe/RecipeCard.vue
+++ b/frontend/components/Domain/Recipe/RecipeCard.vue
@@ -35,7 +35,7 @@
             <RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
             <RecipeRating :value="rating" :name="name" :slug="slug" :small="true" />
             <v-spacer></v-spacer>
-            <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :is-category="false" />
+            <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" url-prefix="tags" />
             <RecipeContextMenu
               :slug="slug"
               :name="name"
diff --git a/frontend/components/Domain/Recipe/RecipeChips.vue b/frontend/components/Domain/Recipe/RecipeChips.vue
index 47a75aad57ac..c1a843ebd8b4 100644
--- a/frontend/components/Domain/Recipe/RecipeChips.vue
+++ b/frontend/components/Domain/Recipe/RecipeChips.vue
@@ -9,7 +9,7 @@
       color="accent"
       :small="small"
       dark
-      :to="`/recipes/${urlParam}/${category.slug}`"
+      :to="`/recipes/${urlPrefix}/${category.slug}`"
     >
       {{ truncateText(category.name) }}
     </v-chip>
@@ -17,7 +17,10 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent} from "@nuxtjs/composition-api";
+import { defineComponent } from "@nuxtjs/composition-api";
+import { RecipeCategory, RecipeTag, RecipeTool } from "~/types/api-types/user";
+
+export type UrlPrefixParam = "tags" | "categories" | "tools";
 
 export default defineComponent({
   props: {
@@ -26,16 +29,16 @@ export default defineComponent({
       default: false,
     },
     items: {
-      type: Array,
+      type: Array as () => RecipeCategory[] | RecipeTag[] | RecipeTool[],
       default: () => [],
     },
     title: {
       type: Boolean,
       default: false,
     },
-    isCategory: {
-      type: Boolean,
-      default: true,
+    urlPrefix: {
+      type: String as () => UrlPrefixParam,
+      default: "categories",
     },
     limit: {
       type: Number,
@@ -51,8 +54,6 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const urlParam = computed(() => props.isCategory ? "categories" : "tags");
-
     function truncateText(text: string, length = 20, clamp = "...") {
       if (!props.truncate) return text;
       const node = document.createElement("div");
@@ -62,9 +63,8 @@ export default defineComponent({
     }
 
     return {
-      urlParam,
       truncateText,
-    }
+    };
   },
 });
 </script>
diff --git a/frontend/components/Domain/Recipe/RecipeDataTable.vue b/frontend/components/Domain/Recipe/RecipeDataTable.vue
index 945bbd7e99d7..4bcd13499fae 100644
--- a/frontend/components/Domain/Recipe/RecipeDataTable.vue
+++ b/frontend/components/Domain/Recipe/RecipeDataTable.vue
@@ -18,13 +18,13 @@
       </tr>
     </template>
     <template #item.tags="{ item }">
-      <RecipeChip small :items="item.tags" />
+      <RecipeChip small :items="item.tags" :is-category="false" url-prefix="tags" />
     </template>
     <template #item.recipeCategory="{ item }">
       <RecipeChip small :items="item.recipeCategory" />
     </template>
     <template #item.tools="{ item }">
-      <RecipeChip small :items="item.tools" />
+      <RecipeChip small :items="item.tools" url-prefix="tools" />
     </template>
     <template #item.userId="{ item }">
       <v-list-item class="justify-start">
diff --git a/frontend/pages/group/data.vue b/frontend/pages/group/data.vue
index 1f0bb8a6838a..6a74c079c832 100644
--- a/frontend/pages/group/data.vue
+++ b/frontend/pages/group/data.vue
@@ -14,6 +14,11 @@
             mode="link"
             rounded
             :items="[
+              {
+                text: 'Recipes',
+                value: 'new',
+                to: '/group/data/recipes',
+              },
               {
                 text: 'Foods',
                 value: 'url',
@@ -55,6 +60,7 @@ export default defineComponent({
   },
   setup() {
     const buttonLookup: { [key: string]: string } = {
+      recipes: "Recipes",
       foods: "Foods",
       units: "Units",
       labels: "Labels",
diff --git a/frontend/pages/group/data/recipes.vue b/frontend/pages/group/data/recipes.vue
index c2c9480bba71..eacda1572c1d 100644
--- a/frontend/pages/group/data/recipes.vue
+++ b/frontend/pages/group/data/recipes.vue
@@ -56,16 +56,9 @@
         </v-card>
       </v-card-text>
     </BaseDialog>
-    <BasePageTitle divider>
-      <template #header>
-        <v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-recipes.svg')"></v-img>
-      </template>
-      <template #title> Data Management </template>
-    </BasePageTitle>
-
     <section>
       <!-- Recipe Data Table -->
-      <BaseCardSectionTitle :icon="$globals.icons.primary" section title="Recipe Data">
+      <BaseCardSectionTitle :icon="$globals.icons.primary" title="Recipe Data">
         Use this section to manage the data associated with your recipes. You can perform several bulk actions on your
         recipes including exporting, deleting, tagging, and assigning categories.
       </BaseCardSectionTitle>
@@ -86,7 +79,7 @@
             <v-divider class="mx-2"></v-divider>
             <v-card-text class="mt-n5">
               <v-checkbox
-                v-for="(itemValue, key) in headers"
+                v-for="(_, key) in headers"
                 :key="key"
                 v-model="headers[key]"
                 dense
diff --git a/frontend/pages/group/mealplan/settings.vue b/frontend/pages/group/mealplan/settings.vue
index 73bddebad858..afb170d4a894 100644
--- a/frontend/pages/group/mealplan/settings.vue
+++ b/frontend/pages/group/mealplan/settings.vue
@@ -63,12 +63,12 @@
               <template v-if="!editState[rule.id]">
                 <div v-if="rule.categories">
                   <h4 class="py-1">{{ $t("category.categories") }}:</h4>
-                  <RecipeChips :items="rule.categories" is-category small />
+                  <RecipeChips :items="rule.categories" small />
                 </div>
 
                 <div v-if="rule.tags">
                   <h4 class="py-1">{{ $t("tag.tags") }}:</h4>
-                  <RecipeChips :items="rule.tags" :is-category="false" small />
+                  <RecipeChips :items="rule.tags" url-prefix="tags" small />
                 </div>
               </template>
               <template v-else>
diff --git a/frontend/pages/recipe/_slug/index.vue b/frontend/pages/recipe/_slug/index.vue
index dfe02c641e48..6f4c2d594490 100644
--- a/frontend/pages/recipe/_slug/index.vue
+++ b/frontend/pages/recipe/_slug/index.vue
@@ -267,7 +267,7 @@
                       :tag-selector="true"
                       :show-label="false"
                     />
-                    <RecipeChips v-else :items="recipe.tags" :is-category="false" />
+                    <RecipeChips v-else :items="recipe.tags" url-prefix="tags" />
                   </v-card-text>
                 </v-card>
 
@@ -355,7 +355,7 @@
                       :tag-selector="true"
                       :show-label="false"
                     />
-                    <RecipeChips v-else :items="recipe.tags" :is-category="false" />
+                    <RecipeChips v-else :items="recipe.tags" url-prefix="tags"/>
                   </v-card-text>
                 </v-card>
 
diff --git a/frontend/pages/shared/recipes/_id.vue b/frontend/pages/shared/recipes/_id.vue
index 9bfa6b169c67..53385e02b896 100644
--- a/frontend/pages/shared/recipes/_id.vue
+++ b/frontend/pages/shared/recipes/_id.vue
@@ -176,7 +176,7 @@
                   </v-card-title>
                   <v-divider class="mx-2"></v-divider>
                   <v-card-text>
-                    <RecipeChips :items="recipe.tags" :is-category="false" />
+                    <RecipeChips :items="recipe.tags" url-prefix="tags" />
                   </v-card-text>
                 </v-card>
 
@@ -219,7 +219,7 @@
                   </v-card-title>
                   <v-divider class="mx-2"></v-divider>
                   <v-card-text>
-                    <RecipeChips :items="recipe.tags" :is-category="false" />
+                    <RecipeChips :items="recipe.tags" url-prefix="tags" />
                   </v-card-text>
                 </v-card>