Hm 28 (#8)

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

.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",

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}

src/api/StorageServiceAPI.js

@@ -68,5 +68,6 @@ class StorageServiceApi {
         return data;
     }
 }
+const storageApi = new StorageServiceApi();
 
-export default StorageServiceApi;
+export default storageApi;

src/app.html

@@ -21,6 +21,42 @@
     <template id="test-button">
         <button type="button" class="btn btn-primary">Проверка сборки</button>
     </template>
+     <!-- Шаблон колонки таблицы -->
+     <template id="table-column">
+         <th scope='col' class='Table__column'></th>
+    </template>
+     <!-- Шаблон строки таблицы -->
+     <template id="table-row">
+        <tr class="Table__body-row">
+            <th class="Body__row-index"></th>     
+        </tr>
+    </template>
+    <!-- Шаблон главной таблицы -->
+    <template id="main-table">
+        <table class="table table-striped">
+            <thead class="Table__head"> 
+                <tr class='Table__head-row'>
+                    <th scope='col' class='Table__column'>#</th>
+                </tr> 
+            </thead>
+            <tbody class='Table__body'>
+            </tbody>
+        </table>
+    </template>
+     <!-- Шаблон информации об апи -->
+     <template id="api-info">
+        <div class="container">
+            <h1 class="Info__title"></h1>
+            <div class="Info__body">
+                <div class="Info__sidebar"></div>
+                <div class="Info__editor"></div>
+            </div>
+            <div class="Info__footer">
+
+            </div>
+        </div>
+    </template>
+
 </body>
 
 </html>

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();

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;
+    width: 80vw;
-    height: 200px;
+    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;