[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/components/CalculationTable.vue

@@ -6,11 +6,14 @@
     :rows="drinks"
     dense
     row-key="id"
-    :filter="search"
-    :filter-method="filter"
     grid
-    :rows-per-page-options="[0]"
+    :loading="loading"
+    :filter="search"
+    @request="onRequest"
   >
+    <!--
+    :filter-method="filter"
+  -->
     <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(() => {
-      void store.getDrinks();
+    onMounted(() => {
+      //void store.getDrinks();
+      onRequest({
+        pagination: pagination.value,
+        filter: undefined,
+      });
     });
 
     const columns = [
@@ -321,7 +328,7 @@ export default defineComponent({
           });
           return retVal;
         },
-        filterable: true,
+        filterable: false,
         sortable: false,
         public: false,
       },
@@ -371,9 +378,46 @@ 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?: 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,
+        });
+        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 +571,8 @@ export default defineComponent({
       hasPermission,
       PERMISSIONS,
       image,
+      loading,
+      onRequest,
     };
   },
 });

src/components/CalculationTable/Ingredients.vue

@@ -9,7 +9,8 @@
         <div v-if="ingredient.drink_ingredient" class="col">
           <div class="full-width row justify-evenly q-py-xs">
             <div class="col">
-              {{ get_drink_ingredient_name(ingredient.drink_ingredient.ingredient_id) }}
+              <!--{{ get_drink_ingredient_name(ingredient.drink_ingredient.ingredient_id) }}-->
+              {{ ingredient.drink_ingredient.name }}
               <q-popup-edit
                 v-if="editable"
                 v-slot="scope"
@@ -25,6 +26,8 @@
                   label="Getränk"
                   filled
                   dense
+                  use-input
+                  @filter="filter_drinks"
                   :options="drinks"
                   option-label="name"
                   option-value="id"
@@ -78,6 +81,8 @@
               v-model="ingredient.extra_ingredient"
               filled
               dense
+              use-input
+              @filter="filter_extra_ingredients"
               :options="extra_ingredients"
               option-label="name"
             />
@@ -107,8 +112,10 @@
                 v-model="newIngredient"
                 filled
                 dense
+                use-input
                 label="Zutat"
                 :options="[...drinks, ...extra_ingredients]"
+                @filter="filter"
                 option-label="name"
               />
             </div>
@@ -155,7 +162,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, onBeforeMount, unref } from 'vue';
-import { usePricelistStore } from '../../store';
+import { usePricelistStore, Drink } from '../../store';
 import { clone } from '../../utils/utils';
 
 export default defineComponent({
@@ -236,13 +243,50 @@ export default defineComponent({
       emit('update:modelValue', unref(edit_ingredients));
       update();
     }
-    const drinks = computed(() =>
-      store.drinks.filter((drink) => {
-        console.log('computed drinks', drink.name, drink.cost_per_volume);
-        return drink.cost_per_volume;
-      })
-    );
-    const extra_ingredients = computed(() => store.extraIngredients);
+    //const drinks = computed(() =>
+    //  store.drinks.filter((drink) => {
+    //    console.log('computed drinks', drink.name, drink.cost_per_volume);
+    //    return drink.cost_per_volume;
+    //  })
+    //);
+    const drinks = ref<Array<Drink>>([]);
+    const _extra_ingredients = computed(() => store.extraIngredients);
+    const extra_ingredients = ref(_extra_ingredients.value);
+
+    async function filter_drinks(val, update) {
+      let result = <Array<Drink>>[];
+      if (val === '') {
+        result = await store.getDrinks_no_store({ limit: 5, ingredient: true });
+      } else {
+        result = await store.getDrinks_no_store({
+          limit: 5,
+          search_name: val,
+          search_key: 'name',
+          ingredient: true,
+        });
+      }
+      update(() => {
+        drinks.value = result;
+      });
+    }
+    function filter_extra_ingredients(val, update) {
+      if (val === '') {
+        update(() => {
+          extra_ingredients.value = _extra_ingredients.value;
+        });
+      } else {
+        update(() => {
+          extra_ingredients.value = _extra_ingredients.value.filter((ingredient) => {
+            return ingredient.name.toLowerCase().includes(val.toLowerCase());
+          });
+        });
+      }
+    }
+
+    async function filter(val, update) {
+      await filter_drinks(val, update);
+      filter_extra_ingredients(val, update);
+    }
 
     function get_drink_ingredient_name(id: number) {
       return store.drinks.find((a) => a.id === id)?.name;
@@ -265,6 +309,9 @@ export default defineComponent({
       deleteIngredient,
       get_drink_ingredient_name,
       edit_ingredients,
+      filter,
+      filter_drinks,
+      filter_extra_ingredients,
     };
   },
 });

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

@@ -138,10 +138,21 @@ export const usePricelistStore = defineStore({
         this.extraIngredients.splice(index, 1);
       }
     },
-    async getDrinks() {
-      const { data } = await api.get<Array<FG.Drink>>('pricelist/drinks');
+    async getDrinks(filter: {
+      limit?: number;
+      offset?: number;
+      descending?: boolean;
+      search_name?: string;
+      search_key?: string;
+      receipt?: boolean;
+    }) {
+      if (!filter) filter = { limit: 10 };
+      console.log('filter_api', filter);
+      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 +161,39 @@ 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) => {
+        if (a.price > b.price) return 1;
+        if (b.price > a.price) return -1;
+        return 0;
+      });
+    },
+    async getDrinks_no_store(filter: {
+      limit?: number;
+      offset?: number;
+      descending?: boolean;
+      search_name?: string;
+      search_key?: string;
+      ingredient?: boolean;
+    }) {
+      if (!filter) filter = { limit: 10 };
+      console.log('filter_api', filter);
+      const { data } = await api.get<Array<FG.Drink>>('pricelist/drinks', {
+        params: filter,
+      });
+      const drinks = [];
+      data.drinks.forEach((drink) => {
+        const _drink = new Drink(drink);
+        drink.volumes.forEach((volume) => {
+          const _volume = new DrinkPriceVolume(volume);
+          _drink.volumes.push(_volume);
+        });
+        drinks.push(_drink);
+      });
+      calc_all_min_prices(drinks, this.min_prices);
+      return drinks;
     },
     sortPrices(volume: DrinkPriceVolume) {
       volume.prices.sort((a, b) => {