feat(communication): add project subrooms and isolated guest access

frontend/pages/communication/collaboration.vue

@@ -0,0 +1,168 @@
+<script setup>
+const { $api } = useNuxtApp()
+const route = useRoute()
+const state = ref({ rooms: [], invitations: [], managedRooms: [], projects: [], canManage: false, contact: '' })
+const contacts = ref([]), selected = ref(''), error = ref(''), busy = ref(false), creating = ref(false), showCreate = ref(false), showManagement = ref(false)
+const management = ref({ members: [], invitations: [] }), inviteResult = ref(null)
+const create = reactive({ name: '', topic: '', projectId: String(route.query.project || '') })
+const invite = reactive({ kind: 'user', userId: '', name: '', email: '', contact: '', role: 'participant', overviewAllowed: false, expiresAt: '', sendEmail: true })
+const details = reactive({ name: '', topic: '', status: 'active', overview: { title: '', status: '', date: '', description: '' } })
+const federation = ref(null), partnerUrl = ref('')
+const selectedManaged = computed(() => state.value.managedRooms.find(r => r.id === selected.value))
+const visibleRooms = computed(() => {
+  const rooms = new Map(state.value.rooms.map(r => [r.id, r]))
+  state.value.managedRooms.filter(r => !route.query.project || Number(r.projectId) === Number(route.query.project)).forEach(r => rooms.set(r.id, { ...rooms.get(r.id), ...r }))
+  return [...rooms.values()]
+})
+const readable = computed(() => state.value.rooms.some(r => r.id === selected.value))
+const message = e => e?.data?.message || e?.data?.error || 'Die Aktion konnte nicht ausgeführt werden.'
+async function refresh() {
+  try {
+    state.value = await $api('/api/collaboration')
+    if (!selected.value && visibleRooms.value.length) selected.value = visibleRooms.value[0].id
+  } catch (e) { error.value = message(e) }
+}
+async function run(fn) {
+  busy.value = true; error.value = ''
+  try { await fn() } catch (e) { error.value = message(e) } finally { busy.value = false }
+}
+async function createRoom() {
+  await run(async () => {
+    const room = await $api('/api/collaboration/rooms', { method: 'POST', body: { ...create, projectId: create.projectId ? Number(create.projectId) : null } })
+    await refresh(); selected.value = room.id; showCreate.value = false; create.name = ''; create.topic = ''
+  })
+}
+async function loadManagement() {
+  if (!selectedManaged.value) return
+  const roomId = selected.value
+  const [result, people] = await Promise.all([$api(`/api/collaboration/rooms/${roomId}/management`), $api('/api/collaboration/contacts')])
+  if (roomId !== selected.value) return
+  management.value = result; contacts.value = people.contacts
+  Object.assign(details, { name: selectedManaged.value.name, topic: selectedManaged.value.topic, status: selectedManaged.value.status, overview: { title: '', status: '', date: '', description: '', ...selectedManaged.value.overview } })
+}
+async function invitePerson() {
+  await run(async () => {
+    inviteResult.value = await $api(`/api/collaboration/rooms/${selected.value}/invitations`, { method: 'POST', body: { ...invite, expiresAt: invite.expiresAt ? new Date(`${invite.expiresAt}T23:59:59`).toISOString() : null } })
+    await loadManagement(); await refresh()
+  })
+}
+async function respond(id, accept) {
+  await run(async () => {
+    const result = await $api(`/api/collaboration/invitations/${id}/${accept ? 'accept' : 'decline'}`, { method: 'POST' })
+    await refresh(); if (accept && result.roomId) selected.value = result.roomId
+  })
+}
+async function revoke(id, invitation = false) {
+  await run(async () => {
+    await $api(`/api/collaboration/rooms/${selected.value}/${invitation ? 'invitations' : 'members'}/${id}`, { method: 'DELETE' })
+    await loadManagement(); await refresh()
+  })
+}
+async function saveRoom() {
+  await run(async () => {
+    await $api(`/api/collaboration/rooms/${selected.value}`, { method: 'PATCH', body: details })
+    await refresh(); await loadManagement()
+  })
+}
+async function copy(value) { await run(() => navigator.clipboard.writeText(value)) }
+async function partners() { await run(async () => { federation.value = await $api('/api/collaboration/federation') }) }
+async function savePartner(origin, active = true) {
+  await run(async () => {
+    federation.value = await $api('/api/collaboration/federation', { method: 'POST', body: { origin, active } })
+    partnerUrl.value = ''
+  })
+}
+watch(selected, () => { showManagement.value = false; inviteResult.value = null; management.value = { members: [], invitations: [] } })
+let timer
+onMounted(async () => { await refresh(); timer = setInterval(() => { if (!document.hidden && !busy.value) void refresh() }, 15000) })
+onBeforeUnmount(() => clearInterval(timer))
+</script>
+
+<template>
+  <div class="w-full space-y-5 p-4 sm:p-6">
+    <header class="flex flex-wrap items-start justify-between gap-3">
+      <div><h1 class="text-2xl font-semibold">Zusammenarbeit</h1><p class="mt-1 text-sm text-gray-500">Gemeinsame Chats und geschützte Projekt-Unterräume</p></div>
+      <div class="flex flex-wrap gap-2">
+        <UButton v-if="state.contact" variant="outline" @click="copy(state.contact)">Meine Kontaktadresse kopieren</UButton>
+        <UButton v-if="state.canManage" variant="outline" @click="partners">Partnerinstanzen</UButton>
+        <UButton v-if="state.canManage" @click="showCreate = !showCreate">Unterraum erstellen</UButton>
+      </div>
+    </header>
+    <p v-if="error" role="alert" class="rounded-lg bg-red-50 p-3 text-red-700">{{ error }}</p>
+    <section v-if="federation" class="rounded-xl border border-gray-200 p-4 dark:border-gray-700">
+      <div class="flex justify-between"><h2 class="font-semibold">Freigegebene Partnerinstanzen</h2><button @click="federation = null">Schließen</button></div>
+      <p class="my-2 text-sm text-gray-500">Beide Firmen geben die jeweils andere Instanz frei. Einzelne Personen erhalten anschließend eine eigene Einladung.</p>
+      <form class="flex flex-wrap gap-2" @submit.prevent="savePartner(partnerUrl)"><label class="flex-1"><span class="sr-only">Adresse der Partnerinstanz</span><input v-model="partnerUrl" type="url" required placeholder="https://partner.example/backend" class="field" /></label><UButton type="submit" :loading="busy">Partner freigeben</UButton></form>
+      <div v-for="partner in federation.partners" :key="partner.origin" class="mt-3 flex items-center justify-between gap-3 text-sm"><span>{{ partner.origin }} · {{ partner.active ? 'Freigegeben' : 'Gesperrt' }}</span><UButton variant="outline" size="xs" :disabled="busy" @click="savePartner(partner.origin, !partner.active)">{{ partner.active ? 'Sperren' : 'Freigeben' }}</UButton></div>
+    </section>
+    <form v-if="showCreate" class="grid gap-3 rounded-xl border border-gray-200 p-4 sm:grid-cols-2 dark:border-gray-700" @submit.prevent="createRoom">
+      <label class="text-sm">Projekt<select v-model="create.projectId" class="field"><option value="">Freier Partnerchat</option><option v-for="project in state.projects" :key="project.id" :value="String(project.id)">{{ project.name }}</option></select></label>
+      <label class="text-sm">Name des Unterraums<input v-model="create.name" required maxlength="160" class="field" placeholder="z. B. Abstimmung Gerüstbau" /></label>
+      <label class="text-sm sm:col-span-2">Beschreibung<input v-model="create.topic" maxlength="1000" class="field" /></label>
+      <p class="text-xs text-gray-500">Du nimmst als Ersteller am Chat teil. Weitere Personen werden ausdrücklich eingeladen.</p>
+      <div class="flex justify-end gap-2"><UButton variant="ghost" @click="showCreate = false">Abbrechen</UButton><UButton type="submit" :loading="busy">Erstellen</UButton></div>
+    </form>
+    <section v-if="state.invitations.length" class="space-y-2">
+      <h2 class="font-semibold">Einladungen</h2>
+      <div v-for="invitation in state.invitations" :key="invitation.id" class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-green-200 bg-green-50 p-3 text-gray-900">
+        <div><p class="font-medium">{{ invitation.name }}</p><p class="text-sm">{{ invitation.ownerName }} · {{ invitation.role === 'reader' ? 'Nur lesen' : 'Chatteilnahme' }}{{ invitation.overviewAllowed ? ' · Projektübersicht freigegeben' : '' }}</p></div>
+        <div class="flex gap-2"><UButton variant="outline" :disabled="busy" @click="respond(invitation.id, false)">Ablehnen</UButton><UButton :disabled="busy" @click="respond(invitation.id, true)">Annehmen</UButton></div>
+      </div>
+    </section>
+    <div class="grid items-start gap-5 lg:grid-cols-[16rem_minmax(0,1fr)]">
+      <aside class="space-y-2">
+        <h2 class="mb-3 font-semibold">Meine Unterräume</h2>
+        <p v-if="!visibleRooms.length" class="text-sm text-gray-500">Hier erscheinen deine Einladungen und freigegebenen Unterräume.</p>
+        <button v-for="item in visibleRooms" :key="item.id" class="w-full rounded-xl border p-3 text-left" :class="selected === item.id ? 'border-green-600 bg-green-50 text-gray-900' : 'border-gray-200 dark:border-gray-700'" @click="selected = item.id">
+          <span class="flex items-center justify-between gap-2"><span class="font-medium">{{ item.name }}</span><span v-if="item.unread" class="rounded-full bg-green-700 px-2 text-xs text-white">{{ item.unread }}</span></span>
+          <span class="mt-1 block text-xs text-gray-500">{{ item.ownerName || (item.projectId ? 'Projekt-Unterraum' : 'Partnerchat') }}{{ item.remote ? ' · Extern' : '' }}{{ item.status !== 'active' ? ` · ${item.status === 'blocked' ? 'Gesperrt' : 'Archiviert'}` : '' }}</span>
+        </button>
+      </aside>
+      <div class="min-w-0 space-y-4">
+        <UButton v-if="selectedManaged" variant="outline" :disabled="busy" @click="run(async () => { await loadManagement(); showManagement = !showManagement })">Teilnehmer und Freigaben verwalten</UButton>
+        <section v-if="showManagement && selectedManaged" class="space-y-5 rounded-xl border border-gray-200 p-4 dark:border-gray-700">
+          <form class="space-y-3" @submit.prevent="invitePerson">
+            <h2 class="font-semibold">Person in diesen Unterraum einladen</h2>
+            <label class="block text-sm">Teilnehmerart<select v-model="invite.kind" class="field"><option value="user">Eigene Mitarbeiter</option><option value="contact">FEDEO-Kontakt</option><option v-if="selectedManaged.projectId" value="guest">Gast ohne FEDEO-Konto</option></select></label>
+            <label v-if="invite.kind === 'user'" class="block text-sm">Person<select v-model="invite.userId" class="field" required><option value="">Bitte auswählen</option><option v-for="person in contacts" :key="person.id" :value="person.id">{{ person.name }}</option></select></label>
+            <template v-else-if="invite.kind === 'guest'"><label class="block text-sm">Name<input v-model="invite.name" required class="field" /></label><label class="block text-sm">E-Mail-Adresse<input v-model="invite.email" type="email" required class="field" /></label><label class="flex items-center gap-2 text-sm"><input v-model="invite.sendEmail" type="checkbox" /> Einladung per E-Mail senden</label></template>
+            <label v-else class="block text-sm">Persönliche FEDEO-Kontaktadresse<input v-model="invite.contact" type="url" required class="field" placeholder="Kontaktadresse der Person einfügen" /></label>
+            <div class="grid gap-3 sm:grid-cols-2"><label class="text-sm">Rechte<select v-model="invite.role" class="field"><option value="participant">Lesen und schreiben</option><option value="reader">Nur lesen</option></select></label><label class="text-sm">Zugang bis (optional)<input v-model="invite.expiresAt" type="date" class="field" /></label></div>
+            <label class="flex items-center gap-2 text-sm"><input v-model="invite.overviewAllowed" type="checkbox" /> Freigegebene Projektübersicht anzeigen</label>
+            <p class="text-xs text-gray-500">Die Einladung gilt nur für diesen Unterraum. Nachrichten sind ab dem Beitritt sichtbar. Gastzugänge gelten ohne gewähltes Ablaufdatum 30 Tage.</p>
+            <UButton type="submit" :loading="busy">Einladen</UButton>
+          </form>
+          <div v-if="inviteResult" role="status" class="space-y-2 rounded-lg bg-green-50 p-3 text-sm text-gray-900"><p>Einladung erstellt. {{ inviteResult.mailSent ? 'E-Mail wurde versendet.' : '' }}</p><template v-if="inviteResult.url"><p v-if="invite.sendEmail && !inviteResult.mailSent" class="text-amber-800">Die E-Mail konnte nicht versendet werden. Du kannst den Einladungslink kopieren.</p><UButton variant="outline" size="sm" @click="copy(inviteResult.url)">Einladungslink kopieren</UButton></template></div>
+          <div class="space-y-3"><h3 class="font-semibold">Teilnehmer</h3>
+            <div v-for="member in management.members" :key="member.id" class="space-y-2 rounded-lg border border-gray-200 p-3 text-sm dark:border-gray-700">
+              <p class="font-medium">{{ member.name }}{{ member.kind === 'guest' ? ' · Gast' : '' }}{{ member.status === 'revoked' ? ' · Entzogen' : '' }}</p>
+              <form v-if="member.status === 'active'" class="flex flex-wrap items-center gap-3" @submit.prevent="run(async () => { await $api(`/api/collaboration/rooms/${selected}/members/${member.id}`, { method: 'PATCH', body: { role: member.role, overviewAllowed: member.overviewAllowed } }); await loadManagement(); await refresh() })">
+                <label>Rolle<select v-model="member.role" class="field"><option value="participant">Lesen und schreiben</option><option value="reader">Nur lesen</option></select></label>
+                <label class="flex items-center gap-2"><input v-model="member.overviewAllowed" type="checkbox" /> Projektübersicht</label>
+                <UButton type="submit" variant="outline" size="xs" :disabled="busy">Rechte speichern</UButton>
+                <UButton color="error" variant="outline" size="xs" :disabled="busy" @click="revoke(member.id)">Zugang entziehen</UButton>
+              </form>
+            </div>
+          </div>
+          <div v-if="management.invitations.some(i => i.status === 'pending')" class="space-y-2"><h3 class="font-semibold">Offene Einladungen</h3><div v-for="item in management.invitations.filter(i => i.status === 'pending')" :key="item.id" class="flex items-center justify-between gap-2 text-sm"><span>{{ item.name }} · bis {{ new Date(item.expiresAt).toLocaleDateString('de-DE') }}</span><UButton variant="outline" size="xs" :disabled="busy" @click="revoke(item.id, true)">Widerrufen</UButton></div></div>
+          <form class="space-y-3 border-t border-gray-200 pt-4 dark:border-gray-700" @submit.prevent="saveRoom">
+            <h3 class="font-semibold">Unterraum und freigegebene Informationen</h3>
+            <label class="block text-sm">Raumname<input v-model="details.name" required maxlength="160" class="field" /></label>
+            <label class="block text-sm">Beschreibung<input v-model="details.topic" maxlength="1000" class="field" /></label>
+            <label class="block text-sm">Status<select v-model="details.status" class="field"><option value="active">Aktiv</option><option value="archived">Archiviert – nur lesen</option><option value="blocked">Gesperrt – kein Zugriff</option></select></label>
+            <p class="text-xs text-gray-500">Die folgenden Angaben sehen ausschließlich Teilnehmer mit freigegebener Projektübersicht.</p>
+            <div class="grid gap-3 sm:grid-cols-2"><label class="text-sm">Externer Projekttitel<input v-model="details.overview.title" maxlength="160" class="field" /></label><label class="text-sm">Projektstatus<input v-model="details.overview.status" maxlength="160" class="field" /></label><label class="text-sm">Termin<input v-model="details.overview.date" maxlength="160" class="field" /></label></div>
+            <label class="block text-sm">Freigegebene Hinweise<textarea v-model="details.overview.description" maxlength="2000" rows="3" class="field" /></label>
+            <UButton type="submit" :loading="busy">Speichern</UButton>
+          </form>
+        </section>
+        <CollaborationRoom v-if="selected && readable" :key="selected" :room-id="selected" :api="$api" @changed="refresh" />
+        <p v-else-if="selected" class="rounded-xl border border-gray-200 p-6 text-sm text-gray-500 dark:border-gray-700">Du hast derzeit keinen Lesezugriff auf diesen Unterraum. Die Verwaltung ist davon unabhängig.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.field { display: block; width: 100%; margin-top: .25rem; border: 1px solid #9ca3af; border-radius: .5rem; padding: .55rem .7rem; background: transparent; }
+</style>