ru.coon 2.7.2 → 2.7.4

package/src/uielement/plugin/configPanel/executeCommand/ExecuteCommandPluginConfigPanelFormEditor.js

@@ -0,0 +1,625 @@
+Ext.define('Coon.uielement.plugin.configPanel.executeCommand.ExecuteCommandPluginConfigPanelFormEditor', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.ExecuteCommandPluginConfigPanelFormEditor',
+    description: 'Выполняет команду, позволяет отслеживать её выполнение и менять сообщения об различных событиях в ходе выполнения',
+    requires: [
+        'Coon.uielement.plugin.configPanel.executeCommand.DataMappingPanel'
+    ],
+    cls: 'ExecuteCommandPluginConfigPanelFormEditor',
+    viewModel: {
+        data: {
+            parameters: '{}',
+            handlerName: '',
+            ctype: '',
+            propertyPath: '',
+            disabledReference: undefined,
+            completeHandler: undefined,
+            errorHandler: undefined,
+
+            successMessage: false,
+            successTitle: 'Операция завершена',
+            successText: 'Операция завершена успешно',
+
+
+            confirmExecution: false,
+            confirmTitle: 'Сообщение системы',
+            confirmText: 'Вы уверены, что хотите выполнить действие?',
+
+            requiredValidView: false,
+            requiredValidReference: '',
+            requiredValidTitle: 'Сообщение системы',
+            requiredValidMessage: 'Не все обязательные поля заполнены.',
+
+            saveAnimation: false,
+
+            mappingMode: 'object',
+            dataMapping: '{}',
+
+            detailsHidden: true,
+        },
+        formulas: {
+            objectMode: {
+                bind: {bindTo: '{mappingMode}'},
+                get: function(mappingMode) {
+                    return mappingMode === 'object';
+                },
+            },
+            dataMode: {
+                bind: {bindTo: '{mappingMode}'},
+                get: function(mappingMode) {
+                    return mappingMode === 'data';
+                },
+            },
+            mapMode: {
+                bind: {bindTo: '{mappingMode}'},
+                get: function(mappingMode) {
+                    return mappingMode === 'map';
+                },
+            },
+
+            mappingModeDescr: {
+                bind: {bindTo: '{mappingMode}'},
+                get: function(mappingMode) {
+                    switch (mappingMode) {
+                    case 'object':
+                        return 'Ответ команды помещаем в свойство как объект (режим «объект»). ' +
+                            'Требуется настроить параметр плагина propertyPath.';
+                    case 'map':
+                        return 'Мы можем использовать ответ команды, используя настройки переназначение. ' +
+                            'Требуется настройка отображения свойств (маппинг) из объекта результата выполнения команды в путь во viewModel.';
+                    case 'data':
+                        return 'Ответ команды помещается непосредственно во viewModel (в этом режиме перезаписываются свойства ' +
+                            'текущей viewModel. Использовать с осторожностью!)';
+                    }
+                },
+            },
+        },
+    },
+    referenceHolder: true,
+    commandParameters: [],
+
+    layout: {
+        type: 'vbox', align: 'stretch',
+    },
+    getData: function() {
+        return this.getConfiguration();
+    },
+    setData: function(data) {
+        data && this.doInit(data);
+    },
+    doInit: function(config) {
+        const commandProperties = config.parameters && config.parameters._commandProperties;
+        commandProperties && this.lookup('reportPropertiesGrid').setData(
+            this.convertProperties(commandProperties)
+        );
+        this.getViewModel().set('description', this.description);
+        for (const parameterName in config) {
+            if (!config.hasOwnProperty(parameterName) || parameterName === 'ptype') {
+                continue;
+            }
+            if (parameterName === 'parameters' || parameterName === 'dataMapping') {
+                if (config[parameterName].hasOwnProperty('_commandProperties')) {
+                    delete config[parameterName]['_commandProperties'];
+                }
+                const stringParam = JSON5.stringify(config[parameterName], {
+                    space: 4,
+                    quote: '\'',
+                });
+
+                this.getViewModel().set(parameterName, stringParam);
+                continue;
+            }
+            this.getViewModel().set(parameterName, config[parameterName]);
+        }
+
+        this.lookup('dataMappingPanel').doInit(this.getViewModel().get('dataMapping'));
+    },
+
+    prepareDataMapping: function() {
+        const vm = this.getViewModel();
+        vm.set('dataMapping', this.lookup('dataMappingPanel').getMapping());
+    },
+
+    getConfiguration: function() {
+        const result = {};
+        const vm = this.getViewModel();
+        this.prepareDataMapping();
+        const comProp = this.lookup('reportPropertiesGrid').getData();
+        if (this.lookup('parametersRef').links.editor.isJSON5Valid()) {
+            vm.set('parameters', this.lookup('parametersRef').getValue());
+        } else {
+            Ext.Msg.alert('Ошибка', 'В параметрах присутствуют ошибки. Параметры прошлого плагина не сохранены');
+        }
+        result['parameters'] = JSON5.parse(vm.get('parameters'));
+        result['parameters']['_commandProperties'] = comProp;
+        if (vm.get('mappingMode') === 'map') {
+            result['dataMapping'] = JSON5.parse(this.getViewModel().get('dataMapping'));
+        } else if (vm.get('mappingMode') === 'object') {
+            result['propertyPath'] = vm.get('propertyPath');
+        }
+        result['mappingMode'] = vm.get('mappingMode');
+        result['handlerName'] = vm.get('handlerName');
+        result['ctype'] = vm.get('ctype');
+        if (vm.get('confirmExecution')) {
+            result['confirmExecution'] = vm.get('confirmExecution');
+            result['confirmTitle'] = vm.get('confirmTitle');
+            result['confirmText'] = vm.get('confirmText');
+        }
+        if (vm.get('completeHandler')) {
+            result['completeHandler'] = vm.get('completeHandler');
+        }
+        if (vm.get('errorHandler')) {
+            result['errorHandler'] = vm.get('errorHandler');
+        }
+        if (vm.get('disabledReference')) {
+            result['disabledReference'] = vm.get('disabledReference');
+        }
+        if (vm.get('successMessage')) {
+            result['successMessage'] = vm.get('successMessage');
+            result['successTitle'] = vm.get('successTitle');
+            result['successText'] = vm.get('successText');
+        }
+        if (vm.get('requiredValidView')) {
+            result['requiredValidView'] = vm.get('requiredValidView');
+            result['requiredValidTitle'] = vm.get('requiredValidTitle');
+            result['requiredValidMessage'] = vm.get('requiredValidMessage');
+            result['requiredValidReference'] = vm.get('requiredValidReference') ? vm.get('requiredValidReference'):undefined;
+        }
+        if (vm.get('saveAnimation')) {
+            result['saveAnimation'] = vm.get('saveAnimation');
+        }
+        return result;
+    },
+
+    initComponent: function() {
+        this.items = [
+            {
+                xtype: 'pluginDescriptionLabel',
+                bind: {
+                    value: '{description}',
+                },
+            },
+            {
+                xtype: 'comboBtnWrapper',
+                combobox: {
+                    reference: 'handlerCombo',
+                    xtype: 'BaseComboBox',
+                    fieldLabel: 'handlerName',
+                    labelWidth: 60,
+                    flex: 1,
+                    loadOnRender: false,
+                    hideMode: 'offsets',
+                    allowBlank: false,
+                    store: 'codeHandlers',
+                    bind: {
+                        value: '{handlerName}',
+                    },
+                    valueField: 'id',
+                    displayField: 'id',
+                },
+            },
+            {
+                xtype: 'CommandComboBox',
+                reference: 'commandComboBox',
+                fieldLabel: 'Команда',
+                bind: '{ctype}',
+                listeners: {
+                    change: this.onChangeCommand.bind(this),
+                },
+            },
+            {
+                xtype: 'pluginDescriptionLabel',
+                fieldLabel: 'Описание команды',
+                bind: {
+                    value: '{commandComboBox.selection.ruDescription}',
+                    hidden: '{!commandComboBox.selection.ruDescription}',
+                },
+            },
+            {
+                xtype: 'tabpanel',
+                flex: 1,
+                items: [
+                    {
+                        xtype: 'panel',
+                        title: 'Настройки',
+                        layout: {
+                            type: 'vbox',
+                            align: 'stretch',
+                        },
+                        scrollable: true,
+                        items: [
+                            {
+                                xtype: 'checkbox',
+                                boxLabel: 'successMessage',
+                                boxLabelAlign: 'after',
+                                padding: '0 0 0 10',
+                                bind: '{successMessage}',
+                            },
+                            {
+                                xtype: 'textfield',
+                                fieldLabel: 'successText',
+                                bind: {
+                                    value: '{successText}',
+                                    visible: '{successMessage}',
+                                },
+                            },
+                            {
+                                xtype: 'textfield',
+                                fieldLabel: 'successTitle',
+                                bind: {
+                                    value: '{successTitle}',
+                                    visible: '{successMessage}',
+                                },
+                            },
+                            {
+                                xtype: 'checkbox',
+                                boxLabel: 'confirmExecution',
+                                boxLabelAlign: 'after',
+                                padding: '0 0 0 10',
+                                bind: '{confirmExecution}',
+                            },
+                            {
+                                xtype: 'textfield',
+                                fieldLabel: 'confirmText',
+                                bind: {
+                                    value: '{confirmText}',
+                                    visible: '{confirmExecution}',
+                                },
+                            },
+                            {
+                                xtype: 'checkbox',
+                                padding: '0 0 0 10',
+                                boxLabel: 'saveAnimation',
+                                bind: {
+                                    value: '{saveAnimation}',
+                                },
+                            },
+                            {
+                                xtype: 'textfield',
+                                fieldLabel: 'confirmTitle',
+                                bind: {
+                                    value: '{confirmTitle}',
+                                    visible: '{confirmExecution}',
+                                },
+                            },
+                            {
+                                xtype: 'checkbox',
+                                boxLabel: 'нужна ли валидация view[requiredValidView]',
+                                boxLabelAlign: 'after',
+                                padding: '0 0 0 10',
+                                bind: '{requiredValidView}',
+                            },
+                            {
+                                xtype: 'textfield',
+                                fieldLabel: 'референс компонента для валидации[requiredValidReference]',
+                                bind: {
+                                    value: '{requiredValidReference}',
+                                    visible: '{requiredValidView}',
+                                },
+                            },
+                            {
+                                xtype: 'textfield',
+                                fieldLabel: 'requiredValidMessage',
+                                bind: {
+                                    value: '{requiredValidMessage}',
+                                    visible: '{requiredValidView}',
+                                },
+                            },
+                            {
+                                xtype: 'textfield',
+                                fieldLabel: 'requiredValidTitle',
+                                bind: {
+                                    value: '{requiredValidTitle}',
+                                    visible: '{requiredValidView}',
+                                },
+                            },
+                            {
+                                xtype: 'textfield',
+                                fieldLabel: 'disabledReference',
+                                bind: '{disabledReference}',
+                                description: `Здесь при необходимости указывается reference, который при выполнении команды блокируется.
+                                Частый вариант использования - блокировка повторного нажатия кнопки, которая вызывает выполнение команды. `,
+                                triggers: {
+                                    help: {
+                                        cls: 'x-fa fa-question helpicon',
+                                        handler: this.showDescription,
+                                    },
+                                },
+                            },
+                            {
+                                xtype: 'ReportPropertiesGrid',
+                                title: 'Свойства',
+                                reference: 'reportPropertiesGrid',
+                                loadPropertiesSource: {
+                                    field: undefined,
+                                },
+                            }
+                        ],
+                    },
+                    {
+                        title: 'Параметры',
+                        tooltip: 'Настройка свойств и параметров команды',
+                        xtype: 'panel',
+                        layout: 'fit',
+                        // layout: {
+                        //     type: 'vbox', align: 'stretch',
+                        // },
+                        title: 'Параметры',
+                        tbar: [
+                            {
+                                text: 'Загрузить параметры',
+                                tooltip: 'Параметры, определенные в классе команды, будут созданы в редакторе с пустыми значениями.' +
+                                    'Если параметры уже определены в редакторе, то они не будут изменены.',
+                                ui: 'blue-text-button-border',
+                                hidden: true,
+                                bind: {
+                                    hidden: '{!commandComboBox.selection}',
+                                },
+                                handler: this.loadParametersHandler.bind(this),
+                            }
+                        ],
+                        items: [
+                            {
+                                xtype: 'UiAceEditorPanel',
+                                reference: 'parametersRef',
+                                hideSearchPanel: true,
+                                layout: 'fit',
+                                bind: {
+                                    value: '{parameters}',
+                                },
+                            }
+                        ],
+                    },
+                    {
+                        title: 'Отражение результатов',
+                        scrollable: true,
+                        tooltip: 'Отражение результатов команды во viewModel',
+                        layout: {
+                            type: 'vbox', align: 'stretch',
+                        },
+                        items: [
+                            {
+                                xtype: 'textfield',
+                                fieldLabel: 'completeHandler',
+                                bind: '{completeHandler}',
+                            },
+                            {
+                                xtype: 'textfield',
+                                fieldLabel: 'errorHandler',
+                                bind: '{errorHandler}',
+                            },
+                            {
+                                xtype: 'container',
+                                items: {
+                                    xtype: 'segmentedbutton',
+                                    bind: {
+                                        value: '{mappingMode}',
+                                    },
+                                    defaults: {
+                                        width: 100,
+                                    },
+                                    width: 300,
+                                    items: [
+                                        {
+                                            text: 'object',
+                                            value: 'object',
+                                        },
+                                        {
+                                            text: 'map',
+                                            value: 'map',
+                                        },
+                                        {
+                                            text: 'data ',
+                                            value: 'data',
+                                        }
+                                    ],
+                                },
+                            },
+                            {
+                                xtype: 'pluginDescriptionLabel',
+                                bind: {
+                                    value: '{mappingModeDescr}',
+                                },
+                            },
+                            {
+                                xtype: 'textfield',
+                                fieldLabel: 'propertyPath',
+                                afterLabelTextTpl: '<span class="required-flag">*</span>',
+                                bind: {
+                                    value: '{propertyPath}',
+                                    visible: '{objectMode}',
+                                },
+                            },
+                            {
+                                xtype: 'DataMappingPanel',
+                                reference: 'dataMappingPanel',
+                                bind: {
+                                    hidden: '{!mapMode}',
+                                },
+                                minHeight: 200,
+                            },
+                            {
+                                xtype: 'panel',
+                                title: 'Помощь',
+                                collapsible: true,
+                                defaults: {
+                                    xtype: 'panel',
+                                },
+                                bodyPadding: 5,
+                                items: [
+                                    {
+                                        bind: {
+                                            hidden: '{!objectMode}',
+                                        },
+                                        html: 'В этом весь ответ команды (из объекта) будет помещаем в свойство propertyPath ' +
+                                            'текущей viewModel.' +
+                                            'Поэтому обязательно требуется настроить параметр плагина propertyPath.' +
+                                            '<br>Примеры:' +
+                                            '<br><span class="code">ab</span> - Во viewModel будет создано свойство ab, ' +
+                                            'содержащее результаты команды.' +
+                                            '<br><span class="code">ab.cd</span> - <span class="code">{ ab: { cd: результат }}</span>',
+                                    },
+
+                                    {
+                                        bind: {
+                                            hidden: '{!mapMode}',
+                                        },
+                                        layout: {type: 'vbox', align: 'stretch'},
+                                        defaults: {paddig: 5},
+                                        items: [
+                                            {
+                                                xtype: 'component',
+                                                html: '<br>Маппинг предназначен отражения результатов выполнения команды во вьюмодель. ' +
+                                                    'Каждое строка состоит из двух частей. ' +
+                                                    '<br>Первая часть - путь в объекте результатов выполнения команды. По этому пути извлекается ' +
+                                                    'значение и помещается во viewModel. ' +
+                                                    '<br>Вторая часть - путь в объекте viewModel. По этому пути будет записано значение, ' +
+                                                    'извлеченное из результатов выполнения команды. ',
+                                            },
+                                            {
+                                                margin: 5,
+                                                items: {
+                                                    xtype: 'button',
+                                                    text: 'Подробнее',
+                                                    handler: function(btn) {
+                                                        const vm = btn.up('ExecuteCommandPluginConfigPanelFormEditor').getViewModel();
+                                                        const detailsHidden = vm.get('detailsHidden');
+                                                        vm.set('detailsHidden', !detailsHidden);
+                                                        btn.setText(detailsHidden? 'Скрыть':'Подробнее');
+                                                    },
+                                                },
+                                            },
+                                            {
+                                                bind: {
+                                                    hidden: '{detailsHidden}',
+                                                },
+                                                html: '<br> Пусть результат выполнения команды - объект вида:' +
+                                                    '<br> <span class="code">{ A: { B: 123 } }</span>' +
+                                                    '<p> <span style="font-weight: bold">Пример 1:</span> <span class="code">"A": "RESULT"</span>' +
+                                                    '<br> где "A" - путь в объекте результата выполнения команды.' +
+                                                    '<br> "RESULT" - путь во viewModel.' +
+                                                    '<br> В итоге при получении результатов выполнения команды из ответа будет извлечено' +
+                                                    'значение по ключу "A", и во viewModel будет создано свойство RESULT со значением { B: 123 }.' +
+                                                    '<br> <span class="code">{ RESULT: { B: 123 } }</span> </p>' +
+                                                    '<p> <span style="font-weight: bold">Пример 2:</span> ' +
+                                                    '<span class="code">"A.B": "RESULT.C"</span>' +
+                                                    '<br> В данном примере "A.B" - это путь. Точка - разделитель ключей. При получении ' +
+                                                    'результатов выполнения команды из объекта результата будет извлечено значение по ' +
+                                                    'ключу "A", это объект. Из этого объекта извлечется значение по ключу "B", это число 123. ' +
+                                                    'Затем во viewModel будет создан объект по ключу "RESULT" и в объекте по ключу "C" ' +
+                                                    'будет записано извеченное число 123.' +
+                                                    '<br> <span class="code">{ RESULT: { C: 123 } }</span>' +
+                                                    '</p>',
+                                            }
+                                        ],
+                                    },
+                                    {
+                                        bind: {
+                                            hidden: '{!dataMode}',
+                                        },
+                                        html: 'Результат выполнения команды должен быть объектом - {}. ' +
+                                            '<br>Результат выполнения команды будет помещен во viewModel полностью прямо в корень. ' +
+                                            'В этом режиме нужно четко понимать, что возвращает команда, и что есть во viewModel. ' +
+                                            '<br>Если есть одинаковые свойства в результате выполнения команды и во viewModel, ' +
+                                            'то данные во viewModel будут затерты данными из команды. ' +
+                                            '<br>Родительская viewModel не будет затронута.',
+                                    }
+                                ],
+                            }
+                        ],
+                    }
+                ],
+            }
+        ];
+        this.callParent();
+        this.lookup('reportPropertiesGrid').loadPropertiesSource.field = this.lookup('commandComboBox');
+    },
+
+    convertProperties: function(properties) {
+        if (!Ext.isEmpty(properties) && !Ext.isArray(properties)) {
+            const data = [];
+            for (const key in properties) {
+                if (properties.hasOwnProperty(key)) {
+                    data.push({key: key, value: properties[key]});
+                }
+            }
+            return data;
+        }
+        return properties;
+    },
+
+    showDescription: function(cmp) {
+        Ext.Msg.alert('Описание свойства', cmp.description);
+    },
+
+    loadParametersHandler: function() {
+        const vm = this.getViewModel();
+        const xtype = this.lookup('commandComboBox').getSelectedRecord().get('xtype');
+        if (xtype) {
+            const currentParameters = JSON5.parse(this.lookup('parametersRef').getValue());
+            this.commandParameters.forEach((parametr) => {
+                if (!Ext.isObject(parametr)) {
+                    return;
+                }
+                const name = parametr.name;
+                if (!currentParameters.hasOwnProperty(name)) {
+                    currentParameters[name] = '';
+                }
+            });
+
+            const stringParam = JSON5.stringify(currentParameters, {
+                space: 4,
+                quote: '\'',
+            });
+
+            vm.set('parameters', stringParam);
+            this.checkParameters(currentParameters);
+        }
+    },
+
+    /**
+     * Проверка текущих параметров. Не должно быть параметров, которые не определены у команды
+     * @param {Object} currentParameters
+     */
+    checkParameters: function(currentParameters) {
+        const commandName = this.lookup('commandComboBox').getSelectedRecord().get('xtype');
+        const wrongParameters = Object.keys(currentParameters)
+            .filter((name) => !this.commandParameters.find((parameter) => parameter['name']===name));
+        let goodParametersStr = this.commandParameters
+            .reduce((acc, cur) => {
+                const required = cur.required ? 'обязательный' : 'не обязательный';
+                acc.push(`<li> ${cur.name} - ${required} </li>`);
+                return acc;
+            }, [])
+            .join('<br>');
+
+        if (wrongParameters.length) {
+            const paramsString = `<span class="wrong-parameters"> ${wrongParameters.join(', ')} </span>`;
+            goodParametersStr = `<ul class="wrong-parameters"> ${goodParametersStr} </ul>`;
+            Ext.Msg.show({
+                title: 'Внимание!',
+                message: `Следующие параметры: <br> ${paramsString} <br> не являются параметрами команды ${commandName}.
+                <p>Список параметров команды: ${goodParametersStr}</p>
+                `,
+                buttons: Ext.Msg.YES,
+                cls: 'ExecuteCommandPluginConfigPanelFormEditor',
+            });
+        }
+    },
+
+    /**
+     * При смене команды фиксируем ее параметры
+     * @param combo
+     */
+    onChangeCommand: function(combo) {
+        if (!combo.getSelectedRecord()) {
+            return;
+        }
+        const xtype = combo.getSelectedRecord().get('xtype');
+        if (xtype) {
+            const fullSource = Ext.ClassManager.aliasToName['command.' + xtype];
+            this.commandParameters = Ext.ClassManager.classes[fullSource].prototype.inputParameters &&
+                Ext.ClassManager.classes[fullSource].prototype.inputParameters();
+        }
+    },
+});

package/src/uielement/plugin/configPanel/executeCommand/ExecuteCommandPluginConfigPanelFormEditor.scss

@@ -0,0 +1,22 @@
+.ExecuteCommandPluginConfigPanelFormEditor {
+  $required-flag-color: dynamic(#bf1313);
+  font-size: 12px;
+  margin: 5px;
+  .required-flag {
+    font-size: 18px;
+    color: $required-flag-color;
+  }
+  span.code {
+    color: green;
+    font-family: "Lucida Console", "Courier New", monospace;
+  }
+  .x-form-trigger-default.helpicon {
+    background-color: white;
+  }
+
+  .wrong-parameters {
+    color: green;
+    font-style: italic;
+    font-family: "Lucida Console", "Courier New", monospace;
+  }
+}

package/src/util.js

@@ -497,16 +497,17 @@ Ext.define('Coon.util', {
             const alias = cls.prototype && cls.prototype.alias;
             if (isCommand(alias)) {
                 const url = cls.prototype.url;
+                const ruDescription = cls.prototype.description;
                 if (Array.isArray(alias)) {
                     alias.filter(check).forEach((el) => {
-                        acc.push({description: className, xtype: el.split('.').pop(), url});
+                        acc.push({description: className, xtype: el.split('.').pop(), url, ruDescription});
                     });
                 } else {
-                    acc.push({description: className, xtype: alias.split('.').pop(), url});
+                    acc.push({description: className, xtype: alias.split('.').pop(), url, ruDescription});
                 }
             }
             return acc;
-        }, []);
+        }, []).sort((a, b) => a.xtype.localeCompare(b.xtype));
         return Coon.util.locals.getAllCommandsList;
     },
     /**