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: {
+    urlPrefix: {
-      type: Boolean,
+      type: String as () => UrlPrefixParam,
-      default: true,
+      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">

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

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

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>

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>
 

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>