Harlekin
9c24858d75
„Keine Textzentrierung" - die Beobachtung stimmte an einundzwanzig Stellen, und die Ursache war überall dieselbe: die Zeilen waren Flex-Behälter, in denen jedes Element so breit war wie sein Inhalt. Damit fing der Titel in jeder Zeile woanders an, und die Stempelmarken hatten nur rechts eine gemeinsame Kante. Bei „ETHIK" und „WS" untereinander sieht man es sofort. Die Breiten stehen jetzt einmal in globals.css - record-key, record-label, record-title, record-meta, stamp-mark - und sind über Variablen je Liste anpassbar: eine Liste von Abteilungskürzeln braucht keine vierzehn Zeichen, eine Liste von Aktenzeichen schon. Zwei Dinge, die dabei mehr sind als Kosmetik: Eine Spalte wird auch reserviert, wenn sie leer ist. Vorher hing der Dienstgrad an einer Bedingung, und bei einer Person ohne Rang rutschte alles Folgende nach links. Was keine Kennung ist, gehört nicht in die Kennungsspalte. In „Zuletzt geöffnet" stand der Name einer Person dort, wo sonst das Aktenzeichen steht: in Mono, abgeschnitten, und der Dienstgrad wanderte an die Stelle des Titels. Für eine Person ist der Name der Titel. Die Stempelmarke ist überall gleich breit; ein zu langer Name wird gekürzt, die Stufenziffer bleibt stehen - sie ist die eigentliche Auskunft. Unter 40 rem fallen die festen Breiten weg, sonst liefen sie über. Nachgesehen im Browser mit dem gebauten CSS, Fallakten, Abteilungen, Zuletzt geöffnet und Beteiligte.
118 lines
3.9 KiB
TypeScript
118 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useTransition } from 'react'
|
|
import { exportText } from '@/lib/i18n/export'
|
|
import { commonText } from '@/lib/i18n/common'
|
|
import { approveExportAction, rejectExportAction } from './actions'
|
|
|
|
type Auftrag = {
|
|
id: string
|
|
kind: string
|
|
label: string
|
|
requestedBy: string
|
|
clearanceAtTime: number
|
|
createdAt: string
|
|
}
|
|
|
|
/**
|
|
* Offene Exportfreigaben.
|
|
*
|
|
* Vier-Augen-Prinzip: hier steht nur, was **jemand anderes** angefragt hat.
|
|
* Die eigene Anfrage taucht gar nicht erst auf, und der Dienst weist sie auch
|
|
* dann zurück, wenn jemand die Kennung von Hand einsetzt.
|
|
*/
|
|
export function Approvals({ jobs }: { jobs: Auftrag[] }) {
|
|
const [ablehnung, setAblehnung] = useState<string | null>(null)
|
|
const [grund, setGrund] = useState('')
|
|
const [fehler, setFehler] = useState<string | null>(null)
|
|
const [pending, startTransition] = useTransition()
|
|
|
|
if (jobs.length === 0) {
|
|
return <p className="text-text-dim">{exportText.approvalsEmpty}</p>
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<ul className="border-t border-line">
|
|
{jobs.map((auftrag) => (
|
|
<li key={auftrag.id} className="border-b border-line py-2">
|
|
<div className="record-row text-2xs">
|
|
<span className="record-label">
|
|
{exportText.kinds[auftrag.kind] ?? auftrag.kind}
|
|
</span>
|
|
<span className="record-key">{auftrag.label}</span>
|
|
<span className="record-title text-text-dim">
|
|
{exportText.requestedBy} {auftrag.requestedBy}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
disabled={pending}
|
|
onClick={() =>
|
|
startTransition(async () => {
|
|
const ergebnis = await approveExportAction({ id: auftrag.id })
|
|
if (ergebnis.error) setFehler(ergebnis.error)
|
|
})
|
|
}
|
|
className="btn btn-sm btn-primary"
|
|
>
|
|
{exportText.approve}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setAblehnung(auftrag.id)}
|
|
className="btn btn-sm"
|
|
>
|
|
{exportText.reject}
|
|
</button>
|
|
</div>
|
|
|
|
{ablehnung === auftrag.id ? (
|
|
<div className="mt-2">
|
|
<textarea
|
|
value={grund}
|
|
onChange={(event) => setGrund(event.target.value)}
|
|
rows={2}
|
|
placeholder={exportText.rejectReason}
|
|
aria-label={exportText.rejectReason}
|
|
className="block w-full max-w-sm field text-2xs"
|
|
/>
|
|
<div className="mt-1 flex gap-3 text-2xs">
|
|
<button
|
|
type="button"
|
|
disabled={pending || grund.trim().length < 10}
|
|
onClick={() =>
|
|
startTransition(async () => {
|
|
const ergebnis = await rejectExportAction({
|
|
id: auftrag.id,
|
|
reason: grund,
|
|
})
|
|
if (ergebnis.error) setFehler(ergebnis.error)
|
|
else {
|
|
setAblehnung(null)
|
|
setGrund('')
|
|
}
|
|
})
|
|
}
|
|
className="btn btn-sm text-stamp-4"
|
|
>
|
|
{exportText.reject}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setAblehnung(null)}
|
|
className="btn btn-sm"
|
|
>
|
|
{commonText.cancel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{fehler ? <p className="mt-2 font-condensed text-2xs text-stamp-4">{fehler}</p> : null}
|
|
</div>
|
|
)
|
|
}
|