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

HM-90 Выпилил тип хранилища вместе со старой таблицей апи, перенес вывод информации об апи в модальный сайдбар (#56)

Browse Source
This commit is contained in:
mrPadre
2020-08-18 14:13:14 +03:00
committed by GitHub
parent fe2acdc03d
commit bf4ea2ab15
8 changed files with 185 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app.html
View File

@ -386,6 +386,34 @@
</div>
</template>
<!-- Шаблоны форм для просмотры api -->
<template id="api-view-form">
<div class="h-100 overflow-auto">
<p class="h2 mb-2 p-3 pr-5 sticky-top border-bottom bg-light"></p>
<div class="Api__view-controls">
<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>
</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>
</button>
</div>
<form class="p-3"></form>
</div>
</template>
<!-- Шаблон FormControl компонента -->
<template id="form-control">
<div class="mb-3">

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

@ -1,10 +1,12 @@
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';
import CreateApiComponent from '../create-api-component/index';
import ButtonComponent from '../button-component/ButtonComponent';
import ApiTableComponent from '../api-table-component/ApiTableComponent';
import ApiTableViewForm from '../api-table-view-form/ApiTableViewForm';
import {EVENTS} from '../../consts';
class ApiPage extends Component {
constructor (mainNodeSelector, parentNode) {
@ -12,12 +14,10 @@ class ApiPage extends Component {
this.filterBox = this.createComponent(FilterApiComponent, this.mainNode);
this.storageListTable = this.createComponent(TableComponent, this.mainNode);
this.apiViewForm = this.createComponent(ApiTableViewForm);
this.infoBox = this.createComponent(ApiInfoComponent);
this.createWindow = this.createComponent(CreateApiComponent);
this.addSubscribe(this.storageListTable, 'showInfo', (obj) => {
this.infoBox.render(obj);
});
this.createBtn = this.createComponent(ButtonComponent, this.filterBox.filterButtonBox, '✚', 'btn btn-primary mb-3 Create__btn');
this.addSubscribe(this.createBtn, 'click', () => {
@ -29,15 +29,26 @@ class ApiPage extends Component {
this.initStorageListTable();
this.addSubscribe(this.infoBox, 'deleteApi', () => {
this.addSubscribe(this.apiViewForm, 'deleteApi', () => {
this.initStorageListTable();
});
this.apiTable = this.createComponent(ApiTableComponent, this.mainNode);
this.addSubscribe(this.apiTable, EVENTS.ROW_DOUBLE_CLICK, (_, row) => {
this.apiViewForm.setForm(row);
});
}
initStorageListTable = async () => {
const list = await storageApi.request();
return this.storageListTable.render(list);
this.apiList = await storageApi.request();
return this.renderTable();
};
renderTable = () => {
this.render(() => {
this.apiTable.render(this.apiList);
});
}
}
export default ApiPage;

14
src/components/api-table-component/ApiTableComponent.js Normal file
View File

@ -0,0 +1,14 @@
import Table from '../table/Table';
import {API_COLS} from '../../consts';
import ApiTableRowComponent from './ApiTableRowComponent';
class ApiTableComponent extends Table {
constructor (parentNode) {
super(parentNode, API_COLS);
}
renderRow = (parentNode, cols, row, index) => {
return this.createComponent(ApiTableRowComponent, parentNode, cols, row, index);
}
}
export default ApiTableComponent;

16
src/components/api-table-component/ApiTableRowComponent.js Normal file
View File

@ -0,0 +1,16 @@
import Component from '../component/index';
import TableCellOverflow from '../table-cell-overflow/index';
class ApiTableRowComponent extends Component {
constructor (parentNode, cols, row, index) {
super(null, parentNode);
this.cols = cols.map((col) => {
if (col.id === 'index') {
return this.createComponent(TableCellOverflow, this.mainNode, index + 1);
}
return this.createComponent(TableCellOverflow, this.mainNode, row[col.id]);
});
}
}
export default ApiTableRowComponent;

18
src/components/api-table-view-form/ApiTableViewForm.css Normal file
View File

@ -0,0 +1,18 @@
.Api__value-input {
height: 200px;
}
.Api__view-controls {
position: absolute;
right: 40px;
top: 10px;
font-size: 20px;
z-index: 10000;
}
.Button__delete {
background: none;
border: none;
}
.Button__edit {
background: none;
border: none;
}

80
src/components/api-table-view-form/ApiTableViewForm.js Normal file
View File

@ -0,0 +1,80 @@
import Component from '../component/index';
import ModalSidebar from '../modal-sidebar/index';
import FormControl from '../form-control/index';
import {FORM_TYPES} from '../../consts';
import './ApiTableViewForm.css';
import storageApi from '../../api/StorageServiceAPI';
class ApiTableViewForm extends Component {
constructor (parentNode) {
super('#api-view-form', parentNode);
this.sidebar = this.createComponent(ModalSidebar, {
content: this.mainNode
});
this.key = null;
this.title = this.mainNode.querySelector('.h2');
this.form = this.mainNode.querySelector('form');
this.deleteBtn = this.mainNode.querySelector('.Button__delete');
this.addEventListener(this.deleteBtn, 'click', () => {
if (this.key !== null) {
this.deleteApi(this.key);
}
});
this.title.textContent = 'Информация о хранилище';
const inputs = [
this.keyInput = this.createComponent(FormControl, this.form, {
id: 'api-key-input',
label: 'Название хранилища'
}),
this.serviceNameInput = this.createComponent(FormControl, this.form, {
id: 'api-service-name-input',
label: 'Название сервиса'
}),
this.authorInput = this.createComponent(FormControl, this.form, {
id: 'api-author-input',
label: 'Автор хранилища'
}),
this.descriptionInput = this.createComponent(FormControl, this.form, {
id: 'api-description-input',
label: 'Краткое описание'
}),
this.valueInput = this.createComponent(FormControl, this.form, {
id: 'api-value-input',
type: FORM_TYPES.TEXTAREA,
className: 'Api__value-input',
label: 'Содержимое хранилища'
}),
];
inputs.forEach((input) => {
input.disabled(true);
});
}
stringifyValue (value) {
return JSON.stringify(value, false, 4);
}
setForm ({key, service_name, author, description, value}) {
this.keyInput.setValue(key);
this.serviceNameInput.setValue(service_name);
this.authorInput.setValue(author);
this.descriptionInput.setValue(description);
this.valueInput.setValue(this.stringifyValue(value));
this.key = key;
this.sidebar.show();
}
deleteApi = async (key) => {
await storageApi.remove(key);
this.key = null;
this.next('deleteApi');
this.sidebar.hide();
}
}
export default ApiTableViewForm;

4
src/components/table/Table.js
View File

@ -75,7 +75,7 @@ class Table extends Component {
});
}
this.rows = rows.map((row) => {
this.rows = rows.map((row, index) => {
const tr = this.createComponent(TableRowWrapper, this.tbody, row);
this.addSubscribe(tr, EVENTS.ROW_CLICK, (event) => {
this.next(EVENTS.ROW_CLICK, event, row);
@ -83,7 +83,7 @@ class Table extends Component {
this.addSubscribe(tr, EVENTS.ROW_DOUBLE_CLICK, (event) => {
this.next(EVENTS.ROW_DOUBLE_CLICK, event, row);
});
const rowComponent = this.renderRow(tr.mainNode, this.cols, row);
const rowComponent = this.renderRow(tr.mainNode, this.cols, row, index);
return {
tr,
rowComponent,

8
src/consts.js
View File

@ -38,6 +38,14 @@ export const USERS_COLS = [
{id: 'is_admin', label: 'Админ'},
];
export const API_COLS = [
{id: 'index', label: '#'},
{id: 'key', label: 'Название хранилища'},
{id: 'description', label: 'Описание'},
{id: 'service_name', label: 'Имя сервиса'},
{id: 'author', label: 'Автор'},
];
export const EVENTS = {
ROUTE_CHANGE: 'routeChange',
ROUTE_SEARCH_CHANGE: 'routeSearchChange',