[chore] server side filtering for ingredients

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/store.ts

@@ -169,6 +169,38 @@ export const usePricelistStore = defineStore({
         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) => {
+        if (a.price > b.price) return 1;
+        if (b.price > a.price) return -1;
+        return 0;
+      });
+    },
     async deletePrice(price: FG.DrinkPrice) {
       await api.delete(`pricelist/prices/${price.id}`);
     },