Hm 28 (#8)

* HM-28 Добавил компонент таблицы

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;

src/components/api-info-component/index.js

@@ -0,0 +1,3 @@
+import ApiInfoComponent from './ApiInfoComponent';
+
+export default ApiInfoComponent;

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;

src/components/table-column-component/index.js

@@ -0,0 +1,3 @@
+import TableColumnComponent from './TableColumnComponent';
+
+export default TableColumnComponent;

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;

src/components/table-component/index.js

@@ -0,0 +1,3 @@
+import TableComponent from './TableComponent';
+
+export default TableComponent;

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;

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;
 }

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;