Improve event editing

src/components/management/EditEvent.vue

@@ -51,6 +51,7 @@
           v-model="event.end"
           class="col-xs-12 col-sm-6 q-pa-sm"
           label="Veranstaltungsende"
+          :rules="[afterStart]"
         />
         <q-input
           v-model="event.description"
@@ -80,7 +81,6 @@
         <q-card class="q-my-auto">
           <edit-job-slot
             v-model="event.jobs[index]"
-            :job-can-delete="jobDeleteDisabled"
             @remove-job="removeJob(index)"
           />
         </q-card>
@@ -119,8 +119,8 @@ export default defineComponent({
     },
     date: {
       required: false,
-      default: '',
+      default: undefined,
-      type: String
+      type: String as PropType<string|undefined>
     }
   },
   emits: {
@@ -128,29 +128,35 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const store = useScheduleStore();
+    const startDate = computed(() => {
+      const d = date.buildDate({milliseconds: 0, seconds: 0, minutes: 0, hours: 0})
+      if (!props.date || !date.isValid(props.date)) return d
+      const split = props.date.split('-');
+      return date.adjustDate(d, {year: parseInt(split[0]), month: parseInt(split[1]), date: parseInt(split[2])})
+    })
 
-    const emptyJob = {
+
+    const emptyJob = () => ({
       id: NaN,
-      start: date.adjustDate(new Date(props.date), {hours: (new Date()).getHours()}),
+      start: date.adjustDate(startDate.value, {hours: (new Date()).getHours()}, true),
-      end: date.addToDate(date.adjustDate(new Date(props.date), {hours: (new Date()).getHours()}), {hours: 1}),
+      end: date.addToDate(date.adjustDate(startDate.value, {hours: (new Date()).getHours()}, true), {hours: 1}),
       services: [],
       required_services: 2,
       type: store.jobTypes[0],
-    };
+    });
 
-    const emptyEvent = {
+    const emptyEvent = () => ({
       id: NaN,
-      start: new Date(props.date),
+      start: new Date(startDate.value),
-      jobs: [Object.assign({}, emptyJob)],
+      jobs: [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 event = ref<FG.Event>(props.modelValue || emptyEvent());
     const eventtypes = computed(() => store.eventTypes);
-    const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
     const recurrent = ref(false);
     const recurrenceRule = ref<FG.RecurrenceRule>({ frequency: 'daily', interval: 1 });
 
@@ -161,7 +167,7 @@ export default defineComponent({
     });
 
     function addJob() {
-      event.value.jobs.push(Object.assign({}, emptyJob));
+      event.value.jobs.push(emptyJob());
     }
 
     function removeJob(index: number) {
@@ -223,25 +229,27 @@ export default defineComponent({
     }
 
     function reset() {
-      event.value = Object.assign({}, props.modelValue || emptyEvent);
+      event.value = Object.assign({}, props.modelValue || emptyEvent());
       template.value = undefined;
     }
 
+    const afterStart = (d: Date) => !d || (event.value.start <= d || 'Das Veranstaltungsende muss vor dem Beginn liegen')
+
     return {
-      jobDeleteDisabled,
       addJob,
-      eventtypes,
+      afterStart,
-      templates,
-      removeJob,
-      notEmpty,
-      save,
-      reset,
-      recurrent,
-      fromTemplate,
-      removeTemplate,
-      template,
-      recurrenceRule,
       event,
+      eventtypes,
+      fromTemplate,
+      notEmpty,
+      recurrenceRule,
+      recurrent,
+      removeJob,
+      removeTemplate,
+      reset,
+      save,
+      template,
+      templates,
     };
   },
 });

src/components/management/EditJobSlot.vue

@@ -63,7 +63,10 @@ export default defineComponent({
       required: true,
       type: Object as PropType<FG.Job>,
     },
-    jobCanDelete: Boolean,
+    jobCanDelete: {
+      type: Boolean,
+      default: false,
+    }
   },
   emits: {
     'remove-job': () => true,