HM-90 Выпилил тип хранилища вместе со старой таблицей апи, перенес вывод информации об апи в модальный сайдбар (#56)

2020-08-18 14:13:14 +03:00
parent fe2acdc03d
commit bf4ea2ab15
8 changed files with 185 additions and 10 deletions
--- a/src/components/api-table-view-form/ApiTableViewForm.js
+++ b/src/components/api-table-view-form/ApiTableViewForm.js
@ -0,0 +1,80 @@
+import Component from '../component/index';
+import ModalSidebar from '../modal-sidebar/index';
+import FormControl from '../form-control/index';
+import {FORM_TYPES} from '../../consts';
+import './ApiTableViewForm.css';
+import storageApi from '../../api/StorageServiceAPI';
+
+class ApiTableViewForm extends Component {
+    constructor (parentNode) {
+        super('#api-view-form', parentNode);
+
+        this.sidebar = this.createComponent(ModalSidebar, {
+            content: this.mainNode
+        });
+        this.key = null;
+
+        this.title = this.mainNode.querySelector('.h2');
+        this.form = this.mainNode.querySelector('form');
+        this.deleteBtn = this.mainNode.querySelector('.Button__delete');
+        this.addEventListener(this.deleteBtn, 'click', () => {
+            if (this.key !== null) {
+                this.deleteApi(this.key);
+            }
+        });
+
+        this.title.textContent = 'Информация о хранилище';
+
+        const inputs = [
+            this.keyInput = this.createComponent(FormControl, this.form, {
+                id: 'api-key-input',
+                label: 'Название хранилища'
+            }),
+            this.serviceNameInput = this.createComponent(FormControl, this.form, {
+                id: 'api-service-name-input',
+                label: 'Название сервиса'
+            }),
+            this.authorInput = this.createComponent(FormControl, this.form, {
+                id: 'api-author-input',
+                label: 'Автор хранилища'
+            }),
+            this.descriptionInput = this.createComponent(FormControl, this.form, {
+                id: 'api-description-input',
+                label: 'Краткое описание'
+            }),
+            this.valueInput = this.createComponent(FormControl, this.form, {
+                id: 'api-value-input',
+                type: FORM_TYPES.TEXTAREA,
+                className: 'Api__value-input',
+                label: 'Содержимое хранилища'
+            }),
+        ];
+
+        inputs.forEach((input) => {
+            input.disabled(true);
+        });
+    }
+
+    stringifyValue (value) {
+        return JSON.stringify(value, false, 4);
+    }
+
+    setForm ({key, service_name, author, description, value}) {
+        this.keyInput.setValue(key);
+        this.serviceNameInput.setValue(service_name);
+        this.authorInput.setValue(author);
+        this.descriptionInput.setValue(description);
+        this.valueInput.setValue(this.stringifyValue(value));
+        this.key = key;
+
+        this.sidebar.show();
+    }
+
+    deleteApi = async (key) => {
+        await storageApi.remove(key);
+        this.key = null;
+        this.next('deleteApi');
+        this.sidebar.hide();
+    }
+}
+export default ApiTableViewForm;