FEDEO/pages/events/[mode]/[[id]].vue

<script setup>
import dayjs from "dayjs";

const route = useRoute()
const router = useRouter()
const dataStore = useDataStore()

const mode = ref(route.params.mode || "show")


const itemInfo = ref({
  resources: []
})
const oldItemInfo = ref({})

const resourceToAdd = ref(dataStore.activeProfile.id)
/*const mapResources = () => {
  console.log(itemInfo.value.resources)
  itemInfo.value.resources.map(resource => {
    console.log(resource)
    return {
      id: resource.id,
      type: resource.type
    }
  })
}*/


const setupPage = () => {

  if(mode.value === "show" || mode.value === "edit"){
    itemInfo.value = dataStore.getEventById(Number(useRoute().params.id)) || {resources: [], start: new Date(), end: new Date(), type: dataStore.getEventTypes[0].label}
  }

  if(route.query.start) itemInfo.value.start = new Date(route.query.start.replace(" ", "+"))
  if(route.query.end) itemInfo.value.end = new Date(route.query.end.replace(" ", "+"))
  if(route.query.resources) {
    itemInfo.value.resources = JSON.parse(route.query.resources).map(resource => {
      return dataStore.getResourcesList.find(i => i.id === resource)
    })
  }
  if(route.query.project) itemInfo.value.project = route.query.project
  if(itemInfo.value.id) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))



}

setupPage()
</script>

<template>
  <UDashboardNavbar :title="mode === 'show' ? 'Termin: ' + itemInfo.title : 'Neuen Termin erstellen'">
    <template #right>
      <UButton
        color="rose"
        @click="router.push(route.params.id ? `/events/show/${route.params.id}` : `/events`)"
        v-if="mode === 'edit'"
      >
        Abbrechen
      </UButton>

      <UButton
        @click="dataStore.createNewItem('events',itemInfo)"
        v-if="mode === 'edit' && !route.params.id"
      >
        Erstellen
      </UButton>
      <UButton
        @click="dataStore.updateItem('events',itemInfo,oldItemInfo)"
        v-else-if="mode === 'edit' && route.params.id"
      >
        Speichern
      </UButton>
      <UButton
        v-if="mode === 'show'"
        @click="router.push(`/events/edit/${itemInfo.id}`)"
      >
          Bearbeiten
      </UButton>
    </template>
  </UDashboardNavbar>
<!--  <UDashboardToolbar>

  </UDashboardToolbar>-->
  <UTabs
      v-if="mode === 'show'"
      :items="[{label:'Informationen'},{label:'Logbuch'}]"
      class="p-5"
  >
    <template #item="{item}">
      <UCard class="mt-5">
          <div v-if="item.label === 'Informationen'">
            {{itemInfo}}
          </div>
          <div v-if="item.label === 'Logbuch'">
            <HistoryDisplay
                type="event"
                v-if="itemInfo"
                :element-id="itemInfo.id"
            />
          </div>
      </UCard>
    </template>
  </UTabs>
  <UForm class="p-5" v-if="mode === 'edit'">
    <UFormGroup
        label="Titel:"
    >
      <UInput
          v-model="itemInfo.title"
      />
    </UFormGroup>
    <UFormGroup
        label="Projekt:"
    >
      <USelectMenu
          v-model="itemInfo.project"
          :options="dataStore.projects"
          option-attribute="name"
          value-attribute="id"
          searchable
          searchable-placeholder="Suche..."
          :search-attributes="['name']"
      >
        <template #label>
          {{dataStore.getProjectById(itemInfo.project) ? dataStore.getProjectById(itemInfo.project).name : "Kein Projekt ausgewählt"}}
        </template>

      </USelectMenu>
    </UFormGroup>
    <UFormGroup
        label="Typ:"
    >
      <USelectMenu
          v-model="itemInfo.type"
          :options="dataStore.getEventTypes"
          option-attribute="label"
          value-attribute="label"
      >

      </USelectMenu>
    </UFormGroup>
    <UFormGroup
      label="Link:"
    >
      <UInput
        v-model="itemInfo.link"
      />
    </UFormGroup>
    <UFormGroup
      label="Notizen:"
    >
      <UTextarea
        v-model="itemInfo.notes"
        rows="3"
      />
    </UFormGroup>
    <UFormGroup
        label="Start:"
    >
      <UPopover :popper="{ placement: 'bottom-start' }">
        <UButton
            variant="outline"
            icon="i-heroicons-calendar-days-20-solid"
            :label="itemInfo.start ? dayjs(itemInfo.start).format('DD.MM.YYYY HH:mm') : 'Datum auswählen'"
        />

        <template #panel="{ close }">
          <LazyDatePicker
              v-model="itemInfo.start"
              mode="dateTime"
          />
        </template>
      </UPopover>
    </UFormGroup>
    <UFormGroup
        label="Ende:"
    >
      <UPopover :popper="{ placement: 'bottom-start' }">
        <UButton
            variant="outline"
            icon="i-heroicons-calendar-days-20-solid"
            :label="itemInfo.end ? dayjs(itemInfo.end).format('DD.MM.YYYY HH:mm') : 'Datum auswählen'"
        />

        <template #panel="{ close }">
          <LazyDatePicker
              v-model="itemInfo.end"
              mode="dateTime"
          />
        </template>
      </UPopover>
    </UFormGroup>
    <UFormGroup
        label="Resource:"
        class="w-full"
    >
      <InputGroup class="w-full">
        <USelectMenu
            v-model="resourceToAdd"
            :options="dataStore.getResourcesList"
            option-attribute="title"
            value-attribute="id"
            class="w-full"
        ></USelectMenu>
        <UButton
            @click="itemInfo.resources.push(dataStore.getResourcesList.find(i => i.id === resourceToAdd))"
            :disabled="itemInfo.resources.find(i => i.id === resourceToAdd)"
        >
          + Hinzufügen
        </UButton>
      </InputGroup>
    </UFormGroup>
    <UTable
        v-if="itemInfo.resources.length > 0"
      :rows="itemInfo.resources"
      :columns="[
          {
            key:'type',
            label: 'Type'
          }, {
            key: 'title',
            label: 'Name'
          }, {
            key: 'remove'
          }
      ]"
    >
      <template #remove-data="{row}">
        <UButton
          color="rose"
          variant="outline"
          @click="itemInfo.resources = itemInfo.resources.filter(i => i.id !== row.id)"
        >
          Entfernen
        </UButton>
      </template>
    </UTable>


  </UForm>
</template>

<style scoped>

</style>