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 += '