[SSE] Add dialog for data validation

apps/common/main/resources/less/window.less

@@ -138,21 +138,18 @@
         z-index: @zindex-modal - 2;
     }
 
-    &.alert {
-        min-height: 90px;
-        min-width: 230px;
-
     .icon {
-            float: left;
-            width: 35px;
-            height: 35px;
-            margin: 0 0 0 10px;
-
         &.warn {
+            width: 35px;
             height: 32px;
             background-position: @alerts-offset-x @alerts-offset-y - 105px;
         }
 
+        &.error, &.info, &.confirm {
+            width: 35px;
+            height: 35px;
+        }
+
         &.error {
             background-position: @alerts-offset-x @alerts-offset-y - 0;
         }
@@ -166,6 +163,15 @@
         }
     }
 
+    &.alert {
+        .icon {
+            float: left;
+            margin: 0 0 0 10px;
+        }
+
+        min-height: 90px;
+        min-width: 230px;
+
         .body {
             .info-box {
                 padding: 20px 20px 20px 10px;

apps/spreadsheeteditor/main/app/template/DataValidationDialog.template

@@ -1,18 +1,112 @@
 <div id="id-data-validation-settings" class="settings-panel active">
     <div class="inner-content">
-        <table cols="1" style="width: 100%;">
+        <table cols="2" style="width: 100%;">
+            <tr>
+                <td class="padding-small" style="padding-right: 5px;">
+                    <label class="input-label"><%= scope.textAllow %></label>
+                    <div id="data-validation-cmb-allow"></div>
+                </td>
+                <td class="padding-small" style="padding-left: 5px;">
+                    <label class="input-label"><%= scope.textData %></label>
+                    <div id="data-validation-cmb-data"></div>
+                </td>
+            </tr>
+            <tr>
+                <td colspan=2 class="padding-small">
+                    <div id="data-validation-ch-ignore"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small" style="padding-right: 5px;">
+                    <label id="data-validation-label-min" class="input-label"><%= scope.textMin %></label>
+                    <div id="data-validation-txt-min"></div>
+                </td>
+                <td class="padding-small" style="padding-left: 5px;">
+                    <label id="data-validation-label-max" class="input-label"><%= scope.textMax %></label>
+                    <div id="data-validation-txt-max"></div>
+                </td>
+            </tr>
+            <tr>
+                <td colspan=2 class="padding-small">
+                    <div id="data-validation-ch-show-dropdown"></div>
+                </td>
+            </tr>
+            <tr class="data-source">
+                <td colspan=2 class="padding-small">
+                    <label id="data-validation-label-source" class="input-label"><%= scope.textSource %></label>
+                    <div id="data-validation-txt-source"></div>
+                </td>
+            </tr>
+            <tr>
+                <td colspan=2 class="padding-small">
+                    <div id="data-validation-ch-apply"></div>
+                </td>
+            </tr>
         </table>
     </div>
 </div>
 <div id="id-data-validation-input" class="settings-panel">
     <div class="inner-content">
         <table cols="1" style="width: 100%;">
+            <tr>
+                <td class="padding-small">
+                    <div id="data-validation-ch-show-input"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <label><%= scope.textCellSelected %></label>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textTitle %></label>
+                    <div id="data-validation-input-title"></div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label class="input-label"><%= scope.textInput %></label>
+                    <div id="data-validation-input-msg"></div>
+                </td>
+            </tr>
         </table>
     </div>
 </div>
 <div id="id-data-validation-error" class="settings-panel">
     <div class="inner-content">
         <table cols="1" style="width: 100%;">
+            <tr>
+                <td class="padding-small">
+                    <div id="data-validation-ch-show-error"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <label><%= scope.textUserEnters %></label>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div style="display: inline-block; margin-right: 5px;vertical-align: bottom;">
+                        <div id="data-validation-img-style" class="icon img-commonctrl error" style="margin-bottom: -1px;"></div>
+                    </div>
+                    <div style="display: inline-block;">
+                        <label class="input-label"><%= scope.textStyle %></label>
+                        <div id="data-validation-cmb-style"></div>
+                    </div>
+                    <div style="float: right;">
+                        <label class="input-label"><%= scope.textTitle %></label>
+                        <div id="data-validation-error-title"></div>
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label class="input-label"><%= scope.textError %></label>
+                    <div id="data-validation-error-msg"></div>
+                </td>
+            </tr>
         </table>
     </div>
 </div>

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

@@ -44,12 +44,13 @@ define([    'text!spreadsheeteditor/main/app/template/DataValidationDialog.templ
     'common/main/lib/component/InputField',
     'common/main/lib/component/ComboBox',
     'common/main/lib/component/CheckBox',
+    'common/main/lib/component/TextareaField',
     'common/main/lib/view/AdvancedSettingsWindow'
 ], function (contentTemplate) { 'use strict';
 
     SSE.Views.DataValidationDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
-            contentWidth: 284,
+            contentWidth: 320,
             height: 350,
             toggleGroup: 'data-validation-group',
             storageName: 'sse-data-validation-category'
@@ -80,6 +81,192 @@ define([    'text!spreadsheeteditor/main/app/template/DataValidationDialog.templ
         render: function() {
             Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
             var me = this;
+            var $window = this.getChild();
+
+            // settings
+            this.cmbAllow = new Common.UI.ComboBox({
+                el: $window.find('#data-validation-cmb-allow'),
+                cls: 'input-group-nr',
+                editable: false,
+                data:  [
+                    {value: Asc.EDataValidationType.None, displayValue: this.txtAny},
+                    {value: Asc.EDataValidationType.Whole, displayValue: this.txtWhole},
+                    {value: Asc.EDataValidationType.Decimal, displayValue: this.txtDecimal},
+                    {value: Asc.EDataValidationType.List, displayValue: this.txtList},
+                    {value: Asc.EDataValidationType.Date, displayValue: this.txtDate},
+                    {value: Asc.EDataValidationType.Time, displayValue: this.txtTime},
+                    {value: Asc.EDataValidationType.TextLength, displayValue: this.txtTextLength},
+                    {value: Asc.EDataValidationType.Custom, displayValue: this.txtOther}
+                ],
+                style: 'width: 100%;',
+                menuStyle   : 'min-width: 100%;',
+                takeFocusOnClose: true
+            });
+            this.cmbAllow.setValue(Asc.EDataValidationType.None);
+            this.cmbAllow.on('selected', _.bind(this.onAllowSelect, this));
+
+            this.cmbData = new Common.UI.ComboBox({
+                el: $window.find('#data-validation-cmb-data'),
+                cls: 'input-group-nr',
+                editable: false,
+                data: [
+                    {value: Asc.EDataValidationOperator.Between, displayValue: this.txtBetween},
+                    {value: Asc.EDataValidationOperator.NotBetween, displayValue: this.txtNotBetween},
+                    {value: Asc.EDataValidationOperator.Equal, displayValue: this.txtEqual},
+                    {value: Asc.EDataValidationOperator.NotEqual, displayValue: this.txtNotEqual},
+                    {value: Asc.EDataValidationOperator.GreaterThan, displayValue: this.txtGreaterThan},
+                    {value: Asc.EDataValidationOperator.LessThan, displayValue: this.txtLessThan},
+                    {value: Asc.EDataValidationOperator.GreaterThanOrEqual, displayValue: this.txtGreaterThanOrEqual},
+                    {value: Asc.EDataValidationOperator.LessThanOrEqual, displayValue: this.txtLessThanOrEqual}
+                ],
+                style: 'width: 100%;',
+                menuStyle   : 'min-width: 100%;',
+                takeFocusOnClose: true
+            });
+            this.cmbData.setValue(Asc.EDataValidationOperator.Between);
+            this.cmbData.on('selected', _.bind(this.onDataSelect, this));
+
+            this.chIgnore = new Common.UI.CheckBox({
+                el: $window.find('#data-validation-ch-ignore'),
+                labelText: this.textIgnore,
+                value: true
+            });
+            // this.chIgnore.on('change', _.bind(this.onIgnoreChange, this));
+
+            this.lblRangeMin = $window.find('#data-validation-label-min');
+            this.inputRangeMin = new Common.UI.InputFieldBtn({
+                el: $window.find('#data-validation-txt-min'),
+                style: '100%',
+                textSelectData: 'Select data',
+                // validateOnChange: true,
+                validateOnBlur: false
+            }).on('changed:after', function(input, newValue, oldValue, e) {
+                if (newValue == oldValue) return;
+            }).on('button:click', _.bind(this.onSelectData, this));
+
+            this.lblRangeMax = $window.find('#data-validation-label-max');
+            this.inputRangeMax = new Common.UI.InputFieldBtn({
+                el: $window.find('#data-validation-txt-max'),
+                style: '100%',
+                textSelectData: 'Select data',
+                // validateOnChange: true,
+                validateOnBlur: false
+            }).on('changed:after', function(input, newValue, oldValue, e) {
+                if (newValue == oldValue) return;
+            }).on('button:click', _.bind(this.onSelectData, this));
+
+            this.chShowDropDown = new Common.UI.CheckBox({
+                el: $window.find('#data-validation-ch-show-dropdown'),
+                labelText: this.textShowDropDown,
+                value: true
+            });
+            // this.chShowDropDown.on('change', _.bind(this.onDropDownChange, this));
+
+            this.lblRangeSource = $window.find('#data-validation-label-source');
+            this.inputRangeSource = new Common.UI.InputFieldBtn({
+                el: $window.find('#data-validation-txt-source'),
+                style: '100%',
+                textSelectData: 'Select data',
+                // validateOnChange: true,
+                validateOnBlur: false
+            }).on('changed:after', function(input, newValue, oldValue, e) {
+                if (newValue == oldValue) return;
+            }).on('button:click', _.bind(this.onSelectData, this));
+
+            this.chApply = new Common.UI.CheckBox({
+                el: $window.find('#data-validation-ch-apply'),
+                labelText: this.textApply
+            });
+            // this.chApply.on('change', _.bind(this.onApplyChange, this));
+
+            // input message
+            this.chShowInput = new Common.UI.CheckBox({
+                el: $window.find('#data-validation-ch-show-input'),
+                labelText: this.textShowInput,
+                value: true
+            });
+            this.chShowInput.on('change', _.bind(this.onShowInputChange, this));
+
+            this.inputInputTitle = new Common.UI.InputField({
+                el: $window.find('#data-validation-input-title'),
+                allowBlank  : true,
+                validateOnBlur: false,
+                style       : 'width: 100%;'
+            }).on('changed:after', function() {
+                me.isInputTitleChanged = true;
+            });
+
+            // this.textareaInput = $window.find('#data-validation-input-msg');
+            // this.textareaInput.keydown(function (event) {
+            //     if (event.keyCode == Common.UI.Keys.RETURN) {
+            //         event.stopPropagation();
+            //     }
+            //     me.isInputChanged = true;
+            // });
+
+            this.textareaInput = new Common.UI.TextareaField({
+                el          : $window.find('#data-validation-input-msg'),
+                style       : 'width: 100%; height: 70px;',
+                value       : ''
+            });
+            this.textareaInput.on('changed:after', function() {
+                me.isInputChanged = true;
+            });
+
+            // error message
+            this.chShowError = new Common.UI.CheckBox({
+                el: $window.find('#data-validation-ch-show-error'),
+                labelText: this.textShowError,
+                value: true
+            });
+            this.chShowError.on('change', _.bind(this.onShowErrorChange, this));
+
+            this.cmbStyle = new Common.UI.ComboBox({
+                el: $window.find('#data-validation-cmb-style'),
+                cls: 'input-group-nr',
+                editable: false,
+                data: [
+                    {value: 'error', displayValue: this.textStop},
+                    {value: 'warn', displayValue: this.textAlert},
+                    {value: 'info', displayValue: this.textMessage}
+                ],
+                style: 'width: 95px;',
+                menuStyle   : 'min-width: 95px;',
+                takeFocusOnClose: true
+            });
+            this.cmbStyle.setValue('error');
+            this.cmbStyle.on('selected', _.bind(this.onStyleSelect, this));
+
+            this.inputErrorTitle = new Common.UI.InputField({
+                el: $window.find('#data-validation-error-title'),
+                allowBlank  : true,
+                validateOnBlur: false,
+                style       : 'width: 100%;'
+            }).on('changed:after', function() {
+                me.isErrorTitleChanged = true;
+            });
+
+            // this.textareaError = $window.find('#data-validation-error-msg');
+            // this.textareaError.keydown(function (event) {
+            //     if (event.keyCode == Common.UI.Keys.RETURN) {
+            //         event.stopPropagation();
+            //     }
+            //     me.isErrorChanged = true;
+            // });
+
+            this.textareaError = new Common.UI.TextareaField({
+                el          : $window.find('#data-validation-error-msg'),
+                style       : 'width: 100%; height: 70px;',
+                value       : ''
+            });
+            this.textareaError.on('changed:after', function() {
+                me.isErrorChanged = true;
+            });
+
+            this.minMaxTr = $window.find('#data-validation-txt-min').closest('tr');
+            this.sourceTr = $window.find('#data-validation-txt-source').closest('tr');
+            this.dropdownTr = $window.find('#data-validation-ch-show-dropdown').closest('tr');
+            this.errorIcon = $window.find('#data-validation-img-style');
 
             this.afterRender();
         },
@@ -92,18 +279,117 @@ define([    'text!spreadsheeteditor/main/app/template/DataValidationDialog.templ
             }
         },
 
+        getFocusedComponents: function() {
+            return [
+                this.cmbAllow, this.cmbData, this.inputRangeSource, this.inputRangeMin, this.inputRangeMax, // 0 tab
+                this.inputInputTitle, this.textareaInput,  // 1 tab
+                this.cmbStyle, this.inputErrorTitle, this.textareaError  // 2 tab
+            ];
+        },
+
+        onCategoryClick: function(btn, index) {
+            Common.Views.AdvancedSettingsWindow.prototype.onCategoryClick.call(this, btn, index);
+
+            var me = this;
+            setTimeout(function(){
+                switch (index) {
+                    case 0:
+                        me.cmbAllow.focus();
+                        break;
+                    case 1:
+                        me.inputInputTitle.focus();
+                        break;
+                    case 2:
+                        me.cmbStyle.focus();
+                        break;
+                }
+            }, 10);
+        },
+
         show: function() {
             Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
         },
 
+        onSelectData: function(input) {
+            var me = this;
+            if (me.api) {
+                var handlerDlg = function(dlg, result) {
+                    if (result == 'ok') {
+                        input.setValue(dlg.getSettings());
+                    }
+                };
+
+                var win = new SSE.Views.CellRangeDialog({
+                    handler: handlerDlg
+                }).on('close', function() {
+                    me.show();
+                    setTimeout(function(){
+                        me._noApply = true;
+                        input.focus();
+                        me._noApply = false;
+                    },1);
+                });
+
+                var xy = me.$window.offset();
+                me.hide();
+                win.show(xy.left + 160, xy.top + 125);
+                win.setSettings({
+                    api     : me.api,
+                    range   : input.getValue(),
+                    type    : Asc.c_oAscSelectionDialogType.Chart,
+                    validation: function() {return true;}
+                });
+            }
+        },
+
+        onAllowSelect: function(combo, record) {
+            this.ShowHideElem();
+        },
+
+        onDataSelect: function(combo, record) {
+            this.ShowHideElem();
+        },
+
+        onStyleSelect: function(combo, record) {
+            this.errorIcon.removeClass("error warn info");
+            this.errorIcon.addClass(record.value);
+        },
+
+        onShowInputChange: function(field, newValue, oldValue, eOpts) {
+            var checked = (field.getValue()=='checked');
+            this.inputInputTitle.setDisabled(!checked);
+            this.textareaInput.setDisabled(!checked);
+
+            if (this.api && !this._noApply) {
+                var properties = this.props;
+                // properties.asc_putStrikeout(field.getValue()=='checked');
+                // properties.asc_putDStrikeout(this.chDoubleStrike.getValue()=='checked');
+                // this.api.asc_setDrawImagePlaceParagraph('paragraphadv-font-img', properties);
+            }
+        },
+
+        onShowErrorChange: function(field, newValue, oldValue, eOpts) {
+            var checked = (field.getValue()=='checked');
+            this.inputErrorTitle.setDisabled(!checked);
+            this.cmbStyle.setDisabled(!checked);
+            this.textareaError.setDisabled(!checked);
+
+            if (this.api && !this._noApply) {
+                var properties = this.props;
+                // properties.asc_putStrikeout(field.getValue()=='checked');
+                // properties.asc_putDStrikeout(this.chDoubleStrike.getValue()=='checked');
+                // this.api.asc_setDrawImagePlaceParagraph('paragraphadv-font-img', properties);
+            }
+        },
+
         _setDefaults: function (props) {
             if (props) {
             }
+            this.ShowHideElem();
         },
 
         getSettings: function () {
-            var props = new Asc.CDataValidation();
+            return this.props;
-            return props;
         },
 
         onDlgBtnClick: function(event) {
@@ -121,9 +407,110 @@ define([    'text!spreadsheeteditor/main/app/template/DataValidationDialog.templ
             return false;
         },
 
+        ShowHideElem: function() {
+            var allow = this.cmbAllow.getValue(),
+                data = this.cmbData.getValue();
+            var between = (data==Asc.EDataValidationOperator.Between || data==Asc.EDataValidationOperator.NotBetween);
+            var source = (allow==Asc.EDataValidationType.Custom || allow==Asc.EDataValidationType.List);
+            this.minMaxTr.toggleClass('hidden', allow==Asc.EDataValidationType.None || source || !between);
+            this.sourceTr.toggleClass('hidden', allow==Asc.EDataValidationType.None || !source && between );
+            this.dropdownTr.toggleClass('hidden', allow!=Asc.EDataValidationType.List);
+
+            this.chIgnore.setDisabled(allow===Asc.EDataValidationType.None);
+            this.cmbData.setDisabled(allow===Asc.EDataValidationType.None || allow===Asc.EDataValidationType.Custom || allow===Asc.EDataValidationType.List);
+
+            var str = this.textSource;
+            if (allow==Asc.EDataValidationType.Custom)
+                str = this.textFormula;
+            else if (data==Asc.EDataValidationOperator.Equal || data==Asc.EDataValidationOperator.NotEqual) { // equals, not equals
+                if (allow==Asc.EDataValidationType.Date)
+                    str = this.txtDate;
+                else if (allow==Asc.EDataValidationType.TextLength)
+                    str = this.txtLength;
+                else if (allow==Asc.EDataValidationType.Time)
+                    str = this.txtElTime;
+                else
+                    str = this.textCompare;
+            } else if (data==Asc.EDataValidationOperator.GreaterThan || data==Asc.EDataValidationOperator.GreaterThanOrEqual) { // greater, greater or equals
+                if (allow==Asc.EDataValidationType.Date)
+                    str = this.txtStartDate;
+                else if (allow==Asc.EDataValidationType.Time)
+                    str = this.txtStartTime;
+                else
+                    str = this.textMin;
+            } else if (data==Asc.EDataValidationOperator.LessThan || data==Asc.EDataValidationOperator.LessThanOrEqual) { // less, less or equals
+                if (allow==Asc.EDataValidationType.Date)
+                    str = this.txtEndDate;
+                else if (allow==Asc.EDataValidationType.Time)
+                    str = this.txtEndTime;
+                else
+                    str = this.textMax;
+            }
+            this.lblRangeSource.text(str);
+
+            var str1 = this.textMin,
+                str2 = this.textMax;
+            if (allow==Asc.EDataValidationType.Date) {
+                str1 = this.txtStartDate;
+                str2 = this.txtEndDate;
+            } else if (allow==Asc.EDataValidationType.Time) {
+                str1 = this.txtStartTime;
+                str2 = this.txtEndTime;
+            }
+            this.lblRangeMin.text(str1);
+            this.lblRangeMax.text(str2);
+        },
+
         strSettings: 'Settings',
         strInput: 'Input Message',
-        strError: 'Error Alert'
+        strError: 'Error Alert',
+        textAllow: 'Allow',
+        textData: 'Data',
+        textMin: 'Minimum',
+        textMax: 'Maximum',
+        textCompare: 'Compare to',
+        textSource: 'Source',
+        textStartDate: 'Start Date',
+        textEndDate: 'End Date',
+        textStartTime: 'Start Time',
+        textEndTime: 'End Time',
+        textFormula: 'Formula',
+        textIgnore: 'Ignore blank',
+        textApply: 'Apply these changes to all othes calls the same settings',
+        textShowDropDown: 'Show drop-down list in cell',
+        textCellSelected: 'When cell is selected, show this input message',
+        textTitle: 'Title',
+        textInput: 'Input Message',
+        textUserEnters: 'When user enters invalid data, show this error alert',
+        textStyle: 'Style',
+        textError: 'Error Message',
+        textShowInput: 'Show input message when cell is selected',
+        textShowError: 'Show error alert after invalid data is entered',
+        txtBetween: 'between',
+        txtNotBetween: 'not between',
+        txtEqual: 'equals',
+        txtNotEqual: 'does not equal',
+        txtLessThan: 'less than',
+        txtGreaterThan: 'greater than',
+        txtLessThanOrEqual: 'less than or equal to',
+        txtGreaterThanOrEqual: 'greater than or equal to',
+        txtAny: 'Any value',
+        txtWhole: 'Whole number',
+        txtDecimal: 'Decimal',
+        txtList: 'List',
+        txtDate: 'Date',
+        txtTime: 'Time',
+        txtTextLength: 'Text length',
+        txtLength: 'Length',
+        txtOther: 'Other',
+        txtElTime: 'Elapsed time',
+        txtStartDate: 'Start date',
+        txtStartTime: 'Start time',
+        txtEndDate: 'End date',
+        txtEndTime: 'End time',
+        textStop: 'Stop',
+        textAlert: 'Alert',
+        textMessage: 'Message'
 
     }, SSE.Views.DataValidationDialog || {}))
 });