[SSE] Add data tab. Add group/ungroup cells

apps/spreadsheeteditor/main/app.js

@@ -156,6 +156,7 @@ require([
             'LeftMenu',
             'Main',
             'PivotTable',
+            'DataTab',
             'Common.Controllers.Fonts',
             'Common.Controllers.Chat',
             'Common.Controllers.Comments',
@@ -178,6 +179,7 @@ require([
         'spreadsheeteditor/main/app/controller/Main',
         'spreadsheeteditor/main/app/controller/Print',
         'spreadsheeteditor/main/app/controller/PivotTable',
+        'spreadsheeteditor/main/app/controller/DataTab',
         'spreadsheeteditor/main/app/view/FileMenuPanels',
         'spreadsheeteditor/main/app/view/ParagraphSettings',
         'spreadsheeteditor/main/app/view/ImageSettings',

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

@@ -0,0 +1,145 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ *  DataTab.js
+ *
+ *  Created by Julia Radzhabova on 30.05.2019
+ *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'spreadsheeteditor/main/app/view/DataTab',
+    'spreadsheeteditor/main/app/view/GroupDialog'
+], function () {
+    'use strict';
+
+    SSE.Controllers.DataTab = Backbone.Controller.extend(_.extend({
+        models : [],
+        collections : [
+        ],
+        views : [
+            'DataTab'
+        ],
+        sdkViewName : '#id_main',
+
+        initialize: function () {
+
+            this.addListeners({
+                'DataTab': {
+                    'data:group': this.onGroup,
+                    'data:ungroup': this.onUngroup
+                }
+            });
+        },
+        onLaunch: function () {
+        },
+
+        setApi: function (api) {
+            if (api) {
+                this.api = api;
+                this.api.asc_registerCallback('asc_onSelectionChanged',     _.bind(this.onSelectionChanged, this));
+                this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onCoAuthoringDisconnect, this));
+                Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
+            }
+            return this;
+        },
+
+        setConfig: function(config) {
+            this.toolbar = config.toolbar;
+            this.view = this.createView('DataTab', {
+                toolbar: this.toolbar.toolbar
+            });
+        },
+
+        SetDisabled: function(state) {
+            this.view && this.view.SetDisabled(state);
+        },
+
+        getView: function(name) {
+            return !name && this.view ?
+                this.view : Backbone.Controller.prototype.getView.call(this, name);
+        },
+
+        onCoAuthoringDisconnect: function() {
+            this.SetDisabled(true);
+        },
+
+        onSelectionChanged: function(info) {
+            // special disable conditions
+        },
+
+        onUngroup: function(type) {
+            var me = this;
+            if (type=='rows') {
+                me.api.asc_ungroup(true)
+            } else if (type=='columns') {
+                me.api.asc_ungroup(false)
+            } else if (type=='clear') {
+                me.api.asc_clearOutline();
+            } else
+                (new SSE.Views.GroupDialog({
+                    title: me.view.capBtnUngroup,
+                    props: 'rows',
+                    handler: function (dlg, result) {
+                        if (result=='ok') {
+                            me.api.asc_ungroup(dlg.getSettings());
+                        }
+                        Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                    }
+                })).show();
+            Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+        },
+
+        onGroup: function(btn) {
+            var me = this,
+                val = me.api.asc_checkAddGroup();
+            if (val===null) {
+                (new SSE.Views.GroupDialog({
+                    title: me.view.capBtnGroup,
+                    props: 'rows',
+                    handler: function (dlg, result) {
+                        if (result=='ok') {
+                            me.api.asc_group(dlg.getSettings());
+                        }
+                        Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                    }
+                })).show();
+            } else if (val!==undefined) //undefined - error, true - rows, false - columns
+                me.api.asc_group(val);
+        }
+
+    }, SSE.Controllers.DataTab || {}));
+});

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

@@ -3104,11 +3104,15 @@ define([
                     me.toolbar.setApi(me.api);
 
                     if ( !config.isEditDiagram && !config.isEditMailMerge ) {
+                        var datatab = me.getApplication().getController('DataTab');
+                        datatab.setApi(me.api).setConfig({toolbar: me});
+                        Array.prototype.push.apply(me.toolbar.lockControls, datatab.getView('DataTab').getButtons());
+
                         if ( !config.isOffline ) {
                             tab = {action: 'pivot', caption: me.textPivot};
                             $panel = me.getApplication().getController('PivotTable').createToolbarPanel();
                             if ($panel) {
-                                me.toolbar.addTab(tab, $panel, 3);
+                                me.toolbar.addTab(tab, $panel, 4);
                                 me.toolbar.setVisible('pivot', true);
                             }
                         }
@@ -3116,7 +3120,7 @@ define([
                         var tab = {action: 'review', caption: me.toolbar.textTabCollaboration};
                         var $panel = me.getApplication().getController('Common.Controllers.ReviewChanges').createToolbarPanel();
                         if ( $panel )
-                            me.toolbar.addTab(tab, $panel, 4);
+                            me.toolbar.addTab(tab, $panel, 5);
 
                         if (!(config.customization && config.customization.compactHeader)) {
                             // hide 'print' and 'save' buttons group and next separator
@@ -3135,7 +3139,7 @@ define([
                                 tab = {action: 'protect', caption: me.toolbar.textTabProtect};
                                 $panel = me.getApplication().getController('Common.Controllers.Protection').createToolbarPanel();
                                 if ($panel)
-                                    me.toolbar.addTab(tab, $panel, 5);
+                                    me.toolbar.addTab(tab, $panel, 6);
                             }
                         }
                     }

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

@@ -152,6 +152,12 @@
                     <span class="btn-slot text x-huge" id="slot-img-movebkwd"></span>
                 </div>
             </section>
+            <section class="panel" data-tab="data">
+                <div class="group">
+                    <span class="btn-slot text x-huge" id="slot-btn-group"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-ungroup"></span>
+                </div>
+            </section>
         </section>
     </section>
 </section>

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

@@ -0,0 +1,160 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+/**
+ *  DataTab.js
+ *
+ *  Created by Julia Radzhabova on 30.05.2019
+ *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/BaseView',
+    'common/main/lib/component/Layout'
+], function () {
+    'use strict';
+
+    SSE.Views.DataTab = Common.UI.BaseView.extend(_.extend((function(){
+        function setEvents() {
+            var me = this;
+            me.btnUngroup.menu.on('item:click', function (menu, item, e) {
+                me.fireEvent('data:ungroup', [item.value]);
+            });
+            me.btnUngroup.on('click', function (b, e) {
+                me.fireEvent('data:ungroup');
+            });
+
+            me.btnGroup.on('click', function (b, e) {
+                me.fireEvent('data:group');
+            });
+        }
+
+        return {
+            options: {},
+
+            initialize: function (options) {
+                Common.UI.BaseView.prototype.initialize.call(this);
+                this.toolbar = options.toolbar;
+
+                this.lockedControls = [];
+
+                var me = this,
+                    $host = me.toolbar.$el,
+                    _set = SSE.enumLock;
+
+                var _injectComponent = function (id, cmp) {
+                    var $slot = $host.find(id);
+                    if ($slot.length)
+                        cmp.rendered ? $slot.append(cmp.$el) : cmp.render($slot);
+                };
+
+                this.btnGroup = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-img-group',
+                    caption: this.capBtnGroup,
+                    split: false,
+                    disabled: true,
+                    lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth]
+                });
+                _injectComponent('#slot-btn-group', this.btnGroup);
+                this.lockedControls.push(this.btnGroup);
+
+                this.btnUngroup = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-img-group',
+                    caption: this.capBtnUngroup,
+                    split: true,
+                    menu: true,
+                    disabled: true,
+                    lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth]
+                });
+                _injectComponent('#slot-btn-ungroup', this.btnUngroup);
+                this.lockedControls.push(this.btnUngroup);
+
+                this._state = {disabled: false};
+                Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
+            },
+
+            render: function (el) {
+                return this;
+            },
+
+            onAppReady: function (config) {
+                var me = this;
+                (new Promise(function (accept, reject) {
+                    accept();
+                })).then(function(){
+                    me.btnUngroup.updateHint( me.tipUngroup );
+                    var _menu = new Common.UI.Menu({
+                        items: [
+                            {caption: me.textRows, value: 'rows'},
+                            {caption: me.textColumns, value: 'columns'},
+                            {caption: me.textClear, value: 'clear'}
+                        ]
+                    });
+                    me.btnUngroup.setMenu(_menu);
+
+                    me.btnGroup.updateHint(me.tipGroup);
+
+                    setEvents.call(me);
+                });
+            },
+
+            show: function () {
+                Common.UI.BaseView.prototype.show.call(this);
+                this.fireEvent('show', this);
+            },
+
+            getButtons: function() {
+                return this.lockedControls;
+            },
+
+            SetDisabled: function (state) {
+                this.lockedControls && this.lockedControls.forEach(function(button) {
+                    if ( button ) {
+                        button.setDisabled(state);
+                    }
+                }, this);
+            },
+
+            capBtnGroup: 'Group',
+            capBtnUngroup: 'Ungroup',
+            textRows: 'Ungroup rows',
+            textColumns: 'Ungroup columns',
+            textClear: 'Clear outline',
+            tipGroup: 'Group range of cells',
+            tipUngroup: 'Ungroup range of cells'
+        }
+    }()), SSE.Views.DataTab || {}));
+});

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

@@ -0,0 +1,119 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+/**
+ *  GroupDialog.js
+ *
+ *  Created by Julia Radzhabova on 30.05.2019
+ *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
+ *
+ */
+define([
+    'common/main/lib/component/Window',
+    'common/main/lib/component/ComboBox'
+], function () { 'use strict';
+
+    SSE.Views.GroupDialog = Common.UI.Window.extend(_.extend({
+        options: {
+            width: 214,
+            header: true,
+            style: 'min-width: 214px;',
+            cls: 'modal-dlg'
+        },
+
+        initialize : function(options) {
+            _.extend(this.options, options || {});
+
+            this.template = [
+                '<div class="box">',
+                '<div id="group-radio-rows" style="margin-bottom: 5px;"></div>',
+                '<div id="group-radio-cols"></div>',
+                '<div class="footer center">',
+                '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;">' + this.okButtonText + '</button>',
+                '<button class="btn normal dlg-btn" result="cancel">' + this.cancelButtonText + '</button>',
+                '</div>'
+            ].join('');
+
+            this.options.tpl = _.template(this.template)(this.options);
+
+            Common.UI.Window.prototype.initialize.call(this, this.options);
+        },
+
+        render: function() {
+            Common.UI.Window.prototype.render.call(this);
+
+            this.radioRows = new Common.UI.RadioBox({
+                el: $('#group-radio-rows'),
+                labelText: this.textRows,
+                name: 'asc-radio-group-cells',
+                checked: this.options.props=='rows'
+            });
+
+            this.radioColumns = new Common.UI.RadioBox({
+                el: $('#group-radio-cols'),
+                labelText: this.textColumns,
+                name: 'asc-radio-group-cells',
+                checked: this.options.props=='columns'
+            });
+            (this.options.props=='rows') ? this.radioRows.setValue(true) : this.radioColumns.setValue(true);
+
+            var $window = this.getChild();
+            $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
+        },
+
+        _handleInput: function(state) {
+            if (this.options.handler) {
+                this.options.handler.call(this, this, state);
+            }
+
+            this.close();
+        },
+
+        onBtnClick: function(event) {
+            this._handleInput(event.currentTarget.attributes['result'].value);
+        },
+
+        getSettings: function() {
+            return this.radioRows.getValue();
+        },
+
+        onPrimary: function() {
+            this._handleInput('ok');
+            return false;
+        },
+
+        cancelButtonText: 'Cancel',
+        okButtonText:   'Ok',
+        textRows: 'Rows',
+        textColumns: 'Columns'
+    }, SSE.Views.GroupDialog || {}))
+});

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

@@ -311,7 +311,8 @@ define([
                         { caption: me.textTabFile, action: 'file', extcls: 'canedit', haspanel:false},
                         { caption: me.textTabHome, action: 'home', extcls: 'canedit'},
                         { caption: me.textTabInsert, action: 'ins', extcls: 'canedit'},
-                        {caption: me.textTabLayout, action: 'layout', extcls: 'canedit'}
+                        {caption: me.textTabLayout, action: 'layout', extcls: 'canedit'},
+                        {caption: me.textTabData, action: 'data', extcls: 'canedit'}
                     ]}
                 );
 
@@ -2430,6 +2431,7 @@ define([
         textAddPrintArea: 'Add to Print Area',
         tipPrintArea: 'Print Area',
         capBtnInsHeader: 'Header/Footer',
-        tipEditHeader: 'Edit header or footer'
+        tipEditHeader: 'Edit header or footer',
+        textTabData: 'Data'
     }, SSE.Views.Toolbar || {}));
 });

apps/spreadsheeteditor/main/app_dev.js

@@ -146,6 +146,7 @@ require([
             'LeftMenu',
             'Main',
             'PivotTable',
+            'DataTab',
             'Common.Controllers.Fonts',
             'Common.Controllers.Chat',
             'Common.Controllers.Comments',
@@ -168,6 +169,7 @@ require([
         'spreadsheeteditor/main/app/controller/Main',
         'spreadsheeteditor/main/app/controller/Print',
         'spreadsheeteditor/main/app/controller/PivotTable',
+        'spreadsheeteditor/main/app/controller/DataTab',
         'spreadsheeteditor/main/app/view/FileMenuPanels',
         'spreadsheeteditor/main/app/view/ParagraphSettings',
         'spreadsheeteditor/main/app/view/ImageSettings',

apps/spreadsheeteditor/main/locale/en.json

@@ -1317,6 +1317,13 @@
   "SSE.Views.ChartSettingsDlg.textYAxisTitle": "Y Axis Title",
   "SSE.Views.ChartSettingsDlg.textZero": "Zero",
   "SSE.Views.ChartSettingsDlg.txtEmpty": "This field is required",
+  "SSE.Views.DataTab.capBtnGroup": "Group",
+  "SSE.Views.DataTab.capBtnUngroup": "Ungroup",
+  "SSE.Views.DataTab.textRows": "Ungroup rows",
+  "SSE.Views.DataTab.textColumns": "Ungroup columns",
+  "SSE.Views.DataTab.textClear": "Clear outline",
+  "SSE.Views.DataTab.tipGroup": "Group range of cells",
+  "SSE.Views.DataTab.tipUngroup": "Ungroup range of cells",
   "SSE.Views.DigitalFilterDialog.cancelButtonText": "Cancel",
   "SSE.Views.DigitalFilterDialog.capAnd": "And",
   "SSE.Views.DigitalFilterDialog.capCondition1": "equals",
@@ -1582,6 +1589,10 @@
   "SSE.Views.FormulaDialog.textGroupDescription": "Select Function Group",
   "SSE.Views.FormulaDialog.textListDescription": "Select Function",
   "SSE.Views.FormulaDialog.txtTitle": "Insert Function",
+  "SSE.Views.GroupDialog.cancelButtonText": "Cancel",
+  "SSE.Views.GroupDialog.okButtonText": "Ok",
+  "SSE.Views.GroupDialog.textRows": "Rows",
+  "SSE.Views.GroupDialog.textColumns": "Columns",
   "SSE.Views.HeaderFooterDialog.cancelButtonText": "Cancel",
   "SSE.Views.HeaderFooterDialog.okButtonText": "Ok",
   "SSE.Views.HeaderFooterDialog.tipFontName": "Font",
@@ -2337,6 +2348,7 @@
   "SSE.Views.Toolbar.txtYen": "¥ Yen",
   "SSE.Views.Toolbar.capBtnInsHeader": "Header/Footer",
   "SSE.Views.Toolbar.tipEditHeader": "Edit header or footer",
+  "SSE.Views.Toolbar.textTabData": "Data",
   "SSE.Views.Top10FilterDialog.cancelButtonText": "Cancel",
   "SSE.Views.Top10FilterDialog.okButtonText": "OK",
   "SSE.Views.Top10FilterDialog.textType": "Show",