categories component fixed

dist/views/admin/categories.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

server/routes/api.js

@@ -179,6 +179,15 @@ module.exports = function(server, db) {
         }
     });
 
+    server.get('/api/category/id/:id', async (req, res) => {
+        try {
+            const category = await db.collection('categories').findOne({_id: ObjectID(req.params.id)});
+            res.json(category)
+        } catch {
+            res.status(500).render('main/404');
+        }
+    })
+
     server.get('/api/icons', checkAuthenticated, (req, res) => {
         try {
             const icons = fs.readdirSync('dist/public/img/service-icons');

src/admin/index.js

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

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

@@ -3,8 +3,9 @@ import { apiService } from "../services/api.service";
 import { renderIcons } from "../templates/icons.template";
 
 export class CategoryEditModal extends Modal {
-    constructor(id, open, close) {
+    constructor(id, open, close, {loader}) {
         super(id, open, close);
+        this.loader = loader;
     }
 
     // перепишем метод для перевода ивента open в событие onchange
@@ -27,19 +28,25 @@ export class CategoryEditModal extends Modal {
     }
     
     async openHandler(e) {
-        const data = JSON.parse(e.target.value),
-            icons = await apiService.getIcons();
+        try {
+            this.loader.show();
+            const icons = await apiService.getIcons(),
+                category = await apiService.getCategoryById(e.target.value)
                 
-        this.$img.innerHTML = `<option value='${data.img}' selected>Оставить прежнюю</option>`;
-        this.$id.value = data.id;
-        this.$originalTitle.value = data.title[0].toUpperCase() + data.title.slice(1);
-        this.$title.value = data.title[0].toUpperCase() + data.title.slice(1);
-        this.$type.value = data.type;
-        this.$format.value = data.format;
-        this.$img.insertAdjacentHTML('beforeend', renderIcons(icons));
-        M.FormSelect.init(this.$img);
-        M.textareaAutoResize(this.$type);
-        M.updateTextFields();
+            this.$img.innerHTML = `<option value='${category.img}' selected>Оставить прежнюю</option>`;
+            this.$id.value = category._id;
+            this.$originalTitle.value = category.title[0].toUpperCase() + category.title.slice(1);
+            this.$title.value = category.title[0].toUpperCase() + category.title.slice(1);
+            this.$type.value = category.type;
+            this.$format.value = category.format;
+            this.$img.insertAdjacentHTML('beforeend', renderIcons(icons));
+            M.FormSelect.init(this.$img);
+            M.textareaAutoResize(this.$type);
+            M.updateTextFields();
+            this.loader.hide();
+        } catch (error) {
+            alert('Произошла ошибка, обновите страницу')
+        }
     }
 
     async updateCategory(e) {

src/admin/services/api.service.js

@@ -14,6 +14,15 @@ class ApiService {
         }
     }
     
+    async getCategoryById(id) {
+        try {
+            const request = `${this.url}/api/category/id/${id}`;
+            return useRequest(request);
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
     async getCategories() {
         try {
             const request = `${this.url}/api/categories`;

src/admin/templates/categories.template.js

@@ -1,3 +1,3 @@
 export function renderCategories(categories) {
-    return categories.map(category => `<option value='{"id": "${category._id}", "title": "${category.title}", "img": "${category.img}", "type": "${category.type}", "format": "${category.format}"}' data-icon="../img/service-icons/${category.img}">${category.title[0].toUpperCase() + category.title.slice(1)}</option>`).join('');
+    return categories.map(category => `<option value='${category._id}' data-icon="../img/service-icons/${category.img}">${category.title[0].toUpperCase() + category.title.slice(1)}</option>`).join('');
 }