Number field do no longer work with decimals (#108)

* Support both dot and comma as decimal separator * Rollback generalization of number pattern. use parseNumber function in ractive * Minor fix
legalthings · Jul 12, 2018 · 5a78790 · 5a78790
1 parent 6cb6b4e
commit 5a78790
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -65,6 +65,7 @@ <h1>LegalForm.js demo</h1>
         <script src="js/lib/to-material.js"></script>
         <script src="js/lib/calculation-vars.js"></script>
         <script src="js/lib/expand-condition.js"></script>
+        <script src="js/lib/parse-number.js"></script>
         <script src="js/model/form-model.js"></script>
         <script src="js/model/legalform-model.js"></script>
         <script src="js/model/live-contract-form-model.js"></script>

diff --git a/js/legalform-html.js b/js/legalform-html.js
@@ -164,14 +164,14 @@ function LegalFormHtml($) {
 
         switch (type) {
             case 'number':
-                data.pattern = '\\d+' + (data.decimals > 0 ? ('(.\\d{1,' + data.decimals + '})?') : '');
+                data.pattern = '\\d+' + (data.decimals > 0 ? ('([,.]\\d{1,' + data.decimals + '})?') : '');
             case 'password':
             case 'text':
             case 'email':
                 return strbind('<input class="form-control" %s %s>', attrString(self.attributes[type], excl), attrString(data, excl + 'type' + (mode === 'build' ? ';id' : '')));
 
             case 'amount':
-                data.pattern = '\\d+' + (data.decimals > 0 ? ('(,\\d{1,' + data.decimals + '})?') : '');
+                data.pattern = '\\d+' + (data.decimals > 0 ? ('([,.]\\d{1,' + data.decimals + '})?') : '');
                 var input_amount = strbind('<input class="form-control" name="%s" value="%s" %s %s>', data.name + '.amount', mode === 'build' ? (data.value || '') : '{{ ' + data.nameNoMustache + '.amount }}', attrString(self.attributes[type], excl), attrString(data, excl + 'type;id;name;value'));
                 var units = self.model.getAmountUnits(data);
                 var input_unit;

diff --git a/js/legalform-validation.js b/js/legalform-validation.js
@@ -251,9 +251,11 @@
 
             // Implement validation for numbers
             if (meta.type === 'number') {
-                var min = $(input).attr('min');
-                var max = $(input).attr('max');
-                var valid = $.isNumeric(value) && (!$.isNumeric(min) || Number(value) >= Number(min)) && (!$.isNumeric(max) || Number(value) <= Number(max));
+                var number = parseNumber(value);
+                var min = parseNumber($(input).attr('min'));
+                var max = parseNumber($(input).attr('max'));
+
+                var valid = $.isNumeric(number) && (!$.isNumeric(min) || value >= min) && (!$.isNumeric(max) || value <= max);
                 if (!valid) {
                     $(input).get(0).setCustomValidity(error);
                     return;

diff --git a/js/lib/parse-number.js b/js/lib/parse-number.js
@@ -0,0 +1,29 @@
+
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = parseNumber;
+}
+
+var numberRegexp = new RegExp('^(?:((?:\\d{1,3}(?:\\.\\d{3})+|\\d+)(?:,\\d{1,})?)|((?:\\d{1,3}(?:,\\d{3})+|\\d+)(?:\\.\\d{1,})?))$');
+var dotRegexp = /\./g;
+var commaRegexp = /,/g;
+
+/**
+ * Create float number from number, given by string with decimal comma/dot
+ * @param {string} number
+ * @return {float|null}
+ */
+function parseNumber(number) {
+    if (typeof number === 'undefined' || number === null) return null;
+
+    number = number.toString();
+    var match = number.match(numberRegexp);
+    if (!match) return null;
+
+    var isDecimalComma = typeof match[1] !== 'undefined';
+
+    number = isDecimalComma ?
+        number.replace(dotRegexp, '').replace(',', '.') :
+        number.replace(commaRegexp, '');
+
+    return parseFloat(number);
+}
diff --git a/js/ractive-legalform.js b/js/ractive-legalform.js
@@ -853,7 +853,7 @@
                 valuta: '€'
             };
 
-            return $.extend(true, {}, this.defaults, this.values, globals, {meta: this.meta});
+            return $.extend(true, {}, this.defaults, this.values, globals, {meta: this.meta}, this.functions);
         },
 
         /**

diff --git a/live-contract.html b/live-contract.html
@@ -65,6 +65,7 @@ <h1>LegalForm.js demo</h1>
         <script src="js/lib/to-material.js"></script>
         <script src="js/lib/calculation-vars.js"></script>
         <script src="js/lib/expand-condition.js"></script>
+        <script src="js/lib/parse-number.js"></script>
         <script src="js/model/form-model.js"></script>
         <script src="js/model/legalform-model.js"></script>
         <script src="js/model/live-contract-form-model.js"></script>

diff --git a/material.html b/material.html
@@ -64,6 +64,7 @@ <h1>LegalForm.js demo with Material Design</h1>
         <script src="js/lib/to-material.js"></script>
         <script src="js/lib/calculation-vars.js"></script>
         <script src="js/lib/expand-condition.js"></script>
+        <script src="js/lib/parse-number.js"></script>
         <script src="js/model/form-model.js"></script>
         <script src="js/model/legalform-model.js"></script>
         <script src="js/model/live-contract-form-model.js"></script>

diff --git a/nomaterial.html b/nomaterial.html
@@ -75,6 +75,7 @@ <h1>LegalForm.js demo with Material Design</h1>
         <script src="js/lib/to-material.js"></script>
         <script src="js/lib/calculation-vars.js"></script>
         <script src="js/lib/expand-condition.js"></script>
+        <script src="js/lib/parse-number.js"></script>
         <script src="js/model/form-model.js"></script>
         <script src="js/model/legalform-model.js"></script>
         <script src="js/model/live-contract-form-model.js"></script>

diff --git a/spec/lib/parse-float.spec.js b/spec/lib/parse-float.spec.js
@@ -0,0 +1,37 @@
+'use strict';
+
+describe("test parseNumber function", function() {
+    var parseNumber = require('../../js/lib/parse-number');
+
+    var data = [
+        {number: 0, expected: 0, note: '0 should be converted to 0.0'},
+        {number: '0', expected: 0, note: 'string 0 should be converted to 0.0'},
+        {number: 1, expected: 1.0, note: '1 should be converted to 1.0'},
+        {number: 134, expected: 134.0, note: '134 should be converted to 134.0'},
+        {number: 1.34, expected: 1.34, note: '1.34 should be converted to 1.34'},
+        {number: '1,34', expected: 1.34, note: '1,34 should be converted to 1.34'},
+        {number: '12,503,348.09', expected: 12503348.09, note: '12,503,348.09 should be converted to 12503348.09'},
+        {number: '12.503.348,09', expected: 12503348.09, note: '12.503.348,09 should be converted to 12503348.09'},
+        {number: '12503348.09', expected: 12503348.09, note: '12503348.09 should be converted to 12503348.09'},
+        {number: '12503348,09', expected: 12503348.09, note: '12503348,09 should be converted to 12503348.09'},
+        {number: '12,503.348.09', expected: null, note: '12,503.348.09 should be converted to null'},
+        {number: '12,503.348,09', expected: null, note: '12,503.348,09 should be converted to null'},
+        {number: 'a12', expected: null, note: 'a12 should be converted to null'},
+        {number: undefined, expected: null, note: 'undefined should be converted to null'},
+        {number: null, expected: null, note: 'null should be converted to null'}
+    ];
+
+    for (var i = 0; i < data.length; i++) {
+        var given = data[i];
+
+        testDataItem(given);
+    }
+
+    function testDataItem(given) {
+        it(given.note, function() {
+            var result = parseNumber(given.number);
+
+            expect(result).toBe(given.expected);
+        });
+    }
+});