[SSE] Added PivotTable tab.

apps/common/main/lib/component/CheckBox.js

@@ -99,10 +99,32 @@ define([
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);
 
+            if (this.options.el)
+                this.render();
+        },
+
+        render: function (parentEl) {
             var me = this,
                 el = $(this.el);
+            if (!me.rendered) {
+                if (parentEl) {
+                    this.setElement(parentEl, false);
+                    parentEl.html(this.template({
+                        labelText: this.options.labelText
+                    }));
+                    el = $(this.el);
+                } else {
+                    el.html(this.template({
+                        labelText: this.options.labelText
+                    }));
+                }
 
-            this.render();
+                this.$chk = el.find('input[type=button]');
+                this.$label = el.find('label');
+                this.$chk.on('click', _.bind(this.onItemCheck, this));
+            }
+
+            this.rendered = true;
 
             if (this.options.disabled)
                 this.setDisabled(this.options.disabled);
@@ -111,20 +133,6 @@ define([
                 this.setValue(this.options.value, true);
 
             // handle events
-            this.$chk.on('click', _.bind(this.onItemCheck, this));
-        },
-
-        render: function () {
-            var el = $(this.el);
-            el.html(this.template({
-                labelText: this.options.labelText
-            }));
-
-            this.$chk = el.find('input[type=button]');
-            this.$label = el.find('label');
-
-            this.rendered = true;
-
             return this;
         },
 

apps/common/main/resources/less/combo-dataview.less

@@ -271,4 +271,11 @@
             }
         }
     }
+}
+
+.combo-pivot-template {
+    .combo-template(60px);
+
+    margin-top: -6px;
+    margin-bottom: -6px;
 }

apps/common/main/resources/less/toolbar.less

@@ -227,6 +227,10 @@
         &.x-huge {
             height: 45px;
         }
+
+        .checkbox-indeterminate {
+            margin-top: 3px;
+        }
     }
 }
 

apps/spreadsheeteditor/main/app.js

@@ -155,6 +155,7 @@ require([
             'RightMenu',
             'LeftMenu',
             'Main',
+            'PivotTable',
             'Common.Controllers.Fonts',
             'Common.Controllers.Chat',
             'Common.Controllers.Comments',
@@ -174,6 +175,7 @@ require([
         'spreadsheeteditor/main/app/controller/LeftMenu',
         'spreadsheeteditor/main/app/controller/Main',
         'spreadsheeteditor/main/app/controller/Print',
+        'spreadsheeteditor/main/app/controller/PivotTable',
         'spreadsheeteditor/main/app/view/FileMenuPanels',
         'spreadsheeteditor/main/app/view/ParagraphSettings',
         'spreadsheeteditor/main/app/view/ImageSettings',

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

@@ -908,6 +908,7 @@ define([
                         toolbarController   = application.getController('Toolbar'),
                         statusbarController = application.getController('Statusbar'),
                         rightmenuController = application.getController('RightMenu'),
+                        pivotController     = application.getController('PivotTable'),
                         fontsControllers    = application.getController('Common.Controllers.Fonts');
 
                     fontsControllers    && fontsControllers.setApi(me.api);
@@ -920,6 +921,8 @@ define([
                         statusbarController.getView('Statusbar').changeViewMode(true);
                     }
 
+                    pivotController.setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api);
+
                     var viewport = this.getApplication().getController('Viewport').getView('Viewport');
                     viewport.applyEditorMode();
                     rightmenuController.getView('RightMenu').setMode(me.appOptions).setApi(me.api);

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

@@ -0,0 +1,278 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2017
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+*/
+/**
+ *  PivotTable.js
+ *
+ *  Created by Julia.Radzhabova on 06.27.17
+ *  Copyright (c) 2017 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'spreadsheeteditor/main/app/view/PivotTable'
+], function () {
+    'use strict';
+
+    SSE.Controllers.PivotTable = Backbone.Controller.extend(_.extend({
+        models : [],
+        views : [
+            'PivotTable'
+        ],
+        sdkViewName : '#id_main',
+
+        initialize: function () {
+
+            this.addListeners({
+                'PivotTable': {
+                    // comments handlers
+                    'pivottable:rowscolumns':   _.bind(this.onCheckTemplateChange, this),
+                    'pivottable:create':        _.bind(this.onCreateClick, this),
+                    'pivottable:style':         _.bind(this.onPivotStyleSelect, this)
+                }
+            });
+        },
+        onLaunch: function () {
+            this._state = {
+                TableName: '',
+                TemplateName: '',
+                RowHeader: undefined,
+                RowBanded: undefined,
+                ColHeader: undefined,
+                ColBanded: undefined,
+                DisabledControls: false
+            };
+            this._originalProps = null;
+
+            this.view =   this.createView('PivotTable');
+
+            Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
+            Common.NotificationCenter.on('api:disconnect', _.bind(this.SetDisabled, this));
+        },
+
+        setConfig: function (data, api) {
+            this.setApi(api);
+
+            if (data) {
+                this.sdkViewName        =   data['sdkviewname'] || this.sdkViewName;
+            }
+        },
+
+        setApi: function (api) {
+            if (api) {
+                this.api = api;
+                this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.SetDisabled, this));
+                this.api.asc_registerCallback('asc_onSendThemeColors',      _.bind(this.onSendThemeColors, this));
+                this.api.asc_registerCallback('asc_onSelectionChanged',     _.bind(this.onSelectionChanged, this));
+            }
+        },
+
+        setMode: function(mode) {
+            this.appConfig = mode;
+            return this;
+        },
+
+        SetDisabled: function() {
+            this.view && this.view.SetDisabled(true);
+        },
+
+        // helpers
+
+        onCheckTemplateChange: function(type, value) {
+            // this._state[stateName] = undefined;
+            // if (this.api)
+            //     this.api.asc_changeFormatTableInfo(this._state.TableName, type, value=='checked');
+            // for test
+            switch (type) {
+                case 0:
+                    this._originalProps.asc_getStyleInfo().asc_putShowRowHeaders(value=='checked');
+                    break;
+                case 1:
+                    this._originalProps.asc_getStyleInfo().asc_putShowColHeaders(value=='checked');
+                    break;
+                case 2:
+                    this._originalProps.asc_getStyleInfo().asc_putShowRowBanded(value=='checked');
+                    break;
+                case 3:
+                    this._originalProps.asc_getStyleInfo().asc_putShowColBanded(value=='checked');
+                    break;
+            }
+            // this.onApiInitPivotStyles(this.api.asc_getTablePictures(this._originalProps.asc_getStyleInfo(), true));
+            this.onApiInitPivotStyles(this.api.asc_getTablePictures(null, true));
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onCreateClick: function(btn, opts){
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onPivotStyleSelect: function(combo, record){
+            if (this.api && !this._noApply) {
+                // this.api.asc_changeAutoFilter(this._state.TableName, Asc.c_oAscChangeFilterOptions.style, record.get('name'));
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        ChangeSettings: function(props) {
+            if (props )
+            {
+                this._originalProps = props;
+
+                var view = this.view,
+                    needTablePictures = false,
+                    styleInfo = props.asc_getStyleInfo(),
+                    value = styleInfo.asc_getShowRowHeaders();
+                if (this._state.RowHeader!==value) {
+                    view.chRowHeader.setValue(value, true);
+                    this._state.RowHeader=value;
+                    needTablePictures = true;
+                }
+
+                value = styleInfo.asc_getShowColHeaders();
+                if (this._state.RowBanded!==value) {
+                    view.chRowBanded.setValue(value, true);
+                    this._state.RowBanded=value;
+                    needTablePictures = true;
+                }
+
+                value = styleInfo.asc_getShowColStripes();
+                if (this._state.ColHeader!==value) {
+                    view.chColHeader.setValue(value, true);
+                    this._state.ColHeader=value;
+                    needTablePictures = true;
+                }
+
+                value = styleInfo.asc_getShowRowStripes();
+                if (this._state.ColBanded!==value) {
+                    view.chColBanded.setValue(value, true);
+                    this._state.ColBanded=value;
+                    needTablePictures = true;
+                }
+
+                if (needTablePictures)
+                    // this.onApiInitPivotStyles(this.api.asc_getTablePictures(styleInfo, true));
+                    this.onApiInitPivotStyles(this.api.asc_getTablePictures(null, true));
+
+                //for table-template
+                value = styleInfo.asc_getName();
+                if (this._state.TemplateName!==value || this._isTemplatesChanged) {
+                    view.pivotStyles.suspendEvents();
+                    var rec = view.pivotStyles.menuPicker.store.findWhere({
+                        name: value
+                    });
+                    view.pivotStyles.menuPicker.selectRecord(rec);
+                    view.pivotStyles.resumeEvents();
+
+                    if (this._isTemplatesChanged) {
+                        if (rec)
+                            view.pivotStyles.fillComboView(view.pivotStyles.menuPicker.getSelectedRec()[0],true);
+                        else
+                            view.pivotStyles.fillComboView(view.pivotStyles.menuPicker.store.at(0), true);
+                    }
+                    this._state.TemplateName=value;
+                }
+                this._isTemplatesChanged = false;
+            }
+        },
+
+        onSendThemeColors: function() {
+            // get new table templates
+            if (this.view.pivotStyles && this._originalProps) {
+                // this.onApiInitPivotStyles(this.api.asc_getTablePictures(this._originalProps.asc_getStyleInfo(), true));
+                this.onApiInitPivotStyles(this.api.asc_getTablePictures(null, true));
+                this.view.pivotStyles.menuPicker.scroller.update({alwaysVisibleY: true});
+            }
+        },
+
+        onApiInitPivotStyles: function(Templates){
+            var self = this,
+                styles = this.view.pivotStyles;
+            this._isTemplatesChanged = true;
+
+            var count = styles.menuPicker.store.length;
+            if (count>0 && count==Templates.length) {
+                var data = styles.menuPicker.store.models;
+                _.each(Templates, function(template, index){
+                    data[index].set('imageUrl', template.asc_getImage());
+                });
+            } else {
+                styles.menuPicker.store.reset([]);
+                var arr = [];
+                _.each(Templates, function(template){
+                    arr.push({
+                        id          : Common.UI.getId(),
+                        name        : template.asc_getName(),
+                        caption     : template.asc_getDisplayName(),
+                        type        : template.asc_getType(),
+                        imageUrl    : template.asc_getImage(),
+                        allowSelected : true,
+                        selected    : false,
+                        tip         : template.asc_getDisplayName()
+                    });
+                });
+                styles.menuPicker.store.add(arr);
+            }
+        },
+
+        onSelectionChanged: function(info) {
+            if (this.rangeSelectionMode || !this.appConfig.isEdit) return;
+
+            var selectType = info.asc_getFlags().asc_getSelectionType(),
+                pivotInfo = info.asc_getPivotTableInfo();
+
+            var need_disable = info.asc_getLocked();
+
+            this.view.SetDisabled(!pivotInfo);
+            if (pivotInfo)
+                this.ChangeSettings(pivotInfo);
+        },
+
+        createToolbarPanel: function() {
+            return this.view.getPanel();
+        },
+
+        getView: function(name) {
+            return !name && this.view ?
+                this.view : Backbone.Controller.prototype.getView.call(this, name);
+        },
+
+        onAppReady: function (config) {
+            var me = this;
+            (new Promise(function (resolve) {
+                resolve();
+            })).then(function () {
+            });
+        }
+
+    }, SSE.Controllers.PivotTable || {}));
+});

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

@@ -46,6 +46,7 @@ define([
     'common/main/lib/util/define',
     'spreadsheeteditor/main/app/view/Toolbar',
     'spreadsheeteditor/main/app/collection/TableTemplates',
+    'spreadsheeteditor/main/app/controller/PivotTable',
     'spreadsheeteditor/main/app/view/HyperlinkSettingsDialog',
     'spreadsheeteditor/main/app/view/TableOptionsDialog',
     'spreadsheeteditor/main/app/view/NamedRangeEditDlg',
@@ -2884,6 +2885,15 @@ define([
 
                 if ( config.isEdit )
                     me.toolbar.setApi(me.api);
+
+                if ( !config.isEditDiagram && !config.isEditMailMerge ) {
+                    var tab = {action: 'pivot', caption: me.textPivot};
+                    var $panel = me.getApplication().getController('PivotTable').createToolbarPanel();
+
+                    if ( $panel ) {
+                        me.toolbar.addTab(tab, $panel, 3);
+                    }
+                }
             });
         },
 
@@ -3286,7 +3296,8 @@ define([
         warnLongOperation: 'The operation you are about to perform might take rather much time to complete.<br>Are you sure you want to continue?',
         txtInvalidRange: 'ERROR! Invalid cells range',
         errorMaxRows: 'ERROR! The maximum number of data series per chart is 255.',
-        errorStockChart: 'Incorrect row order. To build a stock chart place the data on the sheet in the following order:<br> opening price, max price, min price, closing price.'
+        errorStockChart: 'Incorrect row order. To build a stock chart place the data on the sheet in the following order:<br> opening price, max price, min price, closing price.',
+        textPivot: 'Pivot Table'
 
     }, SSE.Controllers.Toolbar || {}));
 });

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

@@ -0,0 +1,212 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2017
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+*/
+/**
+ *  PivotTable.js
+ *
+ *  View
+ *
+ *  Created by Julia.Radzhabova on 06.27.17
+ *  Copyright (c) 2017 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    // 'text!spreadsheeteditor/main/app/template/PivotTableSettings.template',
+    'common/main/lib/util/utils',
+    'common/main/lib/component/Button',
+    'common/main/lib/component/ComboDataView',
+    'common/main/lib/component/Layout'
+], function (menuTemplate) {
+    'use strict';
+
+    SSE.Views.PivotTable = Common.UI.BaseView.extend(_.extend((function(){
+        var template =
+            '<section id="pivot-table-panel" class="panel" data-tab="pivot">' +
+                '<div class="group">' +
+                    '<span id="slot-btn-add-pivot" class="btn-slot text x-huge"></span>' +
+                '</div>' +
+                '<div class="separator long"/>' +
+                '<div class="group">' +
+                    '<div class="elset">' +
+                        '<span class="btn-slot text" id="slot-chk-header-row"></span>' +
+                    '</div>' +
+                    '<div class="elset">' +
+                        '<span class="btn-slot text" id="slot-chk-header-column"></span>' +
+                    '</div>' +
+                '</div>' +
+                '<div class="group">' +
+                    '<div class="elset">' +
+                        '<span class="btn-slot text" id="slot-chk-banded-row"></span>' +
+                    '</div>' +
+                    '<div class="elset">' +
+                        '<span class="btn-slot text" id="slot-chk-banded-column"></span>' +
+                    '</div>' +
+                '</div>' +
+                '<div class="group" id="slot-field-pivot-styles" style="width: 347px;">' +
+                '</div>' +
+            '</section>';
+
+        function setEvents() {
+            var me = this;
+
+            this.btnAddPivot.on('click', function (e) {
+                me.fireEvent('pivottable:create');
+            });
+
+            this.chRowHeader.on('change', function (field, value) {
+                me.fireEvent('pivottable:rowscolumns', [0, value]);
+            });
+            this.chColHeader.on('change', function (field, value) {
+                me.fireEvent('pivottable:rowscolumns', [1, value]);
+            });
+            this.chRowBanded.on('change', function (field, value) {
+                me.fireEvent('pivottable:rowscolumns', [2, value]);
+            });
+            this.chColBanded.on('change', function (field, value) {
+                me.fireEvent('pivottable:rowscolumns', [3, value]);
+            });
+
+            this.pivotStyles.on('click', function (combo, record) {
+                me.fireEvent('pivottable:style', [record]);
+            });
+            this.pivotStyles.openButton.menu.on('show:after', function () {
+                me.pivotStyles.menuPicker.scroller.update({alwaysVisibleY: true});
+            });
+        }
+
+        return {
+            options: {},
+
+            initialize: function (options) {
+                Common.UI.BaseView.prototype.initialize.call(this, options);
+
+                this.appConfig = options.mode;
+                this.lockedControls = [];
+
+                this.chRowHeader = new Common.UI.CheckBox({
+                    labelText: this.textRowHeader
+                });
+                this.lockedControls.push(this.chRowHeader);
+
+                this.chColHeader = new Common.UI.CheckBox({
+                    labelText: this.textColHeader
+                });
+                this.lockedControls.push(this.chColHeader);
+
+                this.chRowBanded = new Common.UI.CheckBox({
+                    labelText: this.textRowBanded
+                });
+                this.lockedControls.push(this.chRowBanded);
+
+                this.chColBanded = new Common.UI.CheckBox({
+                    labelText: this.textColBanded
+                });
+                this.lockedControls.push(this.chColBanded);
+
+                this.btnAddPivot = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-ic-docspell',
+                    caption: this.txtCreate
+                });
+                // this.lockedControls.push(this.btnAddPivot);
+
+                this.pivotStyles = new Common.UI.ComboDataView({
+                    cls             : 'combo-pivot-template',
+                    enableKeyEvents : true,
+                    itemWidth       : 61,
+                    itemHeight      : 49,
+                    menuMaxHeight   : 300
+                    // lock            : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth]
+                });
+                this.lockedControls.push(this.pivotStyles);
+
+                Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
+            },
+
+            render: function (el) {
+                this.boxSdk = $('#editor_sdk');
+                if ( el ) el.html( this.getPanel() );
+
+                return this;
+            },
+
+            onAppReady: function (config) {
+                var me = this;
+                (new Promise(function (accept, reject) {
+                    accept();
+                })).then(function(){
+                    me.btnAddPivot.updateHint(me.tipCreatePivot);
+
+                    setEvents.call(me);
+                });
+            },
+
+            getPanel: function () {
+                this.$el = $(_.template(template)( {} ));
+
+                this.chRowHeader.render(this.$el.find('#slot-chk-header-row'));
+                this.chColHeader.render(this.$el.find('#slot-chk-header-column'));
+                this.chRowBanded.render(this.$el.find('#slot-chk-banded-row'));
+                this.chColBanded.render(this.$el.find('#slot-chk-banded-column'));
+
+                this.btnAddPivot.render(this.$el.find('#slot-btn-add-pivot'));
+                this.pivotStyles.render(this.$el.find('#slot-field-pivot-styles'));
+
+                return this.$el;
+            },
+
+            show: function () {
+                Common.UI.BaseView.prototype.show.call(this);
+                this.fireEvent('show', this);
+            },
+
+            getButton: function(type, parent) {
+            },
+
+            SetDisabled: function (state) {
+                this.lockedControls && this.lockedControls.forEach(function(button) {
+                    if ( button ) {
+                        button.setDisabled(state);
+                    }
+                }, this);
+            },
+
+            txtCreate: 'Insert Table',
+            tipCreatePivot: 'Insert Pivot Table',
+            textRowHeader: 'Row Headers',
+            textColHeader: 'Column Headers',
+            textRowBanded: 'Banded Rows',
+            textColBanded: 'Banded Columns'
+        }
+    }()), SSE.Views.PivotTable || {}));
+});

apps/spreadsheeteditor/main/app_dev.js

@@ -145,6 +145,7 @@ require([
             'RightMenu',
             'LeftMenu',
             'Main',
+            'PivotTable',
             'Common.Controllers.Fonts',
             'Common.Controllers.Chat',
             'Common.Controllers.Comments',
@@ -164,6 +165,7 @@ require([
         'spreadsheeteditor/main/app/controller/LeftMenu',
         'spreadsheeteditor/main/app/controller/Main',
         'spreadsheeteditor/main/app/controller/Print',
+        'spreadsheeteditor/main/app/controller/PivotTable',
         'spreadsheeteditor/main/app/view/FileMenuPanels',
         'spreadsheeteditor/main/app/view/ParagraphSettings',
         'spreadsheeteditor/main/app/view/ImageSettings',