From b5af362a1d8c90c263eca79f187fb9fd052546c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriela=20Pa=C5=82ka?= <gabi179@gmail.com>
Date: Sun, 19 Jan 2020 18:02:45 +0100
Subject: [PATCH] [CLEAR-39] Add searching products

---
 front/components/Products/ProductsList.vue | 23 +++++++++++++++++++++-
 front/pages/products.vue                   |  2 +-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/front/components/Products/ProductsList.vue b/front/components/Products/ProductsList.vue
index 682a221..2cc7020 100644
--- a/front/components/Products/ProductsList.vue
+++ b/front/components/Products/ProductsList.vue
@@ -1,5 +1,9 @@
 <template>
     <div>
+        <Row type="flex" justify="center" style="margin-bottom: 20px">
+            <Input v-model="search" @on-change="debounce" search enter-button="Wyszukaj"
+                   placeholder="Szukaj produktu..."/>
+        </Row>
         <Table :columns="columns" :border="true" :data="data" :loading="loading"/>
         <Page @on-change="retrieveProducts" :total="pagination.total" style="margin-top:10px;"/>
     </div>
@@ -40,14 +44,31 @@
                     total: 0
                 },
                 loading: true,
+                search: '',
+                debounceTimer: 0,
             };
         },
         methods: {
+            resetData() {
+                this.data = [];
+                this.pagination = {total: 0};
+                this.retrieveProducts();
+            },
+            debounce(event) {
+                if (this.debounceTimer !== null) {
+                    clearTimeout(this.debounceTimer);
+                }
+                this.debounceTimer = setTimeout(() => {
+                    this.search = event.target.value;
+                    this.resetData();
+                }, 800);
+            },
             retrieveProducts(page = 1) {
                 this.loading = true;
                 this.$axios.get('/product', {
                     params: {
-                        page: page
+                        page: page,
+                        search: this.search
                     }
                 })
                     .then((res) => {
diff --git a/front/pages/products.vue b/front/pages/products.vue
index 295f374..131bc2a 100644
--- a/front/pages/products.vue
+++ b/front/pages/products.vue
@@ -20,7 +20,7 @@
             return {
                 productsListData: null
             };
-        },
+        }
     };
 </script>