[events] Create event on specific date

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

@@ -3,7 +3,7 @@
     <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
+          Veranstaltung <template v-if="modelValue.id">bearbeiten</template
           ><template v-else>erstellen</template>
         </div>
         <q-select
@@ -90,8 +90,8 @@
       </q-card-section>
       <q-card-actions align="around">
         <q-card-actions align="left">
-          <q-btn v-if="!template" color="secondary" label="Neue Vorlage" @click="save(true)" />
+          <q-btn v-if="template" color="negative" label="Vorlage löschen" @click="removeTemplate" />
-          <q-btn v-else color="negative" label="Vorlage löschen" @click="removeTemplate" />
+          <q-btn color="secondary" label="Vorlage speichern" @click="save(true)" />
         </q-card-actions>
         <q-card-actions align="right">
           <q-btn label="Zurücksetzen" type="reset" />
@@ -104,7 +104,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, onBeforeMount } from 'vue';
-import { date, ModifyDateOptions, QForm } from 'quasar';
+import { ModifyDateOptions, QForm, date as qdate } from 'quasar';
 import { useScheduleStore } from '../../store';
 import { EditableEvent, emptyEvent, emptyJob } from '../../store/models';
 import { notEmpty } from 'src/utils/validators';
@@ -117,9 +117,13 @@ export default defineComponent({
   components: { IsoDateInput, Job, RecurrenceRule },
   props: {
     modelValue: {
+      default: () => emptyEvent,
+      type: Object as PropType<EditableEvent>,
+    },
+    date: {
       required: false,
-      default: () => undefined,
+      default: () => new Date(),
-      type: Object as PropType<FG.Event | undefined>,
+      type: [Object, String, Number] as PropType<Date | string | number>,
     },
   },
   emits: {
@@ -128,7 +132,12 @@ export default defineComponent({
   setup(props, { emit }) {
     const store = useScheduleStore();
 
-    const event = ref<EditableEvent>(props.modelValue || Object.assign({}, emptyEvent));
+    const date = computed(() => new Date(props.date));
+    const event = ref<EditableEvent>(
+      props.modelValue.id
+        ? props.modelValue
+        : Object.assign({}, props.modelValue, { start: date.value })
+    );
     const eventtypes = computed(() => store.eventTypes);
     const form = ref<QForm>();
     const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
@@ -152,10 +161,13 @@ 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());
+      event.value.start = new Date(
+        date.value.getUTCFullYear(),
+        date.value.getUTCMonth(),
+        date.value.getUTCDate()
+      );
       const diff = event.value.start.getTime() - tpl.start.getTime();
       console.log(event.value);
       console.log(diff);
@@ -172,7 +184,7 @@ export default defineComponent({
       event.value.is_template = template;
       try {
         // Casting is save as .validate() ensures that type property is set!
-        await store.addEvent(<FG.Event>event.value);
+        await store.saveEvent(<FG.Event>event.value);
         if (props.modelValue === undefined && recurrent.value && !event.value.is_template) {
           let count = 0;
           const options: ModifyDateOptions = {};
@@ -188,11 +200,11 @@ export default defineComponent({
               break;
           }
           while (true) {
-            event.value.start = date.addToDate(event.value.start, options);
+            event.value.start = qdate.addToDate(event.value.start, options);
-            if (event.value.end) event.value.end = date.addToDate(event.value.end, options);
+            if (event.value.end) event.value.end = qdate.addToDate(event.value.end, options);
             event.value.jobs.forEach((job) => {
-              job.start = date.addToDate(job.start, options);
+              job.start = qdate.addToDate(job.start, options);
-              if (job.end) job.end = date.addToDate(job.end, options);
+              if (job.end) job.end = qdate.addToDate(job.end, options);
             });
             count++;
             if (
@@ -200,7 +212,7 @@ export default defineComponent({
               (!recurrenceRule.value.count || count <= recurrenceRule.value.count) &&
               (!recurrenceRule.value.until || event.value.start < recurrenceRule.value.until)
             )
-              void store.addEvent(<FG.Event>event.value);
+              void store.saveEvent(<FG.Event>event.value);
             else break;
           }
         }

src/plugins/schedule/components/overview/slots/EventSlot.vue

@@ -5,8 +5,8 @@
   >
     <q-card-section class="text-primary q-pa-xs">
       <div class="text-weight-bolder text-center" style="font-size: 1.5vw">
-        {{ event.type.name }}
+        {{ event.type.name
-        <template v-if="event.name"
+        }}<template v-if="event.name"
           >: <span style="font-size: 1.2vw">{{ event.name }}</span>
         </template>
       </div>

src/plugins/schedule/store/index.ts

@@ -156,10 +156,26 @@ export const useScheduleStore = defineStore({
       }
     },
 
-    async addEvent(event: FG.Event) {
+    async createEvent(event: FG.Event) {
       const { data } = await api.post<FG.Event>('/events', event);
       if (data.is_template) this.templates.push(data);
       return data;
     },
+
+    async updateEvent(event: FG.Event) {
+      const { data } = await api.put<FG.Event>(`/events/${event.id}`, event);
+      if (data.is_template)
+        this.templates.splice(
+          this.templates.findIndex((t) => t.id === event.id),
+          1,
+          data
+        );
+      return data;
+    },
+
+    async saveEvent(event: FG.Event) {
+      if (event.id) return this.updateEvent(event);
+      else return this.createEvent(event);
+    },
   },
 });