ru.coon 2.5.34 → 2.5.35

package/src/uielement/plugin/configPanel/ExecuteApiCommandPluginConfigPanel.js

@@ -1,850 +1,850 @@
-Ext.define('Coon.uielement.plugin.configPanel.ExecuteApiCommandPluginConfigPanel', {
-    extend: 'Ext.panel.Panel',
-    alias: 'widget.ExecuteApiCommandPluginConfigPanel',
-    description: 'Плагин позволяет выполнить запрос к серверу',
-    layout: 'fit',
-    scrollable: 'y',
-    requires: ['Ext.ux.TreePicker'],
-    padding: 6,
-    viewModel: {
-        data: {
-            text: {
-                handler: 'handlerName',
-                picker: 'Команда',
-                docLink: '',
-                docLinkTooltip: 'Открыть документацию по команде (в новой вкладке)',
-                destination: 'propertyPath',
-                params: 'Параметры команды',
-                response: 'Формат ответа',
-                method: 'Метод',
-                mappingMode: 'mappingMode',
-                updateUrl: 'Обновить',
-                sendRequest: 'Отправить',
-                noParams: 'Параметры отсутствуют',
-                url: 'URL',
-            },
-            handlerName: null,
-            pickerSearchString: null,
-            mode: 'development',
-            selectedPath: null,
-            selectedOperationId: null,
-            selectedApiController: null,
-            apiInfo: {},
-            servers: null,
-            requestParams: null,
-            requestUrl: null,
-            requestMethod: null,
-            parsedResponse: null,
-            responseContainer: null,
-            mappingMode: 'data',
-            /* stateAttrs: [
-                'selectedPath',
-                'requestUrl',
-                'requestMethod',
-                'handlerName',
-                'responseContainer'
-            ],*/
-            isRestoringState: false,
-            isParamsFormValid: false,
-            responsePreview: '',
-            responsePreviewLabel: '',
-            apiURL: '/v3/api-docs/CRM',
-            apiDocURL: '/api-doc/swagger-ui/index.html?configUrl=%2Fv3%2Fapi-docs%2Fswagger-config&urls.primaryName=CRM',
-        },
-        formulas: {
-            activeServerUrl: (get) => {
-                if (get('mode') === 'development') {
-                    return location.origin;
-                }
-                const servers = get('servers');
-                if (Array.isArray(servers)) {
-                    return servers.slice().shift().url;
-                }
-                return null;
-            },
-            // state: (get) => Object.fromEntries(get('stateAttrs').map((attr) => [attr, get(attr)])),
-            state: (get) => ({
-                selectedPath: get('selectedPath'),
-                requestParams: get('requestParams'),
-                requestMethod: get('requestMethod'),
-                handlerName: get('handlerName'),
-                responseContainer: get('responseContainer'),
-                mappingMode: get('mappingMode'),
-            }),
-            isObjectMode: (get) => get('mappingMode') === 'object',
-            docLinkEl: (get) => {
-                const o = get('selectedOperationId');
-                const c = get('selectedApiController');
-                if (o && c) {
-                    const u = get('apiDocURL');
-                    const t = get('text.docLink');
-                    const tt = get('text.docLinkTooltip');
-                    return `<a 
-                                href="${u}#/${c}/${o}" 
-                                target="_blank" 
-                                class="x-fa fa-question-circle" 
-                                style="text-decoration: none;" 
-                                title="${tt}"
-                            >${t}</a>`;
-                } else {
-                    return '';
-                }
-            },
-        },
-        stores: {
-            tree: {
-                remoteFilter: false,
-                type: 'tree',
-            },
-            api: {
-                autoLoad: true,
-                proxy: {
-                    type: 'ajax',
-                    url: '{apiURL}',
-                    reader: {
-                        type: 'json',
-                    },
-                },
-                listeners: {
-                    beforeload: 'onBeforeLoadApi',
-                    load: 'onLoadApi',
-                },
-            },
-            methods: {
-                type: 'array',
-                fields: ['text'],
-                data: [],
-            },
-            responseTree: {
-                remoteFilter: false,
-                type: 'tree',
-            },
-        },
-    },
-    items: [
-        {
-            xtype: 'container',
-
-            layout: 'anchor',
-            scrollable: 'y',
-            defaults: {anchor: '100%', labelAlign: 'top'},
-            items: [
-                {
-                    xtype: 'pluginDescriptionLabel',
-                    bind: {
-                        value: '{description}',
-                    },
-                },
-                {
-                    xtype: 'comboBtnWrapper',
-                    combobox: {
-                        reference: 'handlerCombo',
-                        xtype: 'BaseComboBox',
-                        flex: 1,
-                        loadOnRender: false,
-                        hideMode: 'offsets',
-                        allowBlank: false,
-                        store: 'codeHandlers',
-                        bind: {
-                            fieldLabel: '{text.handler}',
-                            value: '{handlerName}',
-                        },
-                        valueField: 'id',
-                        displayField: 'id',
-                    },
-                },
-                {
-                    xtype: 'container',
-                    reference: 'mask-target',
-                    layout: 'anchor',
-                    items: [
-                        {
-                            xtype: 'fieldcontainer',
-                            anchor: '100%',
-                            layout: 'column',
-                            items: [
-                                {
-                                    xtype: 'treepicker',
-                                    autoSelect: true,
-                                    autoSelectLast: true,
-                                    reference: 'picker',
-                                    displayField: 'text',
-                                    labelStyle: 'display:inline;color: rgba(17, 17, 17, 0.54);color: var(--highlight-color);',
-                                    maxPickerHeight: 400,
-                                    columnWidth: 0.75,
-                                    editable: true,
-                                    enableKeyEvents: true,
-                                    disabled: true,
-                                    allowBlank: false,
-                                    triggerCls: 'svg-icon svg-icon-expand-bottom svg-icon-expand-bottom-default',
-                                    bind: {
-                                        store: '{tree}',
-                                        disabled: '{api.loading}',
-                                        fieldLabel:
-                                            '{text.picker} {docLinkEl}',
-                                    },
-                                    listeners: {
-                                        beforeselect: 'onPickerBeforeSelect',
-                                        select: 'onPickerSelect',
-                                        keyup: 'onPickerKeyPress',
-                                    },
-                                    initComponent: function() {
-                                        this['superclass'].initComponent.call(this, arguments);
-                                    },
-                                    onItemClick: function(view, record) {
-                                        if (record.get('leaf') === true) {
-                                            this.selectItem(record);
-                                        }
-                                    },
-                                },
-                                {
-                                    xtype: 'combo',
-                                    queryMode: 'local',
-                                    triggerAction: 'all',
-                                    reference: 'methodPicker',
-                                    columnWidth: 0.25,
-                                    disabled: true,
-                                    forceSelection: true,
-                                    margin: '1px 0 0 0',
-                                    bind: {
-                                        store: '{methods}',
-                                        value: '{requestMethod}',
-                                        fieldLabel: '{text.method}',
-                                        disabled: '{!selectedPath || api.loading}',
-                                    },
-                                    allowBlank: false,
-                                }
-                            ],
-                        },
-                        {
-                            xtype: 'form',
-                            reference: 'main-form',
-                            layout: 'anchor',
-                            defaults: {
-                                anchor: '100%',
-                            },
-                            items: [
-                                {
-                                    xtype: 'fieldcontainer',
-                                    layout: {
-                                        type: 'hbox',
-                                        align: 'stretch',
-                                    },
-                                    defaults: {
-                                        padding: 10,
-                                        border: false,
-                                        style: 'border-top:none',
-                                    },
-                                    items: [
-                                        {
-                                            xtype: 'fieldset',
-                                            flex: 1,
-                                            hidden: true,
-                                            bind: {
-                                                title: '{text.params}',
-                                                visible: '{selectedPath && requestMethod}',
-                                            },
-                                            items: [
-                                                {
-                                                    xtype: 'form',
-                                                    reference: 'params-form',
-                                                    layout: 'anchor',
-                                                    defaults: {
-                                                        anchor: '100%',
-                                                        labelAlign: 'top',
-                                                    },
-                                                    listeners: {
-                                                        validitychange: 'onParamsFormValidityChange',
-                                                    },
-                                                }
-                                            ],
-                                        },
-                                        {
-                                            xtype: 'fieldset',
-                                            flex: 1.5,
-                                            layout: 'fit',
-                                            margin: '0 0 0 2px',
-                                            maxHeight: 500,
-                                            scrollable: 'y',
-                                            bind: {
-                                                title: '{text.response}',
-                                                visible: '{selectedPath && requestMethod}',
-                                            },
-                                            items: [
-                                                {
-                                                    xtype: 'tabpanel',
-                                                    hidden: true,
-                                                    bind: {
-                                                        hidden: '{api.loading}',
-                                                    },
-                                                    items: [
-                                                        {
-                                                            xtype: 'treepanel',
-                                                            title: 'TREE',
-                                                            reference: 'response-preview-tree',
-                                                            border: 0,
-                                                            minHeight: 200,
-                                                            rootVisible: true,
-                                                            bind: {
-                                                                store: '{responseTree}',
-                                                            },
-                                                        },
-                                                        {
-                                                            xtype: 'textarea',
-                                                            title: 'JSON',
-                                                            reference: 'response-preview',
-                                                            border: 0,
-                                                            editable: false,
-                                                            minHeight: 150,
-                                                            grow: true,
-                                                            labelAlign: 'top',
-                                                            bind: {
-                                                                value: '{responsePreview}',
-                                                                fieldLabel: '{responsePreviewLabel}',
-                                                            },
-                                                        }
-                                                    ],
-                                                }
-                                            ],
-                                        }
-                                    ],
-                                },
-                                {
-                                    xtype: 'fieldcontainer',
-                                    layout: 'column',
-                                    items: [
-                                        {
-                                            columnWidth: 1,
-                                            xtype: 'textfield',
-                                            editable: false,
-                                            bind: {
-                                                value: '{requestUrl}',
-                                                fieldLabel: 'text.url',
-                                            },
-                                            triggers: {
-                                                sync: {
-                                                    cls: 'x-fa fa-sync-alt',
-                                                    handler: 'updateUrl',
-                                                    bind: {
-                                                        disabled: '{!isParamsFormValid || !selectedPath}',
-                                                    },
-                                                },
-                                                send: {
-                                                    cls: 'x-fa fa-paper-plane',
-                                                    handler: 'sendRequest',
-                                                    bind: {
-                                                        disabled: '{!sendRequest}',
-                                                    },
-                                                },
-                                            },
-                                        }
-                                    ],
-                                },
-                                {
-                                    xtype: 'ConstantList',
-                                    data: [
-                                        ['object', 'object'],
-                                        // TODO add mapping
-                                        // ['map', 'map'],
-                                        ['data', 'data']
-                                    ],
-                                    bind: {
-                                        value: '{mappingMode}',
-                                        fieldLabel: '{text.mappingMode}',
-                                    },
-                                    allowBlank: true,
-                                },
-                                {
-                                    xtype: 'textfield',
-                                    hidden: true,
-                                    bind: {
-                                        fieldLabel: '{text.destination}',
-                                        value: '{responseContainer}',
-                                        visible: '{isObjectMode}',
-                                        allowBlank: true,
-                                    },
-                                },
-                                {
-                                    fieldLabel: 'Ответ',
-                                    xtype: 'textarea',
-                                    anchor: '100%',
-                                    readOnly: true,
-                                    grow: true,
-                                    hidden: true,
-                                    bind: {
-                                        value: '{parsedResponse}',
-                                        visible: '{parsedResponse}',
-                                    },
-                                }
-                            ],
-                        }
-                    ],
-                }
-            ],
-        }
-    ],
-    getData: function() {
-        return this.getViewModel().get('state');
-    },
-    setData: function(data) {
-        const vm = this.getViewModel();
-        vm.set('description', this.description);
-        for (const key of Object.keys(vm.get())) {
-            if (typeof data[key] !== 'undefined') {
-                vm.set('isRestoringState', true);
-                vm.set(key, data[key]);
-            }
-        }
-        setTimeout(() => {
-            vm.set('isRestoringState', false);
-        }, 1);
-    },
-    loadMask: null,
-    controller: {
-        bindings: {
-            onChangeSelectedPath: '{selectedPath}',
-            onChangeRequestMethod: '{requestMethod}',
-        },
-        updateParamsFromUrl: function(url) {
-            if (!url) {
-                return;
-            }
-            let params;
-            try {
-                params = new URL(url).searchParams;
-            } catch (e) {
-                return;
-            }
-            if (!params) {
-                return;
-            }
-            const paramsForm = this.lookup('params-form');
-            if (paramsForm) {
-                for (const paramName of params.keys()) {
-                    const formField = paramsForm.items.findBy((field) => field.getName() === paramName);
-                    formField && formField.setValue(params.get(paramName));
-                }
-            }
-        },
-        onChangeSelectedPath: function() {
-            this.updateParams();
-        },
-        onChangeRequestMethod: function() {
-            this.updateParams();
-            this.updateParamsFromUrl(this.getViewModel().get('requestUrl'));
-        },
-        onBeforeLoadApi: function(store) {
-            this.loadMask = new Ext.LoadMask({
-                target: this.lookup('mask-target'),
-                msg: 'Загрузка описания API...',
-            });
-            this.loadMask.show();
-        },
-        getApiData: function() {
-            const json = this.getStore('api').getAt(0);
-            return json['data'];
-        },
-        onLoadApi: function(store, data) {
-            this.loadMask && this.loadMask.destroy();
-            const vm = this.getViewModel();
-            if (Array.isArray(data)) {
-                const json = data.pop();
-                if (json && json.data) {
-                    vm.set('apiInfo', json.data.info);
-                    vm.set('servers', json.data.servers);
-                    const treeStore = this.getStore('tree');
-                    const rootNode = Ext.create('Ext.data.TreeModel', {
-                        expanded: true,
-                        text:
-                            json.data.info['title'] +
-                            ' ' +
-                            json.data.info['version'],
-                    });
-                    treeStore.setRoot(rootNode);
-
-                    if (typeof json.data['paths'] === 'object') {
-                        const paths = Object.keys(json.data['paths']);
-                        const groups = new Map();
-                        paths.forEach((path) => {
-                            const info = path.split('/').slice(1);
-                            const groupName = info.shift();
-                            const existingGroup = groups.get(groupName);
-                            if (groupName) {
-                                const action = info.shift();
-                                if (!info.length) {
-                                    if (!existingGroup) {
-                                        groups.set(
-                                            groupName,
-                                            action ? [action] : []
-                                        );
-                                    } else {
-                                        groups.set(groupName, existingGroup.concat(action));
-                                    }
-                                } else {
-                                    const groupExists = !!groups.get(groupName);
-                                    if (groupExists) {
-                                        groups.set([groupName, action].join('/'), info);
-                                    } else {
-                                        const finalAction = info.pop();
-                                        const complexGroupName = [groupName, action].concat(info).join('/');
-                                        const existingComplexGroup = groups.get(complexGroupName);
-                                        if (!existingComplexGroup) {
-                                            groups.set(complexGroupName, finalAction ? [finalAction] : []);
-                                        } else {
-                                            groups.set(complexGroupName, existingComplexGroup.concat(finalAction));
-                                        }
-                                    }
-                                }
-                            }
-                        });
-                        const topNodes = Array.from(groups.keys()).sort();
-                        const methodTagStyle =
-                            'color:#FFF; border-radius:3px; padding: 0 4px';
-                        const methodColors = new Map([
-                            ['get', '#61affe'],
-                            ['post', '#49cc90'],
-                            ['put', '#fca130'],
-                            ['delete', '#f93e3e']
-                        ]);
-                        topNodes.forEach((group) => {
-                            const node = {text: group, expanded: true};
-                            const actions = groups.get(group);
-                            if (actions.length) {
-                                node['children'] = [];
-                                actions.sort().forEach((action) => {
-                                    const path = [group, action].join('/');
-                                    const displayPath = path;
-                                    const methods = json.data['paths']['/' + path];
-                                    if (typeof methods === 'object') {
-                                        action += Object.keys(methods)
-                                            .map((method) => {
-                                                const color =
-                                                    methodColors.get(method) ||
-                                                    'gray';
-                                                return (
-                                                    ` <span style='${methodTagStyle};background-color:${color}'>` +
-                                                    method.toUpperCase() +
-                                                    '</span>'
-                                                );
-                                            })
-                                            .join(' ');
-                                    }
-                                    node['children'].push({
-                                        text: action,
-                                        path: displayPath,
-                                        leaf: true,
-                                    });
-                                });
-                            } else {
-                                node['leaf'] = true;
-                            }
-                            rootNode.appendChild(node);
-                        });
-                        const savedPath = vm.get('selectedPath');
-                        if (savedPath) {
-                            const selectedRecord = treeStore.findRecord('path', savedPath);
-                            if (selectedRecord) {
-                                const picker = this.lookup('picker');
-                                picker && picker.fireEvent('select', picker, selectedRecord, undefined, true);
-                            }
-                        }
-                    }
-                }
-            }
-        },
-        onPickerSelect: function(picker, record, _, isFromRemoteState = false) {
-            const isLeaf = record.get('leaf');
-            const value = record.get('path') || record.get(picker.displayField);
-            const vm = this.getViewModel();
-            if (isLeaf) {
-                picker.setValue(value);
-                picker.setRawValue(value);
-                if (!isFromRemoteState) {
-                    const methodsStore = vm.getStore('methods');
-                    let requestMethod = null;
-                    if (methodsStore && methodsStore.collect('text').includes(vm.get('requestMethod'))) {
-                        requestMethod = vm.get('requestMethod');
-                    }
-                    vm.set({
-                        'requestMethod': requestMethod,
-                        'parsedResponse': null,
-                    });
-                }
-                vm.set('selectedPath', value);
-                this.updateMethods(isFromRemoteState);
-                this.updateParams(isFromRemoteState);
-                this.updateUrl(isFromRemoteState);
-            } else {
-                vm.set('selectedPath', null);
-            }
-        },
-        onPickerKeyPress: function(picker) {
-            const searchString = String(picker.getRawValue()).toLowerCase();
-            const treeStore = this.getStore('tree');
-            if (!searchString || !searchString.length) {
-                treeStore.getFilters().removeAll();
-            }
-            if (searchString.length >= 2) {
-                treeStore.filterBy((node) => {
-                    if (node.isRoot()) {
-                        return true;
-                    }
-                    if (!node.isLeaf()) {
-                        const nodeText = String(node.get('text')).toLowerCase();
-                        return nodeText.startsWith(searchString);
-                    } else {
-                        return !node.parentNode.isRoot();
-                    }
-                });
-                picker.expand();
-            }
-        },
-        /* https://stackoverflow.com/a/22129960 */
-        resolvePath: function(path, obj = {}, separator = '/') {
-            const properties = Array.isArray(path) ? path : path.split(separator);
-            return properties.reduce((prev, curr) => prev && prev[curr], obj);
-        },
-        /* TODO use @resolvePath */
-        getPropsByRef: function(ref, type) {
-            const json = this.getStore('api').getAt(0);
-            const refName = ref.split('/').pop();
-            const schema = json['data']['components']['schemas'][refName];
-            if (schema && schema['properties']) {
-                const props = schema['properties'];
-                // TODO bubble types
-                return JSON.stringify(
-                    type === 'array' ? [props] : props,
-                    null,
-                    4
-                );
-            }
-            return '';
-        },
-        onParamsFormValidityChange: function(form, isValid) {
-            this.getViewModel().set('isParamsFormValid', isValid);
-        },
-        updateMethods: function() {
-            const json = this.getStore('api').getAt(0);
-            const methodsStore = this.getStore('methods');
-            const vm = this.getViewModel();
-            if (json) {
-                const methods =
-                    json['data'].paths['/' + vm.get('selectedPath')];
-                if (typeof methods === 'object') {
-                    const methodNames = Object.keys(methods).map((m) => ({text: m.toUpperCase()}));
-                    methodsStore.loadData(methodNames, false);
-                    const currentMethod = vm.get('requestMethod');
-                    let autoSelect;
-                    if (methodsStore.getCount() === 1) {
-                        autoSelect = methodsStore.getAt(0);
-                    } else if (currentMethod) {
-                        autoSelect = methodsStore.findRecord('text', currentMethod);
-                    }
-                    const picker = this.lookup('methodPicker');
-                    picker && picker.setSelection(autoSelect);
-                }
-            }
-        },
-        updateUrl: function(isFromRemoteState = false) {
-            const formPanel = this.lookup('params-form');
-            const vm = this.getViewModel();
-            const formValues = isFromRemoteState === true ? vm.get('requestParams') || '' : formPanel.getValues(true, true);
-            const requestUrl = new URL(
-                String(vm.get('selectedPath')) + (formValues.length ? '?' + formValues : ''),
-                String(vm.get('activeServerUrl')) + '/'
-            );
-            vm.set({
-                parsedResponse: null,
-                requestUrl: requestUrl.toString(),
-                requestParams: requestUrl.searchParams.toString(),
-            });
-        },
-        updateParams: function(isFromRemoteState = false) {
-            const json = this.getStore('api').getAt(0);
-            const vm = this.getViewModel();
-            const method = String(vm.get('requestMethod')).toLowerCase();
-            const path = vm.get('selectedPath');
-            const form = this.lookup('params-form');
-            form.removeAll();
-            this.getResponsePreview().reset();
-            vm.set({
-                selectedOperationId: null,
-                selectedApiController: null,
-            });
-            if (json && path) {
-                const methodsConfig = json['data']['paths'][`/${path}`][method];
-                if (methodsConfig) {
-                    const parameters = methodsConfig['parameters'];
-                    const tags = methodsConfig['tags'];
-                    vm.set(
-                        {
-                            selectedOperationId: methodsConfig['operationId'],
-                            selectedApiController: tags.length ? tags[0] : null,
-                        }
-                    );
-                    if (Array.isArray(parameters)) {
-                        parameters.forEach((config) => {
-                            const isRequired = config['required'] === true;
-                            let xtype;
-                            let value = null;
-
-                            switch (config['schema']['type']) {
-                            case 'integer':
-                                xtype = 'numberfield';
-                                break;
-                            case 'boolean':
-                                xtype = 'checkbox';
-                                break;
-                            case 'string':
-                                xtype = 'textfield';
-                                break;
-                            case 'array':
-                            default:
-                                xtype = 'textarea';
-                            }
-
-                            if (!isFromRemoteState) {
-                                const refHolder = config['schema']['$ref'] ?
-                                    config['schema'] :
-                                    config['schema']['items'];
-                                if (refHolder) {
-                                    value = this.getPropsByRef(
-                                        refHolder['$ref'],
-                                        config['schema']['type']
-                                    );
-                                }
-                            } else {
-                                const requestQueryString = String(vm.get('requestParams'));
-                                if (requestQueryString.length) {
-                                    const requestSearchParams = new URLSearchParams(requestQueryString);
-                                    const requestParams = Object.fromEntries(requestSearchParams.entries());
-                                    value = requestParams[config['name']];
-                                }
-                            }
-
-                            const item = {
-                                xtype,
-                                fieldLabel:
-                                    (config['schema']['type'] || 'object') +
-                                    ': ' +
-                                    config['name'],
-                                allowBlank: !isRequired,
-                                name: config['name'],
-                                value,
-                            };
-                            if (isRequired) {
-                                item['labelStyle'] = 'font-weight:bold';
-                            }
-                            if (xtype === 'textarea') {
-                                item['grow'] = true;
-                            }
-                            form.add(item);
-                        });
-                    } else {
-                        form.add({
-                            xtype: 'displayfield',
-                            bind: {
-                                value: '{text.noParams}',
-                            },
-                        });
-                    }
-                    this.getResponsePreview().update(methodsConfig['responses'], json);
-                    form.isValid();
-                }
-            }
-        },
-        sendRequest: async function() {
-            const vm = this.getViewModel();
-            Ext.Ajax.request({
-                url: String(vm.get('requestUrl')),
-                method: vm.get('requestMethod'),
-                success: (response) => {
-                    this.processResponse(response);
-                },
-                failure: (response) => {
-                    console.debug('server-side failure with status code ' + response.status);
-                    vm.set('parsedResponse', null);
-                },
-            });
-        },
-        processResponse: function(response) {
-            const json = JSON5.parse(response.responseText);
-            console.debug(json);
-            this.getViewModel().set('parsedResponse', JSON.stringify(json, null, 4));
-        },
-        resolveNodeType: function(config, rootNode) {
-            if (typeof config !== 'object') {
-                return;
-            }
-            for (const key of Object.keys(config)) {
-                if (key === 'type') {
-                    continue;
-                }
-                const childNode = Ext.create('Ext.data.TreeModel', {
-                    leaf: true,
-                });
-                const value = config[key];
-                if (value['type']) {
-                    childNode.set('text', `${key}: ${value['type']}`);
-                    if (value['type'] === 'object') {
-                        childNode.set('leaf', false);
-                        childNode.set('expanded', true);
-                        this.resolveNodeType(value, childNode);
-                    }
-                } else if (value['$ref'] && String(value['$ref']).startsWith('#/')) {
-                    const ref = this.resolvePath(String(value['$ref']).slice(2), this.getApiData());
-                    if (ref) {
-                        childNode.set('text', `${key}: object`);
-                        childNode.set('expanded', true);
-                        this.resolveNodeType(ref['properties'], childNode);
-                    }
-                }
-                rootNode.appendChild(childNode);
-            }
-        },
-        getResponsePreview: function() {
-            const vm = this.getViewModel();
-            return {
-                reset: () => {
-                    vm.set({responsePreview: '', responsePreviewLabel: ''});
-                },
-                update: (responses, json) => {
-                    if (typeof responses['200'] !== 'undefined') {
-                        const resp200 = responses['200']['content'];
-                        if (typeof resp200 === 'object') {
-                            const schemas = Object.values(resp200).shift();
-                            if (schemas['schema']) {
-                                const ref = String(schemas['schema']['$ref']);
-                                if (ref.startsWith('#/')) {
-                                    const config = this.resolvePath(ref.slice(2), json['data']);
-                                    if (typeof config['properties'] === 'object') {
-                                        vm.set('responsePreview', JSON.stringify(config['properties'], (key, value) => {
-                                            if (value['$ref'] && String(value['$ref']).startsWith('#')) {
-                                                const refObj = this.resolvePath(String(value['$ref']).slice(2), json['data']);
-                                                if (refObj && refObj['type'] === 'object' && typeof refObj['properties'] === 'object') {
-                                                    value = refObj['properties'];
-                                                }
-                                            }
-                                            return value;
-                                        }, 4));
-                                    }
-                                    const responseTreeStore = this.getStore('responseTree');
-                                    const rootNode = Ext.create('Ext.data.TreeModel', {
-                                        expanded: true,
-                                        text: 'object:',
-                                    });
-                                    if (typeof config['xml'] === 'object') {
-                                        vm.set('responsePreviewLabel', String(config['xml']['name']));
-                                        rootNode.set('text', String(config['xml']['name']));
-                                    }
-                                    this.resolveNodeType(config['properties'], rootNode);
-                                    responseTreeStore.setRoot(rootNode);
-                                }
-                            }
-                        }
-                    }
-                },
-            };
-        },
-    },
-});
+Ext.define('Coon.uielement.plugin.configPanel.ExecuteApiCommandPluginConfigPanel', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.ExecuteApiCommandPluginConfigPanel',
+    description: 'Плагин позволяет выполнить запрос к серверу',
+    layout: 'fit',
+    scrollable: 'y',
+    requires: ['Ext.ux.TreePicker'],
+    padding: 6,
+    viewModel: {
+        data: {
+            text: {
+                handler: 'handlerName',
+                picker: 'Команда',
+                docLink: '',
+                docLinkTooltip: 'Открыть документацию по команде (в новой вкладке)',
+                destination: 'propertyPath',
+                params: 'Параметры команды',
+                response: 'Формат ответа',
+                method: 'Метод',
+                mappingMode: 'mappingMode',
+                updateUrl: 'Обновить',
+                sendRequest: 'Отправить',
+                noParams: 'Параметры отсутствуют',
+                url: 'URL',
+            },
+            handlerName: null,
+            pickerSearchString: null,
+            mode: 'development',
+            selectedPath: null,
+            selectedOperationId: null,
+            selectedApiController: null,
+            apiInfo: {},
+            servers: null,
+            requestParams: null,
+            requestUrl: null,
+            requestMethod: null,
+            parsedResponse: null,
+            responseContainer: null,
+            mappingMode: 'data',
+            /* stateAttrs: [
+                'selectedPath',
+                'requestUrl',
+                'requestMethod',
+                'handlerName',
+                'responseContainer'
+            ],*/
+            isRestoringState: false,
+            isParamsFormValid: false,
+            responsePreview: '',
+            responsePreviewLabel: '',
+            apiURL: '/v3/api-docs/CRM',
+            apiDocURL: '/api-doc/swagger-ui/index.html?configUrl=%2Fv3%2Fapi-docs%2Fswagger-config&urls.primaryName=CRM',
+        },
+        formulas: {
+            activeServerUrl: (get) => {
+                if (get('mode') === 'development') {
+                    return location.origin;
+                }
+                const servers = get('servers');
+                if (Array.isArray(servers)) {
+                    return servers.slice().shift().url;
+                }
+                return null;
+            },
+            // state: (get) => Object.fromEntries(get('stateAttrs').map((attr) => [attr, get(attr)])),
+            state: (get) => ({
+                selectedPath: get('selectedPath'),
+                requestParams: get('requestParams'),
+                requestMethod: get('requestMethod'),
+                handlerName: get('handlerName'),
+                responseContainer: get('responseContainer'),
+                mappingMode: get('mappingMode'),
+            }),
+            isObjectMode: (get) => get('mappingMode') === 'object',
+            docLinkEl: (get) => {
+                const o = get('selectedOperationId');
+                const c = get('selectedApiController');
+                if (o && c) {
+                    const u = get('apiDocURL');
+                    const t = get('text.docLink');
+                    const tt = get('text.docLinkTooltip');
+                    return `<a 
+                                href="${u}#/${c}/${o}" 
+                                target="_blank" 
+                                class="x-fa fa-question-circle" 
+                                style="text-decoration: none;" 
+                                title="${tt}"
+                            >${t}</a>`;
+                } else {
+                    return '';
+                }
+            },
+        },
+        stores: {
+            tree: {
+                remoteFilter: false,
+                type: 'tree',
+            },
+            api: {
+                autoLoad: true,
+                proxy: {
+                    type: 'ajax',
+                    url: '{apiURL}',
+                    reader: {
+                        type: 'json',
+                    },
+                },
+                listeners: {
+                    beforeload: 'onBeforeLoadApi',
+                    load: 'onLoadApi',
+                },
+            },
+            methods: {
+                type: 'array',
+                fields: ['text'],
+                data: [],
+            },
+            responseTree: {
+                remoteFilter: false,
+                type: 'tree',
+            },
+        },
+    },
+    items: [
+        {
+            xtype: 'container',
+
+            layout: 'anchor',
+            scrollable: 'y',
+            defaults: {anchor: '100%', labelAlign: 'top'},
+            items: [
+                {
+                    xtype: 'pluginDescriptionLabel',
+                    bind: {
+                        value: '{description}',
+                    },
+                },
+                {
+                    xtype: 'comboBtnWrapper',
+                    combobox: {
+                        reference: 'handlerCombo',
+                        xtype: 'BaseComboBox',
+                        flex: 1,
+                        loadOnRender: false,
+                        hideMode: 'offsets',
+                        allowBlank: false,
+                        store: 'codeHandlers',
+                        bind: {
+                            fieldLabel: '{text.handler}',
+                            value: '{handlerName}',
+                        },
+                        valueField: 'id',
+                        displayField: 'id',
+                    },
+                },
+                {
+                    xtype: 'container',
+                    reference: 'mask-target',
+                    layout: 'anchor',
+                    items: [
+                        {
+                            xtype: 'fieldcontainer',
+                            anchor: '100%',
+                            layout: 'column',
+                            items: [
+                                {
+                                    xtype: 'treepicker',
+                                    autoSelect: true,
+                                    autoSelectLast: true,
+                                    reference: 'picker',
+                                    displayField: 'text',
+                                    labelStyle: 'display:inline;color: rgba(17, 17, 17, 0.54);color: var(--highlight-color);',
+                                    maxPickerHeight: 400,
+                                    columnWidth: 0.75,
+                                    editable: true,
+                                    enableKeyEvents: true,
+                                    disabled: true,
+                                    allowBlank: false,
+                                    triggerCls: 'svg-icon svg-icon-expand-bottom svg-icon-expand-bottom-default',
+                                    bind: {
+                                        store: '{tree}',
+                                        disabled: '{api.loading}',
+                                        fieldLabel:
+                                            '{text.picker} {docLinkEl}',
+                                    },
+                                    listeners: {
+                                        beforeselect: 'onPickerBeforeSelect',
+                                        select: 'onPickerSelect',
+                                        keyup: 'onPickerKeyPress',
+                                    },
+                                    initComponent: function() {
+                                        this['superclass'].initComponent.call(this, arguments);
+                                    },
+                                    onItemClick: function(view, record) {
+                                        if (record.get('leaf') === true) {
+                                            this.selectItem(record);
+                                        }
+                                    },
+                                },
+                                {
+                                    xtype: 'combo',
+                                    queryMode: 'local',
+                                    triggerAction: 'all',
+                                    reference: 'methodPicker',
+                                    columnWidth: 0.25,
+                                    disabled: true,
+                                    forceSelection: true,
+                                    margin: '1px 0 0 0',
+                                    bind: {
+                                        store: '{methods}',
+                                        value: '{requestMethod}',
+                                        fieldLabel: '{text.method}',
+                                        disabled: '{!selectedPath || api.loading}',
+                                    },
+                                    allowBlank: false,
+                                }
+                            ],
+                        },
+                        {
+                            xtype: 'form',
+                            reference: 'main-form',
+                            layout: 'anchor',
+                            defaults: {
+                                anchor: '100%',
+                            },
+                            items: [
+                                {
+                                    xtype: 'fieldcontainer',
+                                    layout: {
+                                        type: 'hbox',
+                                        align: 'stretch',
+                                    },
+                                    defaults: {
+                                        padding: 10,
+                                        border: false,
+                                        style: 'border-top:none',
+                                    },
+                                    items: [
+                                        {
+                                            xtype: 'fieldset',
+                                            flex: 1,
+                                            hidden: true,
+                                            bind: {
+                                                title: '{text.params}',
+                                                visible: '{selectedPath && requestMethod}',
+                                            },
+                                            items: [
+                                                {
+                                                    xtype: 'form',
+                                                    reference: 'params-form',
+                                                    layout: 'anchor',
+                                                    defaults: {
+                                                        anchor: '100%',
+                                                        labelAlign: 'top',
+                                                    },
+                                                    listeners: {
+                                                        validitychange: 'onParamsFormValidityChange',
+                                                    },
+                                                }
+                                            ],
+                                        },
+                                        {
+                                            xtype: 'fieldset',
+                                            flex: 1.5,
+                                            layout: 'fit',
+                                            margin: '0 0 0 2px',
+                                            maxHeight: 500,
+                                            scrollable: 'y',
+                                            bind: {
+                                                title: '{text.response}',
+                                                visible: '{selectedPath && requestMethod}',
+                                            },
+                                            items: [
+                                                {
+                                                    xtype: 'tabpanel',
+                                                    hidden: true,
+                                                    bind: {
+                                                        hidden: '{api.loading}',
+                                                    },
+                                                    items: [
+                                                        {
+                                                            xtype: 'treepanel',
+                                                            title: 'TREE',
+                                                            reference: 'response-preview-tree',
+                                                            border: 0,
+                                                            minHeight: 200,
+                                                            rootVisible: true,
+                                                            bind: {
+                                                                store: '{responseTree}',
+                                                            },
+                                                        },
+                                                        {
+                                                            xtype: 'textarea',
+                                                            title: 'JSON',
+                                                            reference: 'response-preview',
+                                                            border: 0,
+                                                            editable: false,
+                                                            minHeight: 150,
+                                                            grow: true,
+                                                            labelAlign: 'top',
+                                                            bind: {
+                                                                value: '{responsePreview}',
+                                                                fieldLabel: '{responsePreviewLabel}',
+                                                            },
+                                                        }
+                                                    ],
+                                                }
+                                            ],
+                                        }
+                                    ],
+                                },
+                                {
+                                    xtype: 'fieldcontainer',
+                                    layout: 'column',
+                                    items: [
+                                        {
+                                            columnWidth: 1,
+                                            xtype: 'textfield',
+                                            editable: false,
+                                            bind: {
+                                                value: '{requestUrl}',
+                                                fieldLabel: 'text.url',
+                                            },
+                                            triggers: {
+                                                sync: {
+                                                    cls: 'x-fa fa-sync-alt',
+                                                    handler: 'updateUrl',
+                                                    bind: {
+                                                        disabled: '{!isParamsFormValid || !selectedPath}',
+                                                    },
+                                                },
+                                                send: {
+                                                    cls: 'x-fa fa-paper-plane',
+                                                    handler: 'sendRequest',
+                                                    bind: {
+                                                        disabled: '{!sendRequest}',
+                                                    },
+                                                },
+                                            },
+                                        }
+                                    ],
+                                },
+                                {
+                                    xtype: 'ConstantList',
+                                    data: [
+                                        ['object', 'object'],
+                                        // TODO add mapping
+                                        // ['map', 'map'],
+                                        ['data', 'data']
+                                    ],
+                                    bind: {
+                                        value: '{mappingMode}',
+                                        fieldLabel: '{text.mappingMode}',
+                                    },
+                                    allowBlank: true,
+                                },
+                                {
+                                    xtype: 'textfield',
+                                    hidden: true,
+                                    bind: {
+                                        fieldLabel: '{text.destination}',
+                                        value: '{responseContainer}',
+                                        visible: '{isObjectMode}',
+                                        allowBlank: true,
+                                    },
+                                },
+                                {
+                                    fieldLabel: 'Ответ',
+                                    xtype: 'textarea',
+                                    anchor: '100%',
+                                    readOnly: true,
+                                    grow: true,
+                                    hidden: true,
+                                    bind: {
+                                        value: '{parsedResponse}',
+                                        visible: '{parsedResponse}',
+                                    },
+                                }
+                            ],
+                        }
+                    ],
+                }
+            ],
+        }
+    ],
+    getData: function() {
+        return this.getViewModel().get('state');
+    },
+    setData: function(data) {
+        const vm = this.getViewModel();
+        vm.set('description', this.description);
+        for (const key of Object.keys(vm.get())) {
+            if (typeof data[key] !== 'undefined') {
+                vm.set('isRestoringState', true);
+                vm.set(key, data[key]);
+            }
+        }
+        setTimeout(() => {
+            vm.set('isRestoringState', false);
+        }, 1);
+    },
+    loadMask: null,
+    controller: {
+        bindings: {
+            onChangeSelectedPath: '{selectedPath}',
+            onChangeRequestMethod: '{requestMethod}',
+        },
+        updateParamsFromUrl: function(url) {
+            if (!url) {
+                return;
+            }
+            let params;
+            try {
+                params = new URL(url).searchParams;
+            } catch (e) {
+                return;
+            }
+            if (!params) {
+                return;
+            }
+            const paramsForm = this.lookup('params-form');
+            if (paramsForm) {
+                for (const paramName of params.keys()) {
+                    const formField = paramsForm.items.findBy((field) => field.getName() === paramName);
+                    formField && formField.setValue(params.get(paramName));
+                }
+            }
+        },
+        onChangeSelectedPath: function() {
+            this.updateParams();
+        },
+        onChangeRequestMethod: function() {
+            this.updateParams();
+            this.updateParamsFromUrl(this.getViewModel().get('requestUrl'));
+        },
+        onBeforeLoadApi: function(store) {
+            this.loadMask = new Ext.LoadMask({
+                target: this.lookup('mask-target'),
+                msg: 'Загрузка описания API...',
+            });
+            this.loadMask.show();
+        },
+        getApiData: function() {
+            const json = this.getStore('api').getAt(0);
+            return json['data'];
+        },
+        onLoadApi: function(store, data) {
+            this.loadMask && this.loadMask.destroy();
+            const vm = this.getViewModel();
+            if (Array.isArray(data)) {
+                const json = data.pop();
+                if (json && json.data) {
+                    vm.set('apiInfo', json.data.info);
+                    vm.set('servers', json.data.servers);
+                    const treeStore = this.getStore('tree');
+                    const rootNode = Ext.create('Ext.data.TreeModel', {
+                        expanded: true,
+                        text:
+                            json.data.info['title'] +
+                            ' ' +
+                            json.data.info['version'],
+                    });
+                    treeStore.setRoot(rootNode);
+
+                    if (typeof json.data['paths'] === 'object') {
+                        const paths = Object.keys(json.data['paths']);
+                        const groups = new Map();
+                        paths.forEach((path) => {
+                            const info = path.split('/').slice(1);
+                            const groupName = info.shift();
+                            const existingGroup = groups.get(groupName);
+                            if (groupName) {
+                                const action = info.shift();
+                                if (!info.length) {
+                                    if (!existingGroup) {
+                                        groups.set(
+                                            groupName,
+                                            action ? [action] : []
+                                        );
+                                    } else {
+                                        groups.set(groupName, existingGroup.concat(action));
+                                    }
+                                } else {
+                                    const groupExists = !!groups.get(groupName);
+                                    if (groupExists) {
+                                        groups.set([groupName, action].join('/'), info);
+                                    } else {
+                                        const finalAction = info.pop();
+                                        const complexGroupName = [groupName, action].concat(info).join('/');
+                                        const existingComplexGroup = groups.get(complexGroupName);
+                                        if (!existingComplexGroup) {
+                                            groups.set(complexGroupName, finalAction ? [finalAction] : []);
+                                        } else {
+                                            groups.set(complexGroupName, existingComplexGroup.concat(finalAction));
+                                        }
+                                    }
+                                }
+                            }
+                        });
+                        const topNodes = Array.from(groups.keys()).sort();
+                        const methodTagStyle =
+                            'color:#FFF; border-radius:3px; padding: 0 4px';
+                        const methodColors = new Map([
+                            ['get', '#61affe'],
+                            ['post', '#49cc90'],
+                            ['put', '#fca130'],
+                            ['delete', '#f93e3e']
+                        ]);
+                        topNodes.forEach((group) => {
+                            const node = {text: group, expanded: true};
+                            const actions = groups.get(group);
+                            if (actions.length) {
+                                node['children'] = [];
+                                actions.sort().forEach((action) => {
+                                    const path = [group, action].join('/');
+                                    const displayPath = path;
+                                    const methods = json.data['paths']['/' + path];
+                                    if (typeof methods === 'object') {
+                                        action += Object.keys(methods)
+                                            .map((method) => {
+                                                const color =
+                                                    methodColors.get(method) ||
+                                                    'gray';
+                                                return (
+                                                    ` <span style='${methodTagStyle};background-color:${color}'>` +
+                                                    method.toUpperCase() +
+                                                    '</span>'
+                                                );
+                                            })
+                                            .join(' ');
+                                    }
+                                    node['children'].push({
+                                        text: action,
+                                        path: displayPath,
+                                        leaf: true,
+                                    });
+                                });
+                            } else {
+                                node['leaf'] = true;
+                            }
+                            rootNode.appendChild(node);
+                        });
+                        const savedPath = vm.get('selectedPath');
+                        if (savedPath) {
+                            const selectedRecord = treeStore.findRecord('path', savedPath);
+                            if (selectedRecord) {
+                                const picker = this.lookup('picker');
+                                picker && picker.fireEvent('select', picker, selectedRecord, undefined, true);
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        onPickerSelect: function(picker, record, _, isFromRemoteState = false) {
+            const isLeaf = record.get('leaf');
+            const value = record.get('path') || record.get(picker.displayField);
+            const vm = this.getViewModel();
+            if (isLeaf) {
+                picker.setValue(value);
+                picker.setRawValue(value);
+                if (!isFromRemoteState) {
+                    const methodsStore = vm.getStore('methods');
+                    let requestMethod = null;
+                    if (methodsStore && methodsStore.collect('text').includes(vm.get('requestMethod'))) {
+                        requestMethod = vm.get('requestMethod');
+                    }
+                    vm.set({
+                        'requestMethod': requestMethod,
+                        'parsedResponse': null,
+                    });
+                }
+                vm.set('selectedPath', value);
+                this.updateMethods(isFromRemoteState);
+                this.updateParams(isFromRemoteState);
+                this.updateUrl(isFromRemoteState);
+            } else {
+                vm.set('selectedPath', null);
+            }
+        },
+        onPickerKeyPress: function(picker) {
+            const searchString = String(picker.getRawValue()).toLowerCase();
+            const treeStore = this.getStore('tree');
+            if (!searchString || !searchString.length) {
+                treeStore.getFilters().removeAll();
+            }
+            if (searchString.length >= 2) {
+                treeStore.filterBy((node) => {
+                    if (node.isRoot()) {
+                        return true;
+                    }
+                    if (!node.isLeaf()) {
+                        const nodeText = String(node.get('text')).toLowerCase();
+                        return nodeText.startsWith(searchString);
+                    } else {
+                        return !node.parentNode.isRoot();
+                    }
+                });
+                picker.expand();
+            }
+        },
+        /* https://stackoverflow.com/a/22129960 */
+        resolvePath: function(path, obj = {}, separator = '/') {
+            const properties = Array.isArray(path) ? path : path.split(separator);
+            return properties.reduce((prev, curr) => prev && prev[curr], obj);
+        },
+        /* TODO use @resolvePath */
+        getPropsByRef: function(ref, type) {
+            const json = this.getStore('api').getAt(0);
+            const refName = ref.split('/').pop();
+            const schema = json['data']['components']['schemas'][refName];
+            if (schema && schema['properties']) {
+                const props = schema['properties'];
+                // TODO bubble types
+                return JSON.stringify(
+                    type === 'array' ? [props] : props,
+                    null,
+                    4
+                );
+            }
+            return '';
+        },
+        onParamsFormValidityChange: function(form, isValid) {
+            this.getViewModel().set('isParamsFormValid', isValid);
+        },
+        updateMethods: function() {
+            const json = this.getStore('api').getAt(0);
+            const methodsStore = this.getStore('methods');
+            const vm = this.getViewModel();
+            if (json) {
+                const methods =
+                    json['data'].paths['/' + vm.get('selectedPath')];
+                if (typeof methods === 'object') {
+                    const methodNames = Object.keys(methods).map((m) => ({text: m.toUpperCase()}));
+                    methodsStore.loadData(methodNames, false);
+                    const currentMethod = vm.get('requestMethod');
+                    let autoSelect;
+                    if (methodsStore.getCount() === 1) {
+                        autoSelect = methodsStore.getAt(0);
+                    } else if (currentMethod) {
+                        autoSelect = methodsStore.findRecord('text', currentMethod);
+                    }
+                    const picker = this.lookup('methodPicker');
+                    picker && picker.setSelection(autoSelect);
+                }
+            }
+        },
+        updateUrl: function(isFromRemoteState = false) {
+            const formPanel = this.lookup('params-form');
+            const vm = this.getViewModel();
+            const formValues = isFromRemoteState === true ? vm.get('requestParams') || '' : formPanel.getValues(true, true);
+            const requestUrl = new URL(
+                String(vm.get('selectedPath')) + (formValues.length ? '?' + formValues : ''),
+                String(vm.get('activeServerUrl')) + '/'
+            );
+            vm.set({
+                parsedResponse: null,
+                requestUrl: requestUrl.toString(),
+                requestParams: requestUrl.searchParams.toString(),
+            });
+        },
+        updateParams: function(isFromRemoteState = false) {
+            const json = this.getStore('api').getAt(0);
+            const vm = this.getViewModel();
+            const method = String(vm.get('requestMethod')).toLowerCase();
+            const path = vm.get('selectedPath');
+            const form = this.lookup('params-form');
+            form.removeAll();
+            this.getResponsePreview().reset();
+            vm.set({
+                selectedOperationId: null,
+                selectedApiController: null,
+            });
+            if (json && path) {
+                const methodsConfig = json['data']['paths'][`/${path}`][method];
+                if (methodsConfig) {
+                    const parameters = methodsConfig['parameters'];
+                    const tags = methodsConfig['tags'];
+                    vm.set(
+                        {
+                            selectedOperationId: methodsConfig['operationId'],
+                            selectedApiController: tags.length ? tags[0] : null,
+                        }
+                    );
+                    if (Array.isArray(parameters)) {
+                        parameters.forEach((config) => {
+                            const isRequired = config['required'] === true;
+                            let xtype;
+                            let value = null;
+
+                            switch (config['schema']['type']) {
+                            case 'integer':
+                                xtype = 'numberfield';
+                                break;
+                            case 'boolean':
+                                xtype = 'checkbox';
+                                break;
+                            case 'string':
+                                xtype = 'textfield';
+                                break;
+                            case 'array':
+                            default:
+                                xtype = 'textarea';
+                            }
+
+                            if (!isFromRemoteState) {
+                                const refHolder = config['schema']['$ref'] ?
+                                    config['schema'] :
+                                    config['schema']['items'];
+                                if (refHolder) {
+                                    value = this.getPropsByRef(
+                                        refHolder['$ref'],
+                                        config['schema']['type']
+                                    );
+                                }
+                            } else {
+                                const requestQueryString = String(vm.get('requestParams'));
+                                if (requestQueryString.length) {
+                                    const requestSearchParams = new URLSearchParams(requestQueryString);
+                                    const requestParams = Object.fromEntries(requestSearchParams.entries());
+                                    value = requestParams[config['name']];
+                                }
+                            }
+
+                            const item = {
+                                xtype,
+                                fieldLabel:
+                                    (config['schema']['type'] || 'object') +
+                                    ': ' +
+                                    config['name'],
+                                allowBlank: !isRequired,
+                                name: config['name'],
+                                value,
+                            };
+                            if (isRequired) {
+                                item['labelStyle'] = 'font-weight:bold';
+                            }
+                            if (xtype === 'textarea') {
+                                item['grow'] = true;
+                            }
+                            form.add(item);
+                        });
+                    } else {
+                        form.add({
+                            xtype: 'displayfield',
+                            bind: {
+                                value: '{text.noParams}',
+                            },
+                        });
+                    }
+                    this.getResponsePreview().update(methodsConfig['responses'], json);
+                    form.isValid();
+                }
+            }
+        },
+        sendRequest: async function() {
+            const vm = this.getViewModel();
+            Ext.Ajax.request({
+                url: String(vm.get('requestUrl')),
+                method: vm.get('requestMethod'),
+                success: (response) => {
+                    this.processResponse(response);
+                },
+                failure: (response) => {
+                    console.debug('server-side failure with status code ' + response.status);
+                    vm.set('parsedResponse', null);
+                },
+            });
+        },
+        processResponse: function(response) {
+            const json = JSON5.parse(response.responseText);
+            console.debug(json);
+            this.getViewModel().set('parsedResponse', JSON.stringify(json, null, 4));
+        },
+        resolveNodeType: function(config, rootNode) {
+            if (typeof config !== 'object') {
+                return;
+            }
+            for (const key of Object.keys(config)) {
+                if (key === 'type') {
+                    continue;
+                }
+                const childNode = Ext.create('Ext.data.TreeModel', {
+                    leaf: true,
+                });
+                const value = config[key];
+                if (value['type']) {
+                    childNode.set('text', `${key}: ${value['type']}`);
+                    if (value['type'] === 'object') {
+                        childNode.set('leaf', false);
+                        childNode.set('expanded', true);
+                        this.resolveNodeType(value, childNode);
+                    }
+                } else if (value['$ref'] && String(value['$ref']).startsWith('#/')) {
+                    const ref = this.resolvePath(String(value['$ref']).slice(2), this.getApiData());
+                    if (ref) {
+                        childNode.set('text', `${key}: object`);
+                        childNode.set('expanded', true);
+                        this.resolveNodeType(ref['properties'], childNode);
+                    }
+                }
+                rootNode.appendChild(childNode);
+            }
+        },
+        getResponsePreview: function() {
+            const vm = this.getViewModel();
+            return {
+                reset: () => {
+                    vm.set({responsePreview: '', responsePreviewLabel: ''});
+                },
+                update: (responses, json) => {
+                    if (typeof responses['200'] !== 'undefined') {
+                        const resp200 = responses['200']['content'];
+                        if (typeof resp200 === 'object') {
+                            const schemas = Object.values(resp200).shift();
+                            if (schemas['schema']) {
+                                const ref = String(schemas['schema']['$ref']);
+                                if (ref.startsWith('#/')) {
+                                    const config = this.resolvePath(ref.slice(2), json['data']);
+                                    if (typeof config['properties'] === 'object') {
+                                        vm.set('responsePreview', JSON.stringify(config['properties'], (key, value) => {
+                                            if (value['$ref'] && String(value['$ref']).startsWith('#')) {
+                                                const refObj = this.resolvePath(String(value['$ref']).slice(2), json['data']);
+                                                if (refObj && refObj['type'] === 'object' && typeof refObj['properties'] === 'object') {
+                                                    value = refObj['properties'];
+                                                }
+                                            }
+                                            return value;
+                                        }, 4));
+                                    }
+                                    const responseTreeStore = this.getStore('responseTree');
+                                    const rootNode = Ext.create('Ext.data.TreeModel', {
+                                        expanded: true,
+                                        text: 'object:',
+                                    });
+                                    if (typeof config['xml'] === 'object') {
+                                        vm.set('responsePreviewLabel', String(config['xml']['name']));
+                                        rootNode.set('text', String(config['xml']['name']));
+                                    }
+                                    this.resolveNodeType(config['properties'], rootNode);
+                                    responseTreeStore.setRoot(rootNode);
+                                }
+                            }
+                        }
+                    }
+                },
+            };
+        },
+    },
+});