@afeefa/vue-app 0.0.79 → 0.0.81

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

@@ -1 +1 @@
-0.0.79
+0.0.81

package/package.json

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

package/src/components/ADatePicker.vue

@@ -7,15 +7,16 @@
     min-width="auto"
   >
     <template #activator="{ on, attrs }">
-      <v-combobox
+      <v-text-field
         ref="input"
         :value="formattedDate"
         :label="label"
         :style="cwm_widthStyle"
-        readonly
         v-bind="{...$attrs, ...attrs}"
         :rules="validationRules"
+        :readonly="type === 'month'"
         v-on="on"
+        @input="dateInputChanged"
         @click:clear="clearDate"
         @click.native="on.click"
       />
@@ -56,6 +57,7 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
     if (this.validator) {
       this.$refs.input.validate(true)
     }
+    this.$refs.input.validate(true)
   }
 
   @Watch('value')
@@ -78,9 +80,22 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
     this.$emit('input', this.value_)
   }
 
+  isDate (value) {
+    return value && value.match(/^(3[01]|[12][0-9]|0?[1-9]).(1[012]|0?[1-9]).((?:19|20)\d{2})$/)
+  }
+
+  dateInputChanged (value) {
+    if (!value) {
+      this.dateChanged(null)
+    } else if (this.isDate(value)) {
+      const [day, month, year] = value.split('.')
+      this.dateChanged(new Date(year + '-' + month + '-' + day))
+    }
+  }
+
   dateChanged (date) {
     this.menu = false
-    this.value_ = new Date(date)
+    this.value_ = date ? new Date(date) : null
     this.$emit('input', this.value_)
   }
 
@@ -97,7 +112,23 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
   }
 
   get validationRules () {
-    return (this.validator && this.validator.getRules(this.label)) || []
+    const dateFormat = v => {
+      if (v && !this.isDate(v)) {
+        return 'Das Datum sollte das Format TT.MM.JJJJ haben.'
+      }
+      return true
+    }
+
+    let rules = []
+    if (this.validator) {
+      rules = this.validator.getRules(this.label)
+    }
+
+    if (this.type !== 'month') {
+      rules.push(dateFormat)
+    }
+
+    return rules
   }
 }
 </script>

package/src/components/ADialog.vue

@@ -23,10 +23,24 @@
         {{ title }}
       </v-card-title>
 
-      <v-card-text v-if="message">
+      <v-card-text
+        v-if="message"
+      >
         <span v-html="message" />
       </v-card-text>
 
+      <v-card-text
+        v-if="info"
+        class="dialogInfo"
+      >
+        <v-alert
+          dense
+          type="info"
+        >
+          {{ info }}
+        </v-alert>
+      </v-card-text>
+
       <v-card-text v-if="$slots.default">
         <slot :props="props" />
       </v-card-text>
@@ -70,6 +84,7 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, CancelOnEs
 
   title = null
   message = null
+  info = null
   yesButton = null
   yesColor = null
   cancelButton = null
@@ -103,6 +118,7 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, CancelOnEs
 
       this.title = this.payload.title
       this.message = this.payload.message
+      this.info = this.payload.info
       this.yesButton = this.payload.yesButton
       this.yesColor = this.payload.yesColor
       this.cancelButton = this.payload.cancelButton
@@ -178,6 +194,7 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, CancelOnEs
 
     this.title = dialogEvent.payload.title
     this.message = dialogEvent.payload.message
+    this.info = dialogEvent.payload.info
     this.yesButton = dialogEvent.payload.yesButton
     this.yesColor = dialogEvent.payload.yesColor
     this.cancelButton = dialogEvent.payload.cancelButton
@@ -234,4 +251,9 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, CancelOnEs
     }
   }
 }
+
+.dialogInfo {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
 </style>

package/src-admin/components/form/RemoveButton.vue

@@ -41,7 +41,7 @@ import { DialogEvent } from '@a-vue/events'
 import { randomCssClass } from '@a-vue/utils/random'
 
 @Component({
-  props: ['title', 'itemTitle', 'protect']
+  props: ['title', 'message', 'info', 'itemTitle', 'protect']
 })
 export default class EditPage extends Vue {
   dialogId = randomCssClass(10)
@@ -56,7 +56,8 @@ export default class EditPage extends Vue {
     const result = await this.$events.dispatch(new DialogEvent(DialogEvent.SHOW, {
       id: this.dialogId,
       title: this.itemTitle + ' löschen?',
-      message: 'Soll ' + this.itemTitle + ' gelöscht werden?',
+      message: ['Soll ' + this.itemTitle + ' gelöscht werden?', this.message].filter(m => m).join('<br><br>'),
+      info: this.info,
       yesButton: 'Löschen',
       yesColor: 'red white--text'
     }))