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