[chore] add server side pagination and filtering for receipts

src/components/BuildManual/BuildManualVolumePart.vue

@@ -5,7 +5,8 @@
       <div v-if="ingredient.drink_ingredient">
         <div class="full-width row q-gutter-sm q-py-sm">
           <div class="col">
-            {{ name(ingredient.drink_ingredient?.ingredient_id) }}
+            <!--{{ name(ingredient.drink_ingredient?.ingredient_id) }}-->
+            {{ ingredient.drink_ingredient?.name }}
           </div>
           <div class="col">
             {{

src/pages/Receipts.vue

@@ -1,14 +1,17 @@
 <template>
   <q-table
+    v-model:pagination="pagination"
     grid
     title="Rezepte"
     :rows="drinks"
     row-key="id"
     hide-header
-    :filter="search"
-    :filter-method="filter"
+    @request="onRequest"
     :columns="options"
+    :filter="search"
   >
+    <!--:filter="search"
+      :filter-method="filter"-->
     <template #top-right>
       <search-input v-model="search" :keys="search_keys" />
     </template>
@@ -68,12 +71,18 @@ export default defineComponent({
   setup() {
     const store = usePricelistStore();
     onBeforeMount(() => {
-      void store.getDrinks();
+      //void store.getDrinks();
+      onRequest({
+        pagination: pagination.value,
+        filter: { limit: 10, receipt: true },
+      });
     });
-    const drinks = computed(() =>
-      store.drinks.filter((drink) => {
-        return drink.volumes.some((volume) => volume.ingredients.length > 0);
-      })
+    const drinks = computed(
+      () =>
+        //store.drinks.filter((drink) => {
+        //  return drink.volumes.some((volume) => volume.ingredients.length > 0);
+        //})
+        store.drinks
     );
 
     const columns_drinks = [
@@ -81,6 +90,7 @@ export default defineComponent({
         name: 'picture',
         label: 'Bild',
         align: 'center',
+        filterable: false,
       },
       {
         name: 'name',
@@ -120,6 +130,7 @@ export default defineComponent({
         label: 'Preise',
         field: 'volumes',
         align: 'center',
+        filterable: false,
       },
     ];
     const columns_volumes = [
@@ -161,6 +172,47 @@ export default defineComponent({
       }
       return 'no-image.svg';
     }
+    const loading = ref(false);
+    const pagination = ref({
+      sortBy: 'name',
+      descending: false,
+      page: 1,
+      rowsPerPage: 10,
+      rowsNumber: 10,
+    });
+
+    async function onRequest(props: { pagination: PaginationInterface; filter?: Search }) {
+      const { page, rowsPerPage, sortBy, descending } = props.pagination;
+      loading.value = true;
+      console.log('search_keys', search_keys);
+      const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
+      const startRow = (page - 1) * rowsPerPage;
+      try {
+        const result = await store.getDrinks({
+          offset: startRow,
+          limit: fetchCount,
+          descending,
+          search_name: props.filter.value,
+          search_key: props.filter.key,
+          receipt: true,
+        });
+        pagination.value.page = page;
+        pagination.value.rowsPerPage = rowsPerPage;
+        pagination.value.sortBy = sortBy;
+        pagination.value.descending = descending;
+        if (result.count) pagination.value.rowsNumber = result.count;
+      } catch (error) {
+        //..
+      }
+      loading.value = false;
+    }
+    interface PaginationInterface {
+      sortBy: string;
+      descending: boolean;
+      page: number;
+      rowsPerPage: number;
+      rowsNumber: number;
+    }
     return {
       drinks,
       options: [...columns_drinks, ...columns_volumes, ...columns_prices],
@@ -168,6 +220,9 @@ export default defineComponent({
       filter,
       search_keys,
       image,
+      onRequest,
+      loading,
+      pagination,
     };
   },
 });

src/store.ts

@@ -144,6 +144,7 @@ export const usePricelistStore = defineStore({
       descending?: boolean;
       search_name?: string;
       search_key?: string;
+      receipt?: boolean;
     }) {
       if (!filter) filter = { limit: 10 };
       console.log('filter_api', filter);