[pricelist] add search

src/plugins/pricelist/components/CalculationTable.vue

@@ -9,6 +9,8 @@
     row-key="id"
     virtual-scroll
     :rows-per-page-options="[0]"
+    :filter="search"
+    :filter-method="filter"
   >
     <template #header="props">
       <q-tr :props="props">
@@ -20,6 +22,7 @@
     </template>
     <template #top-right>
       <div class="row justify-end q-gutter-sm">
+        <search-input v-model="search" :keys="[...columns, ...column_calc, ...column_prices]" />
         <q-btn label="Aufpreise">
           <q-menu anchor="center middle" self="center middle">
             <min-price-setting />
@@ -331,6 +334,8 @@ import { Drink, usePricelistStore } from 'src/plugins/pricelist/store';
 import MinPriceSetting from 'src/plugins/pricelist/components/MinPriceSetting.vue';
 import NewDrink from 'src/plugins/pricelist/components/CalculationTable/NewDrink.vue';
 import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
+import SearchInput from './SearchInput.vue';
+import { filter } from '../utils/filter';
 import { Notify } from 'quasar';
 
 function sort(a: string | number, b: string | number) {
@@ -341,7 +346,7 @@ function sort(a: string | number, b: string | number) {
 
 export default defineComponent({
   name: 'CalculationTable',
-  components: { BuildManual, MinPriceSetting, DrinkPriceVolumesTable, NewDrink },
+  components: { SearchInput, BuildManual, MinPriceSetting, DrinkPriceVolumesTable, NewDrink },
   setup() {
     const mainStore = useMainStore();
     const store = usePricelistStore();
@@ -523,6 +528,11 @@ export default defineComponent({
       updateDrink(drink);
     }
 
+    const search = ref({
+      value: '',
+      key: '',
+      label: '',
+    });
     return {
       drinks: computed(() => store.drinks),
       pagination,
@@ -540,6 +550,8 @@ export default defineComponent({
       addStep,
       deleteStep,
       console,
+      search,
+      filter,
     };
   },
 });

src/plugins/pricelist/components/Pricelist.vue

@@ -1,13 +1,21 @@
 <template>
   <div>
     <q-table
+      class="full-width"
       title="Getränke"
       :columns="columns_drinks"
       :rows="drinks"
       row-key="name"
       :visible-columns="visibleColumn"
+      :filter="search"
+      :filter-method="filter"
     >
       <template #top-right>
+        <div class="row q-gutter-sm">
+          <search-input
+            v-model="search"
+            :keys="[...columns_drinks, ...columns_volumes, ...columns_prices]"
+          />
           <q-select
             v-model="visibleColumn"
             multiple
@@ -21,6 +29,7 @@
             option-value="name"
             options-cover
           />
+        </div>
       </template>
       <template #body-cell-volumes="props">
         <q-td :props="props">
@@ -63,6 +72,8 @@
                 : 'no-image.svg'
             "
             placeholder-src="no-image.svg"
+            fit="contain"
+            style="max-height: 300px"
           >
             <template #error>
               <div class="absolute-full flex flex-center bg-negative text-white">
@@ -79,6 +90,8 @@
 import { defineComponent, onBeforeMount, computed, ref } from 'vue';
 import { usePricelistStore } from '../store';
 import { useMainStore } from 'src/stores';
+import SearchInput from './SearchInput.vue';
+import { filter } from '../utils/filter';
 function sort(a: string | number, b: string | number) {
   if (a > b) return 1;
   if (b > a) return -1;
@@ -86,6 +99,7 @@ function sort(a: string | number, b: string | number) {
 }
 export default defineComponent({
   name: 'Pricelist',
+  components: { SearchInput },
   filters: {
     setVolume(volume: number) {
       if (volume * 10 > 1) {
@@ -105,12 +119,6 @@ export default defineComponent({
   },
   setup() {
     let user: string | null;
-    onBeforeMount(() => {
-      if (user) {
-        store.getPriceCalcColumn(user);
-      }
-    });
-    const store = usePricelistStore();
     onBeforeMount(() => {
       void store.getDrinks();
       try {
@@ -118,7 +126,12 @@ export default defineComponent({
       } catch {
         user = null;
       }
+
+      if (user) {
+        store.getPriceCalcColumn(user);
+      }
     });
+    const store = usePricelistStore();
     const drinks = computed(() => store.drinks);
     const columns_drinks = [
       {
@@ -210,7 +223,17 @@ export default defineComponent({
       });
       return retVal;
     }
-    return { columns_drinks, columns_volumes, columns_prices, drinks, visibleColumn };
+    const search = ref({ label: '', value: '', key: '' });
+
+    return {
+      columns_drinks,
+      columns_volumes,
+      columns_prices,
+      drinks,
+      visibleColumn,
+      search,
+      filter,
+    };
   },
 });
 </script>

src/plugins/pricelist/components/SearchInput.vue

@@ -0,0 +1,61 @@
+<template>
+  <q-input v-model="v_model" filled dense>
+    <template #append>
+      <q-icon name="mdi-magnify" />
+    </template>
+  </q-input>
+</template>
+<script lang="ts">
+import { defineComponent, computed, PropType } from 'vue';
+export default defineComponent({
+  name: 'SearchInput',
+  props: {
+    modelValue: {
+      type: Object as PropType<{
+        value: string;
+        key: string | undefined;
+        label: string | undefined;
+      }>,
+      default: { value: '', key: undefined, label: '' },
+    },
+    keys: {
+      type: Object as PropType<Array<{ name: string; label: string }>>,
+      required: true,
+    },
+  },
+  emits: {
+    'update:modelValue': (val: {
+      value: string;
+      key: string | undefined;
+      label: string | undefined;
+    }) => val,
+  },
+  setup(props, { emit }) {
+    const v_model = computed<string>({
+      get: () => {
+        if (!props.modelValue.label || props.modelValue.label === '') {
+          return `${props.modelValue.value}`;
+        }
+        return `${props.modelValue.value}@${props.modelValue.label}`;
+      },
+      set: (val: string) => {
+        const split = val.toLowerCase().split('@');
+        if (split.length < 2) {
+          emit('update:modelValue', { value: split[0], label: undefined, key: undefined });
+        } else {
+          props.keys.find((key) => {
+            if (key.label.toLowerCase() === split[1]) {
+              console.log(key.name);
+              emit('update:modelValue', { value: split[0], label: split[1], key: key.name });
+              return true;
+            }
+            return false;
+          });
+          //emit('update:modelValue', {value: split[0], label: split[1], key: undefined})
+        }
+      },
+    });
+    return { v_model };
+  },
+});
+</script>

src/plugins/pricelist/utils/filter.ts

@@ -0,0 +1,27 @@
+import { Drink } from '../store';
+
+function filter(
+  rows: Array<Drink>,
+  terms: { value: string; key: string },
+  cols: Array<{ name: string; label: string; field: string }>,
+  cellValue: { (col: { name: string; label: string; field: string }, row: Drink): string }
+) {
+  if (terms.value) {
+    return rows.filter((row) => {
+      if (!terms.key || terms.key === '') {
+        return cols.some((col) => {
+          const val = cellValue(col, row) + '';
+          const haystack = val === 'undefined' || val === 'null' ? '' : val.toLowerCase();
+          return haystack.indexOf(terms.value) !== -1;
+        });
+      }
+      const index = cols.findIndex((col) => col.name === terms.key);
+      const val = cellValue(cols[index], row) + '';
+      const haystack = val === 'undefined' || val === 'null' ? '' : val.toLowerCase();
+      return haystack.indexOf(terms.value) !== -1;
+    });
+  }
+  return rows;
+}
+
+export { filter };