141 lines
3.3 KiB
Vue
141 lines
3.3 KiB
Vue
<script setup>
|
|
import FullCalendar from "@fullcalendar/vue3"
|
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
|
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
|
|
import deLocale from '@fullcalendar/core/locales/de'
|
|
import interactionPlugin from '@fullcalendar/interaction'
|
|
|
|
const supabase = useSupabaseClient()
|
|
|
|
const {getResources, getEvents, getEventTypes, fetchEvents} = useDataStore()
|
|
const resources = getResources
|
|
const eventTypes = getEventTypes
|
|
const events = getEvents
|
|
|
|
const openNewEventModal = ref(false)
|
|
const newEventData = ref({
|
|
resourceId: "",
|
|
resourceType: "",
|
|
title: "",
|
|
type: "Umsetzung",
|
|
start: "",
|
|
end: null
|
|
})
|
|
const createEvent = async () => {
|
|
const {data,error} = await supabase
|
|
.from("events")
|
|
.insert([newEventData.value])
|
|
.select()
|
|
|
|
if(error) console.log(error)
|
|
|
|
openNewEventModal.value = false
|
|
newEventData.value = {}
|
|
fetchEvents()
|
|
}
|
|
|
|
|
|
const calendarOptions = reactive({
|
|
schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
|
|
locale: deLocale,
|
|
plugins: [resourceTimelinePlugin, interactionPlugin],
|
|
initialView: "resourceTimelineDay",
|
|
headerToolbar: {
|
|
left: 'prev,next',
|
|
center: 'title',
|
|
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
|
|
},
|
|
initialEvents: events,
|
|
selectable: true,
|
|
select: function (info) {
|
|
//console.log(info)
|
|
newEventData.value.resourceId = info.resource.id
|
|
newEventData.value.resourceType = info.resource.extendedProps.type
|
|
newEventData.value.start = info.startStr
|
|
newEventData.value.end = info.endStr
|
|
openNewEventModal.value = true
|
|
},
|
|
resourceGroupField: "type",
|
|
resources: resources,
|
|
nowIndicator:true
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<UModal
|
|
v-model="openNewEventModal"
|
|
>
|
|
<UCard>
|
|
<template #header>
|
|
Neuen Termin erstellen
|
|
</template>
|
|
|
|
<UFormGroup
|
|
label="Resource:"
|
|
>
|
|
<USelectMenu
|
|
v-model="newEventData.resourceId"
|
|
:options="resources"
|
|
value-attribute="id"
|
|
option-attribute="title"
|
|
>
|
|
<template #label>
|
|
<span>{{ resources.find(resource => resource.id === newEventData.resourceId).title }}</span>
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Titel:"
|
|
>
|
|
<UInput
|
|
v-model="newEventData.title"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Typ:"
|
|
>
|
|
<USelectMenu
|
|
v-model="newEventData.type"
|
|
:options="eventTypes"
|
|
option-attribute="label"
|
|
value-attribute="label"
|
|
>
|
|
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Start:"
|
|
>
|
|
<UInput
|
|
v-model="newEventData.start"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Ende:"
|
|
>
|
|
<UInput
|
|
v-model="newEventData.end"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<template #footer>
|
|
<UButton
|
|
@click="createEvent"
|
|
>
|
|
Erstellen
|
|
</UButton>
|
|
</template>
|
|
|
|
</UCard>
|
|
</UModal>
|
|
<FullCalendar
|
|
:options="calendarOptions"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |