[events] EditEvent set date of templates to today

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

@@ -1,6 +1,6 @@
 <template>
   <q-card>
-    <q-form @submit="save()" @reset="reset">
+    <q-form ref="form" @submit="save()" @reset="reset">
       <q-card-section class="fit row justify-start content-center items-center">
         <div class="text-h6 col-xs-12 col-sm-6 q-pa-sm">
           Veranstaltung <template v-if="modelValue">bearbeiten</template
@@ -74,16 +74,19 @@
       </q-card-section>
       <q-separator />
       <q-card-section>
+        <q-card-section class="row justify-around" align="around">
+          <div class="text-h6 text-center col-6">Schichten</div>
+          <div class="col-6 text-center">
             <q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
+          </div>
         </q-card-section>
-      <q-card-section v-for="(job, index) in event.jobs" :key="index">
+        <template v-for="(job, index) in event.jobs" :key="index">
-        <q-card class="q-my-auto">
           <job
             v-model="event.jobs[index]"
-            :job-can-delete="jobDeleteDisabled"
+            :can-delete="jobDeleteDisabled"
             @remove-job="removeJob(index)"
           />
-        </q-card>
+        </template>
       </q-card-section>
       <q-card-actions align="around">
         <q-card-actions align="left">
@@ -101,8 +104,9 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, onBeforeMount } from 'vue';
-import { date, ModifyDateOptions } from 'quasar';
+import { date, ModifyDateOptions, QForm } from 'quasar';
 import { useScheduleStore } from '../../store';
+import { EditableEvent, emptyEvent, emptyJob } from '../../store/models';
 import { notEmpty } from 'src/utils/validators';
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
 import Job from './Job.vue';
@@ -124,30 +128,14 @@ export default defineComponent({
   setup(props, { emit }) {
     const store = useScheduleStore();
 
-    const emptyJob = {
+    const event = ref<EditableEvent>(props.modelValue || Object.assign({}, emptyEvent));
-      id: NaN,
-      start: new Date(),
-      end: date.addToDate(new Date(), { hours: 1 }),
-      services: [],
-      required_services: 2,
-      type: store.jobTypes[0],
-    };
-
-    const emptyEvent = {
-      id: NaN,
-      start: new Date(),
-      jobs: [Object.assign({}, emptyJob)],
-      type: store.eventTypes[0],
-      is_template: false,
-    };
-
-    const templates = computed(() => store.templates);
-    const template = ref<FG.Event | undefined>(undefined);
-    const event = ref<FG.Event>(props.modelValue || Object.assign({}, emptyEvent));
     const eventtypes = computed(() => store.eventTypes);
+    const form = ref<QForm>();
     const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
     const recurrent = ref(false);
     const recurrenceRule = ref<FG.RecurrenceRule>({ frequency: 'daily', interval: 1 });
+    const templates = computed(() => store.templates);
+    const template = ref<FG.Event>();
 
     onBeforeMount(() => {
       void store.getEventTypes();
@@ -164,14 +152,27 @@ export default defineComponent({
     }
 
     function fromTemplate(tpl: FG.Event) {
+      const today = new Date();
       template.value = tpl;
       event.value = Object.assign({}, tpl);
+      event.value.start = new Date(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
+      const diff = event.value.start.getTime() - tpl.start.getTime();
+      console.log(event.value);
+      console.log(diff);
+      if (event.value.end) event.value.end = new Date(event.value.end.getTime() + diff);
+
+      event.value.jobs.forEach((job) => {
+        job.start.setTime(job.start.getTime() + diff);
+        if (job.end) job.end.setTime(job.end.getTime() + diff);
+      });
     }
 
     async function save(template = false) {
+      if (!(await form.value?.validate())) return;
       event.value.is_template = template;
       try {
-        await store.addEvent(event.value);
+        // Casting is save as .validate() ensures that type property is set!
+        await store.addEvent(<FG.Event>event.value);
         if (props.modelValue === undefined && recurrent.value && !event.value.is_template) {
           let count = 0;
           const options: ModifyDateOptions = {};
@@ -199,7 +200,7 @@ export default defineComponent({
               (!recurrenceRule.value.count || count <= recurrenceRule.value.count) &&
               (!recurrenceRule.value.until || event.value.start < recurrenceRule.value.until)
             )
-              await store.addEvent(event.value);
+              void store.addEvent(<FG.Event>event.value);
             else break;
           }
         }
@@ -231,6 +232,7 @@ export default defineComponent({
       notEmpty,
       save,
       reset,
+      form,
       recurrent,
       fromTemplate,
       removeTemplate,