[CLEAR-39] Add searching products

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) => {

front/pages/products.vue

@@ -20,7 +20,7 @@
             return {
                 productsListData: null
             };
-        },
+        }
     };
 </script>