diff --git a/.eslintrc.json b/.eslintrc.json index b798d9c..2299ee5 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -55,7 +55,6 @@ "indent": ["error", 4], "keyword-spacing": ["error", {"before": true}], "line-comment-position": ["error", {"position": "above"}], - "linebreak-style": ["error", "unix"], "lines-between-class-members": ["error", "always"], "max-len": [ "warn", diff --git a/src/api/StorageListAPI.js b/src/api/StorageListAPI.js index bdd209c..5226f36 100644 --- a/src/api/StorageListAPI.js +++ b/src/api/StorageListAPI.js @@ -1,6 +1,6 @@ import {v4 as uuidv4} from 'uuid'; -import StorageServiceApi from './StorageServiceAPI'; +import storageApi from './StorageServiceAPI'; /** * @interface StoreListElement @@ -26,7 +26,7 @@ class StorageListApi { /** * @type {StorageServiceApi} */ - this.api = new StorageServiceApi(); + this.api = storageApi; this.api.create({key, description, author, service_name, value: []}); /** * @type {Object} diff --git a/src/api/StorageServiceAPI.js b/src/api/StorageServiceAPI.js index cdaa2b5..0a3934b 100644 --- a/src/api/StorageServiceAPI.js +++ b/src/api/StorageServiceAPI.js @@ -68,5 +68,6 @@ class StorageServiceApi { return data; } } +const storageApi = new StorageServiceApi(); -export default StorageServiceApi; +export default storageApi; diff --git a/src/app.html b/src/app.html index 3b8b5de..f47cd01 100644 --- a/src/app.html +++ b/src/app.html @@ -21,6 +21,42 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/app.js b/src/app.js index 8eb0c9a..1cc5db3 100644 --- a/src/app.js +++ b/src/app.js @@ -5,9 +5,18 @@ import 'bootstrap'; // ! TODO: 5-14 строчки удалить, после теста компонента import TestModal from './components/test-modal'; import TestButton from './components/test-button'; +import TableComponent from './components/table-component'; +import storageApi from './api/StorageServiceAPI'; const testModal = new TestModal(); const testButton = new TestButton(); +const initStorageListTable = async function () { + const list = await storageApi.request(); + const storageListTable = new TableComponent(); + return storageListTable.render(list); +}; + +initStorageListTable(); testButton.subscribe('click', () => { testModal.show(); diff --git a/src/components/api-info-component/ApiInfoComponent.css b/src/components/api-info-component/ApiInfoComponent.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/api-info-component/ApiInfoComponent.js b/src/components/api-info-component/ApiInfoComponent.js new file mode 100644 index 0000000..f1b95a1 --- /dev/null +++ b/src/components/api-info-component/ApiInfoComponent.js @@ -0,0 +1,28 @@ +import Component from '../component/index'; + +import './ApiInfoComponent.css'; + +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.infoEditor = this.mainNode.querySelector('.Info__editor'); + this.infoFooter = this.mainNode.querySelector('.Info__footer'); + } + + render = (object, index) => { + this.object = object; + this.index = index; + + if (this.object) { + this.infoTitle.textContent = this.object.key ; + this.infoSidebar.textContent = this.object.description; + this.infoEditor.textContent = this.object.value; + this.infoFooter.textContent = this.object.author; + } + + } +} +export default ApiInfoComponent; diff --git a/src/components/api-info-component/index.js b/src/components/api-info-component/index.js new file mode 100644 index 0000000..2fda174 --- /dev/null +++ b/src/components/api-info-component/index.js @@ -0,0 +1,3 @@ +import ApiInfoComponent from './ApiInfoComponent'; + +export default ApiInfoComponent; diff --git a/src/components/table-column-component/TableColumnComponent.js b/src/components/table-column-component/TableColumnComponent.js new file mode 100644 index 0000000..a60dc9e --- /dev/null +++ b/src/components/table-column-component/TableColumnComponent.js @@ -0,0 +1,16 @@ +import Component from '../component/index'; + +class TableColumnComponent extends Component { + constructor (tableHeadRow, text) { + super('#table-column', tableHeadRow); + + this.row = this.mainNode; + this.row.textContent = text; + + this.addEventListener(this.mainNode, 'click', (evt) => { + this.next('click', evt); + }); + } + +} +export default TableColumnComponent; diff --git a/src/components/table-column-component/index.js b/src/components/table-column-component/index.js new file mode 100644 index 0000000..860925e --- /dev/null +++ b/src/components/table-column-component/index.js @@ -0,0 +1,3 @@ +import TableColumnComponent from './TableColumnComponent'; + +export default TableColumnComponent; diff --git a/src/components/table-component/TableComponent.js b/src/components/table-component/TableComponent.js new file mode 100644 index 0000000..ebb9423 --- /dev/null +++ b/src/components/table-component/TableComponent.js @@ -0,0 +1,56 @@ +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'; + +class TableComponent extends Component { + constructor () { + super('#main-table', document.body); + + 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.columnArr = []; + this.rowArr = []; + } + + render = (array) => { + this.columnArr.forEach((item) => { + item.destroy(); + }); + this.rowArr.forEach((item) => { + item.destroy(); + }); + this.array = array; + this.columns = Object.keys(array[0]); + this.columns.forEach((item, index) => { + const columnElement = new TableColumnComponent(this.tableHeadRow, item, index); + columnElement.subscribe('click', () => { + this.sort(item, array); + }); + this.columnArr.push(columnElement); + }); + + this.array.forEach((item, index) => { + const newRow = new TableRowComponent(this.tableBody, item, index); + newRow.subscribe('click', () => { + this.showInfo(item, index); + }); + this.rowArr.push(newRow); + }); + } + + sort = (item, array) => { + this.array.sort((a, b) => a[item] > b[item]); + this.render(array); + } + + showInfo = (object, index) => { + this.modal.show(); + this.infoBox.render(object, index); + } +} +export default TableComponent; diff --git a/src/components/table-component/index.js b/src/components/table-component/index.js new file mode 100644 index 0000000..fbc54dc --- /dev/null +++ b/src/components/table-component/index.js @@ -0,0 +1,3 @@ +import TableComponent from './TableComponent'; + +export default TableComponent; diff --git a/src/components/table-row-component/TableRowComponent.js b/src/components/table-row-component/TableRowComponent.js new file mode 100644 index 0000000..7a02b46 --- /dev/null +++ b/src/components/table-row-component/TableRowComponent.js @@ -0,0 +1,25 @@ +import Component from '../component/index'; + +class TableRowComponent extends Component { + constructor (container, object, index) { + super('#table-row', container); + + this.row = this.mainNode; + this.indexPlace = this.mainNode.querySelector('.Body__row-index'); + this.content = Object.values(object); + this.indexPlace.textContent = index + 1; + + this.content.forEach((text) => { + const contentPlace = document.createElement('td'); + contentPlace.textContent = typeof(text) !== 'string' ? typeof(text) : text; + this.row.appendChild(contentPlace); + }); + + this.addEventListener(this.mainNode, 'click', (evt) => { + this.next('click', evt); + }); + + } + +} +export default TableRowComponent; diff --git a/src/components/test-modal/TestModal.css b/src/components/test-modal/TestModal.css index 5c23d07..0ea0cd0 100644 --- a/src/components/test-modal/TestModal.css +++ b/src/components/test-modal/TestModal.css @@ -24,8 +24,8 @@ } .TestModal__window { - width: 300px; - height: 200px; + width: 80vw; + height: 80vh; background-color: white; z-index: 5; } \ No newline at end of file diff --git a/src/components/test-modal/TestModal.js b/src/components/test-modal/TestModal.js index 97b0dcc..4431fd6 100644 --- a/src/components/test-modal/TestModal.js +++ b/src/components/test-modal/TestModal.js @@ -33,6 +33,7 @@ class TestModal extends Component { hide = () => { this.mainNode.classList.add(CN.HIDE_MODAL); } + } export default TestModal;