Abteilungen als Ebene über der Personalakte
Punkt 3 der Wünsche. Die Abteilung stand als Freitext in der Personalakte. Damit liess sich nichts fragen: „SHD", „Shd" und „Sicherheitsdienst" waren drei Abteilungen. Sie ist jetzt ein eigenes Modell, im Adminbereich verwaltbar, und die drei vorhandenen Freitexte sind in der Migration zu Abteilungen geworden. **Eine Fallakte trägt keine Abteilung.** Sie gehört zu einer, wenn eine beteiligte Person ihr angehört — abgeleitet über CaseParticipant und die Personalakte. Eine eingetragene Zuordnung wäre nach zwei Wochen falsch: Leute wechseln, Beteiligte kommen dazu, und niemand pflegt das nach. Dasselbe gilt für die Dokumente: ein Dokument unmittelbar an der Abteilung wäre halb verdrahtet, weil die Vorlagen über TemplateUse nur Fall- und Personalakte kennen. Die Abteilungsseite zeigt Mitglieder, abgeleitete Fälle und Dokumente, Vermerke, Chat und ein Kreisdiagramm der Fallarten; die Übersicht eines über alle Abteilungen. Das Diagramm ist serverseitig gerendertes SVG — eine Bibliothek wäre das Teuerste auf der Seite gewesen. Die Segmente sind Abstufungen von --steel und nicht die Stufenfarben: ein Tortenstück in Oxidrot würde als „streng geheim" gelesen. Die Zusammenfassung ist die gefährliche Stelle. Eine Abteilungsseite fasst zusammen, was einzeln längst geschützt ist, und eine Zusammenfassung, die nicht filtert, verrät mehr als jede Einzelansicht. Deshalb läuft hier jede Liste und jede Zahl durch dieselben Fragmente wie überall; ein Test prüft, dass die Summe der Diagrammanteile mit der Länge der Liste übereinstimmt. Wo jemand Personalakten gar nicht sehen darf, steht null und keine Null. Vermerke erben Regel 2 unverändert: kein DELETE, Version bei jeder Änderung, Grabstein bei jeder Zurücknahme, als Regel und Trigger in der Datenbank. Ohne Korrekturkette, Anhänge und Karenzzeit — was Beweiswert hat, gehört in eine Fallakte. Nebenbei: das Zugriffsprotokoll hängt jetzt am dafür vorgesehenen Recht audit.read statt an admin.
This commit is contained in:
Harlekin
@@ -0,0 +1,326 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { uuidv7 } from '@/lib/uuidv7'
|
||||
import { departmentEntryText, departmentText } from '@/lib/i18n/departments'
|
||||
import { commonText } from '@/lib/i18n/common'
|
||||
import { createEntryAction, editEntryAction, retractEntryAction } from './actions'
|
||||
|
||||
export type EntryView = {
|
||||
id: string
|
||||
body: string
|
||||
minClearance: number
|
||||
authorId: string
|
||||
authorName: string
|
||||
createdAt: string
|
||||
version: number
|
||||
editedAt: string | null
|
||||
retractedAt: string | null
|
||||
retractedByName: string | null
|
||||
retractionReason: string | null
|
||||
}
|
||||
|
||||
/**
|
||||
* Die Vermerke einer Abteilung.
|
||||
*
|
||||
* Dieselbe Zusicherung wie im Verlauf einer Akte, und sie steht auch so da:
|
||||
* ein geänderter Vermerk trägt seine Fassungsnummer, ein zurückgezogener
|
||||
* bleibt als Grabstein mit Grund und Namen stehen. Nichts verschwindet.
|
||||
*/
|
||||
export function DepartmentEntries({
|
||||
departmentKey,
|
||||
entries,
|
||||
currentUserId,
|
||||
canWrite,
|
||||
canRetract,
|
||||
canEditAny,
|
||||
canEditOwn,
|
||||
levels,
|
||||
}: {
|
||||
departmentKey: string
|
||||
entries: EntryView[]
|
||||
currentUserId: string
|
||||
canWrite: boolean
|
||||
canRetract: boolean
|
||||
canEditAny: boolean
|
||||
canEditOwn: boolean
|
||||
levels: { level: number; name: string }[]
|
||||
}) {
|
||||
const [liste, setListe] = useState(entries)
|
||||
const [text, setText] = useState('')
|
||||
const [stufe, setStufe] = useState(0)
|
||||
const [fehler, setFehler] = useState<string | null>(null)
|
||||
const [pending, startTransition] = useTransition()
|
||||
|
||||
function schreiben() {
|
||||
const inhalt = text.trim()
|
||||
if (!inhalt) return
|
||||
|
||||
const id = uuidv7()
|
||||
setFehler(null)
|
||||
|
||||
startTransition(async () => {
|
||||
const ergebnis = await createEntryAction({
|
||||
id,
|
||||
departmentKey,
|
||||
body: inhalt,
|
||||
minClearance: stufe,
|
||||
})
|
||||
if (!ergebnis.ok) {
|
||||
setFehler(ergebnis.error)
|
||||
return
|
||||
}
|
||||
setListe((bisher) => [
|
||||
{
|
||||
id,
|
||||
body: inhalt,
|
||||
minClearance: stufe,
|
||||
authorId: currentUserId,
|
||||
authorName: '',
|
||||
createdAt: new Date().toISOString(),
|
||||
version: 1,
|
||||
editedAt: null,
|
||||
retractedAt: null,
|
||||
retractedByName: null,
|
||||
retractionReason: null,
|
||||
},
|
||||
...bisher,
|
||||
])
|
||||
setText('')
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{canWrite ? (
|
||||
<div className="mb-8 border border-line p-4">
|
||||
<label className="block">
|
||||
<span className="font-condensed text-2xs text-text-dim">
|
||||
{departmentEntryText.body}
|
||||
</span>
|
||||
<textarea
|
||||
value={text}
|
||||
onChange={(event) => setText(event.target.value)}
|
||||
rows={3}
|
||||
className="field mt-1.5 w-full"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="mt-3 flex flex-wrap items-center gap-4">
|
||||
<label className="flex items-center gap-2 text-2xs text-text-dim">
|
||||
{departmentEntryText.minClearance}
|
||||
<select
|
||||
value={stufe}
|
||||
onChange={(event) => setStufe(Number(event.target.value))}
|
||||
className="field"
|
||||
>
|
||||
{levels.map((level) => (
|
||||
<option key={level.level} value={level.level}>
|
||||
{level.level} · {level.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={schreiben}
|
||||
disabled={pending || text.trim().length === 0}
|
||||
aria-busy={pending}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
{pending ? departmentEntryText.saving : departmentEntryText.save}
|
||||
</button>
|
||||
{fehler ? <span className="font-condensed text-2xs text-stamp-4">{fehler}</span> : null}
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-2xs text-text-dim">{departmentEntryText.hint}</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{liste.length === 0 ? <p className="text-text-dim">{departmentText.entriesEmpty}</p> : null}
|
||||
|
||||
<ul className="timeline space-y-6">
|
||||
{liste.map((vermerk) => (
|
||||
<Vermerk
|
||||
key={vermerk.id}
|
||||
vermerk={vermerk}
|
||||
departmentKey={departmentKey}
|
||||
canEdit={
|
||||
canEditAny || (canEditOwn && vermerk.authorId === currentUserId)
|
||||
}
|
||||
canRetract={canRetract}
|
||||
onChange={(neu) =>
|
||||
setListe((bisher) => bisher.map((v) => (v.id === neu.id ? neu : v)))
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Vermerk({
|
||||
vermerk,
|
||||
departmentKey,
|
||||
canEdit,
|
||||
canRetract,
|
||||
onChange,
|
||||
}: {
|
||||
vermerk: EntryView
|
||||
departmentKey: string
|
||||
canEdit: boolean
|
||||
canRetract: boolean
|
||||
onChange: (neu: EntryView) => void
|
||||
}) {
|
||||
const [modus, setModus] = useState<'lesen' | 'aendern' | 'zurueckziehen'>('lesen')
|
||||
const [text, setText] = useState(vermerk.body)
|
||||
const [grund, setGrund] = useState('')
|
||||
const [fehler, setFehler] = useState<string | null>(null)
|
||||
const [pending, startTransition] = useTransition()
|
||||
const zurueckgezogen = vermerk.retractedAt !== null
|
||||
|
||||
return (
|
||||
<li>
|
||||
<div className="flex flex-wrap items-baseline gap-x-4 gap-y-1">
|
||||
<span className="font-condensed text-2xs text-text-dim">{vermerk.authorName}</span>
|
||||
<time className="text-2xs text-text-dim">
|
||||
{new Date(vermerk.createdAt).toLocaleString('de-DE')}
|
||||
</time>
|
||||
{vermerk.editedAt ? (
|
||||
<span className="font-condensed text-2xs text-text-dim">
|
||||
{departmentEntryText.edited(vermerk.version)}
|
||||
</span>
|
||||
) : null}
|
||||
{vermerk.minClearance > 0 ? (
|
||||
<span className="font-mono text-2xs text-text-dim">
|
||||
{departmentEntryText.minClearance} {vermerk.minClearance}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{zurueckgezogen ? (
|
||||
<p className="mt-1 border-l-(length:--spacing-edge) border-stamp-4 pl-3 text-sm text-text-dim">
|
||||
{departmentEntryText.retractedBy(
|
||||
vermerk.retractedByName ?? '',
|
||||
vermerk.retractionReason ?? '',
|
||||
)}
|
||||
</p>
|
||||
) : modus === 'aendern' ? (
|
||||
<div className="mt-2">
|
||||
<textarea
|
||||
value={text}
|
||||
onChange={(event) => setText(event.target.value)}
|
||||
rows={4}
|
||||
className="field w-full"
|
||||
/>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
disabled={pending}
|
||||
aria-busy={pending}
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() =>
|
||||
startTransition(async () => {
|
||||
const ergebnis = await editEntryAction({
|
||||
id: vermerk.id,
|
||||
departmentKey,
|
||||
body: text,
|
||||
})
|
||||
if (!ergebnis.ok) {
|
||||
setFehler(ergebnis.error)
|
||||
return
|
||||
}
|
||||
onChange({
|
||||
...vermerk,
|
||||
body: text,
|
||||
version: vermerk.version + 1,
|
||||
editedAt: new Date().toISOString(),
|
||||
})
|
||||
setModus('lesen')
|
||||
})
|
||||
}
|
||||
>
|
||||
{departmentEntryText.editSave}
|
||||
</button>
|
||||
<button type="button" onClick={() => setModus('lesen')} className="btn btn-sm">
|
||||
{departmentEntryText.cancel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-1 text-sm whitespace-pre-wrap">{vermerk.body}</p>
|
||||
)}
|
||||
|
||||
{modus === 'zurueckziehen' ? (
|
||||
<div className="mt-2">
|
||||
<label className="block">
|
||||
<span className="font-condensed text-2xs text-text-dim">
|
||||
{departmentEntryText.retractReason}
|
||||
</span>
|
||||
<input
|
||||
value={grund}
|
||||
onChange={(event) => setGrund(event.target.value)}
|
||||
className="field mt-1.5 w-full max-w-sm"
|
||||
/>
|
||||
</label>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
disabled={pending || grund.trim().length < 10}
|
||||
aria-busy={pending}
|
||||
className="btn btn-sm text-stamp-4"
|
||||
onClick={() =>
|
||||
startTransition(async () => {
|
||||
const ergebnis = await retractEntryAction({
|
||||
id: vermerk.id,
|
||||
departmentKey,
|
||||
reason: grund,
|
||||
})
|
||||
if (!ergebnis.ok) {
|
||||
setFehler(ergebnis.error)
|
||||
return
|
||||
}
|
||||
onChange({
|
||||
...vermerk,
|
||||
retractedAt: new Date().toISOString(),
|
||||
retractionReason: grund,
|
||||
})
|
||||
setModus('lesen')
|
||||
})
|
||||
}
|
||||
>
|
||||
{departmentEntryText.retract}
|
||||
</button>
|
||||
<button type="button" onClick={() => setModus('lesen')} className="btn btn-sm">
|
||||
{departmentEntryText.cancel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!zurueckgezogen && modus === 'lesen' ? (
|
||||
<div className="mt-2 flex flex-wrap gap-3">
|
||||
{canEdit ? (
|
||||
<button type="button" onClick={() => setModus('aendern')} className="btn btn-sm">
|
||||
{departmentEntryText.edit}
|
||||
</button>
|
||||
) : null}
|
||||
{canRetract ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setModus('zurueckziehen')}
|
||||
className="btn btn-sm text-stamp-4"
|
||||
>
|
||||
{departmentEntryText.retract}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{fehler ? (
|
||||
<p className="mt-2 font-condensed text-2xs text-stamp-4">{fehler || commonText.unknown}</p>
|
||||
) : null}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
'use server'
|
||||
|
||||
import { revalidatePath } from 'next/cache'
|
||||
import { z } from 'zod'
|
||||
import { requireUser } from '@/lib/auth/current'
|
||||
import { AccessError } from '@/lib/errors'
|
||||
import { createEntry, editEntry, retractEntry } from '@/lib/departments/entries'
|
||||
import { de } from '@/lib/i18n/de'
|
||||
|
||||
export type ActionResult = { ok: true } | { ok: false; error: string }
|
||||
|
||||
function toMessage(error: unknown): string {
|
||||
if (error instanceof AccessError) {
|
||||
return de.actionErrors[error.code] ?? de.actionErrors.default!
|
||||
}
|
||||
console.error('[abteilungsvermerk] unerwartet', error)
|
||||
return de.actionErrors.default!
|
||||
}
|
||||
|
||||
const createSchema = z.object({
|
||||
id: z.string().min(1).max(64),
|
||||
departmentKey: z.string().min(1).max(21),
|
||||
body: z.string().min(1).max(20_000),
|
||||
minClearance: z.coerce.number().int().min(0).max(5),
|
||||
})
|
||||
|
||||
export async function createEntryAction(input: unknown): Promise<ActionResult> {
|
||||
const user = await requireUser()
|
||||
const parsed = createSchema.safeParse(input)
|
||||
if (!parsed.success) return { ok: false, error: de.actionErrors['entry-empty']! }
|
||||
|
||||
try {
|
||||
await createEntry(user.permissions, parsed.data)
|
||||
revalidatePath(`/abteilungen/${parsed.data.departmentKey}`)
|
||||
return { ok: true }
|
||||
} catch (error) {
|
||||
return { ok: false, error: toMessage(error) }
|
||||
}
|
||||
}
|
||||
|
||||
const editSchema = z.object({
|
||||
id: z.string().min(1).max(64),
|
||||
departmentKey: z.string().min(1).max(21),
|
||||
body: z.string().min(1).max(20_000),
|
||||
})
|
||||
|
||||
export async function editEntryAction(input: unknown): Promise<ActionResult> {
|
||||
const user = await requireUser()
|
||||
const parsed = editSchema.safeParse(input)
|
||||
if (!parsed.success) return { ok: false, error: de.actionErrors['entry-empty']! }
|
||||
|
||||
try {
|
||||
await editEntry(user.permissions, parsed.data)
|
||||
revalidatePath(`/abteilungen/${parsed.data.departmentKey}`)
|
||||
return { ok: true }
|
||||
} catch (error) {
|
||||
return { ok: false, error: toMessage(error) }
|
||||
}
|
||||
}
|
||||
|
||||
const retractSchema = z.object({
|
||||
id: z.string().min(1).max(64),
|
||||
departmentKey: z.string().min(1).max(21),
|
||||
reason: z.string().min(10).max(500),
|
||||
})
|
||||
|
||||
export async function retractEntryAction(input: unknown): Promise<ActionResult> {
|
||||
const user = await requireUser()
|
||||
const parsed = retractSchema.safeParse(input)
|
||||
if (!parsed.success) return { ok: false, error: de.actionErrors['reason-required']! }
|
||||
|
||||
try {
|
||||
await retractEntry(user.permissions, parsed.data)
|
||||
revalidatePath(`/abteilungen/${parsed.data.departmentKey}`)
|
||||
return { ok: true }
|
||||
} catch (error) {
|
||||
return { ok: false, error: toMessage(error) }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,328 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { Suspense } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { notFound } from 'next/navigation'
|
||||
import { db } from '@/lib/db'
|
||||
import { requireUser } from '@/lib/auth/current'
|
||||
import {
|
||||
caseTypesOfDepartment,
|
||||
listDepartmentCases,
|
||||
listDepartmentDocuments,
|
||||
listMembers,
|
||||
loadVisibleDepartment,
|
||||
} from '@/lib/departments/service'
|
||||
import { listEntries } from '@/lib/departments/entries'
|
||||
import { loadChatView } from '@/lib/chat/load'
|
||||
import { de } from '@/lib/i18n/de'
|
||||
import { PieChart } from '@/components/PieChart'
|
||||
import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
|
||||
import { SkeletonLine } from '@/components/Skeleton'
|
||||
import { ChatLazy } from '@/components/chat/ChatLazy'
|
||||
import { DepartmentEntries } from './DepartmentEntries'
|
||||
import type { EffectivePermissions } from '@/lib/auth/permissions'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ key: string }>
|
||||
}): Promise<Metadata> {
|
||||
const user = await requireUser()
|
||||
const { key } = await params
|
||||
const abteilung = await loadVisibleDepartment(user.permissions, key)
|
||||
return { title: abteilung?.name ?? de.department.one }
|
||||
}
|
||||
|
||||
/**
|
||||
* Eine Abteilung.
|
||||
*
|
||||
* Dasselbe Bild wie eine Personalakte, eine Stufe höher: wer gehört dazu, was
|
||||
* ist dazu aktenkundig, was ist dazu vermerkt, und worüber wird geredet. Der
|
||||
* Unterschied ist, dass hier **nichts eingetragen** wird — die Fälle ergeben
|
||||
* sich aus den Beteiligten und deren Personalakten.
|
||||
*/
|
||||
export default async function DepartmentPage({ params }: { params: Promise<{ key: string }> }) {
|
||||
const user = await requireUser()
|
||||
const { key } = await params
|
||||
|
||||
const abteilung = await loadVisibleDepartment(user.permissions, key)
|
||||
// Kein Zugriff heisst 404, nicht 403.
|
||||
if (!abteilung) notFound()
|
||||
|
||||
const [levels, verteilung] = await Promise.all([
|
||||
db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
|
||||
caseTypesOfDepartment(user.permissions, abteilung.id),
|
||||
])
|
||||
const levelName = new Map(levels.map((l) => [l.level, l.name]))
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-5xl px-6 py-10">
|
||||
<header>
|
||||
<div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
|
||||
<span className="font-mono text-xs text-text-dim">{abteilung.key}</span>
|
||||
<span className="font-condensed text-2xs text-text-dim">{de.department.one}</span>
|
||||
{abteilung.isArchived ? (
|
||||
<span className="font-condensed text-2xs text-text-dim">
|
||||
{de.department.archived}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<h1 className="mt-2 font-condensed">{abteilung.name}</h1>
|
||||
{abteilung.description ? (
|
||||
<p className="mt-2 max-w-(--container-measure) text-sm text-text-dim">
|
||||
{abteilung.description}
|
||||
</p>
|
||||
) : null}
|
||||
</header>
|
||||
|
||||
<section className="mt-8 border border-line p-5">
|
||||
<h2 className="font-condensed text-xs text-text-dim">{de.department.chart}</h2>
|
||||
<div className="mt-4">
|
||||
<PieChart
|
||||
slices={verteilung}
|
||||
emptyLabel={de.department.chartEmpty}
|
||||
totalLabel={de.department.chartTotal}
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-4 max-w-(--container-measure) text-2xs text-text-dim">
|
||||
{de.department.derivedHint}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mt-10">
|
||||
<h2 className="font-condensed">{de.department.members}</h2>
|
||||
<div className="mt-4">
|
||||
<Suspense fallback={<SkeletonLine width="50%" />}>
|
||||
<Members
|
||||
departmentId={abteilung.id}
|
||||
permissions={user.permissions}
|
||||
levelName={levelName}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-10">
|
||||
<h2 className="font-condensed">{de.department.cases}</h2>
|
||||
<div className="mt-4">
|
||||
<Suspense fallback={<SkeletonLine width="60%" />}>
|
||||
<Cases
|
||||
departmentId={abteilung.id}
|
||||
permissions={user.permissions}
|
||||
levelName={levelName}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-10">
|
||||
<h2 className="font-condensed">{de.department.documents}</h2>
|
||||
<div className="mt-4">
|
||||
<Suspense fallback={<SkeletonLine width="55%" />}>
|
||||
<Documents departmentId={abteilung.id} permissions={user.permissions} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-10">
|
||||
<h2 className="font-condensed">{de.departmentEntry.heading}</h2>
|
||||
<div className="mt-4">
|
||||
<Suspense fallback={<SkeletonLine width="60%" />}>
|
||||
<Entries
|
||||
departmentKey={abteilung.key}
|
||||
departmentId={abteilung.id}
|
||||
user={user}
|
||||
levels={levels}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-10">
|
||||
<h2 className="font-condensed">{de.chat.heading}</h2>
|
||||
<div className="mt-4">
|
||||
<Suspense fallback={<SkeletonLine width="60%" />}>
|
||||
<ChatBlock departmentId={abteilung.id} user={user} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
async function Members({
|
||||
departmentId,
|
||||
permissions,
|
||||
levelName,
|
||||
}: {
|
||||
departmentId: string
|
||||
permissions: EffectivePermissions
|
||||
levelName: Map<number, string>
|
||||
}) {
|
||||
const mitglieder = await listMembers(permissions, departmentId)
|
||||
if (mitglieder.length === 0) {
|
||||
return <p className="text-text-dim">{de.department.membersEmpty}</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="border-t border-line">
|
||||
{mitglieder.map((person) => (
|
||||
<li key={person.id} className="border-b border-line">
|
||||
<Link
|
||||
href={`/personalakten/${person.id}`}
|
||||
className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 pl-3 text-text no-underline"
|
||||
style={classificationEdgeStyle(person.classification)}
|
||||
>
|
||||
<span className="grow">{person.displayName}</span>
|
||||
{person.rank ? (
|
||||
<span className="font-condensed text-2xs text-text-dim">{person.rank}</span>
|
||||
) : null}
|
||||
<StampMark
|
||||
level={person.classification}
|
||||
name={levelName.get(person.classification) ?? de.common.unknown}
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
async function Cases({
|
||||
departmentId,
|
||||
permissions,
|
||||
levelName,
|
||||
}: {
|
||||
departmentId: string
|
||||
permissions: EffectivePermissions
|
||||
levelName: Map<number, string>
|
||||
}) {
|
||||
const faelle = await listDepartmentCases(permissions, departmentId)
|
||||
if (faelle.length === 0) return <p className="text-text-dim">{de.department.casesEmpty}</p>
|
||||
|
||||
return (
|
||||
<ul className="border-t border-line">
|
||||
{faelle.map((akte) => (
|
||||
<li key={akte.id} className="border-b border-line">
|
||||
<Link
|
||||
href={`/faelle/${akte.caseNumber}`}
|
||||
className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 pl-3 text-text no-underline"
|
||||
style={classificationEdgeStyle(akte.classification)}
|
||||
>
|
||||
<span className="font-mono text-xs text-text-dim">{akte.caseNumber}</span>
|
||||
<span className="grow">{akte.title}</span>
|
||||
<span className="font-condensed text-2xs text-text-dim">
|
||||
{de.case.statusNames[akte.status] ?? akte.status}
|
||||
</span>
|
||||
<StampMark
|
||||
level={akte.classification}
|
||||
name={levelName.get(akte.classification) ?? de.common.unknown}
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
async function Documents({
|
||||
departmentId,
|
||||
permissions,
|
||||
}: {
|
||||
departmentId: string
|
||||
permissions: EffectivePermissions
|
||||
}) {
|
||||
const dokumente = await listDepartmentDocuments(permissions, departmentId)
|
||||
if (dokumente.length === 0) {
|
||||
return <p className="text-text-dim">{de.department.documentsEmpty}</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="border-t border-line">
|
||||
{dokumente.map((dokument) => (
|
||||
<li key={dokument.id} className="border-b border-line">
|
||||
<Link
|
||||
href={`/dokumente/${dokument.documentNumber}`}
|
||||
className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 text-text no-underline"
|
||||
>
|
||||
<span className="font-mono text-xs text-text-dim">{dokument.documentNumber}</span>
|
||||
<span className="grow">{dokument.title}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
async function Entries({
|
||||
departmentKey,
|
||||
departmentId,
|
||||
user,
|
||||
levels,
|
||||
}: {
|
||||
departmentKey: string
|
||||
departmentId: string
|
||||
user: { id: string; permissions: EffectivePermissions }
|
||||
levels: { level: number; name: string }[]
|
||||
}) {
|
||||
const vermerke = await listEntries(user.permissions, departmentId)
|
||||
const autoren = await db.user.findMany({
|
||||
where: { id: { in: [...new Set(vermerke.flatMap((v) => [v.authorId, v.retractedById ?? ''])) ].filter(Boolean) } },
|
||||
select: { id: true, displayName: true },
|
||||
})
|
||||
const nameVon = new Map(autoren.map((a) => [a.id, a.displayName]))
|
||||
|
||||
return (
|
||||
<DepartmentEntries
|
||||
departmentKey={departmentKey}
|
||||
currentUserId={user.id}
|
||||
canWrite={user.permissions.isAdmin || user.permissions.permissions.has('entry.create')}
|
||||
canRetract={user.permissions.isAdmin || user.permissions.permissions.has('entry.retract')}
|
||||
canEditAny={user.permissions.isAdmin || user.permissions.permissions.has('entry.edit_any')}
|
||||
canEditOwn={user.permissions.isAdmin || user.permissions.permissions.has('entry.edit_own')}
|
||||
levels={levels.filter((l) => l.level <= user.permissions.clearanceLevel)}
|
||||
entries={vermerke.map((vermerk) => ({
|
||||
id: vermerk.id,
|
||||
body: vermerk.body,
|
||||
minClearance: vermerk.minClearance,
|
||||
authorId: vermerk.authorId,
|
||||
authorName: nameVon.get(vermerk.authorId) ?? vermerk.authorId,
|
||||
createdAt: vermerk.createdAt.toISOString(),
|
||||
version: vermerk.version,
|
||||
editedAt: vermerk.editedAt?.toISOString() ?? null,
|
||||
retractedAt: vermerk.retractedAt?.toISOString() ?? null,
|
||||
retractedByName: vermerk.retractedById
|
||||
? (nameVon.get(vermerk.retractedById) ?? vermerk.retractedById)
|
||||
: null,
|
||||
retractionReason: vermerk.retractionReason,
|
||||
}))}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
async function ChatBlock({
|
||||
departmentId,
|
||||
user,
|
||||
}: {
|
||||
departmentId: string
|
||||
user: { id: string; permissions: EffectivePermissions }
|
||||
}) {
|
||||
const ansicht = await loadChatView(user.permissions, {
|
||||
kind: 'department',
|
||||
departmentId,
|
||||
})
|
||||
|
||||
return (
|
||||
<ChatLazy
|
||||
scope={{ kind: 'department', departmentId }}
|
||||
topic={`department:${departmentId}`}
|
||||
initial={ansicht.messages}
|
||||
initialReactions={ansicht.reactions}
|
||||
currentUserId={user.id}
|
||||
lastReadAt={ansicht.lastReadAt}
|
||||
canAdopt={false}
|
||||
mentionNames={ansicht.mentionNames}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { SkeletonLine } from '@/components/Skeleton'
|
||||
|
||||
/** Skelett statt Spinner, siehe docs/09-performance-und-ux.md. */
|
||||
export default function Loading() {
|
||||
return (
|
||||
<main className="mx-auto max-w-5xl px-6 py-10">
|
||||
<SkeletonLine width="12rem" />
|
||||
<div className="mt-8 space-y-3">
|
||||
<SkeletonLine />
|
||||
<SkeletonLine width="70%" />
|
||||
<SkeletonLine width="55%" />
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import { requireUser } from '@/lib/auth/current'
|
||||
import { casesPerDepartment, listDepartments } from '@/lib/departments/service'
|
||||
import { de } from '@/lib/i18n/de'
|
||||
import { PieChart } from '@/components/PieChart'
|
||||
|
||||
export const metadata: Metadata = { title: de.department.heading }
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
/**
|
||||
* Alle Abteilungen, und wo sich etwas häuft.
|
||||
*
|
||||
* Das Diagramm beantwortet die Frage, mit der man auf diese Seite kommt: zu
|
||||
* welcher Abteilung gibt es die meisten Fälle. Gezählt wird nur, was der
|
||||
* Fragende auch sehen darf — eine Zahl, die mehr zählt als seine Liste
|
||||
* hergibt, wäre selbst eine Auskunft.
|
||||
*/
|
||||
export default async function DepartmentsPage() {
|
||||
const user = await requireUser()
|
||||
const [abteilungen, verteilung] = await Promise.all([
|
||||
listDepartments(user.permissions),
|
||||
casesPerDepartment(user.permissions),
|
||||
])
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-5xl px-6 py-10">
|
||||
<h1 className="font-condensed">{de.department.heading}</h1>
|
||||
<p className="mt-1 max-w-(--container-measure) text-2xs text-text-dim">
|
||||
{de.department.intro}
|
||||
</p>
|
||||
|
||||
{abteilungen.length === 0 ? (
|
||||
<p className="mt-10 text-text-dim">{de.department.empty}</p>
|
||||
) : (
|
||||
<>
|
||||
<section className="mt-8 border border-line p-5">
|
||||
<h2 className="font-condensed text-xs text-text-dim">{de.department.chartAll}</h2>
|
||||
<div className="mt-4">
|
||||
<PieChart
|
||||
slices={verteilung}
|
||||
emptyLabel={de.department.chartEmpty}
|
||||
totalLabel={de.department.chartTotal}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ul className="mt-10 border-t border-line">
|
||||
{abteilungen.map((abteilung) => (
|
||||
<li key={abteilung.id} className="border-b border-line">
|
||||
<Link
|
||||
href={`/abteilungen/${abteilung.key}`}
|
||||
className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 text-text no-underline"
|
||||
>
|
||||
<span className="font-mono text-xs text-text-dim">{abteilung.key}</span>
|
||||
<span className="grow">{abteilung.name}</span>
|
||||
{abteilung.description ? (
|
||||
<span className="w-full text-2xs text-text-dim sm:w-auto sm:grow-[2]">
|
||||
{abteilung.description}
|
||||
</span>
|
||||
) : null}
|
||||
{abteilung.memberCount === null ? null : (
|
||||
<span className="font-condensed text-2xs text-text-dim">
|
||||
{de.department.memberCount(abteilung.memberCount)}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user