[schedule] Improved creating new events

src/flaschengeist.d.ts

@@ -28,11 +28,11 @@ declare namespace FG {
     id: number;
     time: Date;
     amount: number;
-    reversal_id: number;
-    sender_id?: string;
-    receiver_id?: string;
+    reversal_id?: number;
     author_id?: string;
+    sender_id?: string;
     original_id?: number;
+    receiver_id?: string;
   }
   interface Drink {
     id: number;
@@ -91,7 +91,7 @@ declare namespace FG {
     start: Date;
     end?: Date;
     description?: string;
-    type: EventType;
+    type: EventType | number;
     jobs: Array<Job>;
   }
   interface EventType {
@@ -102,8 +102,8 @@ declare namespace FG {
     id: number;
     start: Date;
     end?: Date;
-    comment: string;
-    type: JobType;
+    type: JobType | number;
+    comment?: string;
     services: Array<Service>;
     required_services: number;
   }

src/plugins/schedule/components/management/CreateEvent.vue

@@ -43,13 +43,8 @@
         <q-card-section v-for="(job, index) in event.jobs" :key="index">
           <q-card class="q-my-auto">
             <job
-              :job="job"
+              v-model="event.jobs[index]"
               :job-can-delete="jobDeleteDisabled"
-              @set-start="setStart"
-              @set-required="setRequired"
-              @set-end="setEnd"
-              @set-comment="setComment"
-              @set-job-type="setJobType"
               @remove-job="removeJob(index)"
             />
           </q-card>
@@ -78,59 +73,31 @@ export default defineComponent({
     const eventtypes = computed(() => store.eventTypes);
     const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
 
-    const newJob = ref<FG.Job>(({
+    const newJob = ref<FG.Job>({
       id: NaN,
-      start: undefined,
-      end: undefined,
-      comment: '',
+      start: new Date(),
+      end: date.addToDate(new Date(), { hours: 1 }),
       services: [],
       required_services: 2,
-    } as unknown) as FG.Job);
+      type: store.jobTypes[0],
+    });
 
     const event = ref<FG.Event>({
       id: NaN,
       start: new Date(),
-      description: '',
       jobs: [Object.assign({}, newJob.value)],
-    } as FG.Event);
+      type: store.eventTypes[0],
+    });
 
     onBeforeMount(() => {
       void store.getEventTypes();
       void store.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(job: FG.Job, value: FG.JobType) {
-      job.type = 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);
+      event.value.jobs.push(Object.assign({}, newJob.value));
     }
 
-    //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);
     }
@@ -174,11 +141,6 @@ export default defineComponent({
       reset,
       event,
       isAfterDate,
-      setStart,
-      setEnd,
-      setComment,
-      setJobType,
-      setRequired,
     };
   },
 });

src/plugins/schedule/components/management/Job.vue

@@ -2,59 +2,52 @@
   <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
+        v-model="job.start"
         class="col-xs-12 col-sm-6 q-pa-sm"
-        :value="job.start"
         label="Beginn"
         type="datetime"
-        :rules="[noValidDate, notEmpty]"
-        @input="setStart"
+        :rules="[notEmpty, noValidDate]"
       />
       <IsoDateInput
-        ref="bla"
+        v-model="job.end"
         class="col-xs-12 col-sm-6 q-pa-sm"
-        :value="job.end"
         label="Ende"
         type="datetime"
-        :rules="[noValidDate, isAfterDate, notEmpty]"
-        @input="setEnd"
+        :rules="[notEmpty, noValidDate, isAfterDate]"
       />
     </q-card-section>
     <q-card-section class="row fit justify-start content-center items-center">
       <q-select
-        :key="refreshKey"
+        v-model="job.type"
         filled
         use-input
         label="Dienstart"
         input-debounce="0"
         class="col-xs-12 col-sm-6 q-pa-sm"
-        :value="job.type"
         :options="jobtypes"
         option-label="name"
-        option-value="name"
+        option-value="id"
         map-options
         clearable
         :rules="[notEmpty]"
-        @input="setJobType"
       />
       <q-input
+        v-model="job.required_services"
         filled
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Dienstanzahl"
         type="number"
-        :value="job.required_services"
         :rules="[notEmpty]"
-        @input="setRequired"
       />
     </q-card-section>
     <q-card-section class="fit row justify-start content-center items-center">
       <q-input
+        v-model="job.comment"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Beschreibung"
         type="textarea"
-        :value="job.comment"
         filled
         :rules="[notEmpty]"
-        @input="setComment"
       />
     </q-card-section>
     <q-btn label="Schicht löschen" color="negative" :disabled="jobCanDelete" @click="removeJob" />
@@ -63,7 +56,7 @@
 
 <script lang="ts">
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
-import { defineComponent, computed, ref, onBeforeMount, PropType } from 'vue';
+import { defineComponent, computed, onBeforeMount, PropType } from 'vue';
 import { useScheduleStore } from '../../store';
 import { date } from 'quasar';
 
@@ -71,19 +64,15 @@ export default defineComponent({
   name: 'Job',
   components: { IsoDateInput },
   props: {
-    job: {
+    modelValue: {
       required: true,
       type: Object as PropType<FG.Job>,
     },
     jobCanDelete: Boolean,
   },
   emits: {
-    'set-start': (d: Date) => !!d,
     'remove-job': () => true,
-    'set-end': (d: Date) => !!d,
-    'set-comment': (c: string) => !!c,
-    'set-job-type': (jt: FG.JobType) => !!jt,
-    'set-required': (r: number) => isFinite(r),
+    'update:modelValue': (job: FG.Job) => !!job,
   },
   setup(props, { emit }) {
     const store = useScheduleStore();
@@ -91,27 +80,22 @@ export default defineComponent({
     onBeforeMount(() => store.getJobTypes());
 
     const jobtypes = computed(() => store.jobTypes);
-    const refreshKey = ref<number>(0);
 
-    function setStart(value: Date) {
-      emit('set-start', value);
+    const job = new Proxy(props.modelValue, {
+      get(target, prop) {
+        if (typeof prop === 'string') {
+          return ((props.modelValue as unknown) as Record<string, unknown>)[prop];
         }
-
-    function setEnd(value: Date) {
-      emit('set-end', value);
-    }
-
-    function setComment(value: string) {
-      emit('set-comment', value);
-    }
-
-    function setJobType(value: FG.JobType) {
-      emit('set-job-type', value);
-    }
-
-    function setRequired(value: number) {
-      emit('set-required', value);
+      },
+      set(obj, prop, value) {
+        console.log('...', obj, prop, value);
+        if (typeof prop === 'string') {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          emit('update:modelValue', Object.assign({}, props.modelValue, { [prop]: value }));
         }
+        return true;
+      },
+    });
 
     function removeJob() {
       emit('remove-job');
@@ -121,31 +105,20 @@ export default defineComponent({
       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';
-    }
-
-    function refresh() {
-      refreshKey.value += 1;
+    function isAfterDate(val: string) {
+      return props.modelValue.start < new Date(val) || 'Ende muss hinter dem Start liegen';
     }
 
     return {
+      job,
       jobtypes,
-      setStart,
-      setEnd,
-      setComment,
-      setJobType,
-      setRequired,
       removeJob,
       notEmpty,
       noValidDate,
       isAfterDate,
-      refreshKey,
     };
   },
 });

src/plugins/schedule/store.ts

@@ -27,14 +27,15 @@ export const useScheduleStore = defineStore({
   getters: {},
 
   actions: {
-    async getJobTypes() {
+    async getJobTypes(force = false) {
+      if (force || this.jobTypes.length == 0)
         try {
           const { data } = await api.get<FG.JobType[]>('/schedule/job-types');
           this.jobTypes = data;
-        return this.jobTypes;
         } catch (error) {
           throw error;
         }
+      return this.jobTypes;
     },
 
     async addJobType(name: string) {