[SSE] Edit protected ranges

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

@@ -50,11 +50,11 @@ define([
                 _options = {};
 
             _.extend(_options,  {
-                title: options.type=='sheet' ? this.txtSheetTitle : this.txtWBTitle,
+                title: options.title ? options.title : (options.type=='sheet' ? this.txtSheetTitle : this.txtWBTitle),
                 cls: 'modal-dlg',
                 width: 350,
-                height: options.type=='sheet' ? 447 : 306,
+                height: options.type=='sheet' ? 447 : (options.type=='range' ? 338 : 306),
-                buttons: [{
+                buttons: options.buttons ? options.buttons : [{
                     value: 'ok',
                     caption: this.txtProtect
                 }, 'cancel']
@@ -64,12 +64,24 @@ define([
             this.txtDescription = options.txtDescription || '';
             this.type = options.type || 'workbook';
             this.props = options.props;
+            this.api = options.api;
 
             this.template = options.template || [
                     '<div class="box">',
-                        '<div class="" style="margin-bottom: 10px;">',
+                        '<% if (type=="range") { %>',
-                            '<label>' + (t.type=='sheet' ? t.txtSheetDescription : t.txtWBDescription) + '</label>',
+                            '<div class="input-row">',
-                        '</div>',
+                                '<label>' + t.txtRangeName + '</label>',
+                            '</div>',
+                            '<div id="id-range-name-txt" class="input-row" style="margin-bottom: 5px;"></div>',
+                            '<div class="input-row">',
+                                '<label>' + t.txtRange + '</label>',
+                            '</div>',
+                            '<div id="id-range-txt" class="input-row" style="margin-bottom: 10px;"></div>',
+                        '<% } else { %>',
+                            '<div class="" style="margin-bottom: 10px;">',
+                                '<label>' + (t.type=='sheet' ? t.txtSheetDescription : t.txtWBDescription) + '</label>',
+                            '</div>',
+                        '<% } %>',
                         '<div class="input-row">',
                             '<label>' + t.txtPassword + ' (' + t.txtOptional + ')' + '</label>',
                         '</div>',
@@ -145,15 +157,44 @@ define([
                 this.optionsList.on('entervalue', _.bind(this.onPrimary, this));
             }
 
+            if (this.type == 'range') {
+                this.inputRangeName = new Common.UI.InputField({
+                    el: $('#id-range-name-txt'),
+                    allowBlank  : false,
+                    blankError  : this.txtEmpty,
+                    style       : 'width: 100%;',
+                    maxLength: 255,
+                    validateOnBlur: false
+                });
+                this.txtDataRange = new Common.UI.InputFieldBtn({
+                    el          : $('#id-range-txt'),
+                    name        : 'range',
+                    style       : 'width: 100%;',
+                    allowBlank  : true,
+                    btnHint     : this.textSelectData,
+                    blankError  : this.txtEmpty,
+                    validateOnChange: true,
+                    validation  : function(value) {
+                        if (_.isEmpty(value)) {
+                            return true;
+                        }
+                    }
+                });
+                this.txtDataRange.on('button:click', _.bind(this.onSelectData, this));
+            }
             this.afterRender();
         },
 
         getFocusedComponents: function() {
-            return this.optionsList ? [this.inputPwd, this.repeatPwd, this.optionsList] : [this.inputPwd, this.repeatPwd];
+            var arr = [];
+            (this.type == 'range') && (arr = arr.concat([this.inputRangeName, this.txtDataRange]));
+            arr = arr.concat([this.inputPwd, this.repeatPwd]);
+            (this.type == 'sheet') && (arr = arr.concat([this.optionsList]));
+            return arr;
         },
 
         getDefaultFocusableComponent: function () {
-            return this.inputPwd;
+            return (this.type == 'range') ? this.inputRangeName : this.inputPwd;
         },
 
         afterRender: function() {
@@ -172,6 +213,10 @@ define([
         _handleInput: function(state) {
             if (this.handler) {
                 if (state == 'ok') {
+                    if (this.inputRangeName && this.inputRangeName.checkValidate() !== true)  {
+                        this.inputRangeName.focus();
+                        return;
+                    }
                     if (this.inputPwd.checkValidate() !== true)  {
                         this.inputPwd.focus();
                         return;
@@ -182,7 +227,7 @@ define([
                         return;
                     }
                 }
-                this.handler.call(this, state, this.inputPwd.getValue(), this.getSheetSettings());
+                this.handler.call(this, state, this.inputPwd.getValue(), this.getSettings());
             }
 
             this.close();
@@ -287,9 +332,12 @@ define([
             this.optionsList.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true, suppressScrollX: true});
         },
 
-        getSheetSettings: function() {
+        getSettings: function() {
-            if (this.type !== 'sheet') return null;
+            if (this.type == 'sheet') return this.getSheetSettings();
+            if (this.type == 'range') return this.getRangeSettings();
+        },
 
+        getSheetSettings: function() {
             var props = this.props ? this.props : new Asc.CSheetProtection();
             this.optionsList.store.each(function (item, index) {
                 props && props['asc_set' + item.get('optionName')] && props['asc_set' + item.get('optionName')](!item.get('check'));
@@ -297,6 +345,44 @@ define([
             return props;
         },
 
+        getRangeSettings: function() {
+            var props = this.props ? this.props : new Asc.CProtectedRange();
+            props.asc_setName(this.inputRangeName.getValue());
+            props.asc_setSqref(this.txtDataRange.getValue());
+            return props;
+        },
+
+        onSelectData: function() {
+            var me = this;
+            if (me.api) {
+                var handlerDlg = function(dlg, result) {
+                    if (result == 'ok') {
+                        me.dataRangeValid = dlg.getSettings();
+                        me.txtDataRange.setValue(me.dataRangeValid);
+                        me.txtDataRange.checkValidate();
+                    }
+                };
+
+                var win = new SSE.Views.CellRangeDialog({
+                    handler: handlerDlg
+                }).on('close', function() {
+                    me.show();
+                    _.delay(function(){
+                        me.txtDataRange.focus();
+                    },1);
+                });
+
+                var xy = me.$window.offset();
+                me.hide();
+                win.show(xy.left + 65, xy.top + 77);
+                win.setSettings({
+                    api     : me.api,
+                    range   : (!_.isEmpty(me.txtDataRange.getValue()) && (me.txtDataRange.checkValidate()==true)) ? me.txtDataRange.getValue() : me.dataRangeValid,
+                    type    : Asc.c_oAscSelectionDialogType.Chart
+                });
+            }
+        },
+
         txtPassword : "Password",
         txtRepeat: 'Repeat password',
         txtIncorrectPwd: 'Confirmation password is not identical',
@@ -322,7 +408,11 @@ define([
         txtWBTitle: 'Protect Workbook structure',
         txtSheetDescription: 'Prevent unwanted changes from others by limiting their ability to edit.',
         txtSheetTitle: 'Protect Sheet',
-        txtAllow: 'Allow all users of this sheet to'
+        txtAllow: 'Allow all users of this sheet to',
+        txtRangeName: 'Title',
+        txtRange: 'Range',
+        txtEmpty: 'This field is required',
+        textSelectData: 'Select Data'
 
     }, SSE.Views.ProtectDialog || {}));
 });

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

@@ -77,6 +77,7 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
             this.locked     = options.locked || false;
             this.userTooltip = true;
             this.currentRange = undefined;
+            this.deletedArr = [];
 
             this.wrapEvents = {
                 onLockProtectedRangeManager: _.bind(this.onLockProtectedRangeManager, this),
@@ -98,8 +99,8 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
                 emptyText: this.textEmpty,
                 itemTemplate: _.template([
                         '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;<% if (!lock) { %>pointer-events:none;<% } %>">',
-                            '<div style="width:180px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                            '<div style="width:184px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
-                            '<div style="width:180px;padding-right: 5px;"><%= range %></div>',
+                            '<div style="width:191px;padding-right: 5px;"><%= range %></div>',
                             '<div style="width:70px;"><% if (pwd) { %>', me.txtYes, '<% } else { %>', me.txtNo, '<% } %></div>',
                             '<% if (lock) { %>',
                                 '<div class="lock-user"><%=lockuser%></div>',
@@ -163,9 +164,10 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
                 for (var i=0; i<ranges.length; i++) {
                     var id = ranges[i].asc_getIsLock();
                     arr.push({
-                        name: ranges[i].asc_getName(true),
+                        name: ranges[i].asc_getName(),
                         pwd: ranges[i].asc_isPassword(),
                         range: ranges[i].asc_getSqref(),
+                        props: ranges[i],
                         lock: (id!==null && id!==undefined),
                         lockuser: (id) ? this.getUserName(id) : this.guestText
                     });
@@ -241,23 +243,33 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
             var me = this,
                 xy = me.$window.offset(),
                 rec = this.rangeList.getSelectedRec(),
-                idx = _.indexOf(this.rangeList.store.models, rec),
+                props = isEdit ? rec.get('props') : new Asc.CProtectedRange();
-                oldname = (isEdit && rec) ? new Asc.asc_CDefName(rec.get('name'), rec.get('range'), rec.get('scope'), rec.get('type'), undefined, undefined, undefined, true) : null;
 
-            var win = new SSE.Views.NamedRangeEditDlg({
+            var win = new SSE.Views.ProtectDialog({
-                api: me.api,
+                title   : isEdit ? me.txtEditRange : me.txtNewRange,
-                sheets  : this.sheets,
+                type    : 'range',
-                props   : (isEdit) ? oldname : this.props,
+                props   : props,
                 isEdit  : isEdit,
-                handler : function(result, settings) {
+                api     : me.api,
-                    if (result == 'ok' && settings) {
+                buttons : ['ok', 'cancel'],
+                handler : function(result, value, props) {
+                    if (result == 'ok') {
+                        value && props.asc_setPassword(value);
                         if (isEdit) {
-                            me.currentNamedRange = settings;
+                            rec.set('props', props);
-                            me.api.asc_editDefinedNames(oldname, settings);
+                            rec.set('name', props.asc_getName());
+                            rec.set('range', props.asc_getSqref());
+                            rec.set('pwd', props.asc_isPassword());
+                            props.asc_setName();
                         } else {
-                            me.cmbFilter.setValue(0);
+                            me.rangeList.store.add({
-                            me.currentNamedRange = settings;
+                                name: props.asc_getName(),
-                            me.api.asc_setDefinedNames(settings);
+                                pwd: props.asc_isPassword(),
+                                range: props.asc_getSqref(),
+                                props: props,
+                                lock: false,
+                                lockuser: this.guestText
+                            });
                         }
                     }
                 }
@@ -271,22 +283,14 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
         },
 
         onDeleteRange: function () {
-            var rec = this.rangeList.getSelectedRec();
+            var store = this.rangeList.store,
+                rec = this.rangeList.getSelectedRec();
             if (rec) {
-                var me = this;
+                this.deletedArr.push(rec.get('props'));
-                me._isWarningVisible = true;
+                var index = store.indexOf(rec);
-                Common.UI.warning({
+                store.remove(rec);
-                    msg: Common.Utils.String.format(me.warnDelete, rec.get('name')),
+                (this.rangeList.length>0) && this.rangeList.selectByIndex(index);
-                    buttons: ['ok', 'cancel'],
+                this.rangeList.scrollToRecord(this.rangeList.getSelectedRec());
-                    callback: function(btn) {
-                        if (btn == 'ok') {
-                            me.currentNamedRange = _.indexOf(me.rangeList.store.models, rec);
-                            me.api.asc_delDefinedNames(new Asc.asc_CDefName(rec.get('name'), rec.get('range'), rec.get('scope'), rec.get('type'), undefined, undefined, undefined, true));
-                        }
-                        setTimeout(function(){ me.getDefaultFocusableComponent().focus(); }, 100);
-                        me._isWarningVisible = false;
-                    }
-                });
             }
         },
 
@@ -395,7 +399,7 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
         },
         
         txtTitle: 'Allow Users to Edit Ranges',
-        textRangesDesc: 'Ranges unlocked by a password when sheet is protected (this works only for locked cells):',
+        textRangesDesc: 'Ranges unlocked by a password when sheet is protected (this works only for locked cells)',
         textTitle: 'Title',
         textRange: 'Range',
         textPwd: 'Password',
@@ -408,7 +412,9 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
         warnDelete: 'Are you sure you want to delete the name {0}?',
         textProtect: 'Protect Sheet',
         txtYes: 'Yes',
-        txtNo: 'No'
+        txtNo: 'No',
+        txtEditRange: 'Edit Range',
+        txtNewRange: 'New Range'
 
     }, SSE.Views.ProtectRangesDlg || {}));
 });