From 985518f5c7988721d56b42e6d16f25935e211adb Mon Sep 17 00:00:00 2001
From: Leszek Pietrzak <leszek@magicznyleszek.xyz>
Date: Fri, 13 Mar 2020 00:55:25 +0100
Subject: [PATCH 1/2] allow longer xml value names

---
 jsapp/js/formbuild/containers/KoboMatrix.es6       |  2 +-
 .../partials/form_builder/_card_multichoice.scss   | 14 +++++++++-----
 jsapp/xlform/src/model.choices.coffee              |  2 +-
 jsapp/xlform/src/view.choices.coffee               |  4 ++--
 jsapp/xlform/src/view.choices.templates.coffee     |  2 +-
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/jsapp/js/formbuild/containers/KoboMatrix.es6 b/jsapp/js/formbuild/containers/KoboMatrix.es6
index 8e4e1bb4cf..0914f7870c 100644
--- a/jsapp/js/formbuild/containers/KoboMatrix.es6
+++ b/jsapp/js/formbuild/containers/KoboMatrix.es6
@@ -116,7 +116,7 @@ class KoboMatrix extends React.Component {
       lowerCase: true,
       lrstrip: true,
       preventDuplicateUnderscores: true,
-      characterLimit: 14,
+      characterLimit: 99,
       incrementorPadding: false,
       validXmlTag: false,
       replaceNonWordCharacters: true
diff --git a/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss b/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss
index db4ca5bfc1..064bac5963 100644
--- a/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss
+++ b/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss
@@ -100,18 +100,21 @@
     overflow: hidden;
 
     label {
-      width: 32%;
+      display: inline-block;
+      width: 40%;
       padding-left: 4px;
       color: #7E858C;
     }
 
-    span, .editable-container {
+    span,
+    .editable-container {
+      text-align: right;
       display: inline-block;
       float: right;
-      width: 64%;
+      width: 60%;
       padding-right: 4px;
       color: #7E858C;
-      text-align: right;
+      overflow-wrap: break-word;
       cursor: text;
     }
 
@@ -123,8 +126,9 @@
       text-align: right;
       display: inline-block;
       float: right;
+      width: 60% !important;
       color: $linkColor;
-      line-height: 1em;
+      line-height: inherit;
       font-size: 11px;
     }
   }
diff --git a/jsapp/xlform/src/model.choices.coffee b/jsapp/xlform/src/model.choices.coffee
index c6c98b8946..d3bd0d2d80 100644
--- a/jsapp/xlform/src/model.choices.coffee
+++ b/jsapp/xlform/src/model.choices.coffee
@@ -129,7 +129,7 @@ module.exports = do ->
             preventDuplicates: names
             lowerCase: true
             lrstrip: true
-            characterLimit: 14
+            characterLimit: 99
             incrementorPadding: false
             validXmlTag: false
           })
diff --git a/jsapp/xlform/src/view.choices.coffee b/jsapp/xlform/src/view.choices.coffee
index 1b13b7ef7c..63d71cfb14 100644
--- a/jsapp/xlform/src/view.choices.coffee
+++ b/jsapp/xlform/src/view.choices.coffee
@@ -87,7 +87,7 @@ module.exports = do ->
       @t = $("<i class=\"fa fa-trash-o js-remove-option\">")
       @pw = $("<div class=\"editable-wrapper js-cancel-select-row\">")
       @p = $("<span class=\"js-cancel-select-row\">")
-      @c = $("<code><label>#{_t("Value:")}</label> <span class=\"js-cancel-select-row\">#{_t("AUTOMATIC")}</span></code>")
+      @c = $("<code><label>#{_t("XML value:")}</label> <span class=\"js-cancel-select-row\">#{_t("AUTOMATIC")}</span></code>")
       @d = $('<div>')
       if @model
         @p.html @model.get("label") || 'Empty'
@@ -116,7 +116,7 @@ module.exports = do ->
                     lowerCase: false
                     lrstrip: true
                     incrementorPadding: false
-                    characterLimit: 14
+                    characterLimit: 99
                     validXmlTag: false
                     nonWordCharsExceptions: '+-.'
                   })
diff --git a/jsapp/xlform/src/view.choices.templates.coffee b/jsapp/xlform/src/view.choices.templates.coffee
index 127af00aaa..885395e152 100644
--- a/jsapp/xlform/src/view.choices.templates.coffee
+++ b/jsapp/xlform/src/view.choices.templates.coffee
@@ -5,7 +5,7 @@ module.exports = do ->
       """<div class="card__addoptions">
           <div class="card__addoptions__layer"></div>
             <ul><li class="multioptions__option  xlf-option-view xlf-option-view--depr">
-              <div><div class="editable-wrapper"><span class="editable editable-click">+ #{_t("Click to add another response...")}</span></div><code><label>#{_t("Value:")}</label> <span>#{_t("AUTOMATIC")}</span></code></div>
+              <div><div class="editable-wrapper"><span class="editable editable-click">+ #{_t("Click to add another response...")}</span></div><code><label>#{_t("XML value:")}</label> <span>#{_t("AUTOMATIC")}</span></code></div>
             </li></ul>
         </div>"""
 

From 5a2e9a5fc8be6d1b14e5ef792feb574657c67a0e Mon Sep 17 00:00:00 2001
From: Leszek Pietrzak <leszek@magicznyleszek.xyz>
Date: Fri, 13 Mar 2020 16:07:11 +0100
Subject: [PATCH 2/2] change slug limit to 40 to mimick BE code

---
 jsapp/js/formbuild/containers/KoboMatrix.es6 | 2 +-
 jsapp/xlform/src/model.choices.coffee        | 2 +-
 jsapp/xlform/src/view.choices.coffee         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/jsapp/js/formbuild/containers/KoboMatrix.es6 b/jsapp/js/formbuild/containers/KoboMatrix.es6
index 0914f7870c..2ad761c134 100644
--- a/jsapp/js/formbuild/containers/KoboMatrix.es6
+++ b/jsapp/js/formbuild/containers/KoboMatrix.es6
@@ -116,7 +116,7 @@ class KoboMatrix extends React.Component {
       lowerCase: true,
       lrstrip: true,
       preventDuplicateUnderscores: true,
-      characterLimit: 99,
+      characterLimit: 40,
       incrementorPadding: false,
       validXmlTag: false,
       replaceNonWordCharacters: true
diff --git a/jsapp/xlform/src/model.choices.coffee b/jsapp/xlform/src/model.choices.coffee
index d3bd0d2d80..1314722b6b 100644
--- a/jsapp/xlform/src/model.choices.coffee
+++ b/jsapp/xlform/src/model.choices.coffee
@@ -129,7 +129,7 @@ module.exports = do ->
             preventDuplicates: names
             lowerCase: true
             lrstrip: true
-            characterLimit: 99
+            characterLimit: 40
             incrementorPadding: false
             validXmlTag: false
           })
diff --git a/jsapp/xlform/src/view.choices.coffee b/jsapp/xlform/src/view.choices.coffee
index 63d71cfb14..513550b856 100644
--- a/jsapp/xlform/src/view.choices.coffee
+++ b/jsapp/xlform/src/view.choices.coffee
@@ -116,7 +116,7 @@ module.exports = do ->
                     lowerCase: false
                     lrstrip: true
                     incrementorPadding: false
-                    characterLimit: 99
+                    characterLimit: 40
                     validXmlTag: false
                     nonWordCharsExceptions: '+-.'
                   })