[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-form ref="form" @submit="save()" @reset="reset">
<q-card-section class="fit row justify-start content-center items-center"> <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"> <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> ><template v-else>erstellen</template>
</div> </div>
<q-select <q-select
@ -90,8 +90,8 @@
</q-card-section> </q-card-section>
<q-card-actions align="around"> <q-card-actions align="around">
<q-card-actions align="left"> <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>
<q-card-actions align="right"> <q-card-actions align="right">
<q-btn label="Zurücksetzen" type="reset" /> <q-btn label="Zurücksetzen" type="reset" />
@ -104,7 +104,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType, ref, onBeforeMount } from 'vue'; 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 { useScheduleStore } from '../../store';
import { EditableEvent, emptyEvent, emptyJob } from '../../store/models'; import { EditableEvent, emptyEvent, emptyJob } from '../../store/models';
import { notEmpty } from 'src/utils/validators'; import { notEmpty } from 'src/utils/validators';
@ -117,9 +117,13 @@ export default defineComponent({
components: { IsoDateInput, Job, RecurrenceRule }, components: { IsoDateInput, Job, RecurrenceRule },
props: { props: {
modelValue: { modelValue: {
default: () => emptyEvent,
type: Object as PropType<EditableEvent>,
},
date: {
required: false, required: false,
default: () => undefined, default: () => new Date(),
type: Object as PropType<FG.Event | undefined>, type: [Object, String, Number] as PropType<Date | string | number>,
}, },
}, },
emits: { emits: {
@ -128,7 +132,12 @@ export default defineComponent({
setup(props, { emit }) { setup(props, { emit }) {
const store = useScheduleStore(); 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 eventtypes = computed(() => store.eventTypes);
const form = ref<QForm>(); const form = ref<QForm>();
const jobDeleteDisabled = computed(() => event.value.jobs.length < 2); const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
@ -152,10 +161,13 @@ export default defineComponent({
} }
function fromTemplate(tpl: FG.Event) { function fromTemplate(tpl: FG.Event) {
const today = new Date();
template.value = tpl; template.value = tpl;
event.value = Object.assign({}, 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(); const diff = event.value.start.getTime() - tpl.start.getTime();
console.log(event.value); console.log(event.value);
console.log(diff); console.log(diff);
@ -172,7 +184,7 @@ export default defineComponent({
event.value.is_template = template; event.value.is_template = template;
try { try {
// Casting is save as .validate() ensures that type property is set! // 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) { if (props.modelValue === undefined && recurrent.value && !event.value.is_template) {
let count = 0; let count = 0;
const options: ModifyDateOptions = {}; const options: ModifyDateOptions = {};
@ -188,11 +200,11 @@ export default defineComponent({
break; break;
} }
while (true) { 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) => { 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++; count++;
if ( if (
@ -200,7 +212,7 @@ export default defineComponent({
(!recurrenceRule.value.count || count <= recurrenceRule.value.count) && (!recurrenceRule.value.count || count <= recurrenceRule.value.count) &&
(!recurrenceRule.value.until || event.value.start < recurrenceRule.value.until) (!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; else break;
} }
} }

View File

@ -5,8 +5,8 @@
> >
<q-card-section class="text-primary q-pa-xs"> <q-card-section class="text-primary q-pa-xs">
<div class="text-weight-bolder text-center" style="font-size: 1.5vw"> <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> >: <span style="font-size: 1.2vw">{{ event.name }}</span>
</template> </template>
</div> </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); const { data } = await api.post<FG.Event>('/events', event);
if (data.is_template) this.templates.push(data); if (data.is_template) this.templates.push(data);
return 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);
},
}, },
}); });