@afeefa/vue-app 0.0.67 → 0.0.68

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.67
+0.0.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/api-resources/SaveAction.js

@@ -1,3 +1,6 @@
+import { AlertEvent } from '@a-vue/events'
+import { eventBus } from '@a-vue/plugins/event-bus/EventBus'
+
 import { ApiAction } from './ApiAction'
 
 export class SaveAction extends ApiAction {
@@ -12,4 +15,12 @@ export class SaveAction extends ApiAction {
 
     this.alert('Die Daten wurden gespeichert.')
   }
+
+  processError (result) {
+    eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
+      headline: 'Die Daten konntent nicht gespeichert werden.',
+      message: result.message,
+      detail: result.detail
+    }))
+  }
 }

package/src/components/ATextField.vue

@@ -20,7 +20,7 @@ import { debounce } from '@a-vue/utils/debounce'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['focus', 'debounce', 'validator', 'password']
+  props: ['focus', 'debounce', 'validator', {password: false, number: false}]
 })
 export default class ATextField extends Mixins(ComponentWidthMixin) {
   showPassword = false
@@ -58,21 +58,21 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
   }
 
   get type () {
-    if (this.password !== undefined && !this.showPassword) {
+    if (this.password && !this.showPassword) {
       return 'password'
     }
     return 'text'
   }
 
   get appendIcon () {
-    if (this.password !== undefined) {
+    if (this.password) {
       return this.showPassword ? '$eyeIcon' : '$eyeOffIcon'
     }
     return null
   }
 
   get autocomplete () {
-    if (this.password !== undefined) {
+    if (this.password) {
       return 'new-password'
     }
     return null
@@ -87,7 +87,8 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
     if (!this.validator) {
       return false
     }
-    return this.validator.getParams().max || false
+
+    return (!this.number && this.validator.getParams().max) || false
   }
 }
 </script>

package/src/components/form/fields/FormFieldText.vue

@@ -1,9 +1,11 @@
 <template>
   <a-text-field
-    v-model="model[name]"
+    :value="internalValue"
     :label="label || name"
     :validator="validator"
     v-bind="$attrs"
+    @input="textFieldValueChanged"
+    @blur="onBlur"
   />
 </template>
 
@@ -11,7 +13,70 @@
 import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
-@Component
+@Component({
+  props: [{emptyNull: false}]
+})
 export default class FormFieldText extends Mixins(FormFieldMixin) {
+  internalValue = ''
+
+  created () {
+    this.setInternalValue(this.model[this.name])
+    this.$watch(() => this.model[this.name], value => {
+      this.setInternalValue(value)
+    })
+  }
+
+  onBlur () {
+    this.setInternalValue(this.model[this.name], true)
+  }
+
+  textFieldValueChanged (value) {
+    this.internalValue = value
+
+    // cast to number
+    if (this.isNumber) {
+      value = Number(value)
+      if (isNaN(value)) {
+        return // do not set anything to the model
+      }
+    }
+
+    // set model value to null if empty
+    if (this.emptyNull) {
+      if (this.isNumber) {
+        if (value === 0) {
+          value = null
+        }
+      } else {
+        if (!value) {
+          value = null
+        }
+      }
+    }
+
+    this.model[this.name] = value
+  }
+
+  setInternalValue (value, reset = false) {
+    if (this.isNumber) {
+      // reset text field if value is null but keep leading 0 (allows for copy and paste)
+      if (value === null) {
+        if (!reset && this.internalValue === '0') {
+          value = '0'
+        } else {
+          value = ''
+        }
+      }
+    } else { // null string should be ''
+      if (!value) {
+        value = ''
+      }
+    }
+    this.internalValue = value
+  }
+
+  get isNumber () {
+    return this.$attrs.number === ''
+  }
 }
 </script>