From 6fb7f1f476c87c3dc3cb95450ec27b9e9e6cee93 Mon Sep 17 00:00:00 2001
From: Owen Stephens <owen@ostephens.com>
Date: Sun, 22 Oct 2017 23:53:18 +0100
Subject: [PATCH] Add UI for split multi-valued cells by sep/regex/length

---
 .../modules/core/langs/translation-en.json    |  1 +
 .../views/data-table/menu-edit-cells.js       | 71 +++++++++++++++++--
 .../split-multi-valued-cells-dialog.html      | 40 +++++++++++
 3 files changed, 108 insertions(+), 4 deletions(-)
 create mode 100644 main/webapp/modules/core/scripts/views/data-table/split-multi-valued-cells-dialog.html

diff --git a/main/webapp/modules/core/langs/translation-en.json b/main/webapp/modules/core/langs/translation-en.json
index dc0c725dc..f2885b87a 100644
--- a/main/webapp/modules/core/langs/translation-en.json
+++ b/main/webapp/modules/core/langs/translation-en.json
@@ -525,6 +525,7 @@
         "split-col": "Split column",
         "several-col": "into several columns",
         "how-split": "How to Split Column",
+        "how-split-cells": "How to split multi-valued cells",
         "by-sep": "by separator",
         "separator": "Separator",
         "reg-exp": "regular expression",
diff --git a/main/webapp/modules/core/scripts/views/data-table/menu-edit-cells.js b/main/webapp/modules/core/scripts/views/data-table/menu-edit-cells.js
index 9ea92d8ee..f829af812 100644
--- a/main/webapp/modules/core/scripts/views/data-table/menu-edit-cells.js
+++ b/main/webapp/modules/core/scripts/views/data-table/menu-edit-cells.js
@@ -134,20 +134,83 @@ DataTableColumnHeaderUI.extendMenu(function(column, columnHeaderUI, menu) {
   };
 
   var doSplitMultiValueCells = function() {
-    var separator = window.prompt($.i18n._('core-views')["what-separator"], ",");
-    if (separator !== null) {
+
+    var frame = $(DOM.loadHTML("core", "scripts/views/data-table/split-multi-valued-cells-dialog.html"));
+    var elmts = DOM.bind(frame);
+    elmts.dialogHeader.text($.i18n._('core-views')["split-cells"]);
+    
+    elmts.or_views_howSplit.text($.i18n._('core-views')["how-split-cells"]);
+    elmts.or_views_bySep.text($.i18n._('core-views')["by-sep"]);
+    elmts.or_views_separator.text($.i18n._('core-views')["separator"]);
+    elmts.or_views_regExp.text($.i18n._('core-views')["reg-exp"]);
+
+    elmts.or_views_fieldLen.text($.i18n._('core-views')["field-len"]);
+    elmts.or_views_listInt.text($.i18n._('core-views')["list-int"]);
+
+    elmts.okButton.html($.i18n._('core-buttons')["ok"]);
+    elmts.cancelButton.text($.i18n._('core-buttons')["cancel"]);
+
+    var level = DialogSystem.showDialog(frame);
+    var dismiss = function() { DialogSystem.dismissUntil(level - 1); };
+
+    elmts.cancelButton.click(dismiss);
+    elmts.okButton.click(function() {
+      var mode = $("input[name='split-by-mode']:checked")[0].value;
+      var config = {
+        columnName: column.name,
+        keyColumnName: theProject.columnModel.keyColumnName,
+        mode: mode
+      };
+      if (mode == "separator") {
+        config.separator = elmts.separatorInput[0].value;
+        if (!(config.separator)) {
+          alert($.i18n._('core-views')["specify-sep"]);
+          return;
+        }
+
+        config.regex = elmts.regexInput[0].checked;
+
+      } else {
+        var s = "[" + elmts.lengthsTextarea[0].value + "]";
+        try {
+          var a = JSON.parse(s);
+
+          var lengths = [];
+          $.each(a, function(i,n) { 
+            if (typeof n == "number") {
+              lengths.push(n); 
+            }
+          });
+
+          if (lengths.length === 0) {
+            alert($.i18n._('core-views')["warning-no-length"]);
+            return;
+          }
+
+          config.fieldLengths = JSON.stringify(lengths);
+          
+        } catch (e) {
+          alert($.i18n._('core-views')["warning-format"]);
+          return;
+        }
+      }
+
       Refine.postCoreProcess(
         "split-multi-value-cells", 
+        config,
+/* Old config
         {
           columnName: column.name,
           keyColumnName: theProject.columnModel.keyColumnName,
           separator: separator,
           mode: "plain"
-        },
+        },*/
         null,
         { rowsChanged: true }
       );
-    }
+
+      dismiss();
+    });
   };
 
   MenuSystem.appendTo(menu, [ "core/edit-cells" ], [
diff --git a/main/webapp/modules/core/scripts/views/data-table/split-multi-valued-cells-dialog.html b/main/webapp/modules/core/scripts/views/data-table/split-multi-valued-cells-dialog.html
new file mode 100644
index 000000000..c68744865
--- /dev/null
+++ b/main/webapp/modules/core/scripts/views/data-table/split-multi-valued-cells-dialog.html
@@ -0,0 +1,40 @@
+<div class="dialog-frame" style="width: 600px;">
+  <div class="dialog-border">
+    <div class="dialog-header" bind="dialogHeader"></div>
+    <div class="dialog-body" bind="dialogBody">
+      <div class="grid-layout layout-looser layout-full"><table><tr>
+        <td>
+          <div class="grid-layout layout-tighter"><table>
+            <tr>
+              <td colspan="3"><h3><span bind="or_views_howSplit"></span></h3></td>
+            </tr>
+            <tr>
+              <td width="1%"><input type="radio" checked="true" name="split-by-mode" value="separator" id="$split-multi-valued-cells-by-separator" /></td>
+              <td colspan="2"><label for="$split-multi-valued-cells-by-separator" bind="or_views_bySep"></label></td>
+            </tr>
+            <tr><td></td>
+              <td bind="or_views_separator"></td>
+              <td><input size="10" value="," bind="separatorInput" />
+                <input type="checkbox" bind="regexInput" id="$split-column-regex" />
+                <label for="$split-multi-valued-cells-regex" bind="or_views_regExp"></label></td>
+            </tr>
+            <tr>
+              <td width="1%"><input type="radio" name="split-by-mode" value="lengths" id="$split-multi-valued-cells-by-lengths" /></td>
+              <td colspan="2"><label for="$split-multi-valued-cells-by-lengths" bind="or_views_fieldLen"></label></td>
+            </tr>
+            <tr><td></td>
+              <td colspan="2"><textarea style="width: 100%;" bind="lengthsTextarea"></textarea></td>
+            </tr>
+            <tr><td></td>
+              <td colspan="2" bind="or_views_listInt"></td>
+            </tr>
+          </table></div>
+        </td>
+      </table></div>
+    </div>
+    <div class="dialog-footer" bind="dialogFooter">
+      <button class="button" bind="okButton"></button>
+      <button class="button" bind="cancelButton"></button>
+    </div>
+  </div>
+</div>
\ No newline at end of file