414 lines
15 KiB
JavaScript
414 lines
15 KiB
JavaScript
import { useEffect, useState, useCallback } from 'react';
|
||
import { apiPatch, apiFetchOne, apiFetch, apiLink, apiUnlink } from '../lib/api';
|
||
import { STATUS_COLORS } from '../lib/tables';
|
||
|
||
const READ_ONLY_FIELDS = new Set(['id', 'created_at', 'updated_at']);
|
||
const TIMESTAMP_RE = /(_at|_timestamp)$/;
|
||
|
||
function isReadOnly(key) {
|
||
return READ_ONLY_FIELDS.has(key) || TIMESTAMP_RE.test(key);
|
||
}
|
||
|
||
function FieldLabel({ name }) {
|
||
return (
|
||
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wide">
|
||
{name.replace(/_/g, ' ')}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function ReadOnlyValue({ fieldKey, value }) {
|
||
if (value == null || value === '') return <span className="text-slate-300 text-sm">—</span>;
|
||
|
||
if (Array.isArray(value)) {
|
||
if (value.length === 0) return <span className="text-slate-400 text-sm">[]</span>;
|
||
return (
|
||
<div className="flex flex-wrap gap-1">
|
||
{value.map((v, i) => (
|
||
<span key={i} className="text-xs font-mono bg-slate-100 text-slate-600 rounded px-1.5 py-0.5">
|
||
{String(v).slice(0, 12)}
|
||
</span>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (TIMESTAMP_RE.test(fieldKey)) {
|
||
return (
|
||
<span className="text-sm text-slate-600">
|
||
{new Date(value).toLocaleString('de-DE')}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
if (fieldKey === 'status') {
|
||
const cls = STATUS_COLORS[value] || 'bg-slate-100 text-slate-600';
|
||
return <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${cls}`}>{value}</span>;
|
||
}
|
||
|
||
if (fieldKey === 'id') {
|
||
return <span className="text-sm font-mono text-slate-500">{value}</span>;
|
||
}
|
||
|
||
return <span className="text-sm text-slate-700 break-words">{String(value)}</span>;
|
||
}
|
||
|
||
function EditableField({ fieldKey, value, fieldDef, onChange }) {
|
||
const { type, options, min, max } = fieldDef;
|
||
|
||
if (type === 'select') {
|
||
return (
|
||
<select
|
||
value={value ?? ''}
|
||
onChange={e => onChange(e.target.value)}
|
||
className="w-full border border-slate-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 bg-white"
|
||
>
|
||
<option value="">— wählen —</option>
|
||
{options.map(o => <option key={o} value={o}>{o}</option>)}
|
||
</select>
|
||
);
|
||
}
|
||
|
||
if (type === 'textarea') {
|
||
return (
|
||
<textarea
|
||
value={value ?? ''}
|
||
onChange={e => onChange(e.target.value)}
|
||
rows={3}
|
||
className="w-full border border-slate-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 bg-white resize-y"
|
||
/>
|
||
);
|
||
}
|
||
|
||
if (type === 'number') {
|
||
return (
|
||
<input
|
||
type="number"
|
||
value={value ?? ''}
|
||
min={min}
|
||
max={max}
|
||
onChange={e => onChange(e.target.value === '' ? null : Number(e.target.value))}
|
||
className="w-full border border-slate-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 bg-white"
|
||
/>
|
||
);
|
||
}
|
||
|
||
// default: text
|
||
return (
|
||
<input
|
||
type="text"
|
||
value={value ?? ''}
|
||
onChange={e => onChange(e.target.value)}
|
||
className="w-full border border-slate-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 bg-white"
|
||
/>
|
||
);
|
||
}
|
||
|
||
function RelationManager({ recordId, rel }) {
|
||
const [items, setItems] = useState(undefined); // undefined = loading
|
||
const [search, setSearch] = useState('');
|
||
const [searchResults, setSearchResults] = useState(null);
|
||
const [searching, setSearching] = useState(false);
|
||
const [showSearch, setShowSearch] = useState(false);
|
||
const [error, setError] = useState('');
|
||
|
||
// Load linked items
|
||
useEffect(() => {
|
||
setItems(undefined);
|
||
apiFetchOne(rel.endpoint(recordId))
|
||
.then(data => setItems(Array.isArray(data) ? data : []))
|
||
.catch(() => setItems(null));
|
||
}, [recordId, rel]);
|
||
|
||
// Search available items
|
||
useEffect(() => {
|
||
if (!showSearch) return;
|
||
if (!search.trim()) { setSearchResults([]); return; }
|
||
const timer = setTimeout(() => {
|
||
setSearching(true);
|
||
const q = encodeURIComponent(search.trim());
|
||
apiFetch(`${rel.searchEndpoint}?search=${q}&limit=20&offset=0`)
|
||
.then(data => {
|
||
const arr = Array.isArray(data) ? data : [];
|
||
const linked = new Set((items || []).map(i => i.id));
|
||
setSearchResults(arr.filter(r => !linked.has(r.id)));
|
||
})
|
||
.catch(() => setSearchResults([]))
|
||
.finally(() => setSearching(false));
|
||
}, 300);
|
||
return () => clearTimeout(timer);
|
||
}, [search, showSearch, items, rel]);
|
||
|
||
async function handleLink(targetId) {
|
||
try {
|
||
await apiLink(rel.linkEndpoint(recordId, targetId));
|
||
// refresh
|
||
const data = await apiFetchOne(rel.endpoint(recordId));
|
||
setItems(Array.isArray(data) ? data : []);
|
||
setSearch('');
|
||
setSearchResults([]);
|
||
setShowSearch(false);
|
||
} catch (e) { setError(e.message); }
|
||
}
|
||
|
||
async function handleUnlink(targetId) {
|
||
try {
|
||
await apiUnlink(rel.linkEndpoint(recordId, targetId));
|
||
setItems(prev => (prev || []).filter(i => i.id !== targetId));
|
||
} catch (e) { setError(e.message); }
|
||
}
|
||
|
||
return (
|
||
<section>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest">{rel.label}</h3>
|
||
<button
|
||
onClick={() => { setShowSearch(s => !s); setSearch(''); setSearchResults([]); }}
|
||
className="text-xs text-indigo-600 hover:text-indigo-800 font-medium flex items-center gap-1"
|
||
>
|
||
{showSearch ? '✕ Schließen' : '+ Verknüpfen'}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Search box */}
|
||
{showSearch && (
|
||
<div className="mb-2">
|
||
<input
|
||
autoFocus
|
||
type="text"
|
||
placeholder={`${rel.label} suchen…`}
|
||
value={search}
|
||
onChange={e => setSearch(e.target.value)}
|
||
className="w-full border border-slate-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
|
||
/>
|
||
{searching && <p className="text-xs text-slate-400 mt-1">Suche…</p>}
|
||
{searchResults && searchResults.length === 0 && search && !searching && (
|
||
<p className="text-xs text-slate-400 mt-1">Keine Ergebnisse</p>
|
||
)}
|
||
{searchResults && searchResults.length > 0 && (
|
||
<div className="mt-1 border border-slate-200 rounded-lg overflow-hidden max-h-36 overflow-y-auto">
|
||
{searchResults.map(r => (
|
||
<button
|
||
key={r.id}
|
||
onClick={() => handleLink(r.id)}
|
||
className="w-full text-left px-3 py-1.5 text-sm hover:bg-indigo-50 hover:text-indigo-700 transition-colors border-b border-slate-100 last:border-0"
|
||
>
|
||
{rel.searchLabel(r)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Linked items */}
|
||
<div className="bg-slate-50 rounded-lg p-3 min-h-[40px]">
|
||
{items === undefined && (
|
||
<div className="flex gap-1">
|
||
{[1,2,3].map(i => <div key={i} className="h-6 w-16 bg-slate-200 rounded animate-pulse" />)}
|
||
</div>
|
||
)}
|
||
{items === null && <span className="text-xs text-red-500">Fehler beim Laden</span>}
|
||
{Array.isArray(items) && items.length === 0 && (
|
||
<span className="text-sm text-slate-400">Keine verknüpften Einträge</span>
|
||
)}
|
||
{Array.isArray(items) && items.length > 0 && (
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{items.map(item => (
|
||
<span key={item.id} className="group flex items-center gap-1 text-xs bg-indigo-50 text-indigo-700 rounded-full pl-2.5 pr-1 py-1 font-medium">
|
||
{rel.display(item)}
|
||
<button
|
||
onClick={() => handleUnlink(item.id)}
|
||
className="text-indigo-400 hover:text-red-500 hover:bg-red-50 rounded-full w-4 h-4 flex items-center justify-center transition-colors"
|
||
title="Verknüpfung entfernen"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export default function RecordModal({ record, meta, onClose, onSaved }) {
|
||
const [values, setValues] = useState({});
|
||
const [dirty, setDirty] = useState({});
|
||
const [saving, setSaving] = useState(false);
|
||
const [saveError, setSaveError] = useState('');
|
||
|
||
// Init values from record
|
||
useEffect(() => {
|
||
if (!record) return;
|
||
setValues({ ...record });
|
||
setDirty({});
|
||
setSaveError('');
|
||
}, [record]);
|
||
|
||
const handleChange = useCallback((key, val) => {
|
||
setValues(prev => ({ ...prev, [key]: val }));
|
||
setDirty(prev => ({ ...prev, [key]: true }));
|
||
}, []);
|
||
|
||
const handleSave = async () => {
|
||
const patch = {};
|
||
Object.keys(dirty).forEach(k => { patch[k] = values[k]; });
|
||
if (Object.keys(patch).length === 0) { onClose(); return; }
|
||
|
||
setSaving(true);
|
||
setSaveError('');
|
||
try {
|
||
const updated = await apiPatch(meta.endpoint, record.id, patch);
|
||
onSaved(updated || { ...record, ...patch });
|
||
onClose();
|
||
} catch (err) {
|
||
setSaveError(err.message);
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
if (!record) return null;
|
||
|
||
// All field keys from the record
|
||
const allKeys = Object.keys(record);
|
||
// Split into editable and read-only
|
||
const editableKeys = allKeys.filter(k => !isReadOnly(k) && meta.editableFields?.[k]);
|
||
const extraKeys = allKeys.filter(k => !isReadOnly(k) && !meta.editableFields?.[k] && !Array.isArray(record[k]));
|
||
const arrayKeys = allKeys.filter(k => Array.isArray(record[k]));
|
||
const roKeys = allKeys.filter(k => isReadOnly(k));
|
||
|
||
const hasDirty = Object.keys(dirty).length > 0;
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 backdrop-blur-sm p-4 overflow-y-auto">
|
||
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl my-8 flex flex-col">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-200">
|
||
<div>
|
||
<span className="text-xl mr-2">{meta.icon}</span>
|
||
<span className="font-semibold text-slate-800">{meta.label}</span>
|
||
<span className="ml-2 font-mono text-xs text-slate-400">{record.id?.slice(0, 8)}…</span>
|
||
</div>
|
||
<button
|
||
onClick={onClose}
|
||
className="text-slate-400 hover:text-slate-600 text-2xl leading-none transition-colors"
|
||
aria-label="Schließen"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
{/* Body */}
|
||
<div className="px-6 py-5 space-y-5 overflow-y-auto">
|
||
|
||
{/* Editable fields */}
|
||
{editableKeys.length > 0 && (
|
||
<section>
|
||
<h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Bearbeiten</h3>
|
||
<div className="space-y-3">
|
||
{editableKeys.map(key => (
|
||
<div key={key}>
|
||
<FieldLabel name={key} />
|
||
<div className="mt-1">
|
||
<EditableField
|
||
fieldKey={key}
|
||
value={values[key]}
|
||
fieldDef={meta.editableFields[key]}
|
||
onChange={val => handleChange(key, val)}
|
||
/>
|
||
</div>
|
||
{dirty[key] && (
|
||
<span className="text-xs text-indigo-500 mt-0.5 block">geändert</span>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* Extra non-editable non-array fields */}
|
||
{extraKeys.length > 0 && (
|
||
<section>
|
||
<h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Weitere Felder</h3>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
{extraKeys.map(key => (
|
||
<div key={key} className="bg-slate-50 rounded-lg p-3">
|
||
<FieldLabel name={key} />
|
||
<div className="mt-1">
|
||
<ReadOnlyValue fieldKey={key} value={values[key]} />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* Array / linked fields */}
|
||
{arrayKeys.length > 0 && (
|
||
<section>
|
||
<h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Verknüpfte IDs</h3>
|
||
<div className="space-y-2">
|
||
{arrayKeys.map(key => (
|
||
<div key={key} className="bg-slate-50 rounded-lg p-3">
|
||
<FieldLabel name={key} />
|
||
<div className="mt-1">
|
||
<ReadOnlyValue fieldKey={key} value={values[key]} />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* Related data with link/unlink */}
|
||
{meta.fetchRelated?.map(rel => (
|
||
<RelationManager key={rel.key} recordId={record.id} rel={rel} />
|
||
))}
|
||
|
||
{/* Read-only metadata */}
|
||
<section>
|
||
<h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Metadaten</h3>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
{roKeys.map(key => (
|
||
<div key={key} className="bg-slate-50 rounded-lg p-3">
|
||
<FieldLabel name={key} />
|
||
<div className="mt-1">
|
||
<ReadOnlyValue fieldKey={key} value={values[key]} />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className="px-6 py-4 border-t border-slate-200 flex items-center justify-between gap-3">
|
||
{saveError && (
|
||
<span className="text-sm text-red-600 flex-1">{saveError}</span>
|
||
)}
|
||
{!saveError && <span className="flex-1" />}
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={onClose}
|
||
className="px-4 py-2 text-sm text-slate-600 hover:text-slate-800 border border-slate-300 rounded-lg transition-colors"
|
||
>
|
||
Abbrechen
|
||
</button>
|
||
<button
|
||
onClick={handleSave}
|
||
disabled={saving || !hasDirty}
|
||
className="px-4 py-2 text-sm bg-indigo-600 hover:bg-indigo-700 disabled:opacity-40 text-white font-medium rounded-lg transition-colors"
|
||
>
|
||
{saving ? 'Speichern…' : hasDirty ? 'Speichern' : 'Gespeichert'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|