src/components/utils/IsoDateInput.vue

@@ -6,9 +6,11 @@
     :label="label"
     :placeholder="placeholder"
     :rules="customRules"
+    :clearable="clearable"
+    @clear="dateTime = ''"
   >
     <template #append>
-      <q-icon v-if="type == 'date' || type == 'datetime'" name="event" class="cursor-pointer">
+      <q-icon v-if="'date' || type == 'datetime'" name="event" class="cursor-pointer">
         <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
           <q-date v-model="date" mask="YYYY-MM-DD">
             <div class="row items-center justify-end">
@@ -37,11 +39,12 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
 import { date as q_date } from 'quasar';
+import { stringIsDate, stringIsTime, stringIsDateTime } from 'src/utils/validators';
 
 export default defineComponent({
   name: 'IsoDateInput',
   props: {
-    modelValue: { type: Object as PropType<Date>, default: new Date() },
+    modelValue: { type: Object as PropType<Date | undefined>, default: undefined },
     type: {
       type: String,
       default: 'date',
@@ -50,12 +53,21 @@ export default defineComponent({
     label: { type: String, default: 'Datum' },
     readonly: Boolean,
     rules: {
-      type: Array as PropType<unknown[]>,
+      type: Array as PropType<Validator[]>,
       default: () => [],
     },
   },
-  emits: { 'update:modelValue': (date: Date) => !!date },
+  emits: { 'update:modelValue': (date?: Date) => !!date || !date },
   setup(props, { emit }) {
+    const customRules = computed(() => [
+      props.type == 'date' ? stringIsDate : props.type == 'time' ? stringIsTime : stringIsDateTime,
+      ...props.rules,
+    ]);
+
+    const clearable = computed(() =>
+      customRules.value.every((r) => (<Validator>r)(undefined) === true)
+    );
+
     const placeholder = computed(() => {
       switch (props.type) {
         case 'date':
@@ -85,8 +97,9 @@ export default defineComponent({
     });
 
     const dateTime = computed({
-      get: () => q_date.formatDate(props.modelValue, placeholder.value),
+      get: () => (props.modelValue ? q_date.formatDate(props.modelValue, placeholder.value) : ''),
       set: (v: string) => {
+        if (!v) emit('update:modelValue', undefined);
         switch (props.type) {
           case 'date':
             date.value = v;
@@ -113,7 +126,8 @@ export default defineComponent({
     }
 
     function modifyDate(v: string, d: Date | undefined = props.modelValue) {
-      if (d && /^\d{4}-\d\d-\d\d$/.test(v)) {
+      if (!d) d = new Date();
+      if (/^\d{4}-\d\d-\d\d$/.test(v)) {
         const split = v.split('-');
         return q_date.adjustDate(d, {
           year: +split[0],
@@ -123,24 +137,8 @@ export default defineComponent({
       }
     }
 
-    function isDate(val: string) {
-      return !val || /^\d{4}-\d\d-\d\d$/.test(val) || 'Datum ist nicht gültig.';
-    }
-
-    function isTime(val: string) {
-      return !val || /^\d\d:\d\d$/.test(val) || 'Zeit ist nicht gültig.';
-    }
-
-    function isDateTime(val: string) {
-      return !val || /^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(val) || 'Datum und Zeit ist nicht gültig.';
-    }
-
-    const customRules = [
-      props.type == 'date' ? isDate : props.type == 'time' ? isTime : isDateTime,
-      ...props.rules,
-    ];
-
     return {
+      clearable,
       date,
       time,
       dateTime,

src/flaschengeist.d.ts

@@ -34,6 +34,49 @@ declare namespace FG {
     original_id?: number;
     receiver_id?: string;
   }
+  interface Event {
+    id: number;
+    start: Date;
+    end?: Date;
+    description?: string;
+    type: EventType | number;
+    jobs: Array<Job>;
+    recurrence_rule?: RecurrenceRule;
+    template_id?: number;
+  }
+  interface EventType {
+    id: number;
+    name: string;
+  }
+  interface Invite {
+    id: number;
+    job_id: number;
+    invitee_id: string;
+    sender_id: string;
+  }
+  interface Job {
+    id: number;
+    start: Date;
+    end?: Date;
+    type: JobType | number;
+    comment?: string;
+    services: Array<Service>;
+    required_services: number;
+  }
+  interface JobType {
+    id: number;
+    name: string;
+  }
+  interface RecurrenceRule {
+    frequency: string;
+    until?: Date;
+    count?: number;
+    interval: number;
+  }
+  interface Service {
+    userid: string;
+    value: number;
+  }
   interface Drink {
     id: number;
     article_id?: string;
@@ -86,33 +129,4 @@ declare namespace FG {
     id: number;
     name: string;
   }
-  interface Event {
-    id: number;
-    start: Date;
-    end?: Date;
-    description?: string;
-    type: EventType | number;
-    jobs: Array<Job>;
-  }
-  interface EventType {
-    id: number;
-    name: string;
-  }
-  interface Job {
-    id: number;
-    start: Date;
-    end?: Date;
-    type: JobType | number;
-    comment?: string;
-    services: Array<Service>;
-    required_services: number;
-  }
-  interface JobType {
-    id: number;
-    name: string;
-  }
-  interface Service {
-    userid: string;
-    value: number;
-  }
 }

src/plugins.d.ts

@@ -1,6 +1,10 @@
 import { RouteRecordRaw } from 'vue-router';
 import { Component, ComputedRef } from 'vue';
 
+declare global {
+  type Validator = (value: unknown) => boolean | string;
+}
+
 declare namespace FG_Plugin {
   interface ShortCutLink {
     link: string;

src/utils/validators.ts

@@ -0,0 +1,15 @@
+export function notEmpty(val: unknown) {
+  return !!val || 'Feld darf nicht leer sein!';
+}
+
+export function stringIsDate(val: string) {
+  return !val || /^\d{4}-\d\d-\d\d$/.test(val) || 'Datum ist nicht gültig.';
+}
+
+export function stringIsTime(val: string) {
+  return !val || /^\d\d:\d\d$/.test(val) || 'Zeit ist nicht gültig.';
+}
+
+export function stringIsDateTime(val: string) {
+  return !val || /^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(val) || 'Datum und Zeit ist nicht gültig.';
+}