diff --git a/src/app.html b/src/app.html index 0e08db3..e3727fd 100644 --- a/src/app.html +++ b/src/app.html @@ -331,6 +331,7 @@
+
diff --git a/src/components/api-page/ApiPage.js b/src/components/api-page/ApiPage.js index c2cae0c..2366e9c 100644 --- a/src/components/api-page/ApiPage.js +++ b/src/components/api-page/ApiPage.js @@ -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', () => { diff --git a/src/components/create-api-component/CreateApiComponent.css b/src/components/create-api-component/CreateApiComponent.css index f69751f..411f977 100644 --- a/src/components/create-api-component/CreateApiComponent.css +++ b/src/components/create-api-component/CreateApiComponent.css @@ -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; diff --git a/src/components/create-api-component/CreateApiComponent.js b/src/components/create-api-component/CreateApiComponent.js index ade57bd..c04f848 100644 --- a/src/components/create-api-component/CreateApiComponent.js +++ b/src/components/create-api-component/CreateApiComponent.js @@ -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,18 +37,39 @@ class CreateApiComponent extends Component { this.modal.show(); } - send = () => { - const obj = JSON.parse(this.editor.textContent); - this.data = { - key: this.inputKey.value, - value: obj, - description: this.inputDescription.value, - service_name: this.inputServiceName.value, - author: this.inputAuthor.value - }; + parseString = async (text) => { + const obj = await JSON.parse(text); + return obj; + } - storageApi.create(this.data); - routeService.goTo('/api'); + send = async () => { + try { + const obj = await JSON.parse(this.editor.textContent); + this.data = { + key: this.inputKey.value, + value: obj, + description: this.inputDescription.value, + service_name: this.inputServiceName.value, + author: this.inputAuthor.value + }; + + 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; diff --git a/src/components/search-component/FilterApiComponent.js b/src/components/search-component/FilterApiComponent.js index 38ea801..0d1b18a 100644 --- a/src/components/search-component/FilterApiComponent.js +++ b/src/components/search-component/FilterApiComponent.js @@ -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();