refactor pag

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) {

dist/views/admin/control-panel.pug

@@ -95,5 +95,6 @@ body.has-fixed-sidenav
                                             td Qiwi
                                             td 2019-12-05
                                             td 145 ₽      
+                        ul#pagination.pagination.center(data-page="1")              
     include ./assets/templates/footer.pug
     include ./assets/scripts.pug

src/admin/components/items.component.js

@@ -9,10 +9,7 @@ export class ItemsComponent extends Component {
     }
 
     async init() {
-        const items = await apiService.getItemsOffset(1, 5), 
+        const html = await this.getItemsByPage(1);
-            categories = await apiService.getCategories(),
-            html = renderItems(items, categories);
-
         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) {
+    async insertItems(page) {
-        const items = await apiService.getItemsOffset(page, limit), 
+        const html = await this.getItemsByPage(page);
-            categories = await apiService.getCategories(),
-            html = renderItems(items, categories);
-
         this.$table.insertAdjacentHTML('afterbegin', html);
     }
+    
+    async getItemsByPage(page) {
+        const items = await apiService.getItemsOffset(page), 
+            categories = await apiService.getCategories();
+        return renderItems(items, categories);
+    } 
 }

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.itemsInit(value);
-            this.items.insertItems(value, this.limit);
-            this.items.onHide();
         }
     }
 
     moveTo(value) {
         this.updatePage(value);
-        this.items.onShow();
+        this.itemsInit(value);
-        this.items.insertItems(value, this.limit);
-        this.items.onHide();
     }
 
     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.itemsInit(value);  
-            this.items.insertItems(value, this.limit);
-            this.items.onHide();   
         }
     }
 
     async insertPages() {
         const pages = await apiService.getItems(),
             count = pages.length / this.limit;
+
         let html = '';
 
         // назад
@@ -97,4 +92,11 @@ 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);
     }
+
+    // определяем методы для инициализации наших компонентов
+    itemsInit(value) {
+        this.items.onShow();
+        this.items.insertItems(value);
+        this.items.onHide();
+    }
 }

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);