FEDEO/spaces/pages/planningBoard.vue

<script setup>
import FullCalendar from "@fullcalendar/vue3"
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import deLocale from '@fullcalendar/core/locales/de'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list';
import dayjs from "dayjs";


const viewport = useViewport()

watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
})

const supabase = useSupabaseClient()
const dataStore = useDataStore()
const resources = dataStore.getResources
const eventTypes = dataStore.getEventTypes
const events = dataStore.getEvents

const openNewEventModal = ref(false)
const showEventModal = ref(false)
const newEventData = ref({
  resourceId: "",
  resourceType: "",
  title: "",
  type: "Umsetzung",
  start: "",
  end: null
})

const selectedEvent = ref({})

const createEvent = async () => {
  const {data,error} = await supabase
      .from("events")
      .insert([newEventData.value])
      .select()

  if(error) {
    console.log(error)
  } else {
    openNewEventModal.value = false
    newEventData.value = {}
    dataStore.fetchEvents()
  }


}
const calendarOptionsList = reactive({
  locale: deLocale,
  plugins: [listPlugin],
  initialView: "listWeek",
  initialEvents: events,
  nowIndicator: true,
  height: "80vh"
})

const calendarOptionsTimeline = 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
    if(info.resource.extendedProps){
      newEventData.value.resourceType = info.resource.extendedProps.type
    }

    newEventData.value.start = info.startStr
    newEventData.value.end = info.endStr
    openNewEventModal.value = true
  },
  eventClick: function (info){
    selectedEvent.value = info.event
    showEventModal.value = true

    console.log(info)
  },
  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>
    <UModal
      v-model="showEventModal"
    >
      <UCard>
        <template #header>
          {{selectedEvent.title}}
        </template>

        Start: {{dayjs(selectedEvent.startStr).format("DD.MM.YYYY HH:mm")}}<br>
        Ende: {{dayjs(selectedEvent.endStr).format("DD.MM.YYYY HH:mm")}}

        <DevOnly>
          <UDivider class="my-3"/>
          {{selectedEvent}}
        </DevOnly>



      </UCard>


    </UModal>
    <div v-if="viewport.isLessThan('tablet')">
      <FullCalendar
        :options="calendarOptionsList"
      />
    </div>
    <div v-else>
      <FullCalendar
          :options="calendarOptionsTimeline"
      />
    </div>


  </div>
</template>

<style scoped>

</style>