partial search component

config/routes/api.js

@@ -2,6 +2,10 @@ const fs = require('fs');
 
 module.exports = function(server, db) {
     server.get('/api/items', async (req, res) => {
+        if (req.query.q) {
+                const items = await db.collection('items').find({title: {$regex: req.query.q, $options: "i"}}, {limit: 5}).toArray();
+                res.json(items);
+        } else {
            const items = await db.collection('items').find({}).toArray(),
                sortBy = req.query.sorting;
 
@@ -24,6 +28,8 @@ module.exports = function(server, db) {
                        break;
                }
            } else res.send({error: 'Товаров в магазине пока что нет.'});
+        }
+        
     });
 
     server.get('/api/items/page/:page', async (req, res) => {
@@ -37,6 +43,11 @@ module.exports = function(server, db) {
         }
     });
 
+    server.get('/api/items/search/:query', (req, res) => {
+        const query = req.query.q;
+        console.log(query);
+    })
+    
     server.get('/api/items/:category', async (req, res) => {
         const items = await db.collection('items').find({category: req.params.category}).toArray(),
             sortBy = req.query.sorting;

dist/views/admin/items.pug

@@ -13,8 +13,8 @@ body.has-fixed-sidenav
                             .search-field
                                 .nav-wrapper
                                     .input-field
-                                        input#search(type="search" required placeholder="Введите название товара")
-                                        label.label-icon(for="search")
+                                        input#search(type="search" required placeholder="Введите название товара и нажмите enter")
+                                        label.label-icon(for="search" style="cursor: pointer;")
                                             i.material-icons search
                                         i.material-icons close
                             #edit.table-items.table

src/admin/components/items.component.js

@@ -3,17 +3,25 @@ import { apiService } from "../services/api.service";
 import { renderItems } from "../templates/items.template";
 
 export class ItemsComponent extends Component {
-    constructor(id, {pagination}) {
+    constructor(id, {pagination}, {search}) {
         super(id);
         this.pagination = pagination;
+        this.search = search;
     }
 
     async init() {
         const items = await apiService.getItems();
         this.$table = this.$el.querySelector('table tbody'); 
+        this.search.initialize(this.$table, this.getItemsByText);
         this.pagination.initialize(items.length, this.$table, this.getItemsByPage);
     }
 
+    async getItemsByText(text) {
+        const items = await apiService.getItemsQuery(text),
+            categories = await apiService.getCategories();
+        return renderItems(items, categories);
+    }
+    
     async getItemsByPage(page) {
         const items = await apiService.getItemsOffset(page), 
             categories = await apiService.getCategories();

src/admin/components/pagination.component.js

@@ -90,4 +90,8 @@ export class PaginationComponent extends Component {
         html += '<li><a class="disabled" href="#" data-type="next"><i class="material-icons">chevron_right</i></a></li>';
         this.$el.insertAdjacentHTML('afterbegin', html);
     }
+
+    hide() {
+        this.$el.classList.add('hide');
+    }
 }

src/admin/components/search.component.js

@@ -0,0 +1,29 @@
+import { Component } from "../core/component";
+
+export class SearchComponent extends Component {
+    constructor(id, {loader}) {
+        super(id);
+        this.loader = loader;
+    }
+
+    initialize(insertTo, request) {
+        this.$el.onchange = (e) => {
+            this.search(e, insertTo, request);
+        }
+    }
+
+    async search(e, insertTo, request) {
+        try {
+            insertTo.innerHTML = '';
+            this.loader.show();
+            const query = e.target.value.trim(),
+                items = await request(query);
+
+            items != '' ? insertTo.insertAdjacentHTML('afterbegin', items) : insertTo.innerHTML = `По запросу "${query}" ничего не найдено...`;
+            e.target.value = '';
+            this.loader.hide();
+        } catch (error) {
+            console.error('Произошла ошибка.');
+        }
+    }
+}

src/admin/index.js

@@ -6,11 +6,13 @@ import { LoaderComponent } from "./components/loader.component.js";
 import { PaginationComponent } from "./components/pagination.component.js";
 import { editItemModal } from "./modals/editItem.modal.js";
 import { deleteItemModal } from "./modals/deleteItem.modal.js";
+import { SearchComponent } from "./components/search.component.js";
 
 const loader = new LoaderComponent('loader');
 const pagination = new PaginationComponent('pagination', {loader}); 
+const search = new SearchComponent('search', {loader});
 const categories = new CategoriesComponent('categories');
-const items = new ItemsComponent('items', {pagination});
+const items = new ItemsComponent('items', {pagination}, {search});
 
 const editCategory = new editCategoryModal('editCategoryModal', 'editCategory_select', 'editCategoryClose');
 const editItem = new editItemModal('editItemModal', 'edit', 'editItemClose');

src/admin/modals/deleteItem.modal.js

@@ -15,22 +15,23 @@ export class deleteItemModal extends Modal {
     }
 
     setElems() {
-        this.$content = this.$el.querySelector('.modal-content__form');
+        this.$content = this.$el.querySelector('.modal-content__form p');
     }
 
     openHandler(e) {
         const data = JSON.parse(e.target.parentNode.parentNode.dataset.info);
+        this.$content.innerHTML = `Вы действительно хотите удалить товар: <br> "${data.title}"?`;
         this.$el.querySelector('.delete-item').onclick = this.deleteHandler.bind(this, data.id);
     }
 
-    deleteHandler(id) {
-        axios.post('/control-panel/items/delete', {id})
-            .then(() => {
+    async deleteHandler(id) {
+        try {
+            this.$content.innerHTML = '<div class="progress"><div class="indeterminate"></div></div>'
+            await axios.post('/control-panel/items/delete', {id});
             alert('Товар был успешно удален.');
             document.location.reload(true);
-            })
-            .catch(() => {
+        } catch (error) {
             alert('Невозможно выполнить запрос.');
-            });
+        }
     }
 }

src/admin/services/api.service.js

@@ -47,6 +47,15 @@ class ApiService {
         }
     }
 
+    async getItemsQuery(text) {
+        try {
+            const request = `${this.url}/api/items?q=${text}`;
+            return useRequest(request);
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
     async getItemsOne(category, sorting) {
         try {
             if (sorting) {