items component showing

config/server.js

@@ -46,6 +46,12 @@ MongoClient.connect(db_config.url, {useNewUrlParser: true, useUnifiedTopology: t
     
         // 404 Redirect
         server.use((req, res) => res.status(404).render('main/404'));
-        server.listen(3000, () => console.log('Listen port 3000...')); 
     })
-    .catch((error) => {console.log(error)});
+    .catch((error) => {
+        server.get('*', (req, res) => {
+            res.send('Ошибка соединения с БД. Настройте файл database.js');
+        });
+    })
+    .finally(() =>  {
+        server.listen(3000, () => console.log('Listen port 3000...'));
+    });

dist/public/css/style.css

@@ -45,6 +45,10 @@ hr {
 
 /* Custom Styles */
 
+.pagination {
+    padding-bottom: 24px;
+}
+
 #notification {
     width: 300px;
     position: fixed;
@@ -700,8 +704,8 @@ footer.main-footer {
     margin-top: 8px;
 }
 .table-buyers, .table-items {
-    max-height: 365px;
+    max-height: 385px;
-    overflow-y: scroll;
+    overflow-y: hidden;
 }
 footer.admin-footer{
     background-color: #fff;

dist/views/admin/items.pug

@@ -7,7 +7,7 @@ body.has-fixed-sidenav
                 .col.s12
                     h2 Редактирование товаров
                 .col.s12
-                    .card
+                    #items.card
                         .card-content
                             span.card-title Список товаров
                             .search-field
@@ -31,75 +31,22 @@ body.has-fixed-sidenav
                                             
                                     .divider
                                     tbody
-                                        tr
+                                        #loader.progress
-                                            td
+                                            .indeterminate
-                                                img(src="../img/service-icons/origin.svg", alt="alt")
+                        .divider
-                                            td Тестовый товар №6
+                        ul.pagination.center
-                                            td Origin
+                            li.active
-                                            td 2019-12-05
+                                a(href="#" class="disabled")
-                                            td 18
+                                    i.material-icons chevron_left
-                                            td 145 ₽
+                            li
-                                            td
+                                a(href="#" class="active") 1
-                                                button.btn.red Удалить
+                            li
-                                                button.btn.orange Изменить
+                                a(href="#") 2
-                                        tr
+                            li
-                                            td
+                                a(href="#") 3
-                                                img(src="../img/service-icons/origin.svg", alt="alt")
+                            li
-                                            td Тестовый товар №6
+                                a(href="#" class="disabled")
-                                            td Origin
+                                    i.material-icons chevron_right
-                                            td 2019-12-05
-                                            td 18
-                                            td 145 ₽
-                                            td
-                                                button.btn.red Удалить
-                                                button.btn.orange Изменить
-                                        tr
-                                            td
-                                                img(src="../img/service-icons/origin.svg", alt="alt")
-                                            td Тестовый товар №6
-                                            td Origin
-                                            td 2019-12-05
-                                            td 18
-                                            td 145 ₽
-                                            td
-                                                button.btn.red Удалить
-                                                button.btn.orange Изменить
-                                        tr
-                                            td
-                                                img(src="../img/service-icons/origin.svg", alt="alt")
-                                            td Тестовый товар №6
-                                            td Origin
-                                            td 2019-12-05
-                                            td 18
-                                            td 145 ₽
-                                            td
-                                                button.btn.red Удалить
-                                                button.btn.orange Изменить
-                                        tr
-                                            td
-                                                img(src="../img/service-icons/origin.svg", alt="alt")
-                                            td Тестовый товар №6
-                                            td Origin
-                                            td 2019-12-05
-                                            td 18
-                                            td 145 ₽
-                                            td
-                                                button.btn.red Удалить
-                                                button.btn.orange Изменить
-                                        tr
-                                            td
-                                                img(src="../img/service-icons/origin.svg", alt="alt")
-                                            td Тестовый товар №6
-                                            td Origin
-                                            td 2019-12-05
-                                            td 18
-                                            td 145 ₽
-                                            td
-                                                button.btn.red Удалить
-                                                button.btn.orange Изменить
-                                        
-                                            
-                                                
                                    
     include ./assets/templates/footer.pug
     include ./assets/scripts.pug

src/admin/components/categories.component.js

@@ -6,7 +6,9 @@ import { renderIcons } from "../templates/icons.template";
 export class CategoriesComponent extends Component {
     constructor(id) {
         super(id);
-        if (this.$el) {
+    }
+
+    setElems() {
         // обозначим все селекты для рендера в них наши категории и киноки в дальнейшем
         this.$editSelect = this.$el.querySelector('#edit select');
         this.$dellSelect = this.$el.querySelector('#delete select');
@@ -23,7 +25,6 @@ export class CategoriesComponent extends Component {
         this.$addForm.addEventListener('submit', this.addCategory.bind(this));
         this.$dellForm.addEventListener('submit', this.deleteCategory.bind(this));
     }
-    }
 
     async init() {
         const categories = await apiService.getCategories();

src/admin/components/items.component.js

@@ -0,0 +1,23 @@
+import { Component } from "../core/component";
+import { apiService } from "../services/api.service";
+import { renderItems } from "../templates/items.template";
+
+export class ItemsComponent extends Component {
+    constructor(id, {loader}) {
+        super(id);
+        this.loader = loader;
+    }
+
+    setElems() {
+        this.$table = this.$el.querySelector('table tbody');
+    }
+
+    async init() { 
+        const categories = await apiService.getCategories();
+        const items = await apiService.getItems();
+        const html = renderItems(items, categories);
+
+        this.$table.insertAdjacentHTML('afterbegin', html);
+        this.loader.hide();
+    }
+}

src/admin/components/loader.component.js

@@ -0,0 +1,7 @@
+import { Component } from "../core/component";
+
+export class LoaderComponent extends Component {
+    constructor(id) {
+        super(id);
+    }
+}

src/admin/core/component.js

@@ -1,12 +1,14 @@
 export class Component {
     constructor(id) {
         this.$el = document.getElementById(id);
+        this.$el ? this.setElems() : false;
         this.$el ? this.init() : false;
-        
     }
 
     init() {}
 
+    setElems() {}
+
     onShow() {}
 
     onHide() {}

src/admin/index.js

@@ -1,8 +1,12 @@
 import { MaterializeConfig } from "./config/materialize.config.js";
 import { CategoriesComponent } from "./components/categories.component.js";
 import { editCategoryModal } from "./modals/editCategory.modal.js";
+import { ItemsComponent } from "./components/items.component.js";
+import { LoaderComponent } from "./components/loader.component.js";
 
+const loader = new LoaderComponent('loader');
 const categories = new CategoriesComponent('categories');
+const items = new ItemsComponent('items', {loader});
 const editCategory = new editCategoryModal('editCategory', 'edit', 'editCategoryClose');
 const materialize = new MaterializeConfig();
 console.log('Control-Panel v1.0.0');

src/admin/templates/items.template.js

@@ -0,0 +1,10 @@
+export function renderItems(items, categories) {
+    let html = '';
+
+    categories.forEach(category => {
+        items.forEach(item => {
+            if (item.category.toLowerCase() === category.title.toLowerCase()) html += `<tr><td><img src="../img/service-icons/${category.img}" alt="alt"></td><td>${item.title}</td><td>${item.category}</td><td>${new Date(item.date).toLocaleDateString()}</td><td>${item.count}</td><td>${item.price} ₽</td><td><button class="btn red">Удалить</button><button class="btn orange">Изменить</button></td></tr>`
+        });
+    });
+    return html;
+}

src/main/components/items.component.js

@@ -26,7 +26,6 @@ export class ItemsComponent extends Component {
                 const html = renderItems(categories, fData);
                 this.insertItems(html);
                 this.btnColor();
-
                 this.loader.hide(); 
             } 
         } 
@@ -36,6 +35,7 @@ export class ItemsComponent extends Component {
         this.$el.querySelector('#roster').innerHTML = '';
         this.loader.hide();
     }
+    
     onShow() {
         this.$el.querySelector('#roster').innerHTML = '';
         this.loader.show();

src/main/templates/items.template.js

@@ -1,16 +1,13 @@
 export function renderItems(categories, items) {
-    const arrayCategories = categories;
-    const arrayItems = items;
-
     let html = '';
     try {
-        arrayCategories.forEach(category => {
+        categories.forEach(category => {
             html += `<div class="items-category">
                         <h2 class="small-title">${category.title}</h2>
                     </div>`;
             category.itemsInCategory = 0; // счетчит для отслеживания категорий где нету айтемов
             try {
-                arrayItems.forEach(item => {
+                items.forEach(item => {
                     if (item.category.toLowerCase() === category.title.toLowerCase()) {
                         category.itemsInCategory += 1;
                         html += `