81 lines
2.7 KiB
JavaScript
81 lines
2.7 KiB
JavaScript
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;
|