feat: unify recipe card sections (#1560)

* removed unused import

* moved categories/tags to new recipe card section

* nuked old frontend sort code
minor refactoring

* bug fixes

* added backend recipes filter for tools

* removed debug log

* removed unusued props

* fixed sort for recipes by tool

* added tests for getting recipes by tool

frontend/pages/recipes/all.vue

@@ -4,7 +4,6 @@
       :icon="$globals.icons.primary"
       :title="$t('page.all-recipes')"
       :recipes="recipes"
-      :use-pagination="true"
       @sortRecipes="assignSorted"
       @replaceRecipes="replaceRecipes"
       @appendRecipes="appendRecipes"
@@ -17,36 +16,11 @@
 import { defineComponent } from "@nuxtjs/composition-api";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { useLazyRecipes } from "~/composables/recipes";
-import { Recipe } from "~/types/api-types/recipe";
 
 export default defineComponent({
   components: { RecipeCardSection },
   setup() {
-    const { recipes, fetchMore } = useLazyRecipes();
-
-    function appendRecipes(val: Array<Recipe>) {
-      val.forEach((recipe) => {
-        recipes.value.push(recipe);
-      });
-    }
-
-    function assignSorted(val: Array<Recipe>) {
-      recipes.value = val;
-    }
-
-    function removeRecipe(slug: string) {
-      for (let i = 0; i < recipes?.value?.length; i++) {
-        if (recipes?.value[i].slug === slug) {
-          recipes?.value.splice(i, 1);
-          break;
-        }
-      }
-    }
-
-    function replaceRecipes(val: Array<Recipe>) {
-      recipes.value = val;
-    }
-
+    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
     return { appendRecipes, assignSorted, recipes, removeRecipe, replaceRecipes };
   },
   head() {

frontend/pages/recipes/categories/_slug.vue

@@ -4,8 +4,12 @@
       v-if="category"
       :icon="$globals.icons.tags"
       :title="category.name"
-      :recipes="category.recipes"
-      @sort="assignSorted"
+      :recipes="recipes"
+      :category-slug="category.slug"
+      @sortRecipes="assignSorted"
+      @replaceRecipes="replaceRecipes"
+      @appendRecipes="appendRecipes"
+      @delete="removeRecipe"
     >
       <template #title>
         <v-btn icon class="mr-1">
@@ -54,13 +58,15 @@
 
 <script lang="ts">
 import { defineComponent, useAsync, useRoute, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
+import { useLazyRecipes } from "~/composables/recipes";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { useUserApi } from "~/composables/api";
-import { Recipe } from "~/types/api-types/recipe";
 
 export default defineComponent({
   components: { RecipeCardSection },
   setup() {
+    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
+
     const api = useUserApi();
     const route = useRoute();
     const router = useRouter();
@@ -105,6 +111,11 @@ export default defineComponent({
       reset,
       ...toRefs(state),
       updateCategory,
+      appendRecipes,
+      assignSorted,
+      recipes,
+      removeRecipe,
+      replaceRecipes,
     };
   },
   head() {
@@ -112,12 +123,5 @@ export default defineComponent({
       title: this.$t("category.categories") as string,
     };
   },
-  methods: {
-    assignSorted(val: Array<Recipe>) {
-      if (this.category) {
-        this.category.recipes = val;
-      }
-    },
-  },
 });
 </script>

frontend/pages/recipes/tags/_slug.vue

@@ -1,11 +1,15 @@
 <template>
   <v-container>
     <RecipeCardSection
-      v-if="tags"
+      v-if="tag"
       :icon="$globals.icons.tags"
-      :title="tags.name"
-      :recipes="tags.recipes"
-      @sort="assignSorted"
+      :title="tag.name"
+      :recipes="recipes"
+      :tag-slug="tag.slug"
+      @sortRecipes="assignSorted"
+      @replaceRecipes="replaceRecipes"
+      @appendRecipes="appendRecipes"
+      @delete="removeRecipe"
     >
       <template #title>
         <v-btn icon class="mr-1">
@@ -16,7 +20,7 @@
 
         <template v-if="edit">
           <v-text-field
-            v-model="tags.name"
+            v-model="tag.name"
             autofocus
             single-line
             dense
@@ -41,7 +45,7 @@
           <v-tooltip top>
             <template #activator="{ on, attrs }">
               <v-toolbar-title v-bind="attrs" style="cursor: pointer" class="headline" v-on="on" @click="edit = true">
-                {{ tags.name }}
+                {{ tag.name }}
               </v-toolbar-title>
             </template>
             <span> Click to Edit </span>
@@ -54,13 +58,15 @@
 
 <script lang="ts">
 import { defineComponent, useAsync, useRoute, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
+import { useLazyRecipes } from "~/composables/recipes";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { useUserApi } from "~/composables/api";
-import { Recipe } from "~/types/api-types/recipe";
 
 export default defineComponent({
   components: { RecipeCardSection },
   setup() {
+    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
+
     const api = useUserApi();
     const route = useRoute();
     const router = useRouter();
@@ -71,7 +77,7 @@ export default defineComponent({
       edit: false,
     });
 
-    const tags = useAsync(async () => {
+    const tag = useAsync(async () => {
       const { data } = await api.tags.bySlug(slug);
       if (data) {
         state.initialValue = data.name;
@@ -82,18 +88,18 @@ export default defineComponent({
     function reset() {
       state.edit = false;
 
-      if (tags.value) {
-        tags.value.name = state.initialValue;
+      if (tag.value) {
+        tag.value.name = state.initialValue;
       }
     }
 
     async function updateTags() {
       state.edit = false;
 
-      if (!tags.value) {
+      if (!tag.value) {
         return;
       }
-      const { data } = await api.tags.updateOne(tags.value.id, tags.value);
+      const { data } = await api.tags.updateOne(tag.value.id, tag.value);
 
       if (data) {
         router.push("/recipes/tags/" + data.slug);
@@ -101,10 +107,15 @@ export default defineComponent({
     }
 
     return {
-      tags,
+      tag,
       reset,
       ...toRefs(state),
       updateTags,
+      appendRecipes,
+      assignSorted,
+      recipes,
+      removeRecipe,
+      replaceRecipes,
     };
   },
   head() {
@@ -112,12 +123,5 @@ export default defineComponent({
       title: this.$t("tag.tags") as string,
     };
   },
-  methods: {
-    assignSorted(val: Array<Recipe>) {
-      if (this.tags) {
-        this.tags.recipes = val;
-      }
-    },
-  },
 });
 </script>

frontend/pages/recipes/tools/_slug.vue

@@ -1,6 +1,16 @@
 <template>
   <v-container>
-    <RecipeCardSection v-if="tools" :title="tools.name" :recipes="tools.recipes" @sort="assignSorted">
+    <RecipeCardSection
+      v-if="tool"
+      :icon="$globals.icons.potSteam"
+      :title="tool.name"
+      :recipes="recipes"
+      :tool-slug="tool.slug"
+      @sortRecipes="assignSorted"
+      @replaceRecipes="replaceRecipes"
+      @appendRecipes="appendRecipes"
+      @delete="removeRecipe"
+    >
       <template #title>
         <v-btn icon class="mr-1">
           <v-icon dark large @click="reset">
@@ -10,7 +20,7 @@
 
         <template v-if="edit">
           <v-text-field
-            v-model="tools.name"
+            v-model="tool.name"
             autofocus
             single-line
             dense
@@ -35,7 +45,7 @@
           <v-tooltip top>
             <template #activator="{ on, attrs }">
               <v-toolbar-title v-bind="attrs" style="cursor: pointer" class="headline" v-on="on" @click="edit = true">
-                {{ tools.name }}
+                {{ tool.name }}
               </v-toolbar-title>
             </template>
             <span> Click to Edit </span>
@@ -48,13 +58,15 @@
 
 <script lang="ts">
 import { defineComponent, useAsync, useRoute, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
+import { useLazyRecipes } from "~/composables/recipes";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { useUserApi } from "~/composables/api";
-import { Recipe } from "~/types/api-types/recipe";
 
 export default defineComponent({
   components: { RecipeCardSection },
   setup() {
+    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
+
     const api = useUserApi();
     const route = useRoute();
     const router = useRouter();
@@ -65,7 +77,7 @@ export default defineComponent({
       edit: false,
     });
 
-    const tools = useAsync(async () => {
+    const tool = useAsync(async () => {
       const { data } = await api.tools.bySlug(slug);
       if (data) {
         state.initialValue = data.name;
@@ -76,18 +88,18 @@ export default defineComponent({
     function reset() {
       state.edit = false;
 
-      if (tools.value) {
-        tools.value.name = state.initialValue;
+      if (tool.value) {
+        tool.value.name = state.initialValue;
       }
     }
 
     async function updateTools() {
       state.edit = false;
 
-      if (!tools.value) {
+      if (!tool.value) {
         return;
       }
-      const { data } = await api.tools.updateOne(tools.value.id, tools.value);
+      const { data } = await api.tools.updateOne(tool.value.id, tool.value);
 
       if (data) {
         router.push("/recipes/tools/" + data.slug);
@@ -95,10 +107,15 @@ export default defineComponent({
     }
 
     return {
-      tools,
+      tool,
       reset,
       ...toRefs(state),
       updateTools,
+      appendRecipes,
+      assignSorted,
+      recipes,
+      removeRecipe,
+      replaceRecipes,
     };
   },
   head() {
@@ -106,12 +123,5 @@ export default defineComponent({
       title: this.$t("tool.tools") as string,
     };
   },
-  methods: {
-    assignSorted(val: Array<Recipe>) {
-      if (this.tools) {
-        this.tools.recipes = val;
-      }
-    },
-  },
 });
 </script>