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

HM-51 Перенес компоненты создания апи и просмотра информации апи на н… (#25)

Browse Source 
* HM-51 Перенес компоненты создания апи и просмотра информации апи на нормальную модалку. Тестовую модалку удалил. Изменил названия колонок на русские
This commit is contained in:
mrPadre
2020-07-22 12:23:18 +03:00
committed by GitHub
parent 19a29e5b1c
commit a5b2932832
12 changed files with 95 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
.Info__body {
height: 100%;
display: flex;
flex-direction: column;
}
.Info__container {
width: 100%;
@ -13,17 +14,18 @@
.Info__title {
text-align: center;
}
.Info__sidebar {
width: 30%;
.Info__service_name {
align-self: center;
}
.Info__editor {
border: 1px solid #F2F2F2;
text-align: left;
width: 100%;
height: 40vh;
}
.Info__controls {
position: absolute;
right: 10px;
top: 15px;
right: 15px;
top: 10px;
font-size: 20px;
}
}

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

@ -1,28 +1,43 @@
import Component from '../component/index';
import './ApiInfoComponent.css';
import Modal from '../modal/Modal';
class ApiInfoComponent extends Component {
constructor (container) {
super('#api-info', container);
this.infoTitle = this.mainNode.querySelector('.Info__title');
this.infoSidebar = this.mainNode.querySelector('.Info__sidebar');
this.infoHeader = this.mainNode.querySelector('.Info__header');
this.infoDescription = this.mainNode.querySelector('.Info__description');
this.infoServiceName = this.mainNode.querySelector('.Info__service_name');
this.infoEditor = this.mainNode.querySelector('.Info__editor');
this.infoFooter = this.mainNode.querySelector('.Info__footer');
this.infoBody = this.mainNode.querySelector('.Info__body');
this.infoControls = this.mainNode.querySelector('.Info__controls');
this.info = {
headerNode: this.infoHeader,
contentNode: this.infoBody,
footerNode: this.infoFooter
};
this.modal = new Modal(document.body, this.info);
}
render = (object, index) => {
this.object = object;
this.index = index;
this.modal.show();
if (this.object) {
this.infoTitle.textContent = this.object.key ;
this.infoSidebar.textContent = this.object.description;
let title = '';
if (this.object.key.length > 20) {
title = `${this.object.key.substr(0, 20)} ...`;
} 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.infoFooter.textContent = this.object.author;
this.infoDescription.textContent = this.object.description;
}
}
}
export default ApiInfoComponent;