dashboard data info

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

@@ -0,0 +1,31 @@
+// Edit Item
+#billDataModal.c_modal-wrap.hide
+  .container
+    .row
+      .c_modal
+        .c_modal-content
+          .modal-content
+            .modal-content__header
+              h4.small-title Информация о заказе
+              span#billDataClose.modal-close
+                i.material-icons close
+            .modal-content__form
+                    .input-field
+                        input#bill_id(type="text" readonly)
+                        label Номер заказа
+                    .input-field
+                        input#email(type="text" readonly)
+                        label Почта
+                    .input-field
+                        input#method(type="text" readonly)
+                        label Способ оплаты
+                    .input-field
+                        input#date(type="text" readonly)
+                        label Дата оплаты
+                    .input-field
+                        input#amount(type="text" readonly)
+                        label Сумма
+                    .input-field
+                        textarea#data(class="materialize-textarea" type="text" name="type" readonly)
+                        label Данные аккаунтов
+// Edit Category END

dist/views/admin/control-panel.pug

@@ -43,10 +43,12 @@ body.has-fixed-sidenav
                                             th Способ оплаты
                                             th Дата оплаты
                                             th Сумма
+                                            th Информация о покупке
                                     .divider
                                     tbody
                                         #loader.progress
                                             .indeterminate     
-                        ul#pagination.pagination.center(data-page="1")              
+                        ul#pagination.pagination.center(data-page="1")
+    include ./assets/templates/modals/bill_data.pug                
     include ./assets/templates/footer.pug
     include ./assets/scripts.pug

src/admin/index.js

@@ -11,6 +11,7 @@ import { CategoryEditModal } from "./modals/category-edit.modal";
 import { ContentComponent } from "./components/content.component.js";
 import { AdministratorComponent } from "./components/administrator.component.js";
 import { DashboardComponent } from "./components/dashboard.component.js";
+import { BillDataModal } from "./modals/bill-data.modal.js";
 
 // Components
 const loader = new LoaderComponent('loader');
@@ -27,6 +28,7 @@ const administrator = new AdministratorComponent('administrator');
 const itemEdit = new ItemEditModal('editItemModal', 'edit', 'editItemClose');
 const itemDelete = new ItemDeleteModal('deleteItemModal', 'edit', 'deleteItemClose');
 const categoryEdit = new CategoryEditModal('editCategoryModal', 'editCategory_select', 'editCategoryClose');
+const billData = new BillDataModal('billDataModal', 'dashboard', 'billDataClose');
 
 const materialize = new MaterializeConfig();
 console.log('Control-Panel v1.0.0');

src/admin/modals/bill-data.modal.js

@@ -0,0 +1,37 @@
+import { Modal } from "../core/modal";
+
+export class BillDataModal extends Modal {
+    constructor(id, open, close) {
+        super(id, open, close);
+    }
+
+    show(e) {
+        if (e.target.id === 'billDataOpen') {
+            this.$el.classList.remove('hide');
+            document.body.style.overflowY = 'hidden';
+            this.openHandler(e);
+        }
+    }
+
+    setElems() {
+        this.$bill_id = this.$el.querySelector('#bill_id');
+        this.$email = this.$el.querySelector('#email');
+        this.$method = this.$el.querySelector('#method');
+        this.$date = this.$el.querySelector('#date');
+        this.$amount = this.$el.querySelector('#amount');
+        this.$data = this.$el.querySelector('#data');
+    }
+
+    openHandler(e) {
+        const data = JSON.parse(e.target.parentNode.parentNode.dataset.info);
+        this.$bill_id.value = data.bill_id;
+        this.$email.value = data.email;
+        this.$method.value = data.method;
+        this.$date.value = data.date;
+        this.$amount.value = data.amount;
+        this.$data.textContent = data.data.split(',').join('\n');
+
+        M.textareaAutoResize(this.$data);
+        M.updateTextFields();
+    }
+}

src/admin/templates/buyers.template.js

@@ -1,7 +1,7 @@
 export function renderBuyers(buyers) {
     let html = '';
     buyers.forEach(buyer => {
-        html += `<tr><td>${buyer.email}</td><td>${buyer.method[0].toUpperCase() + buyer.method.slice(1)}</td><td>${new Date(buyer.date).toLocaleDateString()}</td><td>${buyer.amount} ₽</td></tr>`;
+        html += `<tr data-info='{"bill_id": "${buyer.bill_id}", "email": "${buyer.email}", "method": "${buyer.method[0].toUpperCase() + buyer.method.slice(1)}", "date": "${new Date(buyer.date).toLocaleDateString()}", "amount": "${buyer.amount}", "data": "${buyer.data}"}'><td>${buyer.email}</td><td>${buyer.method[0].toUpperCase() + buyer.method.slice(1)}</td><td>${new Date(buyer.date).toLocaleDateString()}</td><td>${buyer.amount} ₽</td><td><button id="billDataOpen" class="btn orange">Данные аккаунтов</button></td></tr>`;
     });
     return html;
 }