feat: re-write get all routes to use pagination (#1424)

rewrite get_all routes to use a pagination pattern to allow for better implementations of search, filter, and sorting on the frontend or by any client without fetching all the data. Additionally we added a CI check for running the Nuxt built to confirm that no TS errors were present. Finally, I had to remove the header support for the Shopping lists as the browser caching based off last_updated header was not allowing it to read recent updates due to how we're handling the updated_at property in the database with nested fields. This will have to be looked at in the future to reimplement. I'm unsure how many other routes have a similar issue. 

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

frontend/pages/group/mealplan/settings.vue

@@ -126,7 +126,7 @@ export default defineComponent({
       const { data } = await api.mealplanRules.getAll();
 
       if (data) {
-        allRules.value = data;
+        allRules.value = data.items ?? [];
       }
     }
 

frontend/pages/recipes/all.vue

@@ -22,21 +22,18 @@ import { useLazyRecipes } from "~/composables/recipes";
 export default defineComponent({
   components: { RecipeCardSection },
   setup() {
-    // paging and sorting params
+    const page = ref(1);
+    const perPage = ref(30);
     const orderBy = "name";
-    const orderDescending =  false;
-    const increment = ref(30);
+    const orderDirection = "asc";
 
-    const start = ref(0);
-    const offset = ref(increment.value);
-    const limit = ref(increment.value);
     const ready = ref(false);
     const loading = ref(false);
 
     const { recipes, fetchMore } = useLazyRecipes();
 
     onMounted(async () => {
-      await fetchMore(start.value, limit.value, orderBy, orderDescending);
+      await fetchMore(page.value, perPage.value, orderBy, orderDirection);
       ready.value = true;
     });
 
@@ -45,9 +42,8 @@ export default defineComponent({
         return;
       }
       loading.value = true;
-      start.value = offset.value + 1;
-      offset.value = offset.value + increment.value;
-      fetchMore(start.value, limit.value, orderBy, orderDescending);
+      page.value = page.value + 1;
+      fetchMore(page.value, perPage.value, orderBy, orderDirection);
       loading.value = false;
     }, 500);
 

frontend/pages/shopping-lists/_id.vue

@@ -193,11 +193,11 @@ import { useCopyList } from "~/composables/use-copy";
 import { useUserApi } from "~/composables/api";
 import { useAsyncKey } from "~/composables/use-utils";
 import ShoppingListItem from "~/components/Domain/ShoppingList/ShoppingListItem.vue";
-import { MultiPurposeLabelOut } from "~/types/api-types/labels";
 import { ShoppingListItemCreate, ShoppingListItemOut } from "~/types/api-types/group";
 import RecipeList from "~/components/Domain/Recipe/RecipeList.vue";
 import ShoppingListItemEditor from "~/components/Domain/ShoppingList/ShoppingListItemEditor.vue";
 import { getDisplayText } from "~/composables/use-display-text";
+import { useFoodStore, useLabelStore, useUnitStore } from "~/composables/store";
 
 type CopyTypes = "plain" | "markdown";
 
@@ -336,17 +336,9 @@ export default defineComponent({
     // Labels, Units, Foods
     // TODO: Extract to Composable
 
-    const allLabels = ref([] as MultiPurposeLabelOut[]);
-
-    const allUnits = useAsync(async () => {
-      const { data } = await userApi.units.getAll();
-      return data ?? [];
-    }, useAsyncKey());
-
-    const allFoods = useAsync(async () => {
-      const { data } = await userApi.foods.getAll();
-      return data ?? [];
-    }, useAsyncKey());
+    const { labels: allLabels } = useLabelStore();
+    const { units: allUnits } = useUnitStore();
+    const { foods: allFoods } = useFoodStore();
 
     function sortByLabels() {
       byLabel.value = !byLabel.value;
@@ -405,7 +397,10 @@ export default defineComponent({
 
     async function refreshLabels() {
       const { data } = await userApi.multiPurposeLabels.getAll();
-      allLabels.value = data ?? [];
+
+      if (data) {
+        allLabels.value = data.items ?? [];
+      }
     }
 
     refreshLabels();

frontend/pages/shopping-lists/index.vue

@@ -60,7 +60,12 @@ export default defineComponent({
 
     async function fetchShoppingLists() {
       const { data } = await userApi.shopping.lists.getAll();
-      return data;
+
+      if (!data) {
+        return [];
+      }
+
+      return data.items;
     }
 
     async function refresh() {