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

43
src/app.html
View File

@ -18,7 +18,8 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<div class="Buttons__container">
<div class="Buttons__container" aria-label="Toggle navigation" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown">
</div>
</div>
</nav>
@ -38,19 +39,11 @@
<div class="Page"></div>
</template>
<!-- Шаблон Модального окна -->
<template id="test-modal">
<div class="TestModal">
<div class="TestModal__shadow"></div>
<div class="TestModal__window"></div>
</div>
</template>
<!-- Шаблон Modal -->
<template id="universal-modal">
<div class="Modal">
<div class="Modal__window modal">
<div class="modal-dialog modal-dialog-centered">
<div class="Modal__container modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
@ -181,8 +174,12 @@
<!-- Шаблон информации об апи -->
<template id="api-info">
<div class="card text-center Info__container">
<div class="card-header">
<h1 class="Info__title"></h1>
<div class="Info__header">
<h3 class="Info__title"></h3>
</div>
<div class="Info__body">
<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"
xmlns="http://www.w3.org/2000/svg">
@ -199,14 +196,18 @@
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>
</div>
</div>
<div class="Info__body">
<div class="Info__sidebar">
</div>
<code contenteditable class="Info__editor"></code>
<div data-toggle="collapse" data-target="#descriptionCollapse" aria-expanded="false" aria-controls="collapseExample" style="text-align: center; cursor: pointer;">
Краткое описание
</div>
<div class="collapse" id="descriptionCollapse">
<div class="Info__description card card-body">
</div>
</div>
</div>
<div class="Info__footer card-footer text-muted">
<div class="Info__footer">
</div>
</div>
</template>
@ -214,10 +215,10 @@
<template id="create-api">
<div class="card text-center Info__container">
<div class="card-header">
<h1 class="Create__title">Новая база данных</h1>
<h3 class="Create__title">Новая база данных</h3>
</div>
<div class="Create__body">
<div class="Create__sidebar">
<div class="Create__inputs">
<form class="Create__form">
<div class="form-group Create__input">
<label for="key">Api key</label>
@ -239,7 +240,7 @@
</div>
<code contenteditable class="Create__editor"></code>
</div>
<div class="Create__footer card-footer text-muted">
<div class="Create__footer">
</div>
</div>
</template>

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;

18
src/components/create-api-component/CreateApiComponent.css
View File

@ -1,6 +1,7 @@
.Create__body {
height: 100%;
display: flex;
}
.Create__container {
width: 100%;
@ -21,6 +22,8 @@
border: 1px solid #F2F2F2;
text-align: left;
width: 100%;
min-height: 40vh;
margin: 10px 0;
}
.Create__controls {
position: absolute;
@ -30,4 +33,19 @@
}
.Create__input {
margin: 10px;
}
.Large__container {
max-width: 800px;
}
.Scroll__body {
overflow-y: auto;
max-height: 60vh;
}
@media (max-width: 800px) {
.Create__body {
flex-direction: column;
}
}

15
src/components/create-api-component/CreateApiComponent.js
View File

@ -3,6 +3,7 @@ import ButtonComponent from '../button-component/ButtonComponent';
import './CreateApiComponent.css';
import storageApi from '../../api/StorageServiceAPI';
import routeService from '../../services/RouteService';
import Modal from '../modal/Modal';
class CreateApiComponent extends Component {
constructor (container) {
@ -12,16 +13,30 @@ class CreateApiComponent extends Component {
this.inputServiceName = this.mainNode.querySelector('.Create__serviceName');
this.inputDescription = this.mainNode.querySelector('.Create__description');
this.inputAuthor = this.mainNode.querySelector('.Create__author');
this.header = this.mainNode.querySelector('.Create__title');
this.body = this.mainNode.querySelector('.Create__body');
this.footer = this.mainNode.querySelector('.Create__footer');
this.form = this.mainNode.querySelector('.Create__form');
this.editor = this.mainNode.querySelector('.Create__editor');
this.button = new ButtonComponent(this.footer, 'Создать', 'btn btn-outline-primary');
this.content = {
headerNode: this.header,
contentNode: this.body,
footerNode: this.footer
};
this.modal = new Modal(document.body, this.content);
this.modal.container.classList.add('Large__container');
this.modal.content.classList.add('Scroll__body');
this.button.subscribe('click', () => {
this.send();
});
}
show = () => {
this.modal.show();
}
send = () => {
const obj = JSON.parse(this.editor.textContent);
this.data = {

2
src/components/modal/Modal.js
View File

@ -14,6 +14,7 @@ const CLOSE_BUTTON = '.close';
const MODAL_HEADER = '.modal-title';
const MODAL_CONTENT = '.modal-body';
const MODAL_FOOTER = '.modal-footer';
const MODAL_CONTAINER = '.Modal__container';
/**
* @function ModalListener
@ -35,6 +36,7 @@ class Modal extends Component {
this.modal = this.mainNode.querySelector(MODAL);
this.closeButton = this.mainNode.querySelector(CLOSE_BUTTON);
this.container = this.mainNode.querySelector(MODAL_CONTAINER);
this.header = this.mainNode.querySelector(MODAL_HEADER);
this.content = this.mainNode.querySelector(MODAL_CONTENT);
this.footer = this.mainNode.querySelector(MODAL_FOOTER);

6
src/components/search-component/FilterApiComponent.js
View File

@ -4,7 +4,6 @@ import './FilterApiComponent.css';
import routeService from '../../services/RouteService';
import {FILTER_ROWS} from './constants';
import FilterInputComponent from '../filter-input-component/index';
import TestModal from '../test-modal/index';
import CreateApiComponent from '../create-api-component/index';
class FilterApiComponent extends Component {
@ -13,11 +12,10 @@ class FilterApiComponent extends Component {
this.form = this.mainNode.querySelector('.Filter__form');
this.filterInputsBox = this.mainNode.querySelector('.Filter__inputs-box');
this.filterButtonBox = this.mainNode.querySelector('.Filter__button-box');
this.modal = new TestModal();
this.searchBtn = new ButtonComponent(this.filterButtonBox, 'Найти', 'btn btn-primary mb-3');
this.createBtn = new ButtonComponent(this.filterButtonBox, '✚', 'btn btn-primary mb-3 Create__btn');
this.createWindow = new CreateApiComponent(this.modal.window);
this.createBtn.subscribe('click', () => this.modal.show());
this.createWindow = new CreateApiComponent();
this.createBtn.subscribe('click', () => this.createWindow.show());
this.inputs = FILTER_ROWS.map((item) => {
const {query} = routeService.getUrlData();

9
src/components/table-column-component/TableColumnComponent.js
View File

@ -5,7 +5,14 @@ class TableColumnComponent extends Component {
super('#table-column', tableHeadRow);
this.row = this.mainNode;
this.row.textContent = text;
this.columnName = {
key: 'Название хранилища',
description: 'Описание',
service_name: 'Имя сервиса',
author: 'Автор',
value: 'Тип содержимого'
};
this.row.textContent = this.columnName[text];
this.addEventListener(this.mainNode, 'click', (evt) => {
this.next('click', evt);

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

@ -1,5 +1,4 @@
import Component from '../component/index';
import TestModal from '../test-modal/index';
import ApiInfoComponent from '../api-info-component/index';
import TableColumnComponent from '../table-column-component/index';
import TableRowComponent from '../table-row-component/TableRowComponent';
@ -11,8 +10,7 @@ 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.modal = new TestModal();
this.infoBox = new ApiInfoComponent(this.modal.window);
this.infoBox = new ApiInfoComponent();
this.columnArr = [];
this.rowArr = [];
}
@ -49,7 +47,6 @@ class TableComponent extends Component {
}
showInfo = (object, index) => {
this.modal.show();
this.infoBox.render(object, index);
}
}

34
src/components/test-modal/TestModal.css
View File

@ -1,34 +0,0 @@
.TestModal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.TestModal_hide {
display: none;
}
.TestModal__shadow {
position: absolute;
background-color: rgba(0, 0, 0, 0.4);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
}
.TestModal__window {
position: relative;
width: 80vw;
height: 80vh;
background-color: white;
border: 1px solid #F7F7F7;
border-radius: 5px;
z-index: 5;
}

39
src/components/test-modal/TestModal.js
View File

@ -1,39 +0,0 @@
// ! TODO: Удалить, необходим для примера работы с компонентами
import Component from '../component';
import './TestModal.css';
const MAIN = 'TestModal';
const CN = {
SHADOW: `${MAIN}__shadow`,
WINDOW: `${MAIN}__window`,
HIDE_MODAL: `${MAIN}_hide`,
};
class TestModal extends Component {
constructor () {
super('#test-modal', document.body);
this.shadow = this.mainNode.querySelector(`.${CN.SHADOW}`);
this.window = this.mainNode.querySelector(`.${CN.WINDOW}`);
this.addEventListener(this.shadow, 'click', (evt) => {
if (evt.target === this.shadow) {
this.hide();
}
});
this.hide();
}
show = () => {
this.mainNode.classList.remove(CN.HIDE_MODAL);
}
hide = () => {
this.mainNode.classList.add(CN.HIDE_MODAL);
}
}
export default TestModal;

3
src/components/test-modal/index.js
View File

@ -1,3 +0,0 @@
import TestModal from './TestModal';
export default TestModal;