Fix/category link (#1087)

* fix and refactor chip links

* fix missing UI components for data management

* fix button text

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"

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>

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">