Add Number formfield

docs/formfields/number.md

@@ -0,0 +1,7 @@
+# Number
+
+
+## A note on translating number
+
+Number formfields can be translatable as every other formfield.  
+Due to the fact that translations are stored as JSON, your database column can **not** be `Integer` then.

docs/summary.md

@@ -20,3 +20,4 @@
 
 * [Introduction](formfields/introduction.md)
 * [Text](formfields/text.md)
+* [Number](formfields/number.md)

resources/assets/js/components/Formfields/Number.vue

@@ -1,27 +1,67 @@
 <template>
-    <div v-if="view == 'browse'">{{ $parent.getValue().substring(0, options.length || 200) || getTranslation(options.value || '') }}</div>
+    <div v-if="view == 'browse'">
+        {{ getTranslation(options.prefix || '') }}
+        {{ number_format(($parent.getValue() || getTranslation(options.value || '')), (options.decimals || 0), (options.dec_point || ','), (options.thousands_sep || '.')) }}
+        {{ getTranslation(options.suffix || '') }}
+    </div>
     <div v-else-if="view == 'read'">
-        <p>{{ $parent.getValue() }}</p>
+        <p>
+            {{ getTranslation(options.prefix || '') }}
+            {{ number_format(($parent.getValue() || getTranslation(options.value || '')), (options.decimals || 0), (options.dec_point || ','), (options.thousands_sep || '.')) }}
+            {{ getTranslation(options.suffix || '') }}
+        </p>
     </div>
     <div v-else-if="view == 'edit' || view == 'add' || view == 'mockup'">
-        <input type="text" class="form-control"
+        <input type="number" class="form-control"
                 v-bind:value="$parent.getValue() || getTranslation(options.value || '')"
                 v-on:input="$parent.setValue($event.target.value)"
                 :placeholder="getTranslation(options.placeholder || '')"
-                :disabled="view == 'mockup'">
+                :disabled="view == 'mockup'"
+                :min="options.min || 0"
+                :max="options.max || Number.MAX_SAFE_INTEGER"
+                :step="options.step || 1">
     </div>
     <div v-else-if="view == 'options'">
-        <div v-if="layoutType == 'list'">
-
+        <div class="form-group">
+            <label>Prefix</label>
+            <language-input classes="form-control" placeholder="Prefix" v-model="options.prefix" />
         </div>
-        <div v-else>
-
+        <div class="form-group">
+            <label>Suffix</label>
+            <language-input classes="form-control" placeholder="Suffix" v-model="options.suffix" />
+        </div>
+        <div class="form-group">
+            <label>Min</label>
+            <input type="number" class="form-control" v-model="options.min">
+        </div>
+        <div class="form-group">
+            <label>Max</label>
+            <input type="number" class="form-control" v-model="options.max">
+        </div>
+        <div class="form-group">
+            <label>Step</label>
+            <input type="number" class="form-control" v-model="options.step">
+        </div>
+        <div class="form-group">
+            <label>Decimals</label>
+            <input type="number" class="form-control" v-model="options.decimals" min="0" max="100">
+        </div>
+        <div class="form-group">
+            <label>Decimal separator</label>
+            <input type="text" class="form-control" v-model="options.dec_point">
+        </div>
+        <div class="form-group">
+            <label>Thousands separator</label>
+            <input type="text" class="form-control" v-model="options.thousands_sep">
         </div>
     </div>
 </template>
 
 <script>
 export default {
-    props: ['view', 'layoutType', 'options']
+    props: ['view', 'layoutType', 'options'],
+    computed: {
+
+    }
 };
 </script>

resources/assets/js/scripts.js

@@ -96,6 +96,30 @@ Vue.prototype.trans_choice = function (key, count = 1, replace = {})
     return translation;
 }
 
+Vue.prototype.number_format = function (number, decimals, dec_point, thousands_sep)
+{
+    number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
+    var n = !isFinite(+number) ? 0 : +number,
+        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
+        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
+        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
+        s = '',
+        toFixedFix = function (n, prec) {
+            var k = Math.pow(10, prec);
+            return '' + Math.round(n * k) / k;
+        };
+    // Fix for IE parseFloat(0.55).toFixed(0) = 0;
+    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
+    if (s[0].length > 3) {
+        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
+    }
+    if ((s[1] || '').length < prec) {
+        s[1] = s[1] || '';
+        s[1] += new Array(prec - s[1].length + 1).join('0');
+    }
+    return s.join(dec);
+}
+
 Vue.prototype.slugify = require('slugly');
 
 Vue.filter('uppercase', function (value) {

src/Formfields/BaseFormfield.php

@@ -2,7 +2,7 @@
 
 namespace Bread\Formfields;
 
-abstract class BaseFormfield implements \JsonSerializable
+abstract class BaseFormfield
 {
     public $options;
     public $validation;
@@ -40,12 +40,4 @@ public function store($value)
     public function delete($value)
     {
     }
-
-    public function jsonSerialize()
-    {
-        unset($this->lists);
-        unset($this->views);
-
-        return $this;
-    }
 }

src/Formfields/Number.php

@@ -5,4 +5,14 @@
 class Number extends BaseFormfield
 {
     public $type = 'Number';
+
+    public function update($value)
+    {
+        return number_format($value, $this->options->decimals ?? 0);
+    }
+
+    public function store($value)
+    {
+        return $this->update($value);
+    }
 }

src/Http/Controllers/ManagerController.php

@@ -21,6 +21,7 @@ public function create($table)
 
     public function store(Request $request)
     {
+        // TODO: remove views and lists from formfields
         $json = @json_decode($request->bread);
         if (json_last_error() == JSON_ERROR_NONE) {
             $path = BreadFacade::breadPath().$json->table.'.json';