[chore] add serverside sorting for pricelist. fix public viewing

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

@@ -169,7 +169,7 @@
 
 <script lang="ts">
 import DrinkPriceVolumes from '../components/CalculationTable/DrinkPriceVolumes.vue';
-import { defineComponent, onMounted, ComputedRef, computed, ref } from 'vue';
+import { defineComponent, onBeforeMount, ComputedRef, computed, ref } from 'vue';
 import { Drink, usePricelistStore, DrinkPriceVolume } from '../store';
 import MinPriceSetting from '../components/MinPriceSetting.vue';
 import { api, hasPermission } from '@flaschengeist/api';
@@ -206,7 +206,7 @@ export default defineComponent({
   setup(props) {
     const store = usePricelistStore();
 
-    onMounted(() => {
+    onBeforeMount(() => {
       //void store.getDrinks();
       onRequest({
         pagination: pagination.value,
@@ -404,16 +404,17 @@ export default defineComponent({
           offset: startRow,
           limit: fetchCount,
           descending,
-          search_name: props.filter.value,
+          search_name: props.filter?.value,
-          search_key: props.filter.key,
+          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.count);
         if (result.count) pagination.value.rowsNumber = result.count;
       } catch (error) {
-        //..
+        console.warn(error);
       }
       loading.value = false;
     }

src/components/CalculationTable/DrinkPriceVolumes.vue

@@ -43,7 +43,7 @@
       </div>
       <div class="q-pa-sm">
         <div v-for="(price, index) in volume.prices" :key="price.id">
-          <div class="fit row justify-around q-py-sm">
+          <div v-if="isPublic(price, volume)" class="fit row justify-around q-py-sm">
             <div
               v-if="!editable || !hasPermission(PERMISSIONS.EDIT_PRICE)"
               class="text-body1 col-3"
@@ -294,6 +294,15 @@ export default defineComponent({
       emit('update:modelValue', volumes.value);
     }
 
+    function isPublic(price: FG.DrinkPrice, drink) {
+      console.log('drink', drink);
+      if (props.public) {
+        console.log(price);
+        return price.public;
+      }
+      return true;
+    }
+
     const isUnderMinPrice = computed(() => {
       if (volumes.value) {
         const this_volume = volumes.value.find((a) => a.id === volume.value);
@@ -328,6 +337,7 @@ export default defineComponent({
       isUnderMinPrice,
       hasPermission,
       PERMISSIONS,
+      isPublic,
     };
   },
 });

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,11 +111,11 @@ export default defineComponent({
       if (!props.public) {
         user.value = useMainStore().currentUser.userid;
         void store.getPriceListColumnOrder(user.value);
-        void store.getDrinks();
         void store.getPriceCalcColumn(user.value);
       } else {
         user.value = '';
       }
+      onRequest({ pagination: pagination.value, filter: { limit: 10 } });
     });
 
     const _order = ref<Array<Order>>([
@@ -170,7 +172,9 @@ export default defineComponent({
       {
         name: 'name',
         label: 'Name',
-        field: 'name',
+        //field: 'name',
+        field: 'volume',
+        format: (val: FG.DrinkPriceVolume) => val.drink.name,
         sortable: true,
         filterable: true,
         align: 'left',
@@ -178,20 +182,22 @@ export default defineComponent({
       {
         name: 'type',
         label: 'Kategorie',
-        field: 'type',
+        //field: 'type',
+        field: 'volume',
         sortable: true,
         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,10 +209,11 @@ export default defineComponent({
       {
         name: 'volume',
         label: 'Inhalt',
+        //field: 'volume',
         field: 'volume',
         filterable: true,
         sortable: true,
-        format: (val: number) => `${val.toFixed(3)}L`,
+        format: (val: FG.DrinkPriceVolume) => `${val.volume.toFixed(3)}L`,
       },
       {
         name: 'price',
@@ -297,9 +304,48 @@ 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;
+      console.log('descending', descending);
+      try {
+        const result = await store.getPricelist({
+          offset: startRow,
+          limit: fetchCount,
+          descending: descending ? true : undefined,
+          search_name: props.filter?.value,
+          search_key: props.filter?.key,
+          sortBy: sortBy,
+        });
+        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 +360,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,9 +181,12 @@ 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 }>(
-        params: filter,
+        'pricelist/drinks',
-      });
+        {
+          params: filter,
+        }
+      );
       const drinks = [];
       data.drinks.forEach((drink) => {
         const _drink = new Drink(drink);
@@ -195,12 +199,25 @@ 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;
+      sortBy?: 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 +361,7 @@ export const usePricelistStore = defineStore({
     },
   },
   getters: {
-    pricelist() {
+    /*pricelist() {
       const retVal: Array<Pricelist> = [];
       this.drinks.forEach((drink) => {
         drink.volumes.forEach((volume) => {
@@ -362,6 +379,20 @@ 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,
+        });
+      });
     },
   },
 });