vigdorov/storage-service-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
mrPadre
2020-07-29 23:28:29 +03:00
committed by GitHub
parent 0d0342926f
commit a9282a38e5
7 changed files with 61 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.css
View File

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

12
src/app.html
View File

@ -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 width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor"
</svg>
</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"

10
src/components/api-info-component/ApiInfoComponent.css
View File

@ -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;
}

20
src/components/api-info-component/ApiInfoComponent.js
View File

@ -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;

21
src/components/api-page/ApiPage.js
View File

@ -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;

10
src/components/table-component/TableComponent.js
View File

@ -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;

4
src/components/table-row-component/TableRowComponent.js
View File

@ -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);
});
}