src/components/BuildManual/BuildManualVolumePart.vue

@@ -5,8 +5,7 @@
       <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) }}-->
-            {{ ingredient.drink_ingredient?.name }}
+            {{ name(ingredient.drink_ingredient?.ingredient_id) }}
           </div>
           <div class="col">
             {{

src/components/CalculationTable.vue

@@ -6,14 +6,11 @@
     :rows="drinks"
     dense
     row-key="id"
-    grid
-    :loading="loading"
     :filter="search"
-    @request="onRequest"
-  >
-    <!--
     :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" />
@@ -169,7 +166,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,12 +203,8 @@ export default defineComponent({
   setup(props) {
     const store = usePricelistStore();
 
-    onMounted(() => {
-      //void store.getDrinks();
-      onRequest({
-        pagination: pagination.value,
-        filter: undefined,
-      });
+    onBeforeMount(() => {
+      void store.getDrinks();
     });
 
     const columns = [
@@ -328,7 +321,7 @@ export default defineComponent({
           });
           return retVal;
         },
-        filterable: false,
+        filterable: true,
         sortable: false,
         public: false,
       },
@@ -378,46 +371,9 @@ export default defineComponent({
     const pagination = ref({
       sortBy: 'name',
       descending: false,
-      page: 1,
-      rowsPerPage: 10,
-      rowsNumber: 10,
+      rowsPerPage: store.drinks.length,
     });
 
-    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) {
@@ -571,8 +527,6 @@ export default defineComponent({
       hasPermission,
       PERMISSIONS,
       image,
-      loading,
-      onRequest,
     };
   },
 });

src/components/CalculationTable/Ingredients.vue

@@ -9,8 +9,7 @@
         <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) }}-->
-              {{ ingredient.drink_ingredient.name }}
+              {{ get_drink_ingredient_name(ingredient.drink_ingredient.ingredient_id) }}
               <q-popup-edit
                 v-if="editable"
                 v-slot="scope"
@@ -26,8 +25,6 @@
                   label="Getränk"
                   filled
                   dense
-                  use-input
-                  @filter="filter_drinks"
                   :options="drinks"
                   option-label="name"
                   option-value="id"
@@ -81,8 +78,6 @@
               v-model="ingredient.extra_ingredient"
               filled
               dense
-              use-input
-              @filter="filter_extra_ingredients"
               :options="extra_ingredients"
               option-label="name"
             />
@@ -112,10 +107,8 @@
                 v-model="newIngredient"
                 filled
                 dense
-                use-input
                 label="Zutat"
                 :options="[...drinks, ...extra_ingredients]"
-                @filter="filter"
                 option-label="name"
               />
             </div>
@@ -162,7 +155,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, onBeforeMount, unref } from 'vue';
-import { usePricelistStore, Drink } from '../../store';
+import { usePricelistStore } from '../../store';
 import { clone } from '../../utils/utils';
 
 export default defineComponent({
@@ -243,50 +236,13 @@ 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 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);
-    }
+    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);
 
     function get_drink_ingredient_name(id: number) {
       return store.drinks.find((a) => a.id === id)?.name;
@@ -309,9 +265,6 @@ export default defineComponent({
       deleteIngredient,
       get_drink_ingredient_name,
       edit_ingredients,
-      filter,
-      filter_drinks,
-      filter_extra_ingredients,
     };
   },
 });

src/pages/Receipts.vue

@@ -1,17 +1,14 @@
 <template>
   <q-table
-    v-model:pagination="pagination"
     grid
     title="Rezepte"
     :rows="drinks"
     row-key="id"
     hide-header
-    @request="onRequest"
-    :columns="options"
     :filter="search"
+    :filter-method="filter"
+    :columns="options"
   >
-    <!--:filter="search"
-      :filter-method="filter"-->
     <template #top-right>
       <search-input v-model="search" :keys="search_keys" />
     </template>
@@ -71,18 +68,12 @@ export default defineComponent({
   setup() {
     const store = usePricelistStore();
     onBeforeMount(() => {
-      //void store.getDrinks();
-      onRequest({
-        pagination: pagination.value,
-        filter: { limit: 10, receipt: true },
-      });
+      void store.getDrinks();
     });
-    const drinks = computed(
-      () =>
-        //store.drinks.filter((drink) => {
-        //  return drink.volumes.some((volume) => volume.ingredients.length > 0);
-        //})
-        store.drinks
+    const drinks = computed(() =>
+      store.drinks.filter((drink) => {
+        return drink.volumes.some((volume) => volume.ingredients.length > 0);
+      })
     );
 
     const columns_drinks = [
@@ -90,7 +81,6 @@ export default defineComponent({
         name: 'picture',
         label: 'Bild',
         align: 'center',
-        filterable: false,
       },
       {
         name: 'name',
@@ -130,7 +120,6 @@ export default defineComponent({
         label: 'Preise',
         field: 'volumes',
         align: 'center',
-        filterable: false,
       },
     ];
     const columns_volumes = [
@@ -172,47 +161,6 @@ 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],
@@ -220,9 +168,6 @@ export default defineComponent({
       filter,
       search_keys,
       image,
-      onRequest,
-      loading,
-      pagination,
     };
   },
 });

src/store.ts

@@ -138,21 +138,10 @@ export const usePricelistStore = defineStore({
         this.extraIngredients.splice(index, 1);
       }
     },
-    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,
-      });
+    async getDrinks() {
+      const { data } = await api.get<Array<FG.Drink>>('pricelist/drinks');
       this.drinks = [];
-      data.drinks.forEach((drink) => {
+      data.forEach((drink) => {
         const _drink = new Drink(drink);
         drink.volumes.forEach((volume) => {
           const _volume = new DrinkPriceVolume(volume);
@@ -161,39 +150,6 @@ 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) => {