[SSE] Formula tab: add recent, autosum buttons

apps/spreadsheeteditor/main/app/controller/FormulaDialog.js

@@ -79,14 +79,21 @@ define([
                 },
                 'FormulaTab': {
                     'function:apply': this.applyFunction
+                },
+                'Toolbar': {
+                    'function:apply': this.applyFunction
                 }
             });
         },
 
-        applyFunction: function(func) {
+        applyFunction: function(func, autocomplete) {
             if (func) {
-                this.api.asc_insertFormula(func.name, Asc.c_oAscPopUpSelectorType.Func);
+                if (func.origin === 'more') {
-                this.updateLast10Formulas(func.origin);
+                    this.showDialog();
+                } else {
+                    this.api.asc_insertFormula(func.name, Asc.c_oAscPopUpSelectorType.Func, !!autocomplete);
+                    !autocomplete && this.updateLast10Formulas(func.origin);
+                }
             }
         },
 
@@ -122,6 +129,8 @@ define([
                 });
             }
 
+            this.formulaTab && this.formulaTab.setApi(this.api);
+
             return this;
         },
 
@@ -224,6 +233,7 @@ define([
             if (this.formulasGroups) {
                 var group = this.formulasGroups.findWhere({name : 'Last10'});
                 group && group.set('functions', this.loadingLast10Formulas(this.getDescription(Common.Utils.InternalSettings.get("sse-settings-func-locale"))));
+                this.formulaTab && this.formulaTab.updateRecent();
             }
         },
 
@@ -329,7 +339,7 @@ define([
                        _.sortBy(allFunctions, function (model) {return model.get('name'); }));
                 }
             }
-            this.formulaTab.fillFunctions();
+            this.formulaTab && this.formulaTab.fillFunctions();
         },
         sCategoryAll:                   'All',
         sCategoryLast10:                '10 last used',

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -1182,10 +1182,8 @@ define([
                         controller.showDialog();
                     }
                 } else {
-
                     item.value = item.value || 'SUM';
-
+                    this.toolbar.fireEvent('function:apply', [{name: this.api.asc_getFormulaLocaleName(item.value), origin: item.value}, true]);
-                    this.api.asc_insertFormula(this.api.asc_getFormulaLocaleName(item.value), Asc.c_oAscPopUpSelectorType.Func, true);
 
                     Common.NotificationCenter.trigger('edit:complete', this.toolbar);
                     Common.component.Analytics.trackEvent('ToolBar', 'Insert formula');
@@ -1703,7 +1701,7 @@ define([
                 toolbar.lockToolbar(SSE.enumLock.editFormula, is_formula,
                         { array: [toolbar.cmbFontName, toolbar.cmbFontSize, toolbar.btnIncFontSize, toolbar.btnDecFontSize,
                             toolbar.btnBold, toolbar.btnItalic, toolbar.btnUnderline, toolbar.btnStrikeout, toolbar.btnSubscript, toolbar.btnTextColor]});
-                toolbar.lockToolbar(SSE.enumLock.editText, is_text, {array:[toolbar.btnInsertFormula]});
+                toolbar.lockToolbar(SSE.enumLock.editText, is_text, {array: [toolbar.btnInsertFormula].concat(toolbar.btnsFormula)});
             }
             this._state.coauthdisable = undefined;
             this._state.selection_type = undefined;
@@ -3108,6 +3106,7 @@ define([
                         var formulatab = me.getApplication().getController('FormulaDialog');
                         formulatab.setConfig({toolbar: me});
                         formulatab = formulatab.getView('FormulaTab');
+                        me.toolbar.btnsFormula = formulatab.getButtons('formula');
                         Array.prototype.push.apply(me.toolbar.lockControls, formulatab.getButtons());
 
                         if ( !config.isOffline ) {

apps/spreadsheeteditor/main/app/template/Toolbar.template

@@ -157,9 +157,10 @@
                 </div>
             </section>
             <section class="panel" data-tab="formula">
-                <!--<div class="group">-->
+                <div class="group">
-                <!--</div>-->
+                    <span class="btn-slot text x-huge" id="slot-btn-additional-formula"></span>
-                <!--<div class="separator long"></div>-->
+                </div>
+                <div class="separator long"></div>
                 <div class="group">
                     <span class="btn-slot text x-huge" id="slot-btn-autosum"></span>
                     <span class="btn-slot text x-huge" id="slot-btn-recent"></span>

apps/spreadsheeteditor/main/app/view/FormulaTab.js

@@ -48,29 +48,23 @@ define([
     SSE.Views.FormulaTab = Common.UI.BaseView.extend(_.extend((function(){
         function setEvents() {
             var me = this;
-            var _setevent = function(btn){
+            me.btnAutosum.on('click', function(){
-                (typeof btn.menu == 'object') && btn.menu.on('item:click', function (menu, item, e) {
+                me.fireEvent('function:apply', [{name: me.api.asc_getFormulaLocaleName('SUM'), origin: 'SUM'}, true]);
-                    me.fireEvent('function:apply', [{name: item.caption, origin: item.value}]);
+            });
-                });
+            me.btnAutosum.menu.on('item:click', function (menu, item, e) {
-            };
+                me.fireEvent('function:apply', [{name: item.caption, origin: item.value}, true]);
-            // me.btnFinancial.menu.on('item:click', function (menu, item, e) {
+            });
-            //     me.fireEvent('function:apply', [{name: item.caption, origin: item.value}]);
+            me.btnFormula.on('click', function(){
-            // });
+                me.fireEvent('function:apply', [{name: 'more', origin: 'more'}]);
-            _setevent(this.btnFinancial);
+            });
-            _setevent(this.btnLogical);
-            _setevent(this.btnTextData);
-            _setevent(this.btnDateTime);
-            _setevent(this.btnReference);
-            _setevent(this.btnMath);
         }
-
         return {
             options: {},
 
             initialize: function (options) {
                 Common.UI.BaseView.prototype.initialize.call(this);
                 this.toolbar = options.toolbar;
-                this.formulasGroups =   options.formulasGroups;
+                this.formulasGroups = options.formulasGroups;
 
                 this.lockedControls = [];
 
@@ -88,7 +82,7 @@ define([
                     menu: true,
                     split: false,
                     disabled: true,
-                    lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth]
+                    lock: [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth]
                 });
                 Common.Utils.injectComponent($host.find('#slot-btn-financial'), this.btnFinancial);
                 this.lockedControls.push(this.btnFinancial);
@@ -101,7 +95,7 @@ define([
                     menu: true,
                     split: false,
                     disabled: true,
-                    lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth]
+                    lock: [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth]
                 });
                 Common.Utils.injectComponent($host.find('#slot-btn-logical'), this.btnLogical);
                 this.lockedControls.push(this.btnLogical);
@@ -114,7 +108,7 @@ define([
                     menu: true,
                     split: false,
                     disabled: true,
-                    lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth]
+                    lock: [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth]
                 });
                 Common.Utils.injectComponent($host.find('#slot-btn-text'), this.btnTextData);
                 this.lockedControls.push(this.btnTextData);
@@ -127,7 +121,7 @@ define([
                     menu: true,
                     split: false,
                     disabled: true,
-                    lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth]
+                    lock: [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth]
                 });
                 Common.Utils.injectComponent($host.find('#slot-btn-datetime'), this.btnDateTime);
                 this.lockedControls.push(this.btnDateTime);
@@ -140,7 +134,7 @@ define([
                     menu: true,
                     split: false,
                     disabled: true,
-                    lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth]
+                    lock: [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth]
                 });
                 Common.Utils.injectComponent($host.find('#slot-btn-lookup'), this.btnReference);
                 this.lockedControls.push(this.btnReference);
@@ -153,11 +147,60 @@ define([
                     menu: true,
                     split: false,
                     disabled: true,
-                    lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth]
+                    lock: [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth]
                 });
                 Common.Utils.injectComponent($host.find('#slot-btn-math'), this.btnMath);
                 this.lockedControls.push(this.btnMath);
 
+                this.btnRecent = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-cell-group',
+                    caption: this.txtRecent,
+                    hint: this.txtRecent,
+                    menu: true,
+                    split: false,
+                    disabled: true,
+                    lock: [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth]
+                });
+                Common.Utils.injectComponent($host.find('#slot-btn-recent'), this.btnRecent);
+                this.lockedControls.push(this.btnRecent);
+
+                this.btnAutosum = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-cell-group',
+                    caption: this.txtAutosum,
+                    hint: this.txtAutosumTip,
+                    split: true,
+                    disabled: true,
+                    lock: [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth],
+                    menu: new Common.UI.Menu({
+                        items : [
+                            {caption: 'SUM',   value: 'SUM'},
+                            {caption: 'MIN',   value: 'MIN'},
+                            {caption: 'MAX',   value: 'MAX'},
+                            {caption: 'COUNT', value: 'COUNT'},
+                            {caption: '--'},
+                            {
+                                caption: me.txtAdditional,
+                                value: 'more'
+                            }
+                        ]
+                    })
+                });
+                Common.Utils.injectComponent($host.find('#slot-btn-autosum'), this.btnAutosum);
+                this.lockedControls.push(this.btnAutosum);
+
+                this.btnFormula = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-cell-group',
+                    caption: this.txtFormula,
+                    hint: this.txtFormulaTip,
+                    disabled: true,
+                    lock: [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth]
+                });
+                Common.Utils.injectComponent($host.find('#slot-btn-additional-formula'), this.btnFormula);
+                this.lockedControls.push(this.btnFormula);
+
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             },
 
@@ -170,7 +213,7 @@ define([
                 (new Promise(function (accept, reject) {
                     accept();
                 })).then(function(){
-                    // setEvents.call(me);
+                    setEvents.call(me);
                 });
             },
 
@@ -191,64 +234,78 @@ define([
                 }, this);
             },
 
+            setButtonMenu: function(btn, name) {
+                var me = this,
+                    arr = [],
+                    group = me.formulasGroups.findWhere({name : name});
+
+                if (group) {
+                    var functions = group.get('functions');
+                    functions && functions.forEach(function(item) {
+                        arr.push(new Common.UI.MenuItem({
+                            caption: item.get('name'),
+                            value: item.get('origin')
+                        }));
+                    });
+                    arr.push(new Common.UI.MenuItem({
+                        caption: '--'
+                    }));
+                    arr.push(new Common.UI.MenuItem({
+                        caption: me.txtAdditional,
+                        value: 'more'
+                    }));
+
+                }
+                if (arr.length) {
+                    if (btn.menu && btn.menu.rendered) {
+                        btn.menu.removeAll();
+                        arr.forEach(function(item){
+                            btn.menu.addItem(item);
+                        });
+                    } else {
+                        btn.setMenu(new Common.UI.Menu({
+                            restoreHeight: 415,
+                            items: arr
+                        }));
+                        btn.menu.on('item:click', function (menu, item, e) {
+                            me.fireEvent('function:apply', [{name: item.caption, origin: item.value}]);
+                        });
+                    }
+                }
+                btn.setDisabled(arr.length<1);
+            },
+
             fillFunctions: function () {
                 if (this.formulasGroups) {
-                    var me = this;
+                    this.setButtonMenu(this.btnFinancial, 'Financial');
-                    var setMenu = function(btn, name) {
+                    this.setButtonMenu(this.btnLogical, 'Logical');
-                        var i = 0,
+                    this.setButtonMenu(this.btnTextData, 'TextAndData');
-                            length = 0,
+                    this.setButtonMenu(this.btnDateTime, 'DateAndTime');
-                            functions = null,
+                    this.setButtonMenu(this.btnReference, 'LookupAndReference');
-                            arr = [],
+                    this.setButtonMenu(this.btnMath, 'Mathematic');
-                            group = me.formulasGroups.findWhere({name : name});
+                    this.setButtonMenu(this.btnRecent, 'Last10');
 
-                        if (group) {
+                    var formulas = this.btnAutosum.menu.items;
-                            functions = group.get('functions');
+                    for (var i=0; i<Math.min(4,formulas.length); i++) {
-                            functions && functions.forEach(function(item) {
+                        this.api && formulas[i].setCaption(this.api.asc_getFormulaLocaleName(formulas[i].value));
-                                arr.push(new Common.UI.MenuItem({
+                    }
-                                    caption: item.get('name'),
-                                    value: item.get('origin')
-                                }));
-                            });
-                        }
-                        if (arr.length) {
-                            if (btn.menu && btn.menu.rendered) {
-                                btn.menu.removeAll();
-                                arr.forEach(function(item){
-                                    btn.menu.addItem(item);
-                                });
-                            } else {
-                                btn.setMenu(new Common.UI.Menu({
-                                    restoreHeight: 415,
-                                    items: arr
-                                }));
-                                btn.menu.on('item:click', function (menu, item, e) {
-                                    me.fireEvent('function:apply', [{name: item.caption, origin: item.value}]);
-                                });
-                            }
-                        }
-                        btn.setDisabled(arr.length<1);
-                    };
-
-                    setMenu(this.btnFinancial, 'Financial');
-                    setMenu(this.btnLogical, 'Logical');
-                    setMenu(this.btnTextData, 'TextAndData');
-                    setMenu(this.btnDateTime, 'DateAndTime');
-                    setMenu(this.btnReference, 'LookupAndReference');
-                    setMenu(this.btnMath, 'Mathematic');
                 }
             },
 
-            capBtnGroup: 'Group',
+            updateRecent: function() {
-            capBtnUngroup: 'Ungroup',
+                this.formulasGroups && this.setButtonMenu(this.btnRecent, 'Last10');
-            textRows: 'Ungroup rows',
+            },
-            textColumns: 'Ungroup columns',
+
-            textClear: 'Clear outline',
+            setApi: function (api) {
-            tipGroup: 'Group range of cells',
+                this.api = api;
-            tipUngroup: 'Ungroup range of cells',
+            },
-            capBtnTextToCol: 'Text to Columns',
+
-            tipToColumns: 'Separate cell text into columns',
+            txtRecent: 'Recently used',
-            capBtnTextShow: 'Show details',
+            txtAutosum: 'Autosum',
-            capBtnTextHide: 'Hide details'
+            txtAutosumTip: 'Summation',
+            txtAdditional: 'Additional',
+            txtFormula: 'Function',
+            txtFormulaTip: 'Insert function'
         }
     }()), SSE.Views.FormulaTab || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -1616,6 +1616,12 @@
   "SSE.Views.FormulaDialog.textGroupDescription": "Select Function Group",
   "SSE.Views.FormulaDialog.textListDescription": "Select Function",
   "SSE.Views.FormulaDialog.txtTitle": "Insert Function",
+  "SSE.Views.FormulaTab.txtRecent": "Recently used",
+  "SSE.Views.FormulaTab.txtAutosum": "Autosum",
+  "SSE.Views.FormulaTab.txtAutosumTip": "Summation",
+  "SSE.Views.FormulaTab.txtAdditional": "Additional",
+  "SSE.Views.FormulaTab.txtFormula": "Function",
+  "SSE.Views.FormulaTab.txtFormulaTip": "Insert function",
   "SSE.Views.GroupDialog.cancelButtonText": "Cancel",
   "SSE.Views.GroupDialog.okButtonText": "Ok",
   "SSE.Views.GroupDialog.textRows": "Rows",