item delete

config/routes/control-panel.js

@@ -164,7 +164,14 @@ module.exports = function(server, db) {
             db.collection('items').updateOne({"_id": ObjectID(data.id)}, {$set: {title: data.title, price: data.price, description: data.description, category: data.category.title}});
             res.redirect('/control-panel/items');
         } catch (error) {
-            console.log(error);
+            res.render('main/404');
+        }
+    });
+    server.post('/control-panel/items/delete', checkAuthenticated, (req, res) => {
+        try {
+            db.collection('items').deleteOne({"_id": ObjectID(req.body.id)});
+            res.redirect('/control-panel/items');
+        } catch (error) {
             res.render('main/404');
         }
     });

dist/views/admin/assets/templates/modals/delete_item.pug

@@ -0,0 +1,15 @@
+// Edit Item
+#deleteItemModal.c_modal-wrap.hide
+  .container
+    .row
+      .c_modal
+        .c_modal-content.deleteItem
+          .modal-content
+            .modal-content__header(style="margin-bottom: 1rem;")
+              h4.small-title Удаление товара
+              span#deleteItemClose.modal-close
+                i.material-icons close
+            .modal-content__form
+                p Вы действительно хотите удалить этот товар?
+                button.btn.red.delete-item(style="width: 100%;margin-top:3rem;") Удалить
+// Edit Category END

dist/views/admin/items.pug

@@ -17,7 +17,7 @@ body.has-fixed-sidenav
                                         label.label-icon(for="search")
                                             i.material-icons search
                                         i.material-icons close
-                            .table-items.table
+                            #edit.table-items.table
                                 table.highlight
                                     thead
                                         tr
@@ -30,11 +30,12 @@ body.has-fixed-sidenav
                                             th Редактирование
                                             
                                     .divider
-                                    tbody#editItem
+                                    tbody
                                         #loader.progress
                                             .indeterminate
                         ul#pagination.pagination.center(data-page="1")
-                            
+
+    include ./assets/templates/modals/delete_item.pug                       
     include ./assets/templates/modals/edit_item.pug                                 
     include ./assets/templates/footer.pug
     include ./assets/scripts.pug

src/admin/components/pagination.component.js

@@ -51,11 +51,17 @@ export class PaginationComponent extends Component {
 
     // выполняем запрос на сервер и выводим на данные
     async moveTo(page, insertTo, request) {
-        this.$el.setAttribute('data-page', page);
+        try {
-        insertTo.innerHTML = '';
+            this.$el.setAttribute('data-page', page);
-        this.loader.show();
+            insertTo.innerHTML = '';
-        insertTo.insertAdjacentHTML('afterbegin', await request(page));
+            this.loader.show();
-        this.loader.hide();
+            insertTo.insertAdjacentHTML('afterbegin', await request(page));
+            this.loader.hide();
+        } catch (error) {
+            this.loader.hide();
+            this.$el.classList.add('hide');
+            insertTo.parentNode.innerHTML = '<h1>Товаров или категорий в магазине нету.</h1>'; 
+        }
     }
 
     moveNext(page, li, insertTo, request) {

src/admin/core/modal.js

@@ -15,11 +15,9 @@ export class Modal {
     }
 
     show(e) {
-        if (e.target.id === this.open.id) {
+        this.$el.classList.remove('hide');
-            this.$el.classList.remove('hide');
+        document.body.style.overflowY = 'hidden';
-            document.body.style.overflowY = 'hidden';
+        this.openHandler(e); 
-            this.openHandler(e); 
-        }
     }
 
     hide() {

src/admin/index.js

@@ -5,12 +5,15 @@ import { ItemsComponent } from "./components/items.component.js";
 import { LoaderComponent } from "./components/loader.component.js";
 import { PaginationComponent } from "./components/pagination.component.js";
 import { editItemModal } from "./modals/editItem.modal.js";
+import { deleteItemModal } from "./modals/deleteItem.modal.js";
 
 const loader = new LoaderComponent('loader');
 const pagination = new PaginationComponent('pagination', {loader}); 
 const categories = new CategoriesComponent('categories');
 const items = new ItemsComponent('items', {pagination});
+
 const editCategory = new editCategoryModal('editCategoryModal', 'editCategory_select', 'editCategoryClose');
-const editItem = new editItemModal('editItemModal', 'editItem', 'editItemClose')
+const editItem = new editItemModal('editItemModal', 'edit', 'editItemClose');
+const deleteItem = new deleteItemModal('deleteItemModal', 'edit', 'deleteItemClose');
 const materialize = new MaterializeConfig();
 console.log('Control-Panel v1.0.0');

src/admin/modals/deleteItem.modal.js

@@ -0,0 +1,36 @@
+import { Modal } from "../core/modal";
+import axios from "axios";
+
+export class deleteItemModal extends Modal {
+    constructor(id, open, close) {
+        super(id, open, close);
+    }
+
+    show(e) {
+        if (e.target.id === 'deleteItem') {
+            this.$el.classList.remove('hide');
+            document.body.style.overflowY = 'hidden';
+            this.openHandler(e);
+        }
+    }
+
+    setElems() {
+        this.$content = this.$el.querySelector('.modal-content__form');
+    }
+
+    openHandler(e) {
+        const data = JSON.parse(e.target.parentNode.parentNode.dataset.info);
+        this.$el.querySelector('.delete-item').onclick = this.deleteHandler.bind(this, data.id);
+    }
+
+    deleteHandler(id) {
+        axios.post('/control-panel/items/delete', {id})
+            .then(() => {
+                alert('Товар был успешно удален.');
+                document.location.reload(true);
+            })
+            .catch(() => {
+                alert('Невозможно выполнить запрос.');
+            });
+    }
+}

src/admin/modals/editItem.modal.js

@@ -7,6 +7,14 @@ export class editItemModal extends Modal {
         super(id, open, close);
     }
 
+    show(e) {
+        if (e.target.id === 'editItem') {
+            this.$el.classList.remove('hide');
+            document.body.style.overflowY = 'hidden';
+            this.openHandler(e);
+        }
+    }
+
     setElems() {
         this.$id = this.$el.querySelector('.id');
         this.$title = this.$el.querySelector('.title');
@@ -16,16 +24,16 @@ export class editItemModal extends Modal {
     }
 
     async openHandler(e) {
-        const data = JSON.parse(e.target.parentNode.parentNode.dataset.info),
+          const data = JSON.parse(e.target.parentNode.parentNode.dataset.info),
             categories = await apiService.getCategories();
 
-        this.$category.innerHTML = `<option value='{"title": "${data.category}"}' selected>Оставить прежнюю</option>`;
+            this.$category.innerHTML = `<option value='{"title": "${data.category}"}' selected>Оставить прежнюю</option>`;
-        this.$id.value = data.id;
+            this.$id.value = data.id;
-        this.$title.value = data.title;
+            this.$title.value = data.title;
-        this.$price.value = data.price;
+            this.$price.value = data.price;
-        this.$description.value = data.description;
+            this.$description.value = data.description;
-        this.$category.insertAdjacentHTML('beforeend', renderCategories(categories));
+            this.$category.insertAdjacentHTML('beforeend', renderCategories(categories));
-        M.FormSelect.init(this.$category);
+            M.FormSelect.init(this.$category);
-        M.updateTextFields();
+            M.updateTextFields();  
     }
 }

src/admin/templates/items.template.js

@@ -3,7 +3,7 @@ export function renderItems(items, categories) {
 
     categories.forEach(category => {
         items.forEach(item => {
-            if (item.category.toLowerCase() === category.title.toLowerCase()) html += `<tr data-info='{"id": "${item._id}", "title": "${item.title}", "category": "${item.category}", "price": "${item.price}", "description": "${item.description}"}'><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 id="editItem" class="btn orange">Изменить</button></td></tr>`
+            if (item.category.toLowerCase() === category.title.toLowerCase()) html += `<tr data-info='{"id": "${item._id}", "title": "${item.title}", "category": "${item.category}", "price": "${item.price}", "description": "${item.description}"}'><td><img src="../img/service-icons/${category.img}" alt="alt"></td><td>${item.title}</td><td>${item.category[0].toUpperCase() + item.category.slice(1)}</td><td>${new Date(item.date).toLocaleDateString()}</td><td>${item.count}</td><td>${item.price} ₽</td><td><button id="deleteItem" class="btn red">Удалить</button><button id="editItem" class="btn orange">Изменить</button></td></tr>`
         });
     });
     return html;