feat: restore frontend sorting for all recipes (#1497)

* fixed typo

* merged "all recipes" pagination into recipe card
created custom sort card for all recipes
refactored backend calls for all recipes to sort/paginate

* frontend lint fixes

* restored recipes reference

* replaced "this" with reference

* fix linting errors

* re-order context menu

* add todo

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/pages/recipes/all.vue

@@ -4,48 +4,35 @@
       :icon="$globals.icons.primary"
       :title="$t('page.all-recipes')"
       :recipes="recipes"
+      :use-pagination="true"
+      @sortRecipes="assignSorted"
+      @replaceRecipes="replaceRecipes"
+      @appendRecipes="appendRecipes"
       @delete="removeRecipe"
     ></RecipeCardSection>
-    <v-card v-intersect="infiniteScroll"></v-card>
-    <v-fade-transition>
-      <AppLoader v-if="loading" :loading="loading" />
-    </v-fade-transition>
   </v-container>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
-import { useThrottleFn } from "@vueuse/core";
+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 page = ref(1);
-    const perPage = ref(30);
-    const orderBy = "name";
-    const orderDirection = "asc";
-
-    const ready = ref(false);
-    const loading = ref(false);
-
     const { recipes, fetchMore } = useLazyRecipes();
 
-    onMounted(async () => {
-      await fetchMore(page.value, perPage.value, orderBy, orderDirection);
-      ready.value = true;
-    });
+    function appendRecipes(val: Array<Recipe>) {
+      val.forEach((recipe) => {
+        recipes.value.push(recipe);
+      });
+    }
 
-    const infiniteScroll = useThrottleFn(() => {
-      if (!ready.value) {
-        return;
-      }
-      loading.value = true;
-      page.value = page.value + 1;
-      fetchMore(page.value, perPage.value, orderBy, orderDirection);
-      loading.value = false;
-    }, 500);
+    function assignSorted(val: Array<Recipe>) {
+      recipes.value = val;
+    }
 
     function removeRecipe(slug: string) {
       for (let i = 0; i < recipes?.value?.length; i++) {
@@ -56,7 +43,11 @@ export default defineComponent({
       }
     }
 
-    return { recipes, infiniteScroll, loading, removeRecipe };
+    function replaceRecipes(val: Array<Recipe>) {
+      recipes.value = val;
+    }
+
+    return { appendRecipes, assignSorted, recipes, removeRecipe, replaceRecipes };
   },
   head() {
     return {

frontend/pages/recipes/categories/index.vue

@@ -30,7 +30,7 @@ export default defineComponent({
     };
   },
   head: {
-    title: "Tags",
+    title: "Categories",
   },
 });
 </script>