diff --git a/src/app.html b/src/app.html index 3b93ce4..55b5638 100644 --- a/src/app.html +++ b/src/app.html @@ -144,17 +144,39 @@ + + + + + + diff --git a/src/components/api-page/ApiPage.js b/src/components/api-page/ApiPage.js index d1ce652..a62492d 100644 --- a/src/components/api-page/ApiPage.js +++ b/src/components/api-page/ApiPage.js @@ -1,11 +1,14 @@ import Component from '../component/index'; import TableComponent from '../table-component'; import storageApi from '../../api/StorageServiceAPI'; +import FilterApiComponent from '../search-component/index'; class ApiPage extends Component { constructor (mainNodeSelector, parentNode) { super(mainNodeSelector, parentNode); + this.filterBox = new FilterApiComponent(this.mainNode); + const initStorageListTable = async () => { const list = await storageApi.request(); const storageListTable = new TableComponent(this.mainNode); diff --git a/src/components/create-api-component/CreateApiComponent.css b/src/components/create-api-component/CreateApiComponent.css new file mode 100644 index 0000000..57f0921 --- /dev/null +++ b/src/components/create-api-component/CreateApiComponent.css @@ -0,0 +1,33 @@ +.Create__body { + height: 100%; + display: flex; +} +.Create__container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + +} +.Create__title { + text-align: center; +} +.Create__sidebar { + width: 30%; + overflow-y: auto; +} +.Create__editor { + border: 1px solid #F2F2F2; + text-align: left; + width: 100%; +} +.Create__controls { + position: absolute; + right: 10px; + top: 15px; + font-size: 20px; +} +.Create__input { + margin: 10px; +} \ No newline at end of file diff --git a/src/components/create-api-component/CreateApiComponent.js b/src/components/create-api-component/CreateApiComponent.js new file mode 100644 index 0000000..ba0904e --- /dev/null +++ b/src/components/create-api-component/CreateApiComponent.js @@ -0,0 +1,39 @@ +import Component from '../component/index'; +import ButtonComponent from '../button-component/ButtonComponent'; +import './CreateApiComponent.css'; +import storageApi from '../../api/StorageServiceAPI'; +import routeService from '../../services/RouteService'; + +class CreateApiComponent extends Component { + constructor (container) { + super('#create-api', container); + + this.inputKey = this.mainNode.querySelector('.Create__key'); + this.inputServiceName = this.mainNode.querySelector('.Create__serviceName'); + this.inputDescription = this.mainNode.querySelector('.Create__description'); + this.inputAuthor = this.mainNode.querySelector('.Create__author'); + 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.subscribe('click', () => { + this.send(); + }); + } + + 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 + }; + + storageApi.create(this.data); + routeService.goTo('/api'); + } +} +export default CreateApiComponent; diff --git a/src/components/create-api-component/index.js b/src/components/create-api-component/index.js new file mode 100644 index 0000000..7d32818 --- /dev/null +++ b/src/components/create-api-component/index.js @@ -0,0 +1,3 @@ +import CreateApiComponent from './CreateApiComponent'; + +export default CreateApiComponent; diff --git a/src/components/filter-input-component/FilterInputComponent.js b/src/components/filter-input-component/FilterInputComponent.js new file mode 100644 index 0000000..f36ec57 --- /dev/null +++ b/src/components/filter-input-component/FilterInputComponent.js @@ -0,0 +1,20 @@ +import Component from '../component/index'; + +class FilterInputComponent extends Component { + constructor (container, content) { + super('#filter-input', container); + + this.label = this.mainNode.querySelector('label'); + this.label.htmlFor = content.id; + this.label.textContent = content.title; + this.input = this.mainNode.querySelector('input'); + this.input.placeholder = content.placeholder; + this.input.id = content.id; + this.input.name = content.key; + } + + getValue = () => { + return this.input.value; + } +} +export default FilterInputComponent; diff --git a/src/components/filter-input-component/index.js b/src/components/filter-input-component/index.js new file mode 100644 index 0000000..4e29225 --- /dev/null +++ b/src/components/filter-input-component/index.js @@ -0,0 +1,3 @@ +import FilterInputComponent from './FilterInputComponent'; + +export default FilterInputComponent; diff --git a/src/components/navigation-buttons-component/NavButtonComponent.js b/src/components/navigation-buttons-component/NavButtonComponent.js index 3d814d9..6991b60 100644 --- a/src/components/navigation-buttons-component/NavButtonComponent.js +++ b/src/components/navigation-buttons-component/NavButtonComponent.js @@ -2,7 +2,6 @@ import Component from '../component/index'; import routeService from '../../services/RouteService'; import ButtonComponent from '../button-component/ButtonComponent'; import Image from '../../img/logo.png'; - import './NavButtonComponent.css'; class NavButtonComponent extends Component { diff --git a/src/components/search-component/FilterApiComponent.css b/src/components/search-component/FilterApiComponent.css new file mode 100644 index 0000000..7e1d3e0 --- /dev/null +++ b/src/components/search-component/FilterApiComponent.css @@ -0,0 +1,8 @@ +.Filter__input { + min-width: 200px; +} +.Create__btn { + margin: 0 20px; +} + + diff --git a/src/components/search-component/FilterApiComponent.js b/src/components/search-component/FilterApiComponent.js new file mode 100644 index 0000000..426accb --- /dev/null +++ b/src/components/search-component/FilterApiComponent.js @@ -0,0 +1,55 @@ +import Component from '../component/index'; +import ButtonComponent from '../button-component/ButtonComponent'; +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 { + constructor (container) { + super('#filter-container', container); + 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.inputs = FILTER_ROWS.map((item) => { + const {query} = routeService.getUrlData(); + const input = new FilterInputComponent(this.filterInputsBox, item); + Object.keys(query).forEach((elem) => { + if (elem === item.key) { + input.input.value = query[elem]; + } + }); + return input; + }); + + this.searchBtn.subscribe('click', () => { + this.send(); + + }); + this.addEventListener(this.form, 'submit', (event) => { + event.preventDefault(); + this.send(); + }); + } + + send = () => { + const query = this.inputs.reduce((memo, element) => { + const name = element.input.name; + + return { + ...memo, + [name]: element.input.value + }; + }, {}); + routeService.goTo('/api', query); + } +} +export default FilterApiComponent; diff --git a/src/components/search-component/constants.js b/src/components/search-component/constants.js new file mode 100644 index 0000000..240f491 --- /dev/null +++ b/src/components/search-component/constants.js @@ -0,0 +1,6 @@ +export const FILTER_ROWS = [ + {title: 'Название хранилища', placeholder: 'Введите текст', key: 'key', id: 'filter-api-input-key'}, + {title: 'Описание', placeholder: 'Введите текст', key: 'description', id: 'filter-api-input-description'}, + {title: 'Имя сервиса', placeholder: 'Введите текст', key: 'service_name', id: 'filter-api-input-service-name'}, + {title: 'Автор', placeholder: 'Введите текст', key: 'author', id: 'filter-api-input-author'}, +]; diff --git a/src/components/search-component/index.js b/src/components/search-component/index.js new file mode 100644 index 0000000..84378d4 --- /dev/null +++ b/src/components/search-component/index.js @@ -0,0 +1,3 @@ +import FilterApiComponent from './FilterApiComponent'; + +export default FilterApiComponent; diff --git a/src/components/table-component/TableComponent.js b/src/components/table-component/TableComponent.js index c963f62..03a349e 100644 --- a/src/components/table-component/TableComponent.js +++ b/src/components/table-component/TableComponent.js @@ -53,4 +53,5 @@ class TableComponent extends Component { this.infoBox.render(object, index); } } + export default TableComponent; diff --git a/src/components/table-row-component/TableRowComponent.js b/src/components/table-row-component/TableRowComponent.js index 7a02b46..eaed742 100644 --- a/src/components/table-row-component/TableRowComponent.js +++ b/src/components/table-row-component/TableRowComponent.js @@ -11,7 +11,13 @@ class TableRowComponent extends Component { this.content.forEach((text) => { const contentPlace = document.createElement('td'); - contentPlace.textContent = typeof(text) !== 'string' ? typeof(text) : text; + if (typeof(text) !== 'string') { + contentPlace.textContent = typeof(text); + } else if (text.length > 30) { + contentPlace.textContent = `${text.substr(0, 30)} ...`; + } else { + contentPlace.textContent = text; + } this.row.appendChild(contentPlace); });