fix: Verifikation — Suchfeld statt 654 Mini-Kacheln + Lazy-Load

- SuggestEvidenceModal: Suchfeld + max 20 Ergebnisse statt alle Kacheln
- Verification page: Mitigations nur on-demand laden (nicht beim Seitenstart)
- Deutlich schnellerer Seitenaufbau

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-05-07 18:33:21 +02:00
parent 969658261f
commit 78d7273b82
2 changed files with 43 additions and 17 deletions
@@ -23,18 +23,25 @@ export default function VerificationPage() {
async function fetchData() {
try {
const [verRes, hazRes, mitRes] = await Promise.all([
fetch(`/api/sdk/v1/iace/projects/${projectId}/verifications`),
fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`),
fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations`),
])
// Only load verifications initially — hazards/mitigations loaded on demand
const verRes = await fetch(`/api/sdk/v1/iace/projects/${projectId}/verifications`)
if (verRes.ok) { const j = await verRes.json(); setItems(j.verifications || j || []) }
if (hazRes.ok) { const j = await hazRes.json(); setHazards((j.hazards || j || []).map((h: { id: string; name: string }) => ({ id: h.id, name: h.name }))) }
if (mitRes.ok) { const j = await mitRes.json(); setMitigations((j.mitigations || j || []).map((m: { id: string; title: string }) => ({ id: m.id, title: m.title }))) }
} catch (err) { console.error('Failed to fetch data:', err) }
finally { setLoading(false) }
}
async function loadMitigationsIfNeeded() {
if (mitigations.length > 0) return
try {
const mitRes = await fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations`)
if (mitRes.ok) {
const j = await mitRes.json()
const mits = (j.mitigations || j || []).map((m: Record<string, string>) => ({ id: m.id, title: m.title || m.name || '' }))
setMitigations(mits)
}
} catch { /* ignore */ }
}
async function handleSubmit(data: VerificationFormData) {
try {
const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/verifications`, {
@@ -89,8 +96,8 @@ export default function VerificationPage() {
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Nachweisfuehrung fuer alle Schutzmassnahmen und Sicherheitsanforderungen.</p>
</div>
<div className="flex items-center gap-2">
{mitigations.length > 0 && (
<button onClick={() => setShowSuggest(true)} className="flex items-center gap-2 px-3 py-2 border border-green-300 text-green-700 rounded-lg hover:bg-green-50 transition-colors text-sm">
{true && (
<button onClick={async () => { await loadMitigationsIfNeeded(); setShowSuggest(true) }} className="flex items-center gap-2 px-3 py-2 border border-green-300 text-green-700 rounded-lg hover:bg-green-50 transition-colors text-sm">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
@@ -147,7 +154,7 @@ export default function VerificationPage() {
</p>
<div className="mt-6 flex items-center justify-center gap-3">
{mitigations.length > 0 && (
<button onClick={() => setShowSuggest(true)} className="px-6 py-3 border border-green-300 text-green-700 rounded-lg hover:bg-green-50 transition-colors">
<button onClick={async () => { await loadMitigationsIfNeeded(); setShowSuggest(true) }} className="px-6 py-3 border border-green-300 text-green-700 rounded-lg hover:bg-green-50 transition-colors">
Nachweise vorschlagen
</button>
)}