[feature] add pagination on server

src/components/CalculationTable.vue

@@ -6,11 +6,14 @@
     :rows="drinks"
     dense
     row-key="id"
+    grid
+    :loading="loading"
+    @request="onRequest"
+  >
+    <!--
     :filter="search"
     :filter-method="filter"
-    grid
+  -->
-    :rows-per-page-options="[0]"
-  >
     <template #top-right>
       <div class="row justify-end q-gutter-sm">
         <search-input v-model="search" :keys="search_keys" />
@@ -166,7 +169,7 @@
 
 <script lang="ts">
 import DrinkPriceVolumes from '../components/CalculationTable/DrinkPriceVolumes.vue';
-import { defineComponent, onBeforeMount, ComputedRef, computed, ref } from 'vue';
+import { defineComponent, onMounted, ComputedRef, computed, ref } from 'vue';
 import { Drink, usePricelistStore, DrinkPriceVolume } from '../store';
 import MinPriceSetting from '../components/MinPriceSetting.vue';
 import { api, hasPermission } from '@flaschengeist/api';
@@ -203,8 +206,12 @@ export default defineComponent({
   setup(props) {
     const store = usePricelistStore();
 
-    onBeforeMount(() => {
+    onMounted(() => {
-      void store.getDrinks();
+      //void store.getDrinks();
+      onRequest({
+        pagination: pagination.value,
+        filter: undefined,
+      });
     });
 
     const columns = [
@@ -371,9 +378,44 @@ export default defineComponent({
     const pagination = ref({
       sortBy: 'name',
       descending: false,
-      rowsPerPage: store.drinks.length,
+      page: 1,
+      rowsPerPage: 10,
+      rowsNumber: 10,
     });
 
+    interface PaginationInterface {
+      sortBy: string;
+      descending: boolean;
+      page: number;
+      rowsPerPage: number;
+      rowsNumber: number;
+    }
+
+    const loading = ref(false);
+
+    async function onRequest(props: { pagination: PaginationInterface; filter?: string }) {
+      const { page, rowsPerPage, sortBy, descending } = props.pagination;
+      loading.value = true;
+
+      const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
+      const startRow = (page - 1) * rowsPerPage;
+      try {
+        const result = await store.getDrinks({
+          offset: startRow,
+          limit: fetchCount,
+          descending,
+        });
+        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;
+    }
+
     const drinkTypes = computed(() => store.drinkTypes);
 
     function updateDrink(drink: Drink) {
@@ -527,6 +569,8 @@ export default defineComponent({
       hasPermission,
       PERMISSIONS,
       image,
+      loading,
+      onRequest,
     };
   },
 });

src/store.ts

@@ -138,10 +138,13 @@ export const usePricelistStore = defineStore({
         this.extraIngredients.splice(index, 1);
       }
     },
-    async getDrinks() {
+    async getDrinks(filter: { limit?: number; offset?: number; descending?: boolean }) {
-      const { data } = await api.get<Array<FG.Drink>>('pricelist/drinks');
+      if (!filter) filter = { limit: 10 };
+      const { data } = await api.get<Array<FG.Drink>>('pricelist/drinks', {
+        params: filter,
+      });
       this.drinks = [];
-      data.forEach((drink) => {
+      data.drinks.forEach((drink) => {
         const _drink = new Drink(drink);
         drink.volumes.forEach((volume) => {
           const _volume = new DrinkPriceVolume(volume);
@@ -150,6 +153,7 @@ export const usePricelistStore = defineStore({
         this.drinks.push(_drink);
       });
       calc_all_min_prices(this.drinks, this.min_prices);
+      return data;
     },
     sortPrices(volume: DrinkPriceVolume) {
       volume.prices.sort((a, b) => {