@afeefa/vue-app 0.0.67 → 0.0.70

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

@@ -1 +1 @@
-0.0.67
+0.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.67",
+  "version": "0.0.70",
   "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/ADatePicker.vue

@@ -16,6 +16,7 @@
         v-bind="{...$attrs, ...attrs}"
         :rules="validationRules"
         v-on="on"
+        @click:clear="clearDate"
         @click.native="on.click"
       />
     </template>
@@ -24,6 +25,8 @@
       v-if="menu"
       :value="date"
       no-title
+      :type="type"
+      v-bind="$attrs"
       @input="dateChanged"
     />
   </v-menu>
@@ -36,7 +39,7 @@ import { formatDate } from '@a-vue/utils/format-date'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['value', 'validator']
+  props: ['value', 'validator', 'type']
 })
 export default class ADatePicker extends Mixins(ComponentWidthMixin) {
   value_ = null
@@ -62,7 +65,7 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
 
   get date () {
     return this.value_
-      ? this.value_.toISOString().substr(0, 10)
+      ? this.value_.toISOString().substr(0, this.type === 'month' ? 7 : 10)
       : null
   }
 
@@ -70,6 +73,11 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
     return this.$attrs.label
   }
 
+  clearDate () {
+    this.value_ = null
+    this.$emit('input', this.value_)
+  }
+
   dateChanged (date) {
     this.menu = false
     this.value_ = new Date(date)
@@ -78,7 +86,14 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
 
   get formattedDate () {
     const date = this.value_
-    return formatDate(date ? new Date(date) : null)
+    if (!date) {
+      return null
+    }
+    if (this.type === 'month') {
+      const monthName = date.toLocaleString('default', { month: 'long' })
+      return monthName + ' ' + date.getFullYear()
+    }
+    return formatDate(new Date(date))
   }
 
   get validationRules () {

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>

package/src-admin/components/App.vue

@@ -88,7 +88,7 @@
         class="topbar"
       >
         <v-app-bar-nav-icon
-          class="sidebarToggleButton mr-2 ml-4"
+          class="sidebarToggleButton mr-2 ml-3"
           @click="toggleDrawer"
         />
 
@@ -97,7 +97,7 @@
 
       <v-container
         fluid
-        class="pa-8 pt-4"
+        class="pa-8 pt-2"
       >
         <sticky-header />
 
@@ -229,7 +229,7 @@ export default class App extends Vue {
   width: 100%;
   left: 0;
   top: 0;
-  padding: .2rem 1rem;
+  padding: .2rem 1.1rem;
 }
 
 .a-breadcrumbs {

package/src-admin/components/list/ListView.vue

@@ -120,6 +120,7 @@ export default class ListView extends Mixins(ListViewMixin) {
 <style lang="scss" scoped>
 .listView {
   max-width: 100%;
+  padding-top: .2rem; // unless, floating input labels might be cut
   overflow-x: auto;
   overflow-y: hidden;
 }