update job start and end time when event time change

src/components/management/EditEvent.vue

@@ -52,6 +52,7 @@
           class="col-xs-12 col-sm-6 q-pa-sm"
           label="Veranstaltungsende"
           :rules="[afterStart]"
+          :key="update_time"
         />
         <q-input
           v-model="event.description"
@@ -61,7 +62,7 @@
           filled
         />
       </q-card-section>
-      <q-card-section v-if="event.is_template !== true && modelValue === undefined">
+      <q-card-section v-if="modelValue === undefined">
         <q-btn-toggle
           v-model="recurrent"
           spread
@@ -81,8 +82,7 @@
             <q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
           </div>
         </div>
-        <template v-for="(job, index) in event.jobs" :key="index">
-          <!--:ref="active === index ? 'activeJob' : undefined"-->
+        <template v-for="(job, index) in event.jobs" :key="index + update_time">
           <edit-job-slot
             ref="activeJob"
             v-model="event.jobs[index]"
@@ -196,14 +196,17 @@ export default defineComponent({
       const diff = event.value.start.getTime() - tpl.start.getTime();
       // Adjust end of event and all jobs
       if (event.value.end) event.value.end.setTime(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);
+      event.value.jobs = [];
+      tpl.jobs.forEach((job) => {
+        const copied_job: FG.Job = Object.assign({}, job, { id: NaN });
+        copied_job.start.setTime(copied_job.start.getTime() + diff);
+        if (copied_job.end) copied_job.end.setTime(copied_job.end.getTime() + diff);
+        event.value.jobs.push(<Job>copied_job);
       });
     }
 
-    async function save(template = false) {
-      event.value.is_template = template;
+    async function save(is_template = false) {
+      event.value.is_template = is_template;
       try {
         await store.addEvent(event.value);
 
@@ -267,7 +270,54 @@ export default defineComponent({
       });
     }
 
+    const computed_start = computed({
+      get: () => event.value?.start,
+      set: (value) => {
+        event.value.start = value;
+      },
+    });
+    const computed_end = computed({
+      get: () => event.value?.end,
+      set: (value) => {
+        event.value.end = value;
+      },
+    });
+
+    const update_time = ref(false);
+
+    watch(computed_start, (newValue, oldValue) => {
+      update_time.value = true;
+      const diff = newValue.getTime() - oldValue.getTime();
+      event.value?.jobs.forEach((job) => {
+        job.start.setTime(job.start.getTime() + diff);
+      });
+      computed_end.value?.setTime(computed_end.value?.getTime() + diff);
+      setTimeout(() => {
+        update_time.value = false;
+      }, 0);
+    });
+
+    watch(computed_end, (newValue, oldValue) => {
+      if (newValue && oldValue) {
+        update_time.value = true;
+        if (!newValue || !oldValue) return;
+        const diff = newValue.getTime() - oldValue.getTime();
+        event.value?.jobs.forEach((job) => {
+          if (job.end) job.end.setTime(job.end.getTime() + diff);
+          else job.end = new Date(newValue.getTime());
+        });
+      } else if (newValue && !oldValue) {
+        event.value?.jobs.forEach((job) => {
+          if (!job.end) job.end = new Date(newValue.getTime());
+        });
+      }
+      setTimeout(() => {
+        update_time.value = false;
+      }, 0);
+    });
+
     return {
+      update_time,
       activate,
       active,
       addJob,