ru.coon 2.8.65 → 3.0.2

package/src/report/component/calculator/ReportCalculatorController.js

@@ -0,0 +1,266 @@
+Ext.define('Coon.report.component.calculator.ReportCalculatorController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.ReportCalculatorController',
+
+    statics: {
+        ERROR_MESSAGE: 'Ошибка',
+        REGEX: /[×÷+=-]/,
+        IS_OPERATOR: /[/*+-]/,
+        IS_NUMBER: /^[0-9]$/,
+    },
+
+    init() {
+        this.vm = this.getViewModel();
+        this.history = [];
+        this.textfield = this.getView().down('textfield');
+        this.lastButton = '';
+        this.lastOperator = '';
+        window.addEventListener('keydown', (e) => {
+            if (!this.getView().containsFocus) {
+                return;
+            }
+            const button = {};
+            button.text = String(e.key);
+            if (this.self.IS_NUMBER.test(e.key)) {
+                this.enterNumber(button);
+            }
+            if (this.self.IS_OPERATOR.test(e.key)) {
+                this.selectOperator(button);
+            }
+            if (e.code === 'NumpadEnter' || e.code === 'Enter') {
+                this.calculate();
+            }
+            if (e.code === 'NumpadDecimal') {
+                this.enterSeparator(button);
+            }
+            if (e.code === 'Backspace') {
+                e.preventDefault();
+                this.deleteSymbol(button);
+            }
+        });
+    },
+
+    deleteSymbol(button) {
+        const newStr = this.textfield.getValue() === this.self.ERROR_MESSAGE ?
+            0 :
+            String(this.textfield.getValue()).replaceAll(/\s+/g, '').slice(0, -1);
+        newStr && newStr !== '-' ? this.textfield.setValue(window.Decimal(newStr)) : this.textfield.setValue(0);
+        this.lastButton = button.text;
+        this.textfield.focus();
+    },
+
+    deleteTextfield(button) {
+        this.textfield.setValue(0);
+        this.lastButton = button.text;
+        this.textfield.focus();
+    },
+
+    resetViewModelData() {
+        this.vm.set({
+            operand1: null,
+            operand2: null,
+            operator: '',
+            equal: ' ',
+        });
+    },
+
+    deleteAll() {
+        this.textfield.setValue(0);
+        this.resetViewModelData();
+        this.lastButton = 'C';
+        this.lastOperator = '';
+        this.textfield.focus();
+    },
+
+    enterNumber(button) {
+        const maxLength = 17;
+        this.textfield.getValue() === this.self.ERROR_MESSAGE ? this.textfield.setValue(0) : '';
+        if (Number(button.text) === 0 && String(this.textfield.getValue()) === '0') {
+            return;
+        }
+        if (String(this.textfield.getValue()).length >= maxLength && !this.self.REGEX.test(this.lastButton)) {
+            return;
+        }
+        if (this.lastButton === '=') {
+            this.resetViewModelData();
+        }
+        const oldValue = this.self.REGEX.test(this.lastButton) ? '' : String(this.textfield.getValue()).replaceAll(/\s+/g, '');
+        const newValue = String(oldValue) !== '0' ? String(oldValue) + button.text : button.text;
+        this.textfield.setValue(newValue);
+        this.lastButton = button.text;
+        this.textfield.focus();
+    },
+
+    enterSeparator(button) {
+        const maxLength = 17;
+        if (String(this.textfield.getValue()).length >= maxLength) {
+            return;
+        }
+        const oldText = this.textfield.getValue() === this.self.ERROR_MESSAGE ? 0 : this.textfield.getValue();
+        if (oldText && !String(oldText).includes('.')) {
+            this.textfield.setValue(oldText + '.');
+            this.lastButton = button.text;
+        }
+        this.textfield.focus();
+    },
+
+    selectOperator(button) {
+        this.textfield.setValue(window.Decimal(this.textfield.getValue() === this.self.ERROR_MESSAGE ?
+            0 :
+            String(this.textfield.getValue()).replaceAll(/\s+/g, '')));
+        this.textfield.focus();
+        button.text === '—' ? button.text = '-' : '';
+        button.text === '*' ? button.text = '×' : '';
+        button.text === '/' ? button.text = '÷' : '';
+        if (!this.textfield.getValue()) {
+            return;
+        }
+        if (this.self.REGEX.test(this.lastButton) && this.lastButton !== '=') {
+            this.vm.set('operator', button.text);
+            this.lastButton = button.text;
+            this.lastOperator = button.text;
+            return;
+        }
+        if (this.lastOperator && this.lastOperator !== '=') {
+            this.calculate();
+        }
+        this.vm.set('equal', ' ');
+        this.vm.set('operand2', null);
+        if (this.textfield.getValue() === this.self.ERROR_MESSAGE) {
+            return;
+        }
+        this.vm.set('operand1', String(this.textfield.getValue()).replaceAll(/\s+/g, ''));
+        this.vm.set('operator', button.text);
+        this.lastButton = button.text;
+        this.lastOperator = button.text;
+    },
+
+    calculate() {
+        this.textfield.setValue(window.Decimal(this.textfield.getValue() === this.self.ERROR_MESSAGE ?
+            0 :
+            String(this.textfield.getValue()).replaceAll(/\s+/g, '')));
+        this.lastButton === '=' ? '' : this.vm.set('operand2', String(this.textfield.getValue()).replaceAll(/\s+/g, ''));
+        if (!this.vm.get('operand1') || !this.vm.get('operator') || !this.vm.get('operand2')) {
+            this.textfield.focus();
+            return;
+        }
+        const num1 = this.lastButton === '=' ?
+            window.Decimal(String(this.textfield.getValue()).replaceAll(/\s+/g, '')) :
+            window.Decimal(this.vm.get('operand1'));
+        const num2 = window.Decimal(this.vm.get('operand2'));
+        const oldAcc = String(this.textfield.getValue()).replaceAll(/\s+/g, '');
+        switch (this.vm.get('operator')) {
+        case '+':
+            this.textfield.setValue(num1.plus(num2));
+            break;
+        case '-':
+            this.textfield.setValue(num1.minus(num2));
+            break;
+        case '×':
+            this.textfield.setValue(num1.times(num2));
+            break;
+        case '÷':
+            if (Number(num2) !== 0) {
+                this.textfield.setValue(num1.div(num2));
+            } else {
+                this.deleteAll();
+                this.textfield.setValue(this.self.ERROR_MESSAGE);
+            }
+            break;
+        }
+        this.lastButton === '=' ? this.vm.set('operand1', oldAcc) : '';
+        this.lastButton = '=';
+        this.lastOperator = '=';
+        if (this.textfield.getValue() !== this.self.ERROR_MESSAGE) {
+            this.vm.set('equal', '=');
+            this.pushHistory(this.getHistoryItemString());
+        }
+        this.textfield.focus();
+    },
+
+    formatNumber(value) {
+        return Coon.format.bigNumFormat(value, '.', ' ');
+    },
+
+    getHistoryItemString() {
+        const operand1 = this.formatNumber(this.vm.get('operand1'));
+        const operand2 = this.formatNumber(this.vm.get('operand2'));
+        return `${operand1} ${this.vm.get('operator')} ${operand2} = ${String(this.textfield.getValue()).replaceAll(/s+/g, '')}`;
+    },
+
+    pushHistory(elem) {
+        if (this.history.length >= 10) {
+            this.history.splice(9, 1);
+        }
+        this.history.unshift(elem);
+        const values = this.history;
+        this.getView().fireEvent('changeHistory', values);
+    },
+
+    toggleSign(button) {
+        if (this.lastButton === '=') {
+            this.resetViewModelData();
+        }
+        this.textfield.getValue() === this.self.ERROR_MESSAGE ? this.textfield.setValue(0) : '';
+        this.textfield.setValue(String(this.textfield.getValue()).replaceAll(/\s+/g, '') * -1);
+        this.lastButton = 'toggle';
+        this.textfield.focus();
+    },
+
+    enterMemoryValue() {
+        this.vm.get('memory') ? this.textfield.setValue(window.Decimal(this.vm.get('memory'))) : '';
+        if (this.lastButton === '=') {
+            this.resetViewModelData();
+        }
+        this.lastButton = '';
+        this.lastOperator = '';
+        this.textfield.focus();
+    },
+
+    setMemory(button) {
+        this.vm.set('memory', this.textfield.getValue() === this.self.ERROR_MESSAGE ? 0 : String(this.textfield.getValue()).replaceAll(/\s+/g, ''));
+        this.lastButton = 'memory';
+        this.textfield.focus();
+    },
+
+    addMemory(button) {
+        this.calculateMemory('+');
+        this.textfield.focus();
+    },
+
+    subtractMemory(button) {
+        this.calculateMemory('-');
+        this.textfield.focus();
+    },
+
+    calculateMemory(operator) {
+        this.textfield.getValue() === this.self.ERROR_MESSAGE ?
+            this.textfield.setValue(0) :
+            this.textfield.setValue(String(this.textfield.getValue()).replaceAll(/\s+/g, ''));
+        this.lastButton = 'memory';
+        if (!this.vm.get('memory')) {
+            return;
+        }
+        switch (operator) {
+        case '+':
+            this.vm.set('memory', window.Decimal(this.vm.get('memory')).plus(window.Decimal(this.textfield.getValue())));
+            break;
+        case '-':
+            this.vm.set('memory', window.Decimal(this.vm.get('memory')).minus(window.Decimal(this.textfield.getValue())));
+            break;
+        }
+    },
+
+    swapOperands() {
+        if (this.vm.get('operand1') && this.textfield.getValue() && !this.vm.get('operand2')) {
+            const operand = this.vm.get('operand1');
+            this.vm.set('operand1', String(this.textfield.getValue()).replaceAll(/\s+/g, ''));
+            this.textfield.setValue(operand);
+        }
+        this.textfield.focus();
+    },
+
+    onFieldChange(field, newValue) {
+        this.getViewModel().set('isDisabledAll', newValue === 'Ошибка');
+    },
+});

package/src/report/component/calculator/ReportCalculatorField.js

@@ -0,0 +1,47 @@
+Ext.define('Coon.report.component.calculator.ReportCalculatorField', {
+    extend: 'Ext.form.field.Text',
+    xtype: 'ReportCalculatorField',
+    value: 0,
+    flex: 1,
+    maxLength: 17,
+    maskRe: /^[]$/,
+    enforceMaxLength: true,
+    enableKeyEvents: true, // нужен для отслеживания paste
+    labelAlign: 'top',
+    emptyText: ' ',
+    defaultListenerScope: true,
+    fieldStyle: {
+        fontWeight: 'bold',
+    },
+    listeners: {
+        paste: 'onPasteValue',
+        render: 'onRenderField',
+    },
+    plugins: ['formplug'],
+
+    valueToRaw: function(newValue) {
+        if (newValue === 'Ошибка') {
+            return newValue;
+        }
+        const value = String(newValue).replaceAll(/\s+/g, '');
+        const formatedValue = new Intl.NumberFormat('ru-RU', {
+            maximumFractionDigits: 16,
+        }).format(Number(value)).replaceAll(',', '.');
+        return value.endsWith('.') ? formatedValue + '.' : formatedValue;
+    },
+
+    onPasteValue: function() {
+        navigator.clipboard.readText()
+            .then((text) => {
+                if (!Number(text)) {
+                    this.setValue('Ошибка');
+                }
+            });
+    },
+
+    onRenderField() {
+        this.getEl().on('contextmenu', (e) => {
+            e.preventDefault();
+        });
+    },
+});

package/src/report/component/calculator/ReportCalculatorHistoryPlugin.js

@@ -0,0 +1,128 @@
+Ext.define('Coon.report.component.calculator.ReportCalculatorHistoryPlugin', {
+    extend: 'Ext.plugin.Abstract',
+    alias: 'plugin.formplug',
+
+    statics: {
+        MENU_OFFSET: 48,
+    },
+
+    init(field) {
+        this.calculator = field.up();
+        this.contextMenu = null;
+        this.field = field;
+        this.vm = this.calculator.getViewModel();
+        this.addTrigger();
+        this.calculator.on('changeHistory', this.updateTriggerState, this);
+    },
+
+    updateTriggerState(history) {
+        const triggerEl = this.field.getTriggers().history.el;
+        if (history.length) {
+            triggerEl.removeCls('disabled-trigger');
+        } else {
+            triggerEl.addCls('disabled-trigger');
+        }
+    },
+
+    addTrigger() {
+        const triggers = this.field.getTriggers();
+        triggers.history = {
+            cls: 'svg-icon svg-icon-expand-bottom disabled-trigger',
+            handler: () => {
+                this.openHistory();
+            },
+        };
+        this.field.setTriggers(triggers);
+    },
+
+    openHistory() {
+        if (this.contextMenu) {
+            return;
+        }
+        const history = this.calculator.getController().history;
+        const historyItems = [];
+        if (!history.length) {
+            this.updateTriggerState([]);
+            return;
+        }
+
+        for (const [index, element] of history.entries()) {
+            const item = Ext.create('Ext.container.Container', {
+                layout: 'hbox',
+                cls: 'history-container',
+                items: [
+                    {
+                        xtype: 'displayfield',
+                        value: element,
+                        index: index,
+                        cls: 'history-item-field',
+                        flex: 1,
+                    },
+                    {
+                        xtype: 'button',
+                        iconCls: 'svg-icon svg-icon-cancel-small',
+                        cls: 'history-item-remove-button',
+                        tooltip: 'Удалить из истории',
+                        handler: () => {
+                            history.splice(index, 1);
+                            this.destroyContextMenu();
+                            this.openHistory(this.field);
+                        },
+                    }
+                ],
+            });
+            historyItems.push(item);
+        }
+
+        this.contextMenu = Ext.create('Ext.menu.Menu', {
+            id: 'historyMenu',
+            cls: 'historyMenu',
+            width: this.field.getWidth(),
+            items: historyItems,
+            listeners: {
+                hide: () => {
+                    setTimeout(() => {
+                        this.destroyContextMenu();
+                    }, 100);
+                },
+                click: (menu, item) => {
+                    this.selectHistoryItem(item, history);
+                },
+            },
+        });
+        this.showContextMenu();
+    },
+
+    selectHistoryItem(item, history) {
+        if (!item) {
+            return;
+        }
+        const parsedExpression = item.items.items[0].getValue().split(' ');
+        const indexOfExpression = item.items.items[0].index;
+        history.splice(0, 0, history.splice(indexOfExpression, 1)[0]);
+        this.destroyContextMenu();
+        this.openHistory(this.field);
+        this.vm.set({
+            operand1: parsedExpression[0],
+            operand2: parsedExpression[2],
+            operator: parsedExpression[1],
+            equal: parsedExpression[3],
+        });
+        this.field.setValue(parsedExpression[4]);
+    },
+
+    showContextMenu() {
+        const menuY = this.field.getY() + this.self.MENU_OFFSET;
+        this.contextMenu.showAt([this.field.getX(), menuY]);
+        const calculator = Ext.getCmp('ReportCalculatorPanel');
+        if (this.contextMenu.getY() !== menuY) {
+            calculator.showAt([calculator.getX(), calculator.getY() - Math.abs(this.contextMenu.getY() - menuY)]);
+            this.contextMenu.showAt([this.field.getX(), this.contextMenu.getY()]);
+        }
+    },
+
+    destroyContextMenu() {
+        this.contextMenu.destroy();
+        this.contextMenu = null;
+    },
+});

package/src/report/component/calculator/ReportCalculatorHistoryPlugin.scss

@@ -0,0 +1,33 @@
+.historyMenu {
+    padding: 0;
+
+    .history-container {
+        left: 0 !important;
+        width: 354px !important;
+        padding-left: 16px;
+        cursor: pointer;
+        .x-box-inner {
+            width: 338px !important;
+        }
+    }
+
+    .history-item-field {
+        margin-top: 3px !important;
+    }
+
+    .history-container:hover {
+        background-color: #EBECEE;
+    }
+
+    .history-item-remove-button {
+        margin-top: 2px !important;
+        left: 289px !important;
+        z-index: 2;
+    }
+
+    .history-item-remove-button.x-btn-over {
+        background-color: #EBECEE !important;
+        color: #111111 !important;
+    }
+}
+

package/src/report/component/calculator/ReportCalculatorMenuItem.js

@@ -0,0 +1,101 @@
+Ext.define('Coon.report.component.calculator.ReportCalculatorMenuItem', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.ReportCalculatorMenuItem',
+    xtype: 'ReportCalculatorMenuItem',
+    cls: 'ReportCalculatorMenuItem',
+    defaultListenerScope: true,
+    viewModel: {
+        data: {
+            isHiddenAll: false,
+        },
+    },
+    margin: '0 0 0 48',
+    bodyPadding: '5 0 0 0',
+    layout: {type: 'hbox'},
+    items: [
+        {
+            xtype: 'container',
+            layout: {type: 'hbox', align: 'stretch'},
+            defaults: {
+                margin: '0 0 0 6',
+                cls: 'calculator-contextmenu-button-type1',
+            },
+            items: [
+                {
+                    xtype: 'button',
+                    margin: '0 0 0 0',
+                    iconCls: 'svg-icon svg-icon-calculator',
+                    eventName: 'openCalculator',
+                    handler: 'onClickButton',
+                },
+                {
+                    xtype: 'button',
+                    text: 'M=',
+                    eventName: 'setMemory',
+                    handler: 'onClickButton',
+                    width: 46,
+                    hidden: true,
+                    bind: {
+                        hidden: '{isHiddenAll}',
+                    },
+                },
+                {
+                    xtype: 'button',
+                    text: 'M+',
+                    eventName: 'addMemory',
+                    handler: 'onClickButton',
+                    width: 46,
+                    hidden: true,
+                    bind: {
+                        hidden: '{isHiddenAll}',
+                    },
+                },
+                {
+                    xtype: 'button',
+                    text: 'M-',
+                    eventName: 'subtractMemory',
+                    handler: 'onClickButton',
+                    width: 46,
+                    margin: '0 6 0 6',
+                    hidden: true,
+                    bind: {
+                        hidden: '{isHiddenAll}',
+                    },
+                }
+            ],
+        },
+        {
+            // hack: Невидимая кнопка для получения фокуса
+            // Установка фокуса на компоненте решает проблему снятия фокуса при переводе указателя мыши с другого пункта меню.
+            xtype: 'button',
+            cls: 'hidden-focus-button',
+            itemId: 'hiddenButton',
+            width: 0,
+        }
+    ],
+    listeners: {
+        afterrender: 'setButtonFocus',
+    },
+
+    // hack: Установка фокуса на компоненте решает проблему снятия фокуса при переводе указателя мыши с другого пункта меню.
+    setButtonFocus: function(panel) {
+        panel.getEl().on('mouseover', function(e) {
+            this.down('#hiddenButton').focus();
+        }, this);
+    },
+
+    onClickButton(button) {
+        this.fireEvent(button.eventName, button.text);
+    },
+
+    setHiddenMemoryButtons(isHidden) {
+        this.getViewModel().set('isHiddenAll', isHidden);
+    },
+
+    isItemHidden() {
+        return false;
+    },
+    isItemDisabled() {
+        return false;
+    },
+});

package/src/report/component/calculator/ReportCalculatorMenuItem.scss

@@ -0,0 +1,41 @@
+.ReportCalculatorMenuItem {
+  .hidden-focus-button.x-btn-default-small {
+    padding: 0 !important;
+  }
+
+  // стили для кнопок калькулятора в контекстном меню
+  .calculator-contextmenu-button-type1 {
+    border: 1px solid #8B8B8B !important;
+    border-radius: 6px;
+    padding: 6px 12px;
+    .x-btn-inner-default-small {
+      font-size: 13px;
+      font-weight: 400 !important;
+      line-height: 16px;
+      padding: 0;
+    }
+    .x-btn-inner {
+      color: #888888;
+    }
+    .svg-icon {
+      background-color: #888888 !important;
+    }
+    &.x-btn-over {
+      background-color: #F5F5F5;
+      border: 1px solid #707070 !important;
+      .x-btn-inner {
+        color: #707070 !important;
+      }
+    }
+    &.x-btn-pressed {
+      background-color: #ECECEC !important;
+      border: 1px solid #707070 !important;
+      .x-btn-inner {
+        color: #707070 !important;
+      }
+    }
+    &:has(.x-btn-no-text) {
+      padding: 6px 6px;
+    }
+  }
+}