Fixed IsoDateInput and Rulevalidation + CreateEvent Validation

2021-01-28 00:55:17 +01:00 · 2021-01-28 00:55:17 +01:00 · 1dc0603df3
parent 663d1d3e4d
commit 1dc0603df3
3 changed files with 243 additions and 86 deletions
--- a/src/components/utils/IsoDateInput.vue
+++ b/src/components/utils/IsoDateInput.vue
@ -6,7 +6,7 @@
    :value="getDateTime()"
    :placeholder="placeholder"
    v-on:input="dateTimeChanged"
-    :rules="rules"
+    :rules="customRules"
  >
    <template v-slot:append>
      <q-icon name="event" class="cursor-pointer" v-if="type == 'date' || type == 'datetime'">
@ -43,6 +43,7 @@ interface Props {
  label?: string;
  readonly: boolean;
  type: string;
+  rules: Array<any>;
 }

 export default defineComponent({
@ -60,11 +61,14 @@ export default defineComponent({
      validator: function(value: string) {
        return ['date', 'time', 'datetime'].indexOf(value) !== -1;
      }
+    },
+    rules: {
+      default: []
    }
  },
  setup(props: Props, { emit }: { emit: any }) {
    function getDateTime() {
-      if (props.value) {
+      if (typeof props.value == 'object') {
        switch (props.type) {
          case 'date':
            return getDate();
@ -74,16 +78,17 @@ export default defineComponent({
            return `${getDate()} ${getTime()}`;
        }
      }
+      return props.value;
    }

    function getDate() {
-      if (props.value) {
+      if (typeof props.value == 'object') {
        return date.formatDate(props.value, 'YYYY-MM-DD');
      }
      return '';
    }
    function getTime() {
-      if (props.value) {
+      if (typeof props.value == 'object') {
        return date.formatDate(props.value, 'HH:mm');
      }
      return '';
@ -95,7 +100,6 @@ export default defineComponent({
      switch (props.type) {
        case 'date':
          return 'YYYY-MM-DD';
-          break;
        case 'time':
          return 'HH:mm';
        case 'datetime':
@ -108,11 +112,11 @@ export default defineComponent({
      console.log(dateString);

      if (/^\d{4}-\d\d-\d\d$/.test(dateString)) {
-        console.log('dateChanged', new Date(`${_date.value} ${_time.value}`));
        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
        emit('input', new Date(`${_date.value} ${_time.value}`));
      } else {
-        console.log('no date');
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        emit('input', dateString);
      }
    }

@ -122,9 +126,11 @@ export default defineComponent({
        _date.value = date.formatDate(new Date(), 'YYYY-MM-DD');
      }
      if (/^\d\d:\d\d$/.test(timeString)) {
-        console.log('timeChanged', new Date(`${_date.value} ${_time.value}`));
        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
        emit('input', new Date(`${_date.value} ${_time.value}`));
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        emit('input', timeString);
      }
    }

@ -145,6 +151,9 @@ export default defineComponent({
            console.log('dateTimeChanged');
            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
            emit('input', new Date(`${_date.value} ${_time.value}`));
+          } else {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            emit('input', dateTimeString);
          }
      }
    }
@ -161,26 +170,30 @@ export default defineComponent({
      return !val || /^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(val) || 'Datum und Zeit ist nicht gültig.';
    }

-    const rules = computed(() => {
-      switch (props.type) {
-        case 'date':
-          return [isDate];
-          break;
-        case 'time':
-          return [isTime];
-          break;
-        case 'datetime':
-          return [isDateTime];
-          break;
-      }
-    });
+    // const customRules = computed(() => {
+    //   const _rules = props.rules;
+    //   switch (props.type) {
+    //     case 'date':
+    //       _rules.push(isDate);
+    //     case 'time':
+    //       _rules.push(isTime);
+    //     case 'datetime':
+    //       _rules.push(isDateTime);
+    //   }
+    // });
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const customRules = [
+      props.type == 'date' ? isDate : props.type == 'time' ? isTime : isDateTime,
+      ...props.rules
+    ];

    return {
      getDate,
      getTime,
      getDateTime,
      dateChanged,
-      rules,
+      customRules,
      timeChanged,
      placeholder,
      dateTimeChanged
--- a/src/plugins/schedule/components/management/CreateEvent.vue
+++ b/src/plugins/schedule/components/management/CreateEvent.vue
@ -26,6 +26,7 @@
            label="Veranstaltungsbeginn"
            :rules="[noValidDate, notEmpty]"
          />
+        </q-card-section>
        <q-card-section class="fit  justify-start content-center items-center">
          <q-input
            class="col-xs-12 col-sm-6 q-pa-sm"
@ -35,58 +36,22 @@
            filled
          />
        </q-card-section>
-        </q-card-section>
        <q-card-section>
          <q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
        </q-card-section>

-        <q-card-section v-for="job in event.jobs" v-bind:key="job.id">
+        <q-card-section v-for="(job, index) in event.jobs" v-bind:key="index">
          <q-card class="q-my-auto">
-            <q-card-section class="fit row justify-start content-center items-center">
-              <IsoDateInput
-                class="col-xs-12 col-sm-6 q-pa-sm"
-                v-model="job.start"
-                label="Beginn"
-                type="datetime"
-                :rules="[noValidDate, notEmpty]"
+            <job
+              :job="job"
+              :jobCanDelete="jobDeleteDisabled"
+              @setStart="setStart"
+              @setRequired="setRequired"
+              @setEnd="setEnd"
+              @setComment="setComment"
+              @setJobType="setJobType"
+              @removeJob="removeJob(index)"
            />
-              <IsoDateInput
-                class="col-xs-12 col-sm-6 q-pa-sm"
-                v-model="job.end"
-                label="Ende"
-                type="datetime"
-                :rules="[noValidDate, isAfterDate, notEmpty]"
-              />
-              <q-input
-                class="col-xs-12 col-sm-6 q-pa-sm"
-                label="Beschreibung"
-                type="textarea"
-                v-model="job.comment"
-                filled
-                :rules="[notEmpty]"
-              />
-              <q-select
-                filled
-                use-input
-                label="Dienstart"
-                input-debounce="0"
-                class="col-xs-12 col-sm-6 q-pa-sm"
-                v-model="job.type"
-                :options="jobtypes"
-                option-label="name"
-                option-value="name"
-                map-options
-                clearable
-                :rules="[notEmpty]"
-              />
-              <q-input label="Dienstanzahl" type="number" v-model="job.required_services" filled />
-              <q-btn
-                label="Schicht löschen"
-                color="negative"
-                @click="removeJob(job.id)"
-                :disabled="jobDeleteDisabled"
-              />
-            </q-card-section>
          </q-card>
        </q-card-section>
        <q-card-actions align="right">
@ -101,6 +66,7 @@
 <script lang="ts">
 import { defineComponent, ref, onBeforeMount, computed } from '@vue/composition-api';
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
+import Job from './Job.vue';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
 import { ScheduleInterface } from '../../store/schedule';
@ -108,12 +74,11 @@ import { date } from 'quasar';
 // import { emit } from 'process';
 export default defineComponent({
  name: 'CreateEvent',
-  components: { IsoDateInput },
+  components: { IsoDateInput, Job },
  setup(_, { root }) {
    const store = <Store<StateInterface>>root.$store;
    const state = <ScheduleInterface>store.state.schedule;
    const eventtypes = computed(() => state.eventTypes);
-    const jobtypes = computed(() => state.jobTypes);
    const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);

    const newJob = ref<FG.Job>(({
@ -137,17 +102,42 @@ export default defineComponent({
      void store.dispatch('schedule/getJobTypes');
    });

+    function setStart(data: { job: FG.Job; value: Date }) {
+      data.job.start = data.value;
+    }
+
+    function setEnd(data: { job: FG.Job; value: Date }) {
+      data.job.end = data.value;
+    }
+
+    function setComment(data: { job: FG.Job; value: string }) {
+      data.job.comment = data.value;
+    }
+
+    function setJobType(data: { job: FG.Job; value: FG.JobType }) {
+      data.job.type = data.value;
+    }
+
+    function setRequired(data: { job: FG.Job; value: number }) {
+      data.job.required_services = data.value;
+    }
+
    function addJob() {
      const addJob = Object.assign({}, newJob.value);
      event.value.jobs.unshift(addJob);
    }

-    function removeJob(id: number) {
-      let jobtoremove = event.value.jobs.findIndex(job => job.id == id);
-      if (jobtoremove != undefined) {
-        event.value.jobs.splice(jobtoremove, 1);
-      }
+    //function removeJob(id: number) {
+    //  let jobtoremove = event.value.jobs.findIndex(job => job.id == id);
+    //  if (jobtoremove != undefined) {
+    //    event.value.jobs.splice(jobtoremove, 1);
+    //  }
+    //}
+
+    function removeJob(index: number) {
+      event.value.jobs.splice(index, 1);
    }
+
    function save() {
      console.log('Event:', event);
      store.dispatch('schedule/addEvent', event.value).catch(error => {
@ -177,13 +167,17 @@ export default defineComponent({
      addJob,
      eventtypes,
      removeJob,
-      jobtypes,
      notEmpty,
      noValidDate,
      save,
      reset,
      event,
-      isAfterDate
+      isAfterDate,
+      setStart,
+      setEnd,
+      setComment,
+      setJobType,
+      setRequired
    };
  }
 });
--- a/src/plugins/schedule/components/management/Job.vue
+++ b/src/plugins/schedule/components/management/Job.vue
@ -0,0 +1,150 @@
+<template>
+  <q-card-section class="fit row justify-start content-center items-center">
+    <q-card-section class="fit row justify-start content-center items-center">
+      <IsoDateInput
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        :value="job.start"
+        v-on:input="setStart"
+        label="Beginn"
+        type="datetime"
+        :rules="[noValidDate, notEmpty]"
+      />
+      <IsoDateInput
+        ref="bla"
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        :value="job.end"
+        v-on:input="setEnd"
+        label="Ende"
+        type="datetime"
+        :rules="[noValidDate, isAfterDate, notEmpty]"
+      />
+    </q-card-section>
+    <q-card-section class=" row fit  justify-start content-center items-center">
+      <q-select
+        filled
+        use-input
+        label="Dienstart"
+        input-debounce="0"
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        :value="job.type"
+        :options="jobtypes"
+        v-on:input="setJobType"
+        option-label="name"
+        option-value="name"
+        map-options
+        clearable
+        :rules="[notEmpty]"
+      />
+      <q-input
+        filled
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        label="Dienstanzahl"
+        type="number"
+        :value="job.required_services"
+        @input="setRequired"
+        :rules="[notEmpty]"
+      />
+    </q-card-section>
+    <q-card-section class="fit row justify-start content-center items-center">
+      <q-input
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        label="Beschreibung"
+        type="textarea"
+        :value="job.comment"
+        v-on:input="setComment"
+        filled
+        :rules="[notEmpty]"
+      />
+    </q-card-section>
+    <q-btn label="Schicht löschen" color="negative" @click="removeJob" :disabled="jobCanDelete" />
+  </q-card-section>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from '@vue/composition-api';
+import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
+import { Store } from 'vuex';
+import { StateInterface } from 'src/store';
+import { ScheduleInterface } from '../../store/schedule';
+import { date } from 'quasar';
+interface Props {
+  job: FG.Job;
+  jobCanDelete: boolean;
+}
+export default defineComponent({
+  name: 'Job',
+  components: { IsoDateInput },
+  props: {
+    job: {
+      required: true
+    },
+    jobCanDelete: {
+      default: false
+    }
+  },
+  setup(props: Props, { root, emit }) {
+    const store = <Store<StateInterface>>root.$store;
+    const state = <ScheduleInterface>store.state.schedule;
+    const jobtypes = computed(() => state.jobTypes);
+
+    function setStart(value: Date) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      emit('setStart', { job: props.job, value });
+    }
+
+    function setEnd(value: Date) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      emit('setEnd', { job: props.job, value });
+    }
+
+    function setComment(value: string) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      emit('setComment', { job: props.job, value });
+    }
+
+    function setJobType(value: FG.JobType) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      console.log('setJobType', value);
+      emit('setJobType', { job: props.job, value });
+    }
+
+    function setRequired(value: number) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      emit('setRequired', { job: props.job, value });
+    }
+
+    function removeJob() {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      emit('removeJob');
+    }
+
+    function notEmpty(val: string) {
+      return !!val || 'Feld darf nicht leer sein!';
+    }
+    function noValidDate(val: string) {
+      console.log(val);
+      return !!date.isValid(val) || 'Datum/Zeit muss gesetzt sein!';
+    }
+
+    function isAfterDate(val: Date) {
+      console.log('isAfterDate', props.job.start, val);
+      return props.job.start < new Date(val) || 'Ende muss hinter dem Start liegen';
+    }
+
+    return {
+      jobtypes,
+      setStart,
+      setEnd,
+      setComment,
+      setJobType,
+      setRequired,
+      removeJob,
+      notEmpty,
+      noValidDate,
+      isAfterDate
+    };
+  }
+});
+</script>
+
+<style></style>