feat: added "cookbook" filter to recipe pagination to serve frontend (#1609)

* added cookbook filter to recipe pagination

* fixed wrong filter var

* restored cookbook sorting

* reverted unnecessary var change

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -161,6 +161,10 @@ export default defineComponent({
       type: Array as () => Recipe[],
       default: () => [],
     },
+    cookbookSlug: {
+      type: String,
+      default: null,
+    },
     categorySlug: {
       type: String,
       default: null,
@@ -213,6 +217,8 @@ export default defineComponent({
     const hasMore = ref(true);
     const ready = ref(false);
     const loading = ref(false);
+
+    const cookbook = ref<string>(props.cookbookSlug);
     const category = ref<string>(props.categorySlug);
     const tag = ref<string>(props.tagSlug);
     const tool = ref<string>(props.toolSlug);
@@ -227,6 +233,7 @@ export default defineComponent({
         perPage.value*2,
         preferences.value.orderBy,
         preferences.value.orderDirection,
+        cookbook.value,
         category.value,
         tag.value,
         tool.value,
@@ -253,6 +260,7 @@ export default defineComponent({
           perPage.value,
           preferences.value.orderBy,
           preferences.value.orderDirection,
+          cookbook.value,
           category.value,
           tag.value,
           tool.value,
@@ -314,6 +322,7 @@ export default defineComponent({
           perPage.value,
           preferences.value.orderBy,
           preferences.value.orderDirection,
+          cookbook.value,
           category.value,
           tag.value,
           tool.value,

frontend/composables/recipes/use-recipes.ts

@@ -11,8 +11,17 @@ export const useLazyRecipes = function () {
 
   const recipes = ref<Recipe[]>([]);
 
-  async function fetchMore(page: number, perPage: number, orderBy: string | null = null, orderDirection = "desc", category: string | null = null, tag: string | null = null, tool: string | null = null) {
-    const { data } = await api.recipes.getAll(page, perPage, { orderBy, orderDirection, "categories": category, "tags": tag, "tools": tool });
+  async function fetchMore(
+    page: number,
+    perPage: number,
+    orderBy: string | null = null,
+    orderDirection = "desc",
+    cookbook: string | null = null,
+    category: string | null = null,
+    tag: string | null = null,
+    tool: string | null = null
+  ) {
+    const { data } = await api.recipes.getAll(page, perPage, { orderBy, orderDirection, cookbook, "categories": category, "tags": tag, "tools": tool });
     return data ? data.items : [];
   }
 

frontend/pages/cookbooks/_slug.vue

@@ -11,25 +11,35 @@
     </v-card>
 
     <v-container class="pa-0">
-      <RecipeCardSection class="mb-5 mx-1" :recipes="book.recipes" />
+      <RecipeCardSection
+        class="mb-5 mx-1"
+        :recipes="recipes"
+        :cookbook-slug="slug"
+        @sortRecipes="assignSorted"
+        @replaceRecipes="replaceRecipes"
+        @appendRecipes="appendRecipes"
+        @delete="removeRecipe"
+      />
     </v-container>
   </v-container>
 </template>
 
 <script lang="ts">
 import { defineComponent, useRoute, ref, useMeta } from "@nuxtjs/composition-api";
+import { useLazyRecipes } from "~/composables/recipes";
 import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
 import { useCookbook } from "~/composables/use-group-cookbooks";
 
 export default defineComponent({
   components: { RecipeCardSection },
   setup() {
+    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
+
     const route = useRoute();
     const slug = route.value.params.slug;
     const { getOne } = useCookbook();
 
     const tab = ref(null);
-
     const book = getOne(slug);
 
     useMeta(() => {
@@ -40,7 +50,13 @@ export default defineComponent({
 
     return {
       book,
+      slug,
       tab,
+      appendRecipes,
+      assignSorted,
+      recipes,
+      removeRecipe,
+      replaceRecipes,
     };
   },
   head: {}, // Must include for useMeta