From 0f2e985634e8a2be7e1ae633551a300ca14bdb43 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Fri, 9 Feb 2018 17:26:34 +0300
Subject: [PATCH] Fix Bug 36742.

---
 apps/common/main/lib/view/OpenDialog.js       | 99 ++++++++++++++++---
 .../main/resources/less/opendialog.less       | 13 +++
 .../main/app/controller/Main.js               |  2 +
 apps/documenteditor/main/locale/en.json       |  1 +
 .../main/app/controller/Main.js               |  2 +
 apps/spreadsheeteditor/main/locale/en.json    |  1 +
 6 files changed, 104 insertions(+), 14 deletions(-)

diff --git a/apps/common/main/lib/view/OpenDialog.js b/apps/common/main/lib/view/OpenDialog.js
index 462f7f0289..934cfce300 100644
--- a/apps/common/main/lib/view/OpenDialog.js
+++ b/apps/common/main/lib/view/OpenDialog.js
@@ -55,10 +55,10 @@ define([
 
             _.extend(_options,  {
                 closable        : false,
-                width           : 250,
-                height          : (options.type == Asc.c_oAscAdvancedOptionsID.CSV) ? 205 : 155,
-                contentWidth    : 390,
+                width           : (options.preview) ? 414 : 262,
+                height          : (options.preview) ? 291 : ((options.type == Asc.c_oAscAdvancedOptionsID.CSV) ? 205 : 155),
                 header          : true,
+                preview         : options.preview,
                 cls             : 'open-dlg',
                 contentTemplate : '',
                 title           : (options.type == Asc.c_oAscAdvancedOptionsID.DRM) ? t.txtTitleProtected : t.txtTitle.replace('%1', (options.type == Asc.c_oAscAdvancedOptionsID.CSV) ? 'CSV' : 'TXT'),
@@ -73,14 +73,30 @@ define([
                         '<label class="header">' + t.txtPassword + '</label>',
                         '<div id="id-password-txt" style="margin-bottom:15px;"></div>',
                     '<% } else { %>',
-                        '<label class="header">' + t.txtEncoding + '</label>',
-                        '<div id="id-codepages-combo" class="input-group-nr" style="margin-bottom:15px;"></div>',
-                        '<% if (type == Asc.c_oAscAdvancedOptionsID.CSV) { %>',
-                        '<label class="header">' + t.txtDelimiter + '</label>',
-                        '<div>',
-                            '<div id="id-delimiters-combo" class="input-group-nr" style="max-width: 110px;display: inline-block; vertical-align: middle;"></div>',
-                            '<div id="id-delimiter-other" class="input-row" style="display: inline-block; vertical-align: middle;margin-left: 10px;"></div>',
+                        '<div style="display: inline-block; margin-bottom:15px;margin-right: 10px;">',
+                            '<label class="header">' + t.txtEncoding + '</label>',
+                            '<div>',
+                            '<div id="id-codepages-combo" class="input-group-nr" style="display: inline-block; vertical-align: middle;"></div>',
+                            '</div>',
                         '</div>',
+                        '<% if (type == Asc.c_oAscAdvancedOptionsID.CSV) { %>',
+                        '<div style="display: inline-block; margin-bottom:15px;">',
+                            '<label class="header">' + t.txtDelimiter + '</label>',
+                            '<div>',
+                                '<div id="id-delimiters-combo" class="input-group-nr" style="max-width: 100px;display: inline-block; vertical-align: middle;"></div>',
+                                '<div id="id-delimiter-other" class="input-row" style="display: inline-block; vertical-align: middle;margin-left: 10px;"></div>',
+                            '</div>',
+                        '</div>',
+                        '<% } %>',
+                        '<% if (!!preview) { %>',
+                            '<div style="">',
+                                '<label class="header">' + t.txtPreview + '</label>',
+                            '<% if (type == Asc.c_oAscAdvancedOptionsID.CSV) { %>',
+                                '<div><div id="id-preview-csv"></div></div>',
+                            '<% } else { %>',
+                                '<div><div id="id-preview-txt"></div></div>',
+                            '<% } %>',
+                            '</div>',
                         '<% } %>',
                     '<% } %>',
                     '</div>',
@@ -96,9 +112,11 @@ define([
 
             this.handler        =   _options.handler;
             this.type           =   _options.type;
+            this.preview        =   _options.preview;
             this.closable       =   _options.closable;
             this.codepages      =   _options.codepages;
             this.settings       =   _options.settings;
+            this.api            =   _options.api;
             this.validatePwd    =   _options.validatePwd || false;
 
             _options.tpl        =   _.template(this.template)(_options);
@@ -125,6 +143,7 @@ define([
                     this.$window.find('input').on('keypress', _.bind(this.onKeyPress, this));
                 } else {
                     this.initCodePages();
+                    this.updatePreview();
                 }
                 this.onPrimary = function() {
                     me._handleInput('ok');
@@ -346,18 +365,22 @@ define([
 
                 this.cmbEncoding = new Common.UI.ComboBox({
                     el: $('#id-codepages-combo', this.$window),
-                    menuStyle: 'min-width: 218px; max-height: 200px;',
+                    style: 'width: 230px;',
+                    menuStyle: 'min-width: 230px; max-height: 200px;',
                     cls: 'input-group-nr',
                     menuCls: 'scrollable-menu',
                     data: listItems,
                     editable: false
                 });
                 this.cmbEncoding.setValue( (this.settings && this.settings.asc_getCodePage()) ? this.settings.asc_getCodePage() : encodedata[0][0]);
+                if (this.preview)
+                    this.cmbEncoding.on('selected', _.bind(this.onCmbEncodingSelect, this));
 
                 if (this.type == Asc.c_oAscAdvancedOptionsID.CSV) {
                     this.cmbDelimiter = new Common.UI.ComboBox({
                         el: $('#id-delimiters-combo', this.$window),
-                        menuStyle: 'min-width: 110px;',
+                        style: 'width: 100px;',
+                        menuStyle: 'min-width: 100px;',
                         cls: 'input-group-nr',
                         data: [
                             {value: 4, displayValue: ','},
@@ -375,16 +398,63 @@ define([
                         el          : $('#id-delimiter-other'),
                         style       : 'width: 30px;',
                         maxLength: 1,
+                        validateOnChange: true,
+                        validateOnBlur: false,
                         value: (this.settings && this.settings.asc_getDelimiterChar()) ? this.settings.asc_getDelimiterChar() : ''
                     });
                     this.inputDelimiter.setVisible(false);
-
+                    if (this.preview)
+                        this.inputDelimiter.on ('changing', _.bind(this.updatePreview, this));
                 }
             }
         },
 
+        updatePreview: function() {
+            if (this.type == Asc.c_oAscAdvancedOptionsID.CSV) {
+                var delimiter = this.cmbDelimiter ? this.cmbDelimiter.getValue() : null,
+                    delimiterChar = (delimiter == -1) ? this.inputDelimiter.getValue() : null;
+                (delimiter == -1) && (delimiter = null);
+                this.api.asc_decodeBuffer(this.preview, new Asc.asc_CCSVAdvancedOptions(this.cmbEncoding.getValue(), delimiter, delimiterChar), _.bind(this.previewCallback, this));
+            } else {
+                this.api.asc_decodeBuffer(this.preview, new Asc.asc_CTXTAdvancedOptions(this.cmbEncoding.getValue()), _.bind(this.previewCallback, this));
+            }
+        },
+
+        previewCallback: function(data) {
+            if (!data || !data.length) return;
+
+            if (this.type == Asc.c_oAscAdvancedOptionsID.CSV) {
+                var maxlength = 0;
+                for (var i=0; i<data.length; i++) {
+                    if (data[i].length>maxlength)
+                        maxlength = data[i].length;
+                }
+                var tpl = '<table>';
+                for (var i=0; i<data.length; i++) {
+                    tpl += '<tr>';
+                    for (var j=0; j<data[i].length; j++) {
+                        tpl += '<td>' + Common.Utils.String.htmlEncode(data[i][j]) + '</td>';
+                    }
+                    for (j=data[i].length; j<maxlength; j++) {
+                        tpl += '<td></td>';
+                    }
+                    tpl += '</tr>';
+                }
+                tpl += '</table>';
+                this.$window.find('#id-preview-csv').html(_.template(tpl));
+            } else {
+                this.$window.find('#id-preview-txt').text(data);
+            }
+        },
+
         onCmbDelimiterSelect: function(combo, record){
             this.inputDelimiter.setVisible(record.value == -1);
+            if (this.preview)
+                this.updatePreview();
+        },
+
+        onCmbEncodingSelect: function(combo, record){
+            this.updatePreview();
         },
 
         okButtonText       : "OK",
@@ -398,7 +468,8 @@ define([
         txtTitleProtected  : "Protected File",
         txtOther: 'Other',
         txtIncorrectPwd: 'Password is incorrect.',
-        closeButtonText: 'Close File'
+        closeButtonText: 'Close File',
+        txtPreview: 'Preview'
 
     }, Common.Views.OpenDialog || {}));
 });
\ No newline at end of file
diff --git a/apps/common/main/resources/less/opendialog.less b/apps/common/main/resources/less/opendialog.less
index f47708eb95..be17148566 100644
--- a/apps/common/main/resources/less/opendialog.less
+++ b/apps/common/main/resources/less/opendialog.less
@@ -37,6 +37,19 @@
         }
 
       }
+
+      #id-preview-csv, #id-preview-txt {
+        width: 100%;
+        height: 106px;
+        overflow:auto;
+        border: @gray-soft solid 1px;
+      }
+
+      td {
+        padding: 1px 8px 1px 0;
+        border-right: @gray-soft solid 1px;
+        min-width: 30px;
+      }
     }
   }
   .footer {
diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js
index 016bcd07be..bdaa4dc930 100644
--- a/apps/documenteditor/main/app/controller/Main.js
+++ b/apps/documenteditor/main/app/controller/Main.js
@@ -1849,8 +1849,10 @@ define([
                 if (type == Asc.c_oAscAdvancedOptionsID.TXT) {
                     me._state.openDlg = new Common.Views.OpenDialog({
                         type: type,
+                        preview: advOptions.asc_getOptions().asc_getData(),
                         codepages: advOptions.asc_getOptions().asc_getCodePages(),
                         settings: advOptions.asc_getOptions().asc_getRecommendedSettings(),
+                        api: me.api,
                         handler: function (encoding) {
                             me.isShowOpenDialog = false;
                             if (me && me.api) {
diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json
index fe12960c25..03ad5b7daa 100644
--- a/apps/documenteditor/main/locale/en.json
+++ b/apps/documenteditor/main/locale/en.json
@@ -184,6 +184,7 @@
   "Common.Views.OpenDialog.txtTitle": "Choose %1 options",
   "Common.Views.OpenDialog.txtTitleProtected": "Protected File",
   "Common.Views.OpenDialog.closeButtonText": "Close File",
+  "Common.Views.OpenDialog.txtPreview": "Preview",
   "Common.Views.PasswordDialog.cancelButtonText": "Cancel",
   "Common.Views.PasswordDialog.okButtonText": "OK",
   "Common.Views.PasswordDialog.txtDescription": "A password is required to open this document",
diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js
index fdf540b105..799e6058cd 100644
--- a/apps/spreadsheeteditor/main/app/controller/Main.js
+++ b/apps/spreadsheeteditor/main/app/controller/Main.js
@@ -1521,8 +1521,10 @@ define([
                 if (type == Asc.c_oAscAdvancedOptionsID.CSV) {
                     me._state.openDlg = new Common.Views.OpenDialog({
                         type: type,
+                        preview: advOptions.asc_getOptions().asc_getData(),
                         codepages: advOptions.asc_getOptions().asc_getCodePages(),
                         settings: advOptions.asc_getOptions().asc_getRecommendedSettings(),
+                        api: me.api,
                         handler: function (encoding, delimiter, delimiterChar) {
                             me.isShowOpenDialog = false;
                             if (me && me.api) {
diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json
index 678417074e..679c4ad790 100644
--- a/apps/spreadsheeteditor/main/locale/en.json
+++ b/apps/spreadsheeteditor/main/locale/en.json
@@ -103,6 +103,7 @@
   "Common.Views.OpenDialog.txtTitle": "Choose %1 options",
   "Common.Views.OpenDialog.txtTitleProtected": "Protected File",
   "Common.Views.OpenDialog.closeButtonText": "Close File",
+  "Common.Views.OpenDialog.txtPreview": "Preview",
   "Common.Views.PasswordDialog.cancelButtonText": "Cancel",
   "Common.Views.PasswordDialog.okButtonText": "OK",
   "Common.Views.PasswordDialog.txtDescription": "A password is required to open this document",