HM-51 Перенес компоненты создания апи и просмотра информации апи на н… (#25)

* HM-51 Перенес компоненты создания апи и просмотра информации апи на нормальную модалку. Тестовую модалку удалил. Изменил названия колонок на русские

src/app.html

@@ -18,7 +18,8 @@
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNavDropdown">
-                <div class="Buttons__container">
+                <div class="Buttons__container" aria-label="Toggle navigation" data-toggle="collapse"
+                 data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown">
                 </div>
             </div>
         </nav>
@@ -38,19 +39,11 @@
         <div class="Page"></div>
     </template>
 
-    <!-- Шаблон Модального окна -->
-    <template id="test-modal">
-        <div class="TestModal">
-            <div class="TestModal__shadow"></div>
-            <div class="TestModal__window"></div>
-        </div>
-    </template>
-
     <!-- Шаблон Modal -->
     <template id="universal-modal">
         <div class="Modal">
             <div class="Modal__window modal">
-                <div class="modal-dialog modal-dialog-centered">
+                <div class="Modal__container modal-dialog modal-dialog-centered">
                     <div class="modal-content">
                         <div class="modal-header">
                             <h5 class="modal-title"></h5>
@@ -181,8 +174,12 @@
     <!-- Шаблон информации об апи -->
     <template id="api-info">
         <div class="card text-center Info__container">
-            <div class="card-header">
+            <div class="Info__header">
-                <h1 class="Info__title"></h1>
+                <h3 class="Info__title"></h3>
+            </div>
+            <div class="Info__body">
+                <div class="Info__service_name">
+                </div>
                 <div class="Info__controls">
                     <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor"
                         xmlns="http://www.w3.org/2000/svg">
@@ -199,13 +196,17 @@
                             d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                     </svg>
                 </div>
-            </div>
-            <div class="Info__body">
-                <div class="Info__sidebar">
-                </div>
                 <code contenteditable class="Info__editor"></code>
+                <div data-toggle="collapse" data-target="#descriptionCollapse" aria-expanded="false" aria-controls="collapseExample" style="text-align: center; cursor: pointer;">
+                    Краткое описание
+                </div>
+                <div class="collapse" id="descriptionCollapse">
+                  <div class="Info__description card card-body">
+                    
+                  </div>
+                </div>
             </div>
-            <div class="Info__footer card-footer text-muted">
+            <div class="Info__footer">
                 
             </div>
         </div>
@@ -214,10 +215,10 @@
     <template id="create-api">
         <div class="card text-center Info__container">
             <div class="card-header">
-                <h1 class="Create__title">Новая база данных</h1>
+                <h3 class="Create__title">Новая база данных</h3>
             </div>
             <div class="Create__body">
-                <div class="Create__sidebar">
+                <div class="Create__inputs">
                     <form class="Create__form">
                         <div class="form-group Create__input">
                             <label for="key">Api key</label>
@@ -239,7 +240,7 @@
                 </div>
                 <code contenteditable class="Create__editor"></code>
             </div>
-            <div class="Create__footer card-footer text-muted">
+            <div class="Create__footer">
             </div>
         </div>
     </template>

src/components/api-info-component/ApiInfoComponent.css

@@ -1,6 +1,7 @@
 .Info__body {
     height: 100%;
     display: flex;
+    flex-direction: column;
 }
 .Info__container {
     width: 100%;
@@ -13,17 +14,18 @@
 .Info__title {
     text-align: center;
 }
-.Info__sidebar {
+.Info__service_name {
-    width: 30%;
+    align-self: center;
 }
 .Info__editor {
     border: 1px solid #F2F2F2;
     text-align: left;
     width: 100%;
+    height: 40vh;
 }
 .Info__controls {
     position: absolute;
-    right: 10px;
+    right: 15px;
-    top: 15px;
+    top: 10px;
     font-size: 20px;
 }

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

@@ -1,28 +1,43 @@
 import Component from '../component/index';
-
 import './ApiInfoComponent.css';
+import Modal from '../modal/Modal';
 
 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.infoHeader = this.mainNode.querySelector('.Info__header');
+        this.infoDescription = this.mainNode.querySelector('.Info__description');
+        this.infoServiceName = this.mainNode.querySelector('.Info__service_name');
         this.infoEditor = this.mainNode.querySelector('.Info__editor');
         this.infoFooter = this.mainNode.querySelector('.Info__footer');
+        this.infoBody = this.mainNode.querySelector('.Info__body');
+        this.infoControls = this.mainNode.querySelector('.Info__controls');
+        this.info = {
+            headerNode: this.infoHeader,
+            contentNode: this.infoBody,
+            footerNode: this.infoFooter
+        };
+        this.modal = new Modal(document.body, this.info);
     }
 
     render = (object, index) => {
         this.object = object;
         this.index = index;
+        this.modal.show();
 
         if (this.object) {
-            this.infoTitle.textContent = this.object.key ;
+            let title = '';
-            this.infoSidebar.textContent = this.object.description;
+            if (this.object.key.length > 20) {
+                title = `${this.object.key.substr(0, 20)} ...`;
+            } else title = this.object.key;
+            this.infoTitle.textContent = title;
+            this.infoServiceName.textContent = this.object.service_name;
             this.infoEditor.innerHTML = JSON.stringify(this.object.value);
             this.infoFooter.textContent = this.object.author;
+            this.infoDescription.textContent = this.object.description;
         }
-
     }
 }
 export default ApiInfoComponent;

src/components/create-api-component/CreateApiComponent.css

@@ -1,6 +1,7 @@
 .Create__body {
     height: 100%;
     display: flex;
+    
 }
 .Create__container {
     width: 100%;
@@ -21,6 +22,8 @@
     border: 1px solid #F2F2F2;
     text-align: left;
     width: 100%;
+    min-height: 40vh;
+    margin: 10px 0;
 }
 .Create__controls {
     position: absolute;
@@ -31,3 +34,18 @@
 .Create__input {
     margin: 10px;
 }
+
+.Large__container {
+    max-width: 800px;
+}
+
+.Scroll__body {
+    overflow-y: auto;
+    max-height: 60vh;
+}
+
+@media (max-width: 800px) {
+    .Create__body {
+        flex-direction: column;
+    }
+}

src/components/create-api-component/CreateApiComponent.js

@@ -3,6 +3,7 @@ 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 {
     constructor (container) {
@@ -12,16 +13,30 @@ 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.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.content = {
+            headerNode: this.header,
+            contentNode: this.body,
+            footerNode: this.footer
+        };
+        this.modal = new Modal(document.body, this.content);
+        this.modal.container.classList.add('Large__container');
+        this.modal.content.classList.add('Scroll__body');
 
         this.button.subscribe('click', () => {
             this.send();
         });
     }
 
+    show = () => {
+        this.modal.show();
+    }
+
     send = () => {
         const obj = JSON.parse(this.editor.textContent);
         this.data = {

src/components/modal/Modal.js

@@ -14,6 +14,7 @@ const CLOSE_BUTTON = '.close';
 const MODAL_HEADER = '.modal-title';
 const MODAL_CONTENT = '.modal-body';
 const MODAL_FOOTER = '.modal-footer';
+const MODAL_CONTAINER = '.Modal__container';
 
 /**
  * @function ModalListener
@@ -35,6 +36,7 @@ class Modal extends Component {
 
         this.modal = this.mainNode.querySelector(MODAL);
         this.closeButton = this.mainNode.querySelector(CLOSE_BUTTON);
+        this.container = this.mainNode.querySelector(MODAL_CONTAINER);
         this.header = this.mainNode.querySelector(MODAL_HEADER);
         this.content = this.mainNode.querySelector(MODAL_CONTENT);
         this.footer = this.mainNode.querySelector(MODAL_FOOTER);

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 TestModal from '../test-modal/index';
 import CreateApiComponent from '../create-api-component/index';
 
 class FilterApiComponent extends Component {
@@ -13,11 +12,10 @@ class FilterApiComponent extends Component {
         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.createWindow = new CreateApiComponent();
-        this.createBtn.subscribe('click', () => this.modal.show());
+        this.createBtn.subscribe('click', () => this.createWindow.show());
 
         this.inputs = FILTER_ROWS.map((item) => {
             const {query} = routeService.getUrlData();

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

@@ -5,7 +5,14 @@ class TableColumnComponent extends Component {
         super('#table-column', tableHeadRow);
 
         this.row = this.mainNode;
-        this.row.textContent = text;
+        this.columnName = {
+            key: 'Название хранилища',
+            description: 'Описание',
+            service_name: 'Имя сервиса',
+            author: 'Автор',
+            value: 'Тип содержимого'
+        };
+        this.row.textContent = this.columnName[text];
 
         this.addEventListener(this.mainNode, 'click', (evt) => {
             this.next('click', evt);

src/components/table-component/TableComponent.js

@@ -1,5 +1,4 @@
 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';
@@ -11,8 +10,7 @@ class TableComponent extends Component {
         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.infoBox = new ApiInfoComponent(this.modal.window);
         this.columnArr = [];
         this.rowArr = [];
     }
@@ -49,7 +47,6 @@ class TableComponent extends Component {
     }
 
     showInfo = (object, index) => {
-        this.modal.show();
         this.infoBox.render(object, index);
     }
 }

src/components/test-modal/TestModal.css

@@ -1,34 +0,0 @@
-.TestModal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.TestModal_hide {
-    display: none;
-}
-
-.TestModal__shadow {
-    position: absolute;
-    background-color: rgba(0, 0, 0, 0.4);
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 4;
-}
-
-.TestModal__window {
-    position: relative;
-    width: 80vw;
-    height: 80vh;
-    background-color: white;
-    border: 1px solid #F7F7F7;
-    border-radius: 5px;
-    z-index: 5;
-}

src/components/test-modal/TestModal.js

@@ -1,39 +0,0 @@
-// ! TODO: Удалить, необходим для примера работы с компонентами
-import Component from '../component';
-
-import './TestModal.css';
-
-const MAIN = 'TestModal';
-const CN = {
-    SHADOW: `${MAIN}__shadow`,
-    WINDOW: `${MAIN}__window`,
-    HIDE_MODAL: `${MAIN}_hide`,
-};
-
-class TestModal extends Component {
-    constructor () {
-        super('#test-modal', document.body);
-
-        this.shadow = this.mainNode.querySelector(`.${CN.SHADOW}`);
-        this.window = this.mainNode.querySelector(`.${CN.WINDOW}`);
-
-        this.addEventListener(this.shadow, 'click', (evt) => {
-            if (evt.target === this.shadow) {
-                this.hide();
-            }
-        });
-
-        this.hide();
-    }
-
-    show = () => {
-        this.mainNode.classList.remove(CN.HIDE_MODAL);
-    }
-
-    hide = () => {
-        this.mainNode.classList.add(CN.HIDE_MODAL);
-    }
-
-}
-
-export default TestModal;

src/components/test-modal/index.js

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