[events] Edit events in calendar (QDialog)
This commit is contained in:
parent
f28e597d53
commit
8c6036c686
|
|
@ -1,100 +1,102 @@
|
|||
<template>
|
||||
<q-page padding>
|
||||
<q-card>
|
||||
<q-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
|
||||
><template v-else>erstellen</template>
|
||||
</div>
|
||||
<q-select
|
||||
:model-value="template"
|
||||
filled
|
||||
label="Vorlage"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
:options="templates"
|
||||
option-label="name"
|
||||
map-options
|
||||
clearable
|
||||
:disable="templates.length == 0"
|
||||
@update:modelValue="fromTemplate"
|
||||
@clear="reset()"
|
||||
<q-card>
|
||||
<q-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
|
||||
><template v-else>erstellen</template>
|
||||
</div>
|
||||
<q-select
|
||||
:model-value="template"
|
||||
filled
|
||||
label="Vorlage"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
:options="templates"
|
||||
option-label="name"
|
||||
map-options
|
||||
clearable
|
||||
:disable="templates.length == 0"
|
||||
@update:modelValue="fromTemplate"
|
||||
@clear="reset()"
|
||||
/>
|
||||
<q-input
|
||||
v-model="event.name"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Name"
|
||||
type="text"
|
||||
filled
|
||||
/>
|
||||
<q-select
|
||||
v-model="event.type"
|
||||
filled
|
||||
use-input
|
||||
label="Veranstaltungstyp"
|
||||
input-debounce="0"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
:options="eventtypes"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
clearable
|
||||
:rules="[notEmpty]"
|
||||
/>
|
||||
<IsoDateInput
|
||||
v-model="event.start"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Veranstaltungsbeginn"
|
||||
:rules="[notEmpty]"
|
||||
/>
|
||||
<IsoDateInput
|
||||
v-model="event.end"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Veranstaltungsende"
|
||||
/>
|
||||
<q-input
|
||||
v-model="event.description"
|
||||
class="col-12 q-pa-sm"
|
||||
label="Beschreibung"
|
||||
type="textarea"
|
||||
filled
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section v-if="event.template_id === undefined && modelValue === undefined">
|
||||
<q-btn-toggle
|
||||
v-model="recurrent"
|
||||
spread
|
||||
no-caps
|
||||
:options="[
|
||||
{ label: 'Einmalig', value: false },
|
||||
{ label: 'Wiederkehrend', value: true },
|
||||
]"
|
||||
/>
|
||||
<RecurrenceRule v-if="!!recurrent" v-model="recurrenceRule" />
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
|
||||
</q-card-section>
|
||||
<q-card-section v-for="(job, index) in event.jobs" :key="index">
|
||||
<q-card class="q-my-auto">
|
||||
<job
|
||||
v-model="event.jobs[index]"
|
||||
:job-can-delete="jobDeleteDisabled"
|
||||
@remove-job="removeJob(index)"
|
||||
/>
|
||||
<q-input
|
||||
v-model="event.name"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Name"
|
||||
type="text"
|
||||
filled
|
||||
/>
|
||||
<q-select
|
||||
v-model="event.type"
|
||||
filled
|
||||
use-input
|
||||
label="Veranstaltungstyp"
|
||||
input-debounce="0"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
:options="eventtypes"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
clearable
|
||||
:rules="[notEmpty]"
|
||||
/>
|
||||
<IsoDateInput
|
||||
v-model="event.start"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Veranstaltungsbeginn"
|
||||
:rules="[notEmpty]"
|
||||
/>
|
||||
<IsoDateInput
|
||||
v-model="event.end"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Veranstaltungsende"
|
||||
/>
|
||||
<q-input
|
||||
v-model="event.description"
|
||||
class="col-12 q-pa-sm"
|
||||
label="Beschreibung"
|
||||
type="textarea"
|
||||
filled
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section v-if="event.template_id === undefined && modelValue === undefined">
|
||||
<q-btn-toggle
|
||||
v-model="recurrent"
|
||||
spread
|
||||
no-caps
|
||||
:options="[
|
||||
{ label: 'Einmalig', value: false },
|
||||
{ label: 'Wiederkehrend', value: true },
|
||||
]"
|
||||
/>
|
||||
<RecurrenceRule v-if="!!recurrent" v-model="recurrenceRule" />
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
|
||||
</q-card-section>
|
||||
<q-card-section v-for="(job, index) in event.jobs" :key="index">
|
||||
<q-card class="q-my-auto">
|
||||
<job
|
||||
v-model="event.jobs[index]"
|
||||
:job-can-delete="jobDeleteDisabled"
|
||||
@remove-job="removeJob(index)"
|
||||
/>
|
||||
</q-card>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="Reset" type="reset" />
|
||||
</q-card>
|
||||
</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 color="primary" type="submit" label="Erstellen" />
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-page>
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="Zurücksetzen" type="reset" />
|
||||
<q-btn color="primary" type="submit" label="Speichern" />
|
||||
</q-card-actions>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -116,7 +118,10 @@ export default defineComponent({
|
|||
type: Object as PropType<FG.Event | undefined>,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
emits: {
|
||||
done: (val: boolean) => typeof val === 'boolean',
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const store = useScheduleStore();
|
||||
|
||||
const emptyJob = {
|
||||
|
|
@ -199,6 +204,7 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
reset();
|
||||
emit('done', true);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,21 @@
|
|||
<template>
|
||||
<q-dialog
|
||||
:model-value="editor !== undefined"
|
||||
persistent
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-card>
|
||||
<div class="column">
|
||||
<div class="col" align="right" style="position: sticky; top: 0; z-index: 999">
|
||||
<q-btn round color="negative" icon="close" dense rounded @click="editDone(false)" />
|
||||
</div>
|
||||
<div class="col" style="margin: 0; padding: 0; margin-top: -2.4em">
|
||||
<edit-event v-model="editor" @done="editDone" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<q-page padding>
|
||||
<q-card>
|
||||
<div style="max-width: 1800px; width: 100%">
|
||||
|
|
@ -59,6 +76,7 @@
|
|||
:key="index"
|
||||
v-model="events[timestamp.weekday][index]"
|
||||
@removeEvent="remove"
|
||||
@editEvent="edit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -74,10 +92,11 @@ import { useScheduleStore } from '../../store';
|
|||
import Eventslot from './slots/EventSlot.vue';
|
||||
import { date } from 'quasar';
|
||||
import { startOfWeek } from 'src/utils/datetime';
|
||||
import EditEvent from '../management/EditEvent.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AgendaView',
|
||||
components: { Eventslot },
|
||||
components: { Eventslot, EditEvent },
|
||||
|
||||
setup() {
|
||||
const store = useScheduleStore();
|
||||
|
|
@ -92,6 +111,7 @@ export default defineComponent({
|
|||
calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 3 : 7
|
||||
);
|
||||
const events = ref<Agendas>({});
|
||||
const editor = ref<FG.Event | undefined>(undefined);
|
||||
|
||||
interface Agendas {
|
||||
[index: number]: FG.Event[];
|
||||
|
|
@ -105,6 +125,14 @@ export default defineComponent({
|
|||
await loadAgendas();
|
||||
});
|
||||
|
||||
async function edit(id: number) {
|
||||
editor.value = await store.getEvent(id);
|
||||
}
|
||||
function editDone(changed: boolean) {
|
||||
if (changed) void loadAgendas();
|
||||
editor.value = undefined;
|
||||
}
|
||||
|
||||
async function remove(id: number) {
|
||||
if (await store.removeEvent(id)) {
|
||||
// Successfull removed
|
||||
|
|
@ -192,6 +220,9 @@ export default defineComponent({
|
|||
asYear,
|
||||
asMonth,
|
||||
selectedDate,
|
||||
edit,
|
||||
editor,
|
||||
editDone,
|
||||
events,
|
||||
calendarNext,
|
||||
calendarPrev,
|
||||
|
|
|
|||
|
|
@ -26,11 +26,14 @@
|
|||
/>
|
||||
</q-card-section>
|
||||
<q-card-actions v-if="canEdit || canDelete" vertical align="center">
|
||||
<router-link v-if="canEdit" :to="{ name: 'events-edit', params: { id: event.id } }">
|
||||
<template #default>
|
||||
<q-btn color="secondary" flat label="Bearbeiten" style="min-width: 95%" />
|
||||
</template>
|
||||
</router-link>
|
||||
<q-btn
|
||||
v-if="canEdit"
|
||||
color="secondary"
|
||||
flat
|
||||
label="Bearbeiten"
|
||||
style="min-width: 95%"
|
||||
@click="edit"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="canDelete"
|
||||
color="negative"
|
||||
|
|
@ -61,6 +64,7 @@ export default defineComponent({
|
|||
emits: {
|
||||
'update:modelValue': (val: FG.Event) => !!val,
|
||||
removeEvent: (val: number) => typeof val === 'number',
|
||||
editEvent: (val: number) => !!val,
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const canDelete = computed(() => hasPermission(PERMISSIONS.DELETE));
|
||||
|
|
@ -77,12 +81,16 @@ export default defineComponent({
|
|||
function remove() {
|
||||
emit('removeEvent', props.modelValue.id);
|
||||
}
|
||||
function edit() {
|
||||
emit('editEvent', props.modelValue.id);
|
||||
}
|
||||
|
||||
return {
|
||||
canDelete,
|
||||
canEdit,
|
||||
remove,
|
||||
edit,
|
||||
event,
|
||||
remove,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue