[events] Edit events in calendar (QDialog)

This commit is contained in:
Ferdinand Thiessen 2021-03-25 14:11:54 +01:00
parent f28e597d53
commit 8c6036c686
3 changed files with 145 additions and 100 deletions

View File

@ -1,5 +1,4 @@
<template>
<q-page padding>
<q-card>
<q-form @submit="save()" @reset="reset">
<q-card-section class="fit row justify-start content-center items-center">
@ -86,15 +85,18 @@
/>
</q-card>
</q-card-section>
<q-card-actions align="right">
<q-btn label="Reset" type="reset" />
<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-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>
</q-page>
</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);
}

View File

@ -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,

View File

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