fixed items component

dist/public/css/style.css

@@ -89,7 +89,7 @@ hr {
     height: 100%;
     width: 100%;
     top: 0;
-    z-index: 999;
+    z-index: 99999999;
     left: 0;
     bottom: 0;
     right: 0;
@@ -514,6 +514,7 @@ footer.main-footer .container {
 .items-list__name {
     max-width: 525px;
     overflow-x: hidden;
+    overflow-y: hidden;
 }
 
 .items-list__name,

dist/views/admin/control-panel.pug

@@ -2,6 +2,16 @@ include ./assets/head.pug
 body.has-fixed-sidenav
     include ./assets/templates/header.pug
     main.admin-main
+        #loader.loader-fullscreen.hide
+            .loader-fullscreen__wrap
+                .preloader-wrapper.big.active
+                    .spinner-layer.spinner-green-only
+                        .circle-clipper.left
+                            .circle
+                        .gap-patch
+                            .circle
+                        .circle-clipper.right
+                            .circle
         .container
             .row
                 .col.s12
@@ -46,8 +56,6 @@ body.has-fixed-sidenav
                                             th Информация о покупке
                                     .divider
                                     tbody    
-                                        #loader.progress
-                                            .indeterminate     
                         ul#pagination.pagination.center(data-page="1")
     include ./assets/templates/modals/bill_data.pug                
     include ./assets/templates/footer.pug

dist/views/admin/items.pug

@@ -2,6 +2,16 @@ include ./assets/head.pug
 body.has-fixed-sidenav
     include ./assets/templates/header.pug
     main.admin-main
+        #loader.loader-fullscreen.hide
+            .loader-fullscreen__wrap
+                .preloader-wrapper.big.active
+                    .spinner-layer.spinner-green-only
+                        .circle-clipper.left
+                            .circle
+                        .gap-patch
+                            .circle
+                        .circle-clipper.right
+                            .circle
         .container
             .row
                 .col.s12
@@ -32,8 +42,6 @@ body.has-fixed-sidenav
                                             
                                     .divider
                                     tbody
-                                        #loader.progress
-                                            .indeterminate
                         ul#pagination.pagination.center(data-page="1")
                         .divider
                         .items-add

server/routes/api.js

@@ -57,6 +57,15 @@ module.exports = function(server, db) {
         }   
     });
 
+    server.get('/api/items/id/:id', async (req, res) => {
+        try {
+            const item = await db.collection('items').findOne({_id: ObjectID(req.params.id)})
+            res.json(item)
+        } catch {
+            res.status(500).render('main/404');
+        }
+    });
+
     server.get('/api/items/page/:page', async (req, res) => {
         try {
             const page = parseInt(req.params.page),
@@ -77,6 +86,15 @@ module.exports = function(server, db) {
         }
     });
 
+    server.get('/api/items/data/:id', checkAuthenticated, async (req, res) => {
+        try {
+            const data = await db.collection('info').findOne({_id: ObjectID(req.params.id)});
+            res.json(data)
+        } catch {
+            res.status(500).render('main/404');
+        }
+    })
+
     server.get('/api/buyers', checkAuthenticated, async (req, res) => {
         try {
             const buyers = await db.collection('buyers').find({}).toArray();

src/admin/index.js

@@ -25,7 +25,7 @@ const content = new ContentComponent('content');
 const administrator = new AdministratorComponent('administrator');
 
 // Modals
-const itemEdit = new ItemEditModal('editItemModal', 'edit', 'editItemClose');
+const itemEdit = new ItemEditModal('editItemModal', 'edit', 'editItemClose', {loader});
 const itemDelete = new ItemDeleteModal('deleteItemModal', 'edit', 'deleteItemClose');
 const categoryEdit = new CategoryEditModal('editCategoryModal', 'editCategory_select', 'editCategoryClose');
 const billData = new BillDataModal('billDataModal', 'dashboard', 'billDataClose');

src/admin/modals/item-delete.modal.js

@@ -1,4 +1,5 @@
 import { Modal } from "../core/modal";
+import { apiService } from "../services/api.service";
 import axios from "axios";
 
 export class ItemDeleteModal extends Modal {
@@ -19,10 +20,16 @@ export class ItemDeleteModal extends Modal {
         this.$button = this.$el.querySelector('.delete-item');
     }
 
-    openHandler(e) {
+    async openHandler(e) {
-        const data = JSON.parse(e.target.parentNode.parentNode.dataset.info);
+        try {
-        this.$content.innerHTML = `Вы действительно хотите удалить товар "${data.title}"? Находящиеся в нем аккаунты будут удалены.`;
+            const id = e.target.parentNode.parentNode.dataset.id,
-        this.$button.onclick = this.deleteHandler.bind(this, data.id);
+            item = await apiService.getItemById(id);
+
+            this.$content.innerHTML = `Вы действительно хотите удалить товар "${item.title}"? Находящиеся в нем аккаунты будут удалены.`;
+            this.$button.onclick = this.deleteHandler.bind(this, item._id);
+        } catch (error) {
+            alert('Произошла ошибка, попробуйте обновить страницу.')
+        }
     }
 
     async deleteHandler(id) {

src/admin/modals/item-edit.modal.js

@@ -3,8 +3,9 @@ import { apiService } from "../services/api.service";
 import { renderCategories } from "../templates/categories.template";
 
 export class ItemEditModal extends Modal {
-    constructor(id, open, close) {
+    constructor(id, open, close, {loader}) {
         super(id, open, close);
+        this.loader = loader
     }
 
     show(e) {
@@ -25,19 +26,28 @@ export class ItemEditModal extends Modal {
     }
 
     async openHandler(e) {
-          const data = JSON.parse(e.target.parentNode.parentNode.dataset.info),
+        try {
+            this.loader.show();
+            const id = e.target.parentNode.parentNode.dataset.id,
+                item = await apiService.getItemById(id),
+                data = await apiService.getDataById(id),
                 categories = await apiService.getCategories();
+            item.data = data.data
 
-            this.$category.innerHTML = `<option value='{"title": "${data.category}"}' selected>Оставить прежнюю</option>`;
+            this.$category.innerHTML = `<option value='{"title": "${item.category}"}' selected>Оставить прежнюю</option>`;
-            this.$id.value = data.id;
+            this.$id.value = item._id;
-            this.$title.value = data.title;
+            this.$title.value = item.title;
-            this.$price.value = data.price;
+            this.$price.value = item.price;
-            this.$description.value = data.description;
+            this.$description.value = item.description;
             this.$category.insertAdjacentHTML('beforeend', renderCategories(categories));
-            this.$data.value = data.data;
+            this.$data.value = item.data;
             M.FormSelect.init(this.$category);
             M.textareaAutoResize(this.$description);
             M.textareaAutoResize(this.$data);
             M.updateTextFields();
+            this.loader.hide();
+        } catch (error) {
+            alert('Произошла ошибка, обновите страницу')
+        }
     }
 }

src/admin/services/api.service.js

@@ -56,6 +56,24 @@ class ApiService {
         }
     }
 
+    async getItemById(id) {
+        try {
+            const request = `${this.url}/api/items/id/${id}`;
+            return useRequest(request);
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    async getDataById(id) {
+        try {
+            const request = `${this.url}/api/items/data/${id}`;
+            return useRequest(request);
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
     async getItemsOne(category, sorting) {
         try {
             if (sorting) {

src/admin/templates/items.template.js

@@ -3,7 +3,7 @@ export function renderItems(items, categories, info) {
         return categories.map(category => {
             return items.map((item, i) => {
                 if (item.category.toLowerCase() === category.title.toLowerCase()) {
-                    return `<tr data-info='{"id": "${item._id}", "title": "${item.title}", "category": "${item.category}", "price": "${item.price}", "description": "${item.description}", "data": "${info[i].data}"}'><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 `<tr data-id="${item._id}"><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 style="display: flex"><button id="deleteItem" class="btn red">Удалить</button><button id="editItem" class="btn orange">Изменить</button></td></tr>`;
                 }
             }).join('');
         }).join('');