From a78cd3e7c766fd9fa5c3263479304d65643d843d Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Mon, 23 Dec 2019 20:26:04 +0300 Subject: [PATCH] refactor pag --- config/routes/api.js | 2 +- dist/views/admin/control-panel.pug | 3 ++- src/admin/components/items.component.js | 18 ++++++------- src/admin/components/pagination.component.js | 28 +++++++++++--------- src/admin/services/api.service.js | 4 +-- 5 files changed, 29 insertions(+), 26 deletions(-) diff --git a/config/routes/api.js b/config/routes/api.js index bd3b4b2..cb97296 100644 --- a/config/routes/api.js +++ b/config/routes/api.js @@ -29,7 +29,7 @@ module.exports = function(server, db) { server.get('/api/items/page/:page', async (req, res) => { try { const page = parseInt(req.params.page), - limit = parseInt(req.query.limit), + limit = 5, items = await db.collection('items').find({}, {skip: limit * (page - 1), limit}).toArray(); items.length > 0 && !isNaN(page) ? res.json(items) : res.json({error: 'Такой страницы не существует.'}); } catch (error) { diff --git a/dist/views/admin/control-panel.pug b/dist/views/admin/control-panel.pug index b0d558a..99edae8 100644 --- a/dist/views/admin/control-panel.pug +++ b/dist/views/admin/control-panel.pug @@ -94,6 +94,7 @@ body.has-fixed-sidenav td test@gmail.com td Qiwi td 2019-12-05 - td 145 ₽ + td 145 ₽ + ul#pagination.pagination.center(data-page="1") include ./assets/templates/footer.pug include ./assets/scripts.pug \ No newline at end of file diff --git a/src/admin/components/items.component.js b/src/admin/components/items.component.js index 348d037..34ec4f4 100644 --- a/src/admin/components/items.component.js +++ b/src/admin/components/items.component.js @@ -9,10 +9,7 @@ export class ItemsComponent extends Component { } async init() { - const items = await apiService.getItemsOffset(1, 5), - categories = await apiService.getCategories(), - html = renderItems(items, categories); - + const html = await this.getItemsByPage(1); this.$table = this.$el.querySelector('table tbody'); this.$table.insertAdjacentHTML('afterbegin', html); this.onHide(); @@ -27,11 +24,14 @@ export class ItemsComponent extends Component { this.$table.innerHTML = ''; } - async insertItems(page, limit) { - const items = await apiService.getItemsOffset(page, limit), - categories = await apiService.getCategories(), - html = renderItems(items, categories); - + async insertItems(page) { + const html = await this.getItemsByPage(page); this.$table.insertAdjacentHTML('afterbegin', html); } + + 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 9cfda23..d4d38bd 100644 --- a/src/admin/components/pagination.component.js +++ b/src/admin/components/pagination.component.js @@ -18,17 +18,17 @@ export class PaginationComponent extends Component { buttonHandler(e) { e.preventDefault(); if (e.target.dataset.move) { - const value = parseInt(e.target.dataset.move), + const page = parseInt(e.target.dataset.move), target = e.target.parentNode; this.removeActive(); target.classList.add('active'); - this.moveTo(value); + this.moveTo(page); } else if (e.target.tagName.toLowerCase() === 'i') { const moveType = e.target.parentNode.dataset.type, - value = parseInt(this.$el.dataset.page); + page = parseInt(this.$el.dataset.page); - moveType === 'prev' ? this.movePrev(value, this.$pages) : this.moveNext(value, this.$pages); + moveType === 'prev' ? this.movePrev(page, this.$pages) : this.moveNext(page, this.$pages); } } @@ -52,17 +52,13 @@ export class PaginationComponent extends Component { this.removeActive(); this.setActive(li, value); this.updatePage(value); - this.items.onShow(); - this.items.insertItems(value, this.limit); - this.items.onHide(); + this.itemsInit(value); } } moveTo(value) { this.updatePage(value); - this.items.onShow(); - this.items.insertItems(value, this.limit); - this.items.onHide(); + this.itemsInit(value); } moveNext(value, li) { @@ -74,15 +70,14 @@ export class PaginationComponent extends Component { this.removeActive(); this.setActive(li, value); this.updatePage(value); - this.items.onShow(); - this.items.insertItems(value, this.limit); - this.items.onHide(); + this.itemsInit(value); } } async insertPages() { const pages = await apiService.getItems(), count = pages.length / this.limit; + let html = ''; // назад @@ -97,4 +92,11 @@ 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/services/api.service.js b/src/admin/services/api.service.js index 12b19c7..45b88c7 100644 --- a/src/admin/services/api.service.js +++ b/src/admin/services/api.service.js @@ -38,9 +38,9 @@ class ApiService { } } - async getItemsOffset(page, limit) { + async getItemsOffset(page) { try { - const request = `${this.url}/api/items/page/${page}?limit=${limit}`; + const request = `${this.url}/api/items/page/${page}`; return useRequest(request); } catch (err) { console.error(err);