diff --git a/src/components/api-page/ApiPage.js b/src/components/api-page/ApiPage.js
index e855dcf..fa93e13 100644
--- a/src/components/api-page/ApiPage.js
+++ b/src/components/api-page/ApiPage.js
@@ -1,10 +1,12 @@
import Component from '../component/index';
-import TableComponent from '../table-component';
import storageApi from '../../api/StorageServiceAPI';
import FilterApiComponent from '../search-component/index';
import ApiInfoComponent from '../api-info-component/index';
import CreateApiComponent from '../create-api-component/index';
import ButtonComponent from '../button-component/ButtonComponent';
+import ApiTableComponent from '../api-table-component/ApiTableComponent';
+import ApiTableViewForm from '../api-table-view-form/ApiTableViewForm';
+import {EVENTS} from '../../consts';
class ApiPage extends Component {
constructor (mainNodeSelector, parentNode) {
@@ -12,12 +14,10 @@ class ApiPage extends Component {
this.filterBox = this.createComponent(FilterApiComponent, this.mainNode);
- this.storageListTable = this.createComponent(TableComponent, this.mainNode);
+ this.apiViewForm = this.createComponent(ApiTableViewForm);
+
this.infoBox = this.createComponent(ApiInfoComponent);
this.createWindow = this.createComponent(CreateApiComponent);
- this.addSubscribe(this.storageListTable, 'showInfo', (obj) => {
- this.infoBox.render(obj);
- });
this.createBtn = this.createComponent(ButtonComponent, this.filterBox.filterButtonBox, '✚', 'btn btn-primary mb-3 Create__btn');
this.addSubscribe(this.createBtn, 'click', () => {
@@ -29,15 +29,26 @@ class ApiPage extends Component {
this.initStorageListTable();
- this.addSubscribe(this.infoBox, 'deleteApi', () => {
+ this.addSubscribe(this.apiViewForm, 'deleteApi', () => {
this.initStorageListTable();
});
+
+ this.apiTable = this.createComponent(ApiTableComponent, this.mainNode);
+ this.addSubscribe(this.apiTable, EVENTS.ROW_DOUBLE_CLICK, (_, row) => {
+ this.apiViewForm.setForm(row);
+ });
}
initStorageListTable = async () => {
- const list = await storageApi.request();
- return this.storageListTable.render(list);
+ this.apiList = await storageApi.request();
+ return this.renderTable();
};
+
+ renderTable = () => {
+ this.render(() => {
+ this.apiTable.render(this.apiList);
+ });
+ }
}
export default ApiPage;
diff --git a/src/components/api-table-component/ApiTableComponent.js b/src/components/api-table-component/ApiTableComponent.js
new file mode 100644
index 0000000..3e7c644
--- /dev/null
+++ b/src/components/api-table-component/ApiTableComponent.js
@@ -0,0 +1,14 @@
+import Table from '../table/Table';
+import {API_COLS} from '../../consts';
+import ApiTableRowComponent from './ApiTableRowComponent';
+
+class ApiTableComponent extends Table {
+ constructor (parentNode) {
+ super(parentNode, API_COLS);
+ }
+
+ renderRow = (parentNode, cols, row, index) => {
+ return this.createComponent(ApiTableRowComponent, parentNode, cols, row, index);
+ }
+}
+export default ApiTableComponent;
diff --git a/src/components/api-table-component/ApiTableRowComponent.js b/src/components/api-table-component/ApiTableRowComponent.js
new file mode 100644
index 0000000..6ea98b8
--- /dev/null
+++ b/src/components/api-table-component/ApiTableRowComponent.js
@@ -0,0 +1,16 @@
+import Component from '../component/index';
+import TableCellOverflow from '../table-cell-overflow/index';
+
+class ApiTableRowComponent extends Component {
+ constructor (parentNode, cols, row, index) {
+ super(null, parentNode);
+
+ this.cols = cols.map((col) => {
+ if (col.id === 'index') {
+ return this.createComponent(TableCellOverflow, this.mainNode, index + 1);
+ }
+ return this.createComponent(TableCellOverflow, this.mainNode, row[col.id]);
+ });
+ }
+}
+export default ApiTableRowComponent;
diff --git a/src/components/api-table-view-form/ApiTableViewForm.css b/src/components/api-table-view-form/ApiTableViewForm.css
new file mode 100644
index 0000000..986f690
--- /dev/null
+++ b/src/components/api-table-view-form/ApiTableViewForm.css
@@ -0,0 +1,18 @@
+.Api__value-input {
+ height: 200px;
+}
+.Api__view-controls {
+ position: absolute;
+ right: 40px;
+ top: 10px;
+ font-size: 20px;
+ z-index: 10000;
+}
+.Button__delete {
+ background: none;
+ border: none;
+}
+.Button__edit {
+ background: none;
+ border: none;
+}
\ No newline at end of file
diff --git a/src/components/api-table-view-form/ApiTableViewForm.js b/src/components/api-table-view-form/ApiTableViewForm.js
new file mode 100644
index 0000000..1b52c93
--- /dev/null
+++ 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;
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
index f99dfe7..e6689d5 100644
--- a/src/components/table/Table.js
+++ b/src/components/table/Table.js
@@ -75,7 +75,7 @@ class Table extends Component {
});
}
- this.rows = rows.map((row) => {
+ this.rows = rows.map((row, index) => {
const tr = this.createComponent(TableRowWrapper, this.tbody, row);
this.addSubscribe(tr, EVENTS.ROW_CLICK, (event) => {
this.next(EVENTS.ROW_CLICK, event, row);
@@ -83,7 +83,7 @@ class Table extends Component {
this.addSubscribe(tr, EVENTS.ROW_DOUBLE_CLICK, (event) => {
this.next(EVENTS.ROW_DOUBLE_CLICK, event, row);
});
- const rowComponent = this.renderRow(tr.mainNode, this.cols, row);
+ const rowComponent = this.renderRow(tr.mainNode, this.cols, row, index);
return {
tr,
rowComponent,
diff --git a/src/consts.js b/src/consts.js
index b96c5ac..27321da 100644
--- a/src/consts.js
+++ b/src/consts.js
@@ -38,6 +38,14 @@ export const USERS_COLS = [
{id: 'is_admin', label: 'Админ'},
];
+export const API_COLS = [
+ {id: 'index', label: '#'},
+ {id: 'key', label: 'Название хранилища'},
+ {id: 'description', label: 'Описание'},
+ {id: 'service_name', label: 'Имя сервиса'},
+ {id: 'author', label: 'Автор'},
+];
+
export const EVENTS = {
ROUTE_CHANGE: 'routeChange',
ROUTE_SEARCH_CHANGE: 'routeSearchChange',