[SSE] New search: make left panel

apps/common/main/lib/template/SearchPanel.template

@@ -29,6 +29,18 @@
                        <button type="button" class="btn btn-text-default" id="search-adv-replace-all" style="display: inline-block; min-width: 78px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textReplaceAll %></button>
                     </td>
                 </tr>
+                <tr>
+                    <td class="padding-large">
+                        <div class="search-options">
+                            <label class="input-label"><%= scope.textWithin %></label>
+                            <div id="search-adv-cmb-within"></div>
+                            <label class="input-label"><%= scope.textSearch %></label>
+                            <div id="search-adv-cmb-search"></div>
+                            <label class="input-label"><%= scope.textLookIn %></label>
+                            <div id="search-adv-cmb-look-in"></div>
+                        </div>
+                    </td>
+                </tr>
                 <tr>
                     <td class="padding-small"><div id="search-adv-case-sensitive"></div></td>
                 </tr>

apps/common/main/lib/view/SearchBar.js

@@ -149,7 +149,7 @@ define([
             var opts = {
                 textsearch  : this.inputSearch.val()
             };
-            this.fireEvent('search:'+action, [this, opts]);
+            this.fireEvent('search:'+action, [this, opts, false]);
         },
 
         onOpenPanel: function () {

apps/common/main/lib/view/SearchPanel.js

@@ -133,6 +133,42 @@ define([
                     dataHintOffset: 'small'
                 });
 
+                this.cmbWithin = new Common.UI.ComboBox({
+                    el: $('#search-adv-cmb-within'),
+                    menuStyle: 'min-width: 100%;',
+                    style: "width: 219px;",
+                    editable: false,
+                    cls: 'input-group-nr',
+                    data: [
+                        { value: 0, displayValue: this.textSheet },
+                        { value: 1, displayValue: this.textWorkbook }
+                    ]
+                });
+
+                this.cmbSearch = new Common.UI.ComboBox({
+                    el: $('#search-adv-cmb-search'),
+                    menuStyle: 'min-width: 100%;',
+                    style: "width: 219px;",
+                    editable: false,
+                    cls: 'input-group-nr',
+                    data: [
+                        { value: 0, displayValue: this.textByRows },
+                        { value: 1, displayValue: this.textByColumns }
+                    ]
+                });
+
+                this.cmbLookIn = new Common.UI.ComboBox({
+                    el: $('#search-adv-cmb-look-in'),
+                    menuStyle: 'min-width: 100%;',
+                    style: "width: 219px;",
+                    editable: false,
+                    cls: 'input-group-nr',
+                    data: [
+                        { value: 0, displayValue: this.textFormulas },
+                        { value: 1, displayValue: this.textValues }
+                    ]
+                });
+
                 this.buttonClose = new Common.UI.Button({
                     parentEl: $('#search-btn-close', this.$el),
                     cls: 'btn-toolbar',
@@ -185,7 +221,15 @@ define([
                 matchword   : this.chMatchWord.checked,
                 //highlight   : this.miHighlight.checked
             };
-            this.fireEvent('search:'+action, [this, opts]);
+            this.fireEvent('search:'+action, [this, opts, true]);
+        },
+
+        getSettings: function() {
+            return {
+                textsearch: this.inputText.getValue(),
+                matchcase: this.chCaseSensitive.checked,
+                matchword: this.chMatchWord.checked
+            };
         },
 
         textFind: 'Find',
@@ -198,6 +242,15 @@ define([
         textCaseSensitive: 'Case sensitive',
         textMatchUsingRegExp: 'Match using regular expressions',
         textWholeWords: 'Whole words only',
+        textWithin: 'Within',
+        textSearch: 'Search',
+        textLookIn: 'Look in',
+        textSheet: 'Sheet',
+        textWorkbook: 'Workbook',
+        textByRows: 'By rows',
+        textByColumns: 'By columns',
+        textFormulas: 'Formulas',
+        textValues: 'Values',
 
     }, Common.Views.SearchPanel || {}));
 });

apps/common/main/resources/less/searchdialog.less

@@ -146,4 +146,8 @@
             padding-top: 2px;
         }
     }
+
+    .search-options {
+        display: none;
+    }
 }

apps/documenteditor/main/app/view/LeftMenu.js

@@ -302,7 +302,7 @@ define([
             } else
             if (name == 'thumbnails') {
                 this.panelThumbnails = panel.render('#left-panel-thumbnails');
-            }
+            } else
             if (name == 'advancedsearch') {
                 this.panelSearch = panel.render('#left-panel-search');
             }

apps/spreadsheeteditor/main/app.js

@@ -159,6 +159,7 @@ require([
             'PivotTable',
             'DataTab',
             'ViewTab',
+            'Search',
             'WBProtection',
             'Common.Controllers.Fonts',
             'Common.Controllers.History',
@@ -185,6 +186,7 @@ require([
             'spreadsheeteditor/main/app/controller/PivotTable',
             'spreadsheeteditor/main/app/controller/DataTab',
             'spreadsheeteditor/main/app/controller/ViewTab',
+            'spreadsheeteditor/main/app/controller/Search',
             'spreadsheeteditor/main/app/controller/WBProtection',
             'spreadsheeteditor/main/app/view/FileMenuPanels',
             'spreadsheeteditor/main/app/view/ParagraphSettings',

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

@@ -150,7 +150,6 @@ define([
 
         setApi: function(api) {
             this.api = api;
-            this.api.asc_registerCallback('asc_onRenameCellTextEnd',    _.bind(this.onRenameText, this));
             this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiServerDisconnect, this));
             Common.NotificationCenter.on('api:disconnect',              _.bind(this.onApiServerDisconnect, this));
             this.api.asc_registerCallback('asc_onDownloadUrl',          _.bind(this.onDownloadUrl, this));
@@ -182,6 +181,8 @@ define([
             this.leftMenu.getMenu('file').setApi(api);
             if (this.mode.canUseHistory)
                 this.getApplication().getController('Common.Controllers.History').setApi(this.api).setMode(this.mode);
+            this.getApplication().getController('Search').setApi(this.api).setMode(this.mode);
+            this.leftMenu.setOptionsPanel('advancedsearch', this.getApplication().getController('Search').getView('Common.Views.SearchPanel'));
             return this;
         },
 
@@ -713,38 +714,6 @@ define([
             this.api.asc_enableKeyEvents(true);
         },
 
-        onRenameText: function(found, replaced) {
-            var me = this;
-            if (this.api.isReplaceAll) {
-                Common.UI.info({
-                    msg: (found) ? ((!found-replaced) ? Common.Utils.String.format(this.textReplaceSuccess,replaced) : Common.Utils.String.format(this.textReplaceSkipped,found-replaced)) : this.textNoTextFound,
-                    callback: function() {
-                        me.dlgSearch.focus();
-                    }
-                });
-            } else {
-                var sett = this.dlgSearch.getSettings();
-                var options = this.dlgSearch.findOptions;
-                options.asc_setFindWhat(sett.textsearch);
-                options.asc_setScanForward(true);
-                options.asc_setIsMatchCase(sett.matchcase);
-                options.asc_setIsWholeCell(sett.matchword);
-                options.asc_setScanOnOnlySheet(this.dlgSearch.menuWithin.menu.items[0].checked);
-                options.asc_setScanByRows(this.dlgSearch.menuSearch.menu.items[0].checked);
-                options.asc_setLookIn(this.dlgSearch.menuLookin.menu.items[0].checked?Asc.c_oAscFindLookIn.Formulas:Asc.c_oAscFindLookIn.Value);
-
-
-                if (!me.api.asc_findText(options)) {
-                    Common.UI.info({
-                        msg: this.textNoTextFound,
-                        callback: function() {
-                            me.dlgSearch.focus();
-                        }
-                    });
-                }
-            }
-        },
-
         setPreviewMode: function(mode) {
             if (this.viewmode === mode) return;
             this.viewmode = mode;
@@ -1016,6 +985,9 @@ define([
 
                     // focus to sdk
                     this.api.asc_enableKeyEvents(true);
+                } else if (this.leftMenu.btnSearchBar.isActive() && this.api) {
+                    this.leftMenu.btnSearchBar.toggle(false);
+                    this.leftMenu.onBtnMenuClick(this.leftMenu.btnSearchBar);
                 }
             }
         },
@@ -1039,8 +1011,6 @@ define([
         newDocumentTitle        : 'Unnamed document',
         textItemEntireCell      : 'Entire cell contents',
         requestEditRightsText   : 'Requesting editing rights...',
-        textReplaceSuccess      : 'Search has been done. {0} occurrences have been replaced',
-        textReplaceSkipped      : 'The replacement has been made. {0} occurrences were skipped.',
         warnDownloadAs          : 'If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?' ,
         textWarning: 'Warning',
         textSheet: 'Sheet',

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

@@ -0,0 +1,185 @@
+/*
+ *
+ * (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
+ *
+ */
+
+/**
+ *  ViewTab.js
+ *
+ *  Created by Julia Svinareva on 22.02.2022
+ *  Copyright (c) 2022 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'common/main/lib/view/SearchPanel'
+], function () {
+    'use strict';
+
+    SSE.Controllers.Search = Backbone.Controller.extend(_.extend({
+        sdkViewName : '#id_main',
+
+        views: [
+            'Common.Views.SearchPanel'
+        ],
+
+        initialize: function () {
+            console.log('init');
+            this.addListeners({
+                'SearchBar': {
+                    'search:back': _.bind(this.onQuerySearch, this, 'back'),
+                    'search:next': _.bind(this.onQuerySearch, this, 'next'),
+                },
+                'Common.Views.SearchPanel': {
+                    'search:back': _.bind(this.onQuerySearch, this, 'back'),
+                    'search:next': _.bind(this.onQuerySearch, this, 'next'),
+                    'search:replace': _.bind(this.onQueryReplace, this),
+                    'search:replaceall': _.bind(this.onQueryReplaceAll, this)
+                }
+            });
+        },
+        onLaunch: function () {
+            this._state = {};
+        },
+
+        setMode: function (mode) {
+            this.view = this.createView('Common.Views.SearchPanel', { mode: mode });
+        },
+
+        setApi: function (api) {
+            if (api) {
+                this.api = api;
+                this.api.asc_registerCallback('asc_onRenameCellTextEnd', _.bind(this.onRenameText, this));
+            }
+            return this;
+        },
+
+        getView: function(name) {
+            return !name && this.view ?
+                this.view : Backbone.Controller.prototype.getView.call(this, name);
+        },
+
+        onQuerySearch: function (d, w, opts, fromPanel) {
+            var options = new Asc.asc_CFindOptions();
+            options.asc_setFindWhat(opts.textsearch);
+            options.asc_setScanForward(d != 'back');
+            options.asc_setIsMatchCase(opts.matchcase);
+            options.asc_setIsWholeCell(opts.matchword);
+            //options.asc_setScanOnOnlySheet(this.dlgSearch.menuWithin.menu.items[0].checked);
+            //options.asc_setScanByRows(this.dlgSearch.menuSearch.menu.items[0].checked);
+            //options.asc_setLookIn(this.dlgSearch.menuLookin.menu.items[0].checked ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value);
+
+            if (!this.api.asc_findText(options)) {
+                var me = this;
+                Common.UI.info({
+                    msg: this.textNoTextFound,
+                    callback: function() {
+                        if (fromPanel) {
+                            me.view.focus();
+                        } else {
+
+                        }
+                    }
+                });
+            }
+        },
+
+        onQueryReplace: function(w, opts) {
+            this.api.isReplaceAll = false;
+
+            var options = new Asc.asc_CFindOptions();
+            options.asc_setFindWhat(opts.textsearch);
+            options.asc_setReplaceWith(opts.textreplace);
+            options.asc_setIsMatchCase(opts.matchcase);
+            options.asc_setIsWholeCell(opts.matchword);
+            //options.asc_setScanOnOnlySheet(this.dlgSearch.menuWithin.menu.items[0].checked);
+            //options.asc_setScanByRows(this.dlgSearch.menuSearch.menu.items[0].checked);
+            //options.asc_setLookIn(this.dlgSearch.menuLookin.menu.items[0].checked?Asc.c_oAscFindLookIn.Formulas:Asc.c_oAscFindLookIn.Value);
+            options.asc_setIsReplaceAll(false);
+
+            this.api.asc_replaceText(options);
+        },
+
+        onQueryReplaceAll: function(w, opts) {
+            this.api.isReplaceAll = true;
+
+            var options = new Asc.asc_CFindOptions();
+            options.asc_setFindWhat(opts.textsearch);
+            options.asc_setReplaceWith(opts.textreplace);
+            options.asc_setIsMatchCase(opts.matchcase);
+            options.asc_setIsWholeCell(opts.matchword);
+            //options.asc_setScanOnOnlySheet(this.dlgSearch.menuWithin.menu.items[0].checked);
+            //options.asc_setScanByRows(this.dlgSearch.menuSearch.menu.items[0].checked);
+            //options.asc_setLookIn(this.dlgSearch.menuLookin.menu.items[0].checked?Asc.c_oAscFindLookIn.Formulas:Asc.c_oAscFindLookIn.Value);
+            options.asc_setIsReplaceAll(true);
+
+            this.api.asc_replaceText(options);
+        },
+
+        onRenameText: function (found, replaced) {
+            var me = this;
+            if (this.api.isReplaceAll) {
+                Common.UI.info({
+                    msg: (found) ? ((!found-replaced) ? Common.Utils.String.format(this.textReplaceSuccess,replaced) : Common.Utils.String.format(this.textReplaceSkipped,found-replaced)) : this.textNoTextFound,
+                    callback: function() {
+                        me.view.focus();
+                    }
+                });
+            } else {
+                var sett = this.view.getSettings();
+                var options = new Asc.asc_CFindOptions();
+                options.asc_setFindWhat(sett.textsearch);
+                options.asc_setScanForward(true);
+                options.asc_setIsMatchCase(sett.matchcase);
+                options.asc_setIsWholeCell(sett.matchword);
+                //options.asc_setScanOnOnlySheet(this.dlgSearch.menuWithin.menu.items[0].checked);
+                //options.asc_setScanByRows(this.dlgSearch.menuSearch.menu.items[0].checked);
+                //options.asc_setLookIn(this.dlgSearch.menuLookin.menu.items[0].checked?Asc.c_oAscFindLookIn.Formulas:Asc.c_oAscFindLookIn.Value);
+
+
+                if (!me.api.asc_findText(options)) {
+                    Common.UI.info({
+                        msg: this.textNoTextFound,
+                        callback: function() {
+                            me.view.focus();
+                        }
+                    });
+                }
+            }
+        },
+
+        textNoTextFound: 'The data you have been searching for could not be found. Please adjust your search options.',
+        textReplaceSuccess: 'Search has been done. {0} occurrences have been replaced',
+        textReplaceSkipped: 'The replacement has been made. {0} occurrences were skipped.',
+
+    }, SSE.Controllers.Search || {}));
+});

apps/spreadsheeteditor/main/app/template/LeftMenu.template

@@ -1,6 +1,7 @@
 <div id="view-left-menu" class="tool-menu left">
     <div class="tool-menu-btns">
         <button id="left-btn-search" class="btn btn-category" content-target="" data-hint="0" data-hint-direction="right" data-hint-offset="big"><i class="icon toolbar__icon btn-menu-search">&nbsp;</i></button>
+        <button id="left-btn-searchbar" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-search">&nbsp;</i></button>
         <!-- /** coauthoring begin **/ -->
         <button id="left-btn-comments" class="btn btn-category" content-target="left-panel-comments" data-hint="0" data-hint-direction="right" data-hint-offset="big"><i class="icon toolbar__icon btn-menu-comments">&nbsp;</i></button>
         <button id="left-btn-chat" class="btn btn-category" content-target="left-panel-chat" data-hint="0" data-hint-direction="right" data-hint-offset="big"><i class="icon toolbar__icon btn-menu-chat">&nbsp;</i></button>
@@ -11,6 +12,7 @@
         <button id="left-btn-about" class="btn btn-category" content-target="" data-hint="0" data-hint-direction="right" data-hint-offset="big"><i class="icon toolbar__icon btn-menu-about">&nbsp;</i></button>
     </div>
     <div class="left-panel" style="">
+        <div id="left-panel-search" class="" style="display: none;"></div>
         <!-- /** coauthoring begin **/ -->
         <div id="left-panel-comments" class="" style="display: none;"></div>
         <div id="left-panel-chat" class="" style="display: none;"></div>

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

@@ -65,6 +65,7 @@ define([
                 /** coauthoring end **/
                 'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
                 'click #left-btn-spellcheck': _.bind(this.onCoauthOptions, this),
+                'click #left-btn-searchbar': _.bind(this.onCoauthOptions, this),
                 'click #left-btn-support': function() {
                     var config = this.mode.customization;
                     config && !!config.feedback && !!config.feedback.url ?
@@ -90,6 +91,15 @@ define([
                 enableToggle: true
             });
 
+            this.btnSearchBar = new Common.UI.Button({
+                action: 'advancedsearch',
+                el: $markup.elementById('#left-btn-searchbar'),
+                hint: this.tipSearch + Common.Utils.String.platformKey('Ctrl+F'),
+                disabled: true,
+                enableToggle: true,
+                toggleGroup: 'leftMenuGroup'
+            });
+
             this.btnAbout = new Common.UI.Button({
                 action: 'about',
                 el: $markup.elementById('#left-btn-about'),
@@ -152,6 +162,7 @@ define([
             this.btnSpellcheck.on('click',      _.bind(this.onBtnMenuClick, this));
 
             this.btnSearch.on('click',          _.bind(this.onBtnMenuClick, this));
+            this.btnSearchBar.on('click',       _.bind(this.onBtnMenuClick, this));
             this.btnAbout.on('toggle',          _.bind(this.onBtnMenuToggle, this));
 
             this.menuFile = new SSE.Views.FileMenu({});
@@ -226,6 +237,13 @@ define([
                 } else
                     this.panelSpellcheck['hide']();
             }
+            if (this.panelSearch) {
+                if (this.btnSearchBar.pressed) {
+                    this.panelSearch.show();
+                } else {
+                    this.panelSearch.hide();
+                }
+            }
             // if (this.mode.canPlugins && this.panelPlugins) {
             //     if (this.btnPlugins.pressed) {
             //         this.panelPlugins.show();
@@ -247,6 +265,9 @@ define([
                 this.panelSpellcheck = panel.render('#left-panel-spellcheck');
             } else if (name == 'history') {
                 this.panelHistory = panel.render('#left-panel-history');
+            } else
+            if (name == 'advancedsearch') {
+                this.panelSearch = panel.render('#left-panel-search');
             }
         },
 
@@ -288,10 +309,14 @@ define([
                 this.panelSpellcheck['hide']();
                 this.btnSpellcheck.toggle(false, true);
             }
+            if (this.panelSearch) {
+                this.panelSearch['hide']();
+                this.btnSearchBar.toggle(false, true);
+            }
         },
 
         isOpened: function() {
-            var isopened = this.btnSearch.pressed;
+            var isopened = this.btnSearchBar.pressed;
             /** coauthoring begin **/
             !isopened && (isopened = this.btnComments.pressed || this.btnChat.pressed);
             /** coauthoring end **/
@@ -302,6 +327,7 @@ define([
             this.btnAbout.setDisabled(false);
             this.btnSupport.setDisabled(false);
             this.btnSearch.setDisabled(false);
+            this.btnSearchBar.setDisabled(false);
             /** coauthoring begin **/
             this.btnComments.setDisabled(false);
             this.btnChat.setDisabled(false);
@@ -333,6 +359,13 @@ define([
                         this.onCoauthOptions();
                         this.btnComments.$el.focus();
                     }
+                } else if (menu == 'advancedsearch') {
+                    if (this.btnSearchBar.isVisible() &&
+                        !this.btnSearchBar.isDisabled() && !this.btnSearchBar.pressed) {
+                        this.btnSearchBar.toggle(true);
+                        this.onBtnMenuClick(this.btnSearchBar);
+                        this.onCoauthOptions();
+                    }
                 }
                 /** coauthoring end **/
             }

apps/spreadsheeteditor/main/app_dev.js

@@ -149,6 +149,7 @@ require([
             'PivotTable',
             'DataTab',
             'ViewTab',
+            'Search',
             'WBProtection',
             'Common.Controllers.Fonts',
             'Common.Controllers.History',
@@ -175,6 +176,7 @@ require([
             'spreadsheeteditor/main/app/controller/PivotTable',
             'spreadsheeteditor/main/app/controller/DataTab',
             'spreadsheeteditor/main/app/controller/ViewTab',
+            'spreadsheeteditor/main/app/controller/Search',
             'spreadsheeteditor/main/app/controller/WBProtection',
             'spreadsheeteditor/main/app/view/FileMenuPanels',
             'spreadsheeteditor/main/app/view/ParagraphSettings',