[chore] serverside pagination and filtering for pricelist

src/api.d.ts

@@ -23,11 +23,13 @@ declare namespace FG {
   interface DrinkPrice {
     id: number;
     price: number;
+    volume: Array<DrinkPriceVolume>
     public: boolean;
     description?: string;
   }
   interface DrinkPriceVolume {
     id: number;
+    drink: Array<Drink>;
     volume: number;
     min_prices: Array<MinPrices>;
     prices: Array<DrinkPrice>;

src/components/Pricelist.vue

@@ -5,11 +5,13 @@
     :rows="drinks"
     :visible-columns="visibleColumns"
     :filter="search"
-    :filter-method="filter"
     dense
-    :pagination="pagination"
+    v-model:pagination="pagination"
     :fullscreen="fullscreen"
+    @request="onRequest"
   >
+  <!--
+    :filter-method="filter"-->
     <template #top-right>
       <div class="row justify-end q-gutter-sm">
         <search-input v-model="search" :keys="options" />
@@ -109,7 +111,7 @@ export default defineComponent({
       if (!props.public) {
         user.value = useMainStore().currentUser.userid;
         void store.getPriceListColumnOrder(user.value);
-        void store.getDrinks();
+        onRequest({pagination: pagination.value, filter: {limit: 10}})
         void store.getPriceCalcColumn(user.value);
       } else {
         user.value = '';
@@ -170,28 +172,32 @@ export default defineComponent({
       {
         name: 'name',
         label: 'Name',
-        field: 'name',
+        //field: 'name',
-        sortable: true,
+        field: 'volume',
+        format: (val: FG.DrinkPriceVolume) => val.drink.name,
+        sortable: false,
         filterable: true,
         align: 'left',
       },
       {
         name: 'type',
         label: 'Kategorie',
-        field: 'type',
+        //field: 'type',
-        sortable: true,
+        field: 'volume',
+        sortable: false,
         filterable: true,
-        format: (val: FG.DrinkType) => val.name,
+        format: (val: FG.DrinkPriceVolume) => val.drink.type.name,
       },
       {
         name: 'tags',
         label: 'Tags',
-        field: 'tags',
+        //field: 'tags',
+        field: 'volume',
         filterable: true,
 
-        format: (val: Array<FG.Tag>) => {
+        format: (val: FG.DrinkPriceVolume) => {
           let retVal = '';
-          val.forEach((tag, index) => {
+          val.drink.tags.forEach((tag, index) => {
             if (index >= val.length - 1 && index > 0) {
               retVal += ', ';
             }
@@ -203,16 +209,17 @@ export default defineComponent({
       {
         name: 'volume',
         label: 'Inhalt',
+        //field: 'volume',
         field: 'volume',
         filterable: true,
-        sortable: true,
+        sortable: false,
-        format: (val: number) => `${val.toFixed(3)}L`,
+        format: (val: FG.DrinkPriceVolume) => `${val.volume.toFixed(3)}L`,
       },
       {
         name: 'price',
         label: 'Preis',
         field: 'price',
-        sortable: true,
+        sortable: false,
         filterable: true,
         format: (val: number) => `${val.toFixed(2)}€`,
       },
@@ -297,9 +304,46 @@ export default defineComponent({
       label: '',
     });
 
+    interface PaginationInterface {
+      sortBy: string;
+      descending: boolean;
+      page: number;
+      rowsPerPage: number;
+      rowsNumber: number;
+    }
+    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.getPricelist({
+          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;
+        console.log('result', result);
+        if (result) pagination.value.rowsNumber = result;
+      } catch (error) {
+        console.warn(error)
+      }
+      loading.value = false;
+    }
+
+    const loading = ref(false);
     const pagination = ref({
       sortBy: 'name',
       rowsPerPage: 10,
+      rowsNumber: 10,
+      descending:false,
+      page: 1
     });
 
     const fullscreen = ref(false);
@@ -314,6 +358,8 @@ export default defineComponent({
       filter,
       pagination,
       fullscreen,
+      loading,
+      onRequest,
     };
   },
 });

src/store.ts

@@ -76,6 +76,7 @@ export const usePricelistStore = defineStore({
   state: () => ({
     drinkTypes: [] as Array<FG.DrinkType>,
     drinks: [] as Array<Drink>,
+    pricelist: [] as Array<FG.DrinkPrice>,
     extraIngredients: [] as Array<FG.ExtraIngredient>,
     min_prices: [] as Array<number>,
     tags: [] as Array<FG.Tag>,
@@ -180,7 +181,7 @@ export const usePricelistStore = defineStore({
     }) {
       if (!filter) filter = { limit: 10 };
       console.log('filter_api', filter);
-      const { data } = await api.get<Array<FG.Drink>>('pricelist/drinks', {
+      const { data } = await api.get<{drinks: Array<FG.Drink>; count: number}>('pricelist/drinks', {
         params: filter,
       });
       const drinks = [];
@@ -195,12 +196,21 @@ export const usePricelistStore = defineStore({
       calc_all_min_prices(drinks, this.min_prices);
       return drinks;
     },
-    sortPrices(volume: DrinkPriceVolume) {
+    async getPricelist(filter: {
-      volume.prices.sort((a, b) => {
+        limit?: number;
-        if (a.price > b.price) return 1;
+        offset?: number;
-        if (b.price > a.price) return -1;
+        descending?: boolean;
-        return 0;
+        search_name?: string;
-      });
+        search_key?: string;
+    }) {
+        const { data } = await api.get<{pricelist: Array<FG.DrinkPrice>; count: number}>('pricelist/list', {
+            params: filter,
+        });
+        this.pricelist = [];
+        console.log(data)
+        this.pricelist = data.pricelist;
+        console.log(this.pricelist);
+        return data.count
     },
     async deletePrice(price: FG.DrinkPrice) {
       await api.delete(`pricelist/prices/${price.id}`);
@@ -344,7 +354,7 @@ export const usePricelistStore = defineStore({
     },
   },
   getters: {
-    pricelist() {
+    /*pricelist() {
       const retVal: Array<Pricelist> = [];
       this.drinks.forEach((drink) => {
         drink.volumes.forEach((volume) => {
@@ -362,7 +372,21 @@ export const usePricelistStore = defineStore({
         });
       });
       return retVal;
-    },
+    },*/
+      computed_pricelist() {
+          const retVal: Array<Pricelist> = [];
+          this.pricelist.forEach((price) => {
+              retVal.push({
+                  name: price.volume.drink.name,
+                  type: <FG.DrinkType>price.volume.drink.type,
+                  tags: <Array<FG.Tag>>price.volume.drink.tags,
+                  volume: <number>price.volume.volume,
+                  public: price.public,
+                  price: price.price,
+                  description: <string>price.description,
+              })
+          })
+      }
   },
 });