diff --git a/config/routes/api.js b/config/routes/api.js index cb97296..2e38c42 100644 --- a/config/routes/api.js +++ b/config/routes/api.js @@ -2,28 +2,34 @@ const fs = require('fs'); module.exports = function(server, db) { server.get('/api/items', async (req, res) => { - const items = await db.collection('items').find({}).toArray(), - sortBy = req.query.sorting; + 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; - if (items.length > 0) { - switch (sortBy) { - case 'ascending': - res.json(items.sort((a, b) => a.price - b.price)); - break; - case 'descending': - res.json(items.sort((a, b) => b.price - a.price)); - break; - case 'newer': - res.json(items.sort((a, b) => b.date - a.date)); - break; - case 'older': - res.json(items.sort((a, b) => a.date - b.date)); - break; - default: - res.json(items); - break; - } - } else res.send({error: 'Товаров в магазине пока что нет.'}); + if (items.length > 0) { + switch (sortBy) { + case 'ascending': + res.json(items.sort((a, b) => a.price - b.price)); + break; + case 'descending': + res.json(items.sort((a, b) => b.price - a.price)); + break; + case 'newer': + res.json(items.sort((a, b) => b.date - a.date)); + break; + case 'older': + res.json(items.sort((a, b) => a.date - b.date)); + break; + default: + res.json(items); + break; + } + } else res.send({error: 'Товаров в магазине пока что нет.'}); + } + }); server.get('/api/items/page/:page', async (req, res) => { @@ -36,6 +42,11 @@ module.exports = function(server, db) { res.render('main/404'); } }); + + 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(), diff --git a/dist/views/admin/items.pug b/dist/views/admin/items.pug index d7b6c75..ef1deaa 100644 --- a/dist/views/admin/items.pug +++ b/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 diff --git a/src/admin/components/items.component.js b/src/admin/components/items.component.js index 9695bcf..fdb90dd 100644 --- a/src/admin/components/items.component.js +++ b/src/admin/components/items.component.js @@ -3,16 +3,24 @@ 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), diff --git a/src/admin/components/pagination.component.js b/src/admin/components/pagination.component.js index 1ba9aa7..b477cc5 100644 --- a/src/admin/components/pagination.component.js +++ b/src/admin/components/pagination.component.js @@ -90,4 +90,8 @@ export class PaginationComponent extends Component { html += '
  • chevron_right
  • '; this.$el.insertAdjacentHTML('afterbegin', html); } + + hide() { + this.$el.classList.add('hide'); + } } \ No newline at end of file diff --git a/src/admin/components/search.component.js b/src/admin/components/search.component.js new file mode 100644 index 0000000..9e506fc --- /dev/null +++ b/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('Произошла ошибка.'); + } + } +} \ No newline at end of file diff --git a/src/admin/index.js b/src/admin/index.js index 826bd19..53e6e9e 100644 --- a/src/admin/index.js +++ b/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'); diff --git a/src/admin/modals/deleteItem.modal.js b/src/admin/modals/deleteItem.modal.js index 2a901f2..0fb7155 100644 --- a/src/admin/modals/deleteItem.modal.js +++ b/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 = `Вы действительно хотите удалить товар:
    "${data.title}"?`; this.$el.querySelector('.delete-item').onclick = this.deleteHandler.bind(this, data.id); } - deleteHandler(id) { - axios.post('/control-panel/items/delete', {id}) - .then(() => { - alert('Товар был успешно удален.'); - document.location.reload(true); - }) - .catch(() => { - alert('Невозможно выполнить запрос.'); - }); + async deleteHandler(id) { + try { + this.$content.innerHTML = '
    ' + await axios.post('/control-panel/items/delete', {id}); + alert('Товар был успешно удален.'); + document.location.reload(true); + } catch (error) { + alert('Невозможно выполнить запрос.'); + } } } \ No newline at end of file diff --git a/src/admin/services/api.service.js b/src/admin/services/api.service.js index 45b88c7..5b4f31a 100644 --- a/src/admin/services/api.service.js +++ b/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) {