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

src/app.css

@@ -15,3 +15,9 @@ textarea {
     width: 0px;
     background: transparent; 
 }
+
+button, 
+button:active, 
+button:focus {
+    outline: none;
+}

src/app.html

@@ -236,20 +236,24 @@
                 <div class="Info__service_name">
                 </div>
                 <div class="Info__controls">
-                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor"
+                    <button class="Button__edit">
+                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__edit bi bi-pencil" fill="currentColor"
                         xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd"
                             d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z" />
                         <path fill-rule="evenodd"
                             d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z" />
-                    </svg>
+                        </svg>
-                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor"
+                    </button>
+                    <button class="Button__delete">
+                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__delete bi bi-trash" fill="currentColor"
                         xmlns="http://www.w3.org/2000/svg">
                         <path
                             d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                         <path fill-rule="evenodd"
                             d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
-                    </svg>
+                        </svg>
+                    </button>
                 </div>
                 <code contenteditable class="Info__editor"></code>
                 <div data-toggle="collapse" data-target="#descriptionCollapse" aria-expanded="false"

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 () => {
+        this.initStorageListTable();
-            const list = await storageApi.request();
-            const storageListTable = new TableComponent(this.mainNode);
-            return storageListTable.render(list);
-        };
 
-        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', () => {
+            newRow.subscribe('dblclick', () => {
-                this.showInfo(item, index);
+                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.addEventListener(this.mainNode, 'dblclick', (evt) => {
-            this.next('click', evt);
+            this.next('dblclick', evt);
         });
 
     }