From 736ea04b4acd3220ecc9faae504623b7e6e914d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Fri, 2 Apr 2021 19:32:08 +0200
Subject: [PATCH] [pricelist][search] add help

---
 .../pricelist/components/CalculationTable.vue | 12 +++++--
 .../pricelist/components/Pricelist.vue        | 13 +++----
 .../pricelist/components/SearchInput.vue      | 35 +++++++++++++++++--
 src/plugins/pricelist/pages/Receipts.vue      | 25 +++++++++++--
 4 files changed, 72 insertions(+), 13 deletions(-)

diff --git a/src/plugins/pricelist/components/CalculationTable.vue b/src/plugins/pricelist/components/CalculationTable.vue
index f841f02..fd52724 100644
--- a/src/plugins/pricelist/components/CalculationTable.vue
+++ b/src/plugins/pricelist/components/CalculationTable.vue
@@ -22,7 +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]" />
+        <search-input v-model="search" :keys="search_keys" />
         <q-btn label="Aufpreise">
           <q-menu anchor="center middle" self="center middle">
             <min-price-setting />
@@ -416,10 +416,11 @@ export default defineComponent({
       },
       {
         name: 'name',
-        label: 'Getränkename',
+        label: 'Name',
         field: 'name',
         sortable: true,
         sort,
+        filterable: true,
       },
 
       {
@@ -429,6 +430,7 @@ export default defineComponent({
         format: (val: FG.DrinkType) => `${val.name}`,
         sortable: true,
         sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
+        filterable: true,
       },
       {
         name: 'tags',
@@ -444,6 +446,7 @@ export default defineComponent({
           });
           return retVal;
         },
+        filterable: true,
       },
       {
         name: 'article_id',
@@ -451,6 +454,7 @@ export default defineComponent({
         field: 'article_id',
         sortable: true,
         sort,
+        filterable: true,
       },
       {
         name: 'volume_package',
@@ -491,6 +495,7 @@ export default defineComponent({
         name: 'receipt',
         label: 'Bauanleitung',
         field: 'receipt',
+        filterable: true,
       },
     ];
     const column_calc = [
@@ -535,6 +540,8 @@ export default defineComponent({
       },
     });
 
+    const search_keys = computed(() => columns.filter((column) => column.filterable));
+
     // eslint-disable-next-line vue/return-in-computed-property
     const pagination = computed(() => {
       rowsPerPage: store.drinks.length;
@@ -617,6 +624,7 @@ export default defineComponent({
       console,
       search,
       filter,
+      search_keys,
       tags: computed(() => store.tags),
     };
   },
diff --git a/src/plugins/pricelist/components/Pricelist.vue b/src/plugins/pricelist/components/Pricelist.vue
index ac0ddde..cdceaf3 100644
--- a/src/plugins/pricelist/components/Pricelist.vue
+++ b/src/plugins/pricelist/components/Pricelist.vue
@@ -12,10 +12,7 @@
     >
       <template #top-right>
         <div class="row q-gutter-sm">
-          <search-input
-            v-model="search"
-            :keys="[...columns_drinks, ...columns_volumes, ...columns_prices]"
-          />
+          <search-input v-model="search" :keys="search_keys" />
           <q-select
             v-model="visibleColumn"
             multiple
@@ -150,10 +147,11 @@ export default defineComponent({
       },
       {
         name: 'name',
-        label: 'Getränk',
+        label: 'Name',
         field: 'name',
         align: 'center',
         sortable: true,
+        filterable: true,
       },
       {
         name: 'drink_type',
@@ -162,6 +160,7 @@ export default defineComponent({
         format: (val: FG.DrinkType) => `${val.name}`,
         sortable: true,
         sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
+        filterable: true,
       },
       {
         name: 'tags',
@@ -177,6 +176,7 @@ export default defineComponent({
           });
           return retVal;
         },
+        filterable: true,
       },
 
       {
@@ -249,7 +249,7 @@ export default defineComponent({
       return retVal;
     }
     const search = ref<Search>({ label: '', value: '', key: '' });
-
+    const search_keys = computed(() => columns_drinks.filter((column) => column.filterable));
     return {
       columns_drinks,
       columns_volumes,
@@ -258,6 +258,7 @@ export default defineComponent({
       visibleColumn,
       search,
       filter,
+      search_keys,
     };
   },
 });
diff --git a/src/plugins/pricelist/components/SearchInput.vue b/src/plugins/pricelist/components/SearchInput.vue
index 6edb3da..cd5dfb5 100644
--- a/src/plugins/pricelist/components/SearchInput.vue
+++ b/src/plugins/pricelist/components/SearchInput.vue
@@ -1,12 +1,41 @@
 <template>
+  <q-dialog v-model="alert">
+    <q-card>
+      <q-card-section>
+        <div class="text-h6">Suche</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <div>
+          Wenn du in die Suche etwas eingibst, wird in allen Spalten gesucht. Mit einem `@` Zeichen,
+          kann man die Suche eingrenzen auf eine Spalte. Zumbeispiel: `Tequilaparty@Tags`
+        </div>
+      </q-card-section>
+      <q-card-section>
+        <div>Mögliche Suchbegriffe nach dem @:</div>
+        <div class="fit row q-gutter-sm">
+          <div v-for="key in keys" :key="key.name">
+            {{ key.label }}
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn v-close-popup flat label="OK" color="primary" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
   <q-input v-model="v_model" filled dense>
     <template #append>
       <q-icon name="mdi-magnify" />
     </template>
+    <template #prepend>
+      <q-btn icon="mdi-help-circle" flat round @click="alert = true" />
+    </template>
   </q-input>
 </template>
 <script lang="ts">
-import { defineComponent, computed, PropType } from 'vue';
+import { defineComponent, computed, PropType, ref } from 'vue';
 import { Search, Col } from '../utils/filter';
 export default defineComponent({
   name: 'SearchInput',
@@ -51,7 +80,9 @@ export default defineComponent({
         }
       },
     });
-    return { v_model };
+
+    const alert = ref(false);
+    return { v_model, alert };
   },
 });
 </script>
diff --git a/src/plugins/pricelist/pages/Receipts.vue b/src/plugins/pricelist/pages/Receipts.vue
index f29cf14..4bc6af9 100644
--- a/src/plugins/pricelist/pages/Receipts.vue
+++ b/src/plugins/pricelist/pages/Receipts.vue
@@ -10,7 +10,7 @@
     :columns="options"
   >
     <template #top-right>
-      <search-input v-model="search" :keys="options" />
+      <search-input v-model="search" :keys="search_keys" />
     </template>
     <template #item="props">
       <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
@@ -84,10 +84,11 @@ export default defineComponent({
       },
       {
         name: 'name',
-        label: 'Getränk',
+        label: 'Name',
         field: 'name',
         align: 'center',
         sortable: true,
+        filterable: true,
       },
       {
         name: 'drink_type',
@@ -96,6 +97,23 @@ export default defineComponent({
         format: (val: FG.DrinkType) => `${val.name}`,
         sortable: true,
         sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
+        filterable: true,
+      },
+      {
+        name: 'tags',
+        label: 'Tag',
+        field: 'tags',
+        format: (val: Array<FG.Tag>) => {
+          let retVal = '';
+          val.forEach((tag, index) => {
+            if (index > 0) {
+              retVal += ', ';
+            }
+            retVal += tag.name;
+          });
+          return retVal;
+        },
+        filterable: true,
       },
       {
         name: 'volumes',
@@ -136,12 +154,13 @@ export default defineComponent({
     ];
 
     const search = ref<Search>({ value: '', key: '', label: '' });
-
+    const search_keys = computed(() => columns_drinks.filter((column) => column.filterable));
     return {
       drinks,
       options: [...columns_drinks, ...columns_volumes, ...columns_prices],
       search,
       filter,
+      search_keys,
     };
   },
 });