From 557f7967b33e5d09ab58385187a06d01043668c2 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Wed, 25 Dec 2019 15:57:50 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B0=D0=B3=D0=B8=D0=BD=D0=B0=D1=86?= =?UTF-8?q?=D0=B8=D1=8F=20=D1=82=D0=B5=D0=BF=D0=B5=D1=80=D1=8C=20=D1=81?= =?UTF-8?q?=D1=82=D0=B0=D0=BB=D0=B0=20=D0=BD=D0=B5=D0=B7=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D1=81=D0=B8=D0=BC=D0=BE=D0=B9=20=D0=BE=D1=82=20=D0=B4=D1=80?= =?UTF-8?q?=D1=83=D0=B3=D0=B8=D1=85=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?= =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/server.js | 2 +- src/admin/components/items.component.js | 27 ++--- src/admin/components/pagination.component.js | 103 ++++++++----------- src/admin/config/materialize.config.js | 2 +- src/admin/index.js | 4 +- 5 files changed, 54 insertions(+), 84 deletions(-) diff --git a/config/server.js b/config/server.js index 8479849..f8f9815 100644 --- a/config/server.js +++ b/config/server.js @@ -49,7 +49,7 @@ MongoClient.connect(db_config.url, {useNewUrlParser: true, useUnifiedTopology: t }) .catch((error) => { server.get('*', (req, res) => { - res.send('Ошибка соединения с БД. Настройте файл database.js'); + res.send('Ошибка соединения с БД.'); }); }) .finally(() => { diff --git a/src/admin/components/items.component.js b/src/admin/components/items.component.js index 34ec4f4..9695bcf 100644 --- a/src/admin/components/items.component.js +++ b/src/admin/components/items.component.js @@ -3,35 +3,20 @@ import { apiService } from "../services/api.service"; import { renderItems } from "../templates/items.template"; export class ItemsComponent extends Component { - constructor(id, {loader}) { + constructor(id, {pagination}) { super(id); - this.loader = loader; + this.pagination = pagination; } async init() { - const html = await this.getItemsByPage(1); - this.$table = this.$el.querySelector('table tbody'); - this.$table.insertAdjacentHTML('afterbegin', html); - this.onHide(); - } - - onHide() { - this.loader.hide(); - } - - onShow() { - this.loader.show(); - this.$table.innerHTML = ''; - } - - async insertItems(page) { - const html = await this.getItemsByPage(page); - this.$table.insertAdjacentHTML('afterbegin', html); + const items = await apiService.getItems(); + this.$table = this.$el.querySelector('table tbody'); + this.pagination.initialize(items.length, this.$table, this.getItemsByPage); } async getItemsByPage(page) { const items = await apiService.getItemsOffset(page), categories = await apiService.getCategories(); return renderItems(items, categories); - } + } } \ No newline at end of file diff --git a/src/admin/components/pagination.component.js b/src/admin/components/pagination.component.js index d4d38bd..ce9b0c5 100644 --- a/src/admin/components/pagination.component.js +++ b/src/admin/components/pagination.component.js @@ -1,39 +1,18 @@ import { Component } from "../core/component"; -import { apiService } from "../services/api.service"; export class PaginationComponent extends Component { - constructor(id, {items}) { + constructor(id, {loader}) { super(id); - this.limit = 5; - this.items = items; + this.loader = loader; } - async init() { - await this.insertPages(); + // вставляем кнопки со страницами и назначаем ивент + initialize(pages, insertTo, request) { + this.insertButtons(pages); this.$pages = this.$el.querySelectorAll('li'); - this.$el.addEventListener('click', this.buttonHandler.bind(this)); - this.$el.querySelector('li').nextElementSibling.classList.add('active'); - } - - buttonHandler(e) { - e.preventDefault(); - if (e.target.dataset.move) { - const page = parseInt(e.target.dataset.move), - target = e.target.parentNode; - - this.removeActive(); - target.classList.add('active'); - this.moveTo(page); - } else if (e.target.tagName.toLowerCase() === 'i') { - const moveType = e.target.parentNode.dataset.type, - page = parseInt(this.$el.dataset.page); - - moveType === 'prev' ? this.movePrev(page, this.$pages) : this.moveNext(page, this.$pages); - } - } - - updatePage(value) { - this.$el.setAttribute('data-page', value); + this.$el.onclick = (e) => this.buttonHandler(e, insertTo, request); + this.moveTo(1, insertTo, request); // показываем первую страницу + this.$el.querySelector('li').nextElementSibling.classList.add('active'); } removeActive() { @@ -44,40 +23,53 @@ export class PaginationComponent extends Component { li.forEach(li => {const page = parseInt(li.querySelector('a').dataset.move);page === value ? li.classList.add('active') : false;}); } - movePrev(value, li) { - if (value === 1) { - return 0; - } else { - --value; + buttonHandler(e, insertTo, request) { + e.preventDefault(); + if (e.target.dataset.move) { + const page = parseInt(e.target.dataset.move), + target = e.target.parentNode; + this.removeActive(); - this.setActive(li, value); - this.updatePage(value); - this.itemsInit(value); + target.classList.add('active'); + this.moveTo(page, insertTo, request); + } else if (e.target.tagName.toLowerCase() === 'i') { + const moveType = e.target.parentNode.dataset.type, + page = parseInt(this.$el.dataset.page); + + moveType === 'prev' ? this.movePrev(page, this.$pages, insertTo, request) : this.moveNext(page, this.$pages, insertTo, request); } } - moveTo(value) { - this.updatePage(value); - this.itemsInit(value); + movePrev(page, li, insertTo, request) { + if (page === 1) return 0; else { + --page; + this.removeActive(); + this.setActive(li, page); + this.moveTo(page, insertTo, request); + } } - moveNext(value, li) { + // выполняем запрос на сервер и выводим на данные + async moveTo(page, insertTo, request) { + this.$el.setAttribute('data-page', page); + insertTo.innerHTML = ''; + this.loader.show(); + insertTo.insertAdjacentHTML('afterbegin', await request(page)); + this.loader.hide(); + } + + moveNext(page, li, insertTo, request) { const length = this.$pages.length - 2; - if (value === length) { - return 0; - } else { - ++value; + if (page === length) return 0; else { + ++page; this.removeActive(); - this.setActive(li, value); - this.updatePage(value); - this.itemsInit(value); + this.setActive(li, page); + this.moveTo(page, insertTo, request); } } - async insertPages() { - const pages = await apiService.getItems(), - count = pages.length / this.limit; - + insertButtons(pages) { + const count = Math.ceil(pages / 5); let html = ''; // назад @@ -92,11 +84,4 @@ export class PaginationComponent extends Component { html += '
  • chevron_right
    • '; this.$el.insertAdjacentHTML('afterbegin', html); } - - // определяем методы для инициализации наших компонентов - itemsInit(value) { - this.items.onShow(); - this.items.insertItems(value); - this.items.onHide(); - } } \ No newline at end of file diff --git a/src/admin/config/materialize.config.js b/src/admin/config/materialize.config.js index 9d5521e..c5f5ef0 100644 --- a/src/admin/config/materialize.config.js +++ b/src/admin/config/materialize.config.js @@ -32,7 +32,7 @@ export class MaterializeConfig { document.querySelector('#type') ? M.textareaAutoResize(document.querySelector('#type')) : false M.updateTextFields(); - // Окраска li по нажатию + // окраска li по нажатию if (document.querySelector('#currentPage')) { const currentPage = document.querySelector('#currentPage').dataset.current; const pages = Array.from(document.querySelectorAll('.collapsible li')); diff --git a/src/admin/index.js b/src/admin/index.js index a0d4efd..b057c82 100644 --- a/src/admin/index.js +++ b/src/admin/index.js @@ -6,9 +6,9 @@ import { LoaderComponent } from "./components/loader.component.js"; import { PaginationComponent } from "./components/pagination.component.js"; const loader = new LoaderComponent('loader'); +const pagination = new PaginationComponent('pagination', {loader}); const categories = new CategoriesComponent('categories'); -const items = new ItemsComponent('items', {loader}); -const pagination = new PaginationComponent('pagination', {items}); +const items = new ItemsComponent('items', {pagination}); const editCategory = new editCategoryModal('editCategory', 'edit', 'editCategoryClose'); const materialize = new MaterializeConfig(); console.log('Control-Panel v1.0.0'); \ No newline at end of file