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

HM-92 Добавил рендер страницы после создания апи и добавил отображение текста ошибки (#35)

Browse Source
This commit is contained in:
mrPadre
2020-07-30 18:21:43 +03:00
committed by GitHub
parent d957d2d208
commit ad486674af
5 changed files with 61 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.html
View File

@ -331,6 +331,7 @@
<code contenteditable class="Create__editor"></code>
</div>
<div class="Create__footer">
<div class="Create__error-container"></div>
</div>
</div>
</template>

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

@ -3,6 +3,8 @@ 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';
class ApiPage extends Component {
constructor (mainNodeSelector, parentNode) {
@ -11,10 +13,19 @@ class ApiPage extends Component {
this.filterBox = new FilterApiComponent(this.mainNode);
this.storageListTable = new TableComponent(this.mainNode);
this.infoBox = new ApiInfoComponent();
this.createWindow = new CreateApiComponent();
this.addSubscribe(this.storageListTable, 'showInfo', (obj) => {
this.infoBox.render(obj);
});
this.createBtn = new ButtonComponent(this.filterBox.filterButtonBox, '✚', 'btn btn-primary mb-3 Create__btn');
this.addSubscribe(this.createBtn, 'click', () => {
this.createWindow.show();
});
this.addSubscribe(this.createWindow, 'renderTable', () => {
this.initStorageListTable();
});
this.initStorageListTable();
this.addSubscribe(this.infoBox, 'deleteApi', () => {

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

@ -14,10 +14,25 @@
.Create__title {
text-align: center;
}
.Create__send {
align-self: flex-end;
}
.Create__sidebar {
width: 30%;
overflow-y: auto;
}
.Create__footer {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
display: flex;
width: 100%;
}
.Create__error-container {
font-size: 0.8em;
color: #F46E42;
margin: auto;
}
.Create__editor {
border: 1px solid #F2F2F2;
text-align: left;

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

@ -2,7 +2,6 @@ import Component from '../component/index';
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 {
@ -13,12 +12,13 @@ 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.createError = this.mainNode.querySelector('.Create__error-container');
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.button = new ButtonComponent(this.footer, 'Создать', 'btn btn-outline-primary Create__send');
this.content = {
headerNode: this.header,
contentNode: this.body,
@ -37,8 +37,14 @@ class CreateApiComponent extends Component {
this.modal.show();
}
send = () => {
const obj = JSON.parse(this.editor.textContent);
parseString = async (text) => {
const obj = await JSON.parse(text);
return obj;
}
send = async () => {
try {
const obj = await JSON.parse(this.editor.textContent);
this.data = {
key: this.inputKey.value,
value: obj,
@ -47,8 +53,23 @@ class CreateApiComponent extends Component {
author: this.inputAuthor.value
};
storageApi.create(this.data);
routeService.goTo('/api');
try {
await storageApi.create(this.data);
this.createError.textContent = '';
this.modal.hide();
this.next('renderTable');
} catch (err) {
if (err.response.status === 502) {
this.createError.textContent = 'Заполните все необходимые поля для создания хранилища';
} else if (err.response.status === 404) {
this.createError.textContent = 'Не удалось создать хранилище. Возможно Вы используете не уникальное название хранилища';
} else {
this.createError.textContent = 'Что-то пошло не так';
}
}
} catch {
this.createError.textContent = 'Тело хранилища не соответствует требованиям';
}
}
}
export default CreateApiComponent;

4
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 CreateApiComponent from '../create-api-component/index';
class FilterApiComponent extends Component {
constructor (container) {
@ -13,9 +12,6 @@ class FilterApiComponent extends Component {
this.filterInputsBox = this.mainNode.querySelector('.Filter__inputs-box');
this.filterButtonBox = this.mainNode.querySelector('.Filter__button-box');
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.createBtn.subscribe('click', () => this.createWindow.show());
this.inputs = FILTER_ROWS.map((item) => {
const {query} = routeService.getUrlData();