Added Teams

Minor Rework of Plantafel

frontend/pages/organisation/plantafel.vue

@@ -6,9 +6,11 @@ import resourceTimelinePlugin from "@fullcalendar/resource-timeline"
 import { parseDate } from "@internationalized/date"
 
 const router = useRouter()
+const auth = useAuthStore()
 const profileStore = useProfileStore()
 const toast = useToast()
-const { $dayjs } = useNuxtApp()
+const { $api, $dayjs } = useNuxtApp()
+const { create: createEvent } = useEntities("events")
 const { list: listStaffTimeSpans, createEntry, update: updateStaffTimeEntry } = useStaffTime()
 
 const loading = ref(true)
@@ -27,6 +29,21 @@ const resources = ref([])
 const events = ref([])
 const profiles = ref([])
 const inventoryitems = ref([])
+const savingQuickConfig = ref(false)
+const quickEntryConfig = reactive({
+  name: "Quick-Eintrag",
+  color: "#2563eb"
+})
+const quickEntryColorOptions = [
+  { label: "Blau", value: "#2563eb" },
+  { label: "Grün", value: "#16a34a" },
+  { label: "Orange", value: "#ea580c" },
+  { label: "Rot", value: "#dc2626" },
+  { label: "Pink", value: "#db2777" },
+  { label: "Türkis", value: "#0f766e" },
+  { label: "Grau", value: "#4b5563" },
+  { label: "Schwarz", value: "#111827" }
+]
 
 const isAbsenceModalOpen = ref(false)
 const absenceForm = reactive({
@@ -75,6 +92,7 @@ const endDateValue = computed({
 
 const resourceTypeOptions = [
   { label: "Alle Ressourcen", value: "all" },
+  { label: "Teams", value: "Team" },
   { label: "Profile", value: "Profile" },
   { label: "Inventarartikel", value: "Inventarartikel" }
 ]
@@ -124,6 +142,15 @@ const absenceModalTitle = computed(() =>
     : (absenceForm.type === "sick" ? "Krank eintragen" : "Urlaub eintragen")
 )
 
+const resolvedQuickEntryConfig = computed(() => {
+  const config = profileStore.ownTenant?.calendarConfig?.quickEntry || {}
+
+  return {
+    name: config.name || "Quick-Eintrag",
+    color: config.color || "#2563eb"
+  }
+})
+
 const visibleResources = computed(() => {
   if (selectedType.value === "all") return resources.value
   return resources.value.filter((resource) => resource.type === selectedType.value)
@@ -184,8 +211,7 @@ const calendarOptions = computed(() => ({
     }
   },
   select(info) {
-    const resourceIds = info.resource?.id ? [info.resource.id] : []
-    router.push(`/standardEntity/events/create?startDate=${encodeURIComponent(info.startStr)}&endDate=${encodeURIComponent(info.endStr)}&resources=${encodeURIComponent(JSON.stringify(resourceIds))}&source=timeline`)
+    createQuickEvent(info)
   },
   eventClick(info) {
     if (info.event.extendedProps.entrytype === "staff-absence") {
@@ -199,7 +225,7 @@ const calendarOptions = computed(() => ({
       return
     }
 
-    router.push(`/standardEntity/events/show/${info.event.extendedProps.eventId}`)
+    router.push(`/standardEntity/events/edit/${info.event.extendedProps.eventId}`)
   },
   datesSet(info) {
     const nextFrom = $dayjs(info.start).format("YYYY-MM-DD")
@@ -225,7 +251,12 @@ function resolveEventColor(eventType) {
 function resolveEventTitle(event, projectsById) {
   if (event.name) return event.name
   if (event.project && projectsById.has(event.project)) return projectsById.get(event.project).name
-  return "Planung"
+  return event.quick ? resolvedQuickEntryConfig.value.name : "Planung"
+}
+
+function resolveRenderedEventColor(event) {
+  if (event?.quick) return resolvedQuickEntryConfig.value.color
+  return resolveEventColor(event.eventtype)
 }
 
 function getProfileLabel(profile) {
@@ -241,23 +272,83 @@ function getAbsenceColor(type) {
   return type === "sick" ? "#dc2626" : "#d97706"
 }
 
+function getTeamLabel(team) {
+  if (!team) return "Team"
+  return team.branch?.name ? `${team.name} (${team.branch.name})` : team.name
+}
+
+function getProfileResourceIds(profile) {
+  const assignedTeams = Array.isArray(profile?.teams) ? profile.teams.filter((team) => team?.id) : []
+
+  if (!assignedTeams.length) {
+    return [`P-${profile.id}`]
+  }
+
+  return assignedTeams.map((team) => `T-${team.id}:P-${profile.id}`)
+}
+
+function normalizeSelectedResourceIds(resourceId) {
+  if (!resourceId) return []
+
+  if (resourceId.startsWith("T-") && resourceId.includes(":P-")) {
+    return [`P-${resourceId.split(":P-")[1]}`]
+  }
+
+  if (resourceId.startsWith("T-")) {
+    const teamId = Number(resourceId.replace("T-", ""))
+    return profiles.value
+      .filter((profile) => (profile.teams || []).some((team) => team?.id === teamId))
+      .map((profile) => `P-${profile.id}`)
+  }
+
+  return [resourceId]
+}
+
 function buildResources({ profiles, inventoryitems }) {
-  return [
-    ...profiles
-      .filter((profile) => !profile.archived)
-      .map((profile) => ({
-        id: `P-${profile.id}`,
-        type: "Profile",
-        title: getProfileLabel(profile)
-      })),
-    ...inventoryitems
-      .filter((item) => !item.archived && item.usePlanning)
-      .map((item) => ({
-        id: `I-${item.id}`,
-        type: "Inventarartikel",
-        title: item.name
-      }))
-  ]
+  const teamResources = []
+  const profileResources = []
+
+  profiles
+    .filter((profile) => !profile.archived)
+    .forEach((profile) => {
+      const assignedTeams = Array.isArray(profile?.teams) ? profile.teams.filter((team) => team?.id) : []
+
+      if (!assignedTeams.length) {
+        profileResources.push({
+          id: `P-${profile.id}`,
+          type: "Profile",
+          title: getProfileLabel(profile)
+        })
+        return
+      }
+
+      assignedTeams.forEach((team) => {
+        if (!teamResources.find((resource) => resource.id === `T-${team.id}`)) {
+          teamResources.push({
+            id: `T-${team.id}`,
+            type: "Team",
+            title: getTeamLabel(team)
+          })
+        }
+
+        profileResources.push({
+          id: `T-${team.id}:P-${profile.id}`,
+          parentId: `T-${team.id}`,
+          type: "Profile",
+          title: getProfileLabel(profile)
+        })
+      })
+    })
+
+  const inventoryResources = inventoryitems
+    .filter((item) => !item.archived && item.usePlanning)
+    .map((item) => ({
+      id: `I-${item.id}`,
+      type: "Inventarartikel",
+      title: item.name
+    }))
+
+  return [...teamResources, ...profileResources, ...inventoryResources]
 }
 
 function buildEvents({ rawEvents, projectsById }) {
@@ -265,7 +356,9 @@ function buildEvents({ rawEvents, projectsById }) {
     .filter((event) => !event.archived)
     .map((event) => {
       const resourceIds = [
-        ...(event.profiles || []).map((profileId) => `P-${profileId}`),
+        ...(profiles.value
+          .filter((profile) => (event.profiles || []).includes(profile.id))
+          .flatMap((profile) => getProfileResourceIds(profile))),
         ...(event.inventoryitems || []).map((itemId) => `I-${itemId}`)
       ]
 
@@ -274,8 +367,8 @@ function buildEvents({ rawEvents, projectsById }) {
         start: event.startDate,
         end: event.endDate,
         resourceIds,
-        backgroundColor: resolveEventColor(event.eventtype),
-        borderColor: resolveEventColor(event.eventtype),
+        backgroundColor: resolveRenderedEventColor(event),
+        borderColor: resolveRenderedEventColor(event),
         textColor: "#ffffff",
         entrytype: "event",
         eventId: event.id
@@ -303,7 +396,7 @@ function buildAbsenceEvents(spansByUserId) {
         title: getAbsenceTitle(entry),
         start: $dayjs(entry.started_at).startOf("day").toISOString(),
         end: $dayjs(entry.stopped_at || entry.started_at).add(1, "day").startOf("day").toISOString(),
-        resourceIds: [`P-${profile.id}`],
+        resourceIds: getProfileResourceIds(profile),
         allDay: true,
         backgroundColor: getAbsenceColor(entry.type),
         borderColor: getAbsenceColor(entry.type),
@@ -350,6 +443,94 @@ function moveCalendarToday() {
   api.today()
 }
 
+function openQuickConfig() {
+  quickEntryConfig.name = resolvedQuickEntryConfig.value.name
+  quickEntryConfig.color = resolvedQuickEntryConfig.value.color
+}
+
+async function saveQuickConfig() {
+  if (savingQuickConfig.value) return
+
+  const name = quickEntryConfig.name?.trim()
+  if (!name) {
+    toast.add({ title: "Name fehlt", description: "Bitte einen Namen für Quick-Einträge angeben.", color: "orange" })
+    return
+  }
+
+  savingQuickConfig.value = true
+
+  try {
+    const currentTenantData = auth.activeTenantData || {}
+    const nextCalendarConfig = {
+      ...(currentTenantData.calendarConfig || {}),
+      quickEntry: {
+        name,
+        color: quickEntryConfig.color || "#2563eb"
+      }
+    }
+
+    const updatedTenant = await $api(`/api/tenant/other/${auth.activeTenant}`, {
+      method: "PUT",
+      body: {
+        data: {
+          calendarConfig: nextCalendarConfig
+        }
+      }
+    })
+
+    auth.activeTenantData = updatedTenant
+    profileStore.ownTenant = updatedTenant
+    toast.add({ title: "Quick-Einträge gespeichert", color: "green" })
+    await loadPlanningBoard()
+  } catch (error) {
+    console.error("saveQuickConfig failed", error)
+    toast.add({
+      title: "Quick-Konfiguration konnte nicht gespeichert werden",
+      description: error?.message || "Bitte erneut versuchen.",
+      color: "red"
+    })
+  } finally {
+    savingQuickConfig.value = false
+  }
+}
+
+async function createQuickEvent(info) {
+  const resourceIds = normalizeSelectedResourceIds(info.resource?.id)
+
+  const payload = {
+    name: resolvedQuickEntryConfig.value.name,
+    quick: true,
+    startDate: info.startStr,
+    endDate: info.endStr,
+    profiles: resourceIds
+      .filter((resourceId) => resourceId.startsWith("P-"))
+      .map((resourceId) => resourceId.replace("P-", "")),
+    inventoryitems: resourceIds
+      .filter((resourceId) => resourceId.startsWith("I-"))
+      .map((resourceId) => Number(resourceId.replace("I-", ""))),
+    inventoryitemgroups: [],
+    vehicles: [],
+    notes: "",
+    link: "",
+    project: null,
+    customer: null,
+    vendor: null,
+  }
+
+  try {
+    await createEvent(payload, true)
+    toast.add({ title: "Quick-Eintrag angelegt", color: "green" })
+    await loadPlanningBoard()
+  } catch (error) {
+    console.error("createQuickEvent failed", error)
+    toast.add({
+      title: "Quick-Eintrag konnte nicht angelegt werden",
+      description: error?.message || "Bitte erneut versuchen.",
+      color: "red"
+    })
+  }
+}
+
 function openAbsenceModal(type = "vacation", preset = {}) {
   absenceForm.mode = preset.entry ? "edit" : "create"
   absenceForm.entry = preset.entry || null
@@ -414,13 +595,15 @@ async function loadPlanningBoard() {
   loading.value = true
 
   try {
-    const [rawEvents, projects, profileRows, inventoryItemRows] = await Promise.all([
+    const [rawEvents, projects, profileResponse, inventoryItemRows] = await Promise.all([
       useEntities("events").select(),
       useEntities("projects").select(),
-      useEntities("profiles").select(),
+      useNuxtApp().$api("/api/tenant/profiles"),
       useEntities("inventoryitems").select()
     ])
 
+    const profileRows = profileResponse?.data || []
+
     const absenceSpansByUserId = await Promise.all(
       (profileRows || [])
         .filter((profile) => profile.user_id)
@@ -537,6 +720,78 @@ onMounted(() => {
       </template>
       <template #right>
         <div class="flex flex-wrap items-center gap-2">
+          <UPopover>
+            <UButton
+              color="neutral"
+              variant="outline"
+              icon="i-heroicons-cog-6-tooth"
+              @click="openQuickConfig"
+            >
+              Quick-Einträge
+            </UButton>
+
+            <template #content>
+              <div class="w-[320px] space-y-4 p-4">
+                <div>
+                  <h3 class="text-sm font-semibold text-highlighted">Quick-Einträge</h3>
+                  <p class="text-xs text-muted">
+                    Name und Farbe für neu gezogene Quick-Einträge in der Plantafel.
+                  </p>
+                </div>
+
+                <UFormField label="Name">
+                  <UInput v-model="quickEntryConfig.name" class="w-full" />
+                </UFormField>
+
+                <UFormField label="Farbe">
+                  <div class="space-y-3">
+                    <div class="flex flex-wrap gap-2">
+                      <button
+                        v-for="option in quickEntryColorOptions"
+                        :key="option.value"
+                        type="button"
+                        class="flex items-center gap-2 rounded border px-2 py-1 text-xs transition"
+                        :class="quickEntryConfig.color === option.value ? 'border-primary ring-1 ring-primary' : 'border-default'"
+                        @click="quickEntryConfig.color = option.value"
+                      >
+                        <span
+                          class="h-4 w-4 rounded-full border border-white/40"
+                          :style="{ backgroundColor: option.value }"
+                        />
+                        {{ option.label }}
+                      </button>
+                    </div>
+
+                    <div class="flex items-center gap-3">
+                    <input
+                      v-model="quickEntryConfig.color"
+                      type="color"
+                      class="h-10 w-14 cursor-pointer rounded border border-default bg-transparent p-1"
+                    >
+                    <UInput v-model="quickEntryConfig.color" class="flex-1" />
+                    </div>
+                  </div>
+                </UFormField>
+
+                <div class="rounded border border-default p-3">
+                  <p class="text-xs text-muted">Vorschau</p>
+                  <div class="mt-2 inline-flex rounded px-3 py-1 text-sm font-medium text-white" :style="{ backgroundColor: quickEntryConfig.color }">
+                    {{ quickEntryConfig.name || "Quick-Eintrag" }}
+                  </div>
+                </div>
+
+                <div class="flex justify-end">
+                  <UButton
+                    color="primary"
+                    :loading="savingQuickConfig"
+                    @click="saveQuickConfig"
+                  >
+                    Speichern
+                  </UButton>
+                </div>
+              </div>
+            </template>
+          </UPopover>
           <UButton
             color="amber"
             variant="soft"