HM-70 Оживил кнопку удаления апи / изменил способ открытия информации об апи на даблклик (#34)

src/components/api-info-component/ApiInfoComponent.css

@@ -26,6 +26,14 @@
 .Info__controls {
     position: absolute;
     right: 15px;
-    top: 10px;
+    top: 5px;
     font-size: 20px;
 }
+.Button__delete {
+    background: none;
+    border: none;
+}
+.Button__edit {
+    background: none;
+    border: none;
+}

src/components/api-info-component/ApiInfoComponent.js

@@ -1,6 +1,7 @@
 import Component from '../component/index';
 import './ApiInfoComponent.css';
 import Modal from '../modal/Modal';
+import storageApi from '../../api/StorageServiceAPI';
 
 class ApiInfoComponent extends Component {
     constructor (container) {
@@ -14,17 +15,27 @@ class ApiInfoComponent extends Component {
         this.infoFooter = this.mainNode.querySelector('.Info__footer');
         this.infoBody = this.mainNode.querySelector('.Info__body');
         this.infoControls = this.mainNode.querySelector('.Info__controls');
+        this.btnDelete = this.mainNode.querySelector('.Button__delete');
+        this.btnEdit = this.mainNode.querySelector('.Button__edit');
         this.info = {
             headerNode: this.infoHeader,
             contentNode: this.infoBody,
             footerNode: this.infoFooter
         };
+        this.key = null;
         this.modal = new Modal(document.body, this.info);
+
+        this.addEventListener(this.btnDelete, 'click', () => {
+            if (this.key !== null) {
+                this.deleteApi(this.key);
+            }
+        });
     }
 
     render = (object, index) => {
         this.object = object;
         this.index = index;
+        this.key = object.key;
         this.modal.show();
 
         if (this.object) {
@@ -34,10 +45,17 @@ class ApiInfoComponent extends Component {
             } else title = this.object.key;
             this.infoTitle.textContent = title;
             this.infoServiceName.textContent = this.object.service_name;
-            this.infoEditor.innerHTML = JSON.stringify(this.object.value);
+            this.infoEditor.innerHTML = JSON.stringify(this.object.value, false, 4);
             this.infoFooter.textContent = this.object.author;
             this.infoDescription.textContent = this.object.description;
         }
     }
+
+    deleteApi = async (key) => {
+        await storageApi.remove(key);
+        this.key = null;
+        this.modal.hide();
+        this.next('deleteApi');
+    }
 }
 export default ApiInfoComponent;

src/components/api-page/ApiPage.js

@@ -2,21 +2,30 @@ import Component from '../component/index';
 import TableComponent from '../table-component';
 import storageApi from '../../api/StorageServiceAPI';
 import FilterApiComponent from '../search-component/index';
+import ApiInfoComponent from '../api-info-component/index';
 
 class ApiPage extends Component {
     constructor (mainNodeSelector, parentNode) {
         super(mainNodeSelector, parentNode);
 
         this.filterBox = new FilterApiComponent(this.mainNode);
+        this.storageListTable = new TableComponent(this.mainNode);
+        this.infoBox = new ApiInfoComponent();
+        this.addSubscribe(this.storageListTable, 'showInfo', (obj) => {
+            this.infoBox.render(obj);
+        });
 
-        const initStorageListTable = async () => {
-            const list = await storageApi.request();
-            const storageListTable = new TableComponent(this.mainNode);
-            return storageListTable.render(list);
-        };
+        this.initStorageListTable();
 
-        initStorageListTable();
+        this.addSubscribe(this.infoBox, 'deleteApi', () => {
+            this.initStorageListTable();
+        });
     }
+
+    initStorageListTable = async () => {
+        const list = await storageApi.request();
+        return this.storageListTable.render(list);
+    };
 }
 
 export default ApiPage;

src/components/table-component/TableComponent.js

@@ -1,5 +1,4 @@
 import Component from '../component/index';
-import ApiInfoComponent from '../api-info-component/index';
 import TableColumnComponent from '../table-column-component/index';
 import TableRowComponent from '../table-row-component/TableRowComponent';
 
@@ -10,7 +9,6 @@ class TableComponent extends Component {
         this.tableHead = this.mainNode.querySelector('.Table__head');
         this.tableBody = this.mainNode.querySelector('.Table__body');
         this.tableHeadRow = this.mainNode.querySelector('.Table__head-row');
-        this.infoBox = new ApiInfoComponent();
         this.columnArr = [];
         this.rowArr = [];
     }
@@ -34,8 +32,8 @@ class TableComponent extends Component {
 
         this.array.forEach((item, index) => {
             const newRow = new TableRowComponent(this.tableBody, item, index);
-            newRow.subscribe('click', () => {
-                this.showInfo(item, index);
+            newRow.subscribe('dblclick', () => {
+                this.next('showInfo', item);
             });
             this.rowArr.push(newRow);
         });
@@ -45,10 +43,6 @@ class TableComponent extends Component {
         this.array.sort((a, b) => a[item] > b[item]);
         this.render(array);
     }
-
-    showInfo = (object, index) => {
-        this.infoBox.render(object, index);
-    }
 }
 
 export default TableComponent;

src/components/table-row-component/TableRowComponent.js

@@ -21,8 +21,8 @@ class TableRowComponent extends Component {
             this.row.appendChild(contentPlace);
         });
 
-        this.addEventListener(this.mainNode, 'click', (evt) => {
-            this.next('click', evt);
+        this.addEventListener(this.mainNode, 'dblclick', (evt) => {
+            this.next('dblclick', evt);
         });
 
     }