[SSE] Insert slicers. Bug 30397

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

@@ -58,7 +58,8 @@ define([
     'spreadsheeteditor/main/app/view/PageMarginsDialog',
     'spreadsheeteditor/main/app/view/HeaderFooterDialog',
     'spreadsheeteditor/main/app/view/PrintTitlesDialog',
-    'spreadsheeteditor/main/app/view/ScaleDialog'
+    'spreadsheeteditor/main/app/view/ScaleDialog',
+    'spreadsheeteditor/main/app/view/SlicerAddDialog'
 ], function () { 'use strict';
 
     SSE.Controllers.Toolbar = Backbone.Controller.extend(_.extend({
@@ -328,6 +329,7 @@ define([
                 toolbar.btnInsertShape.menu.on('hide:after',                _.bind(this.onInsertShapeHide, this));
                 toolbar.btnInsertEquation.on('click',                       _.bind(this.onInsertEquationClick, this));
                 toolbar.btnInsertSymbol.on('click',                         _.bind(this.onInsertSymbolClick, this));
+                toolbar.btnInsertSlicer.on('click',                         _.bind(this.onInsertSlicerClick, this));
                 toolbar.btnTableTemplate.menu.on('show:after',              _.bind(this.onTableTplMenuOpen, this));
                 toolbar.btnPercentStyle.on('click',                         _.bind(this.onNumberFormat, this));
                 toolbar.btnCurrencyStyle.on('click',                        _.bind(this.onNumberFormat, this));
@@ -2759,6 +2761,22 @@ define([
             }
         },
 
+        onInsertSlicerClick: function() {
+            var me = this,
+                props = me.api.asc_beforeInsertSlicer();
+            if (props) {
+                (new SSE.Views.SlicerAddDialog({
+                    props: props,
+                    handler: function (result, settings) {
+                        if (me && me.api) {
+                            me.api.asc_insertSlicer(settings);
+                        }
+                        Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                    }
+                })).show();
+            }
+        },
+
         onApiMathTypes: function(equation) {
             this._equationTemp = equation;
             var me = this;

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

@@ -144,6 +144,10 @@
                     <span class="btn-slot text x-huge" id="slot-btn-insequation"></span>
                     <span class="btn-slot text x-huge" id="slot-btn-inssymbol"></span>
                 </div>
+                <div class="separator long"></div>
+                <div class="group">
+                    <span class="btn-slot text x-huge" id="slot-btn-insslicer"></span>
+                </div>
             </section>
             <section class="panel" data-tab="layout">
                 <div class="group">

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

@@ -40,7 +40,7 @@
 
 define([
     'common/main/lib/component/Window',
-    'common/main/lib/component/ComboBox',
+    'common/main/lib/component/CheckBox',
     'common/main/lib/component/ListView'
 ], function () {
     'use strict';

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

@@ -0,0 +1,234 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2020
+ *
+ * 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
+ *
+ */
+/**
+ *  SlicerAddDialog.js
+ *
+ *  Created by Julia Radzhabova on 10.04.2020
+ *  Copyright (c) 2020 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/component/Window',
+    'common/main/lib/component/ListView'
+], function () {
+    'use strict';
+
+    SSE.Views.SlicerAddDialog = Common.UI.Window.extend(_.extend({
+        options: {
+            width: 250,
+            style: 'min-width: 230px;',
+            cls: 'modal-dlg',
+            buttons: ['ok', 'cancel']
+        },
+
+        initialize : function (options) {
+            var t = this,
+                _options = {};
+
+            _.extend(this.options, {
+                title: this.txtTitle
+            }, options || {});
+
+            this.template = [
+                '<div class="box" style="height: 195px;">',
+                    '<div class="input-row">',
+                        '<label style="font-weight: bold;">' + this.textColumns + '</label>',
+                    '</div>',
+                    '<div id="add-slicers-dlg-columns" class="" style="width: 100%; height: 162px; overflow: hidden;"></div>',
+                '</div>'
+            ].join('');
+
+            this.options.tpl = _.template(this.template)(this.options);
+            this.props = this.options.props;
+            this.handler =   this.options.handler;
+
+            Common.UI.Window.prototype.initialize.call(this, this.options);
+        },
+        render: function () {
+            Common.UI.Window.prototype.render.call(this);
+
+            this.columnsList = new Common.UI.ListView({
+                el: $('#add-slicers-dlg-columns', this.$window),
+                store: new Common.UI.DataViewStore(),
+                simpleAddMode: true,
+                scrollAlwaysVisible: true,
+                template: _.template(['<div class="listview inner" style=""></div>'].join('')),
+                itemTemplate: _.template([
+                    '<div>',
+                    '<label class="checkbox-indeterminate" style="position:absolute;">',
+                    '<input id="rdcheckbox-<%= id %>" type="checkbox" class="button__checkbox">',
+                    '<label for="rdcheckbox-<%= id %>" class="checkbox__shape" />',
+                    '</label>',
+                    '<div id="<%= id %>" class="list-item" style="pointer-events:none; margin-left: 20px;display: flex;">',
+                    '<div style="flex-grow: 1;"><%= Common.Utils.String.htmlEncode(value) %></div>',
+                    '</div>',
+                    '</div>'
+                ].join(''))
+            });
+            this.columnsList.on({
+                'item:change': this.onItemChanged.bind(this),
+                'item:add': this.onItemChanged.bind(this),
+                'item:select': this.onCellCheck.bind(this)
+            });
+            this.columnsList.onKeyDown = _.bind(this.onListKeyDown, this);
+
+            this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
+            this.afterRender();
+        },
+
+        updateColumnsList: function(props) {
+            var arr = [];
+            if (props && props.length>0) {
+                this.props.forEach(function (item, index) {
+                    arr.push(new Common.UI.DataViewModel({
+                        id              : index,
+                        selected        : false,
+                        allowSelected   : true,
+                        value           : item,
+                        check           : false
+                    }));
+                });
+
+                this.columnsList.store.reset(arr);
+                this.columnsList.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true, suppressScrollX: true});
+            }
+        },
+
+        onItemChanged: function (view, record) {
+            var state = record.model.get('check');
+            if ( state == 'indeterminate' )
+                $('input[type=checkbox]', record.$el).prop('indeterminate', true);
+            else $('input[type=checkbox]', record.$el).prop({checked: state, indeterminate: false});
+        },
+
+        onCellCheck: function (listView, itemView, record) {
+            if (this.checkCellTrigerBlock)
+                return;
+
+            var target = '', isLabel = false, bound = null;
+
+            var event = window.event ? window.event : window._event;
+            if (event) {
+                target = $(event.currentTarget).find('.list-item');
+
+                if (target.length) {
+                    bound = target.get(0).getBoundingClientRect();
+                    var _clientX = event.clientX*Common.Utils.zoom(),
+                        _clientY = event.clientY*Common.Utils.zoom();
+                    if (bound.left < _clientX && _clientX < bound.right &&
+                        bound.top < _clientY && _clientY < bound.bottom) {
+                        isLabel = true;
+                    }
+                }
+
+                if (isLabel || event.target.className.match('checkbox')) {
+                    this.updateCellCheck(listView, record);
+
+                    _.delay(function () {
+                        listView.$el.find('.listview').focus();
+                    }, 100, this);
+                }
+            }
+        },
+
+        onListKeyDown: function (e, data) {
+            var record = null, listView = this.columnsList;
+
+            if (listView.disabled) return;
+            if (_.isUndefined(undefined)) data = e;
+
+            if (data.keyCode == Common.UI.Keys.SPACE) {
+                data.preventDefault();
+                data.stopPropagation();
+
+                this.updateCellCheck(listView, listView.getSelectedRec());
+
+            } else {
+                Common.UI.DataView.prototype.onKeyDown.call(this.columnsList, e, data);
+            }
+        },
+
+        updateCellCheck: function (listView, record) {
+            if (record && listView) {
+                    record.set('check', !record.get('check'));
+                // listView.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true, suppressScrollX: true});
+            }
+        },
+
+        afterRender: function() {
+            this._setDefaults(this.props);
+        },
+
+        _setDefaults: function (props) {
+            if (props) {
+                this.updateColumnsList(props);
+            }
+        },
+
+        getSettings: function () {
+            var store = this.columnsList.store,
+                props = [];
+            store.each(function(item, index) {
+                item.get('check') && (props.push(item.get('value')));
+            });
+            return props;
+        },
+
+        onBtnClick: function(event) {
+            this._handleInput(event.currentTarget.attributes['result'].value);
+        },
+
+        onDblClickFormat: function () {
+            this._handleInput('ok');
+        },
+
+        onPrimary: function(event) {
+            this._handleInput('ok');
+            return false;
+        },
+
+        _handleInput: function(state) {
+            if (this.options.handler) {
+                this.options.handler.call(this, state, (state == 'ok') ? this.getSettings() : this.props);
+            }
+
+            this.close();
+        },
+
+        //
+        txtTitle: 'Insert Slicers',
+        textColumns: 'Columns'
+
+    }, SSE.Views.SlicerAddDialog || {}));
+});

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

@@ -730,6 +730,14 @@ define([
                     lock: [_set.selImage, _set.selChart, _set.selShape, _set.editFormula, _set.selRangeEdit, _set.coAuth, _set.coAuthText, _set.lostConnect]
                 });
 
+                me.btnInsertSlicer = new Common.UI.Button({
+                    id: 'tlbtn-insertslicer',
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-symbol',
+                    caption: me.capBtnInsSlicer,
+                    lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.multiselect]
+                });
+
                 me.btnTableTemplate = new Common.UI.Button({
                     id          : 'id-toolbar-btn-ttempl',
                     cls         : 'btn-toolbar',
@@ -1394,7 +1402,7 @@ define([
                     me.btnItalic, me.btnUnderline, me.btnStrikeout, me.btnSubscript, me.btnTextColor, me.btnAlignLeft,
                     me.btnAlignCenter,me.btnAlignRight,me.btnAlignJust, me.btnAlignTop,
                     me.btnAlignMiddle, me.btnAlignBottom, me.btnWrap, me.btnTextOrient, me.btnBackColor, me.btnInsertTable,
-                    me.btnMerge, me.btnInsertFormula, me.btnNamedRange, me.btnIncDecimal, me.btnInsertShape, me.btnInsertEquation, me.btnInsertSymbol,
+                    me.btnMerge, me.btnInsertFormula, me.btnNamedRange, me.btnIncDecimal, me.btnInsertShape, me.btnInsertEquation, me.btnInsertSymbol, me.btnInsertSlicer,
                     me.btnInsertText, me.btnInsertTextArt, me.btnSortUp, me.btnSortDown, me.btnSetAutofilter, me.btnClearAutofilter,
                     me.btnTableTemplate, me.btnPercentStyle, me.btnCurrencyStyle, me.btnDecDecimal, me.btnAddCell, me.btnDeleteCell,
                     me.cmbNumberFormat, me.btnBorders, me.btnInsertImage, me.btnInsertHyperlink,
@@ -1571,6 +1579,7 @@ define([
             _injectComponent('#slot-btn-instextart',     this.btnInsertTextArt);
             _injectComponent('#slot-btn-insequation',    this.btnInsertEquation);
             _injectComponent('#slot-btn-inssymbol',      this.btnInsertSymbol);
+            _injectComponent('#slot-btn-insslicer',      this.btnInsertSlicer);
             _injectComponent('#slot-btn-sortdesc',       this.btnSortDown);
             _injectComponent('#slot-btn-sortasc',        this.btnSortUp);
             _injectComponent('#slot-btn-setfilter',      this.btnSetAutofilter);
@@ -1652,6 +1661,7 @@ define([
             _updateHint(this.btnInsertShape, this.tipInsertShape);
             _updateHint(this.btnInsertEquation, this.tipInsertEquation);
             _updateHint(this.btnInsertSymbol, this.tipInsertSymbol);
+            _updateHint(this.btnInsertSlicer, this.tipInsertSlicer);
             _updateHint(this.btnSortDown, this.txtSortAZ);
             _updateHint(this.btnSortUp, this.txtSortZA);
             _updateHint(this.btnSetAutofilter, this.txtFilter + ' (Ctrl+Shift+L)');
@@ -2393,6 +2403,8 @@ define([
         tipInsertSymbol: 'Insert symbol',
         txtAutosumTip: 'Summation',
         capBtnPrintTitles: 'Print Titles',
-        tipPrintTitles: 'Print titles'
+        tipPrintTitles: 'Print titles',
+        capBtnInsSlicer: 'Slicer',
+        tipInsertSlicer: 'Insert slicer'
     }, SSE.Views.Toolbar || {}));
 });