[events] Create event on specific date

This commit is contained in:
Ferdinand Thiessen 2021-03-28 21:21:04 +02:00
parent 9e570b9746
commit 285803a226
3 changed files with 46 additions and 18 deletions

View File

@ -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-else color="negative" label="Vorlage löschen" @click="removeTemplate" />
<q-btn v-if="template" 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,
type: Object as PropType<FG.Event | undefined>,
default: () => new Date(),
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);
if (event.value.end) event.value.end = date.addToDate(event.value.end, options);
event.value.start = qdate.addToDate(event.value.start, 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);
if (job.end) job.end = date.addToDate(job.end, options);
job.start = qdate.addToDate(job.start, 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;
}
}

View File

@ -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 }}
<template v-if="event.name"
{{ event.type.name
}}<template v-if="event.name"
>: <span style="font-size: 1.2vw">{{ event.name }}</span>
</template>
</div>

View File

@ -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);
},
},
});