393 lines
19 KiB
TypeScript
393 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import type {
|
|
DevicePayload,
|
|
DocumentPayload,
|
|
DocumentType,
|
|
KnowledgeDevice,
|
|
KnowledgeDocument,
|
|
KnowledgeManufacturer,
|
|
KnowledgeNote,
|
|
ManufacturerPayload,
|
|
NotePayload,
|
|
NoteType,
|
|
} from "@/types/knowledge";
|
|
|
|
const documentTypes: Array<[DocumentType, string]> = [
|
|
["manual", "Bedienungsanleitung"],
|
|
["service_manual", "Service Manual"],
|
|
["schematic", "Schaltplan"],
|
|
["alignment", "Abgleichanleitung"],
|
|
["parts_list", "Ersatzteilliste"],
|
|
["firmware", "Firmware"],
|
|
["datasheet", "Datenblatt"],
|
|
["service_bulletin", "Service Bulletin"],
|
|
["other", "Sonstiges"],
|
|
];
|
|
|
|
const noteTypes: Array<[NoteType, string]> = [
|
|
["repair", "Reparaturhinweis"],
|
|
["known_fault", "Bekannter Fehler"],
|
|
["alignment", "Abgleichhinweis"],
|
|
["spare_part", "Ersatzteilhinweis"],
|
|
["general", "Allgemein"],
|
|
];
|
|
|
|
function tagsToText(tags: string[]) {
|
|
return tags.join(", ");
|
|
}
|
|
|
|
function textToTags(value: string) {
|
|
return value.split(",").map((tag) => tag.trim()).filter(Boolean);
|
|
}
|
|
|
|
function fieldClass() {
|
|
return "grid gap-2";
|
|
}
|
|
|
|
export function ManufacturerFormDialog({
|
|
open,
|
|
manufacturer,
|
|
pending,
|
|
error,
|
|
onOpenChange,
|
|
onSubmit,
|
|
}: {
|
|
open: boolean;
|
|
manufacturer: KnowledgeManufacturer | null;
|
|
pending: boolean;
|
|
error: string;
|
|
onOpenChange: (open: boolean) => void;
|
|
onSubmit: (payload: ManufacturerPayload) => void;
|
|
}) {
|
|
const [name, setName] = useState("");
|
|
const [website, setWebsite] = useState("");
|
|
const [notes, setNotes] = useState("");
|
|
|
|
useEffect(() => {
|
|
queueMicrotask(() => {
|
|
setName(manufacturer?.name ?? "");
|
|
setWebsite(manufacturer?.website ?? "");
|
|
setNotes(manufacturer?.notes ?? "");
|
|
});
|
|
}, [manufacturer, open]);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent>
|
|
<DialogHeader><DialogTitle>{manufacturer ? "Hersteller bearbeiten" : "Hersteller erstellen"}</DialogTitle></DialogHeader>
|
|
<div className="grid gap-4">
|
|
<div className={fieldClass()}><Label>Name</Label><Input value={name} onChange={(event) => setName(event.target.value)} /></div>
|
|
<div className={fieldClass()}><Label>Website</Label><Input value={website} onChange={(event) => setWebsite(event.target.value)} /></div>
|
|
<div className={fieldClass()}><Label>Notizen</Label><textarea className="min-h-24 rounded-lg border border-input p-2 text-sm" value={notes} onChange={(event) => setNotes(event.target.value)} /></div>
|
|
{error && <p className="text-sm text-red-600">{error}</p>}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={pending}>Abbrechen</Button>
|
|
<Button onClick={() => onSubmit({ name, website: website || null, notes })} disabled={pending}>Speichern</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export function DeviceFormDialog({
|
|
open,
|
|
device,
|
|
manufacturers,
|
|
initialManufacturerId,
|
|
pending,
|
|
error,
|
|
onOpenChange,
|
|
onSubmit,
|
|
}: {
|
|
open: boolean;
|
|
device: KnowledgeDevice | null;
|
|
manufacturers: KnowledgeManufacturer[];
|
|
initialManufacturerId?: number | null;
|
|
pending: boolean;
|
|
error: string;
|
|
onOpenChange: (open: boolean) => void;
|
|
onSubmit: (payload: DevicePayload) => void;
|
|
}) {
|
|
const [payload, setPayload] = useState<DevicePayload>({
|
|
manufacturer_id: 0,
|
|
name: "",
|
|
model_number: "",
|
|
device_type: "",
|
|
frequency_range: "",
|
|
production_year_from: null,
|
|
production_year_to: null,
|
|
notes: "",
|
|
});
|
|
|
|
useEffect(() => {
|
|
queueMicrotask(() => {
|
|
setPayload(device ? {
|
|
manufacturer_id: device.manufacturer_id,
|
|
name: device.name,
|
|
model_number: device.model_number,
|
|
device_type: device.device_type,
|
|
frequency_range: device.frequency_range,
|
|
production_year_from: device.production_year_from,
|
|
production_year_to: device.production_year_to,
|
|
notes: device.notes,
|
|
} : {
|
|
manufacturer_id: initialManufacturerId ?? manufacturers[0]?.id ?? 0,
|
|
name: "",
|
|
model_number: "",
|
|
device_type: "",
|
|
frequency_range: "",
|
|
production_year_from: null,
|
|
production_year_to: null,
|
|
notes: "",
|
|
});
|
|
});
|
|
}, [device, initialManufacturerId, manufacturers, open]);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-2xl">
|
|
<DialogHeader><DialogTitle>{device ? "Gerät bearbeiten" : "Gerät erstellen"}</DialogTitle></DialogHeader>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className={fieldClass()}><Label>Hersteller</Label><select className="h-9 rounded-lg border px-2 text-sm" value={payload.manufacturer_id} onChange={(event) => setPayload({ ...payload, manufacturer_id: Number(event.target.value) })}>{manufacturers.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}</select></div>
|
|
<div className={fieldClass()}><Label>Name</Label><Input value={payload.name} onChange={(event) => setPayload({ ...payload, name: event.target.value })} /></div>
|
|
<div className={fieldClass()}><Label>Modellnummer</Label><Input value={payload.model_number} onChange={(event) => setPayload({ ...payload, model_number: event.target.value })} /></div>
|
|
<div className={fieldClass()}><Label>Gerätetyp</Label><Input value={payload.device_type} onChange={(event) => setPayload({ ...payload, device_type: event.target.value })} /></div>
|
|
<div className={fieldClass()}><Label>Frequenzbereich</Label><Input value={payload.frequency_range} onChange={(event) => setPayload({ ...payload, frequency_range: event.target.value })} /></div>
|
|
<div className={fieldClass()}><Label>Baujahr von</Label><Input type="number" value={payload.production_year_from ?? ""} onChange={(event) => setPayload({ ...payload, production_year_from: event.target.value ? Number(event.target.value) : null })} /></div>
|
|
<div className={fieldClass()}><Label>Baujahr bis</Label><Input type="number" value={payload.production_year_to ?? ""} onChange={(event) => setPayload({ ...payload, production_year_to: event.target.value ? Number(event.target.value) : null })} /></div>
|
|
<div className="grid gap-2 sm:col-span-2"><Label>Notizen</Label><textarea className="min-h-24 rounded-lg border border-input p-2 text-sm" value={payload.notes} onChange={(event) => setPayload({ ...payload, notes: event.target.value })} /></div>
|
|
{error && <p className="text-sm text-red-600 sm:col-span-2">{error}</p>}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={pending}>Abbrechen</Button>
|
|
<Button onClick={() => onSubmit(payload)} disabled={pending || !payload.manufacturer_id}>Speichern</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export function DocumentUploadDialog({
|
|
open,
|
|
document,
|
|
manufacturers,
|
|
devices,
|
|
initialManufacturerId,
|
|
pending,
|
|
error,
|
|
onOpenChange,
|
|
onSubmit,
|
|
onValidationError,
|
|
}: {
|
|
open: boolean;
|
|
document: KnowledgeDocument | null;
|
|
manufacturers: KnowledgeManufacturer[];
|
|
devices: KnowledgeDevice[];
|
|
initialManufacturerId?: number | null;
|
|
pending: boolean;
|
|
error: string;
|
|
onOpenChange: (open: boolean) => void;
|
|
onSubmit: (payload: DocumentPayload, file: File | null) => void;
|
|
onValidationError?: (message: string) => void;
|
|
}) {
|
|
const [payload, setPayload] = useState<DocumentPayload>({
|
|
manufacturer_id: 0,
|
|
device_id: null,
|
|
title: "",
|
|
document_type: "service_manual",
|
|
language: "de",
|
|
external_url: null,
|
|
paperless_document_id: "",
|
|
description: "",
|
|
tags: [],
|
|
});
|
|
const [tags, setTags] = useState("");
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
|
|
|
|
useEffect(() => {
|
|
queueMicrotask(() => {
|
|
setPayload(document ? {
|
|
manufacturer_id: document.manufacturer_id,
|
|
device_id: document.device_id,
|
|
title: document.title,
|
|
document_type: document.document_type,
|
|
language: document.language,
|
|
external_url: document.external_url || null,
|
|
paperless_document_id: document.paperless_document_id,
|
|
description: document.description,
|
|
tags: document.tags,
|
|
} : {
|
|
manufacturer_id: initialManufacturerId ?? manufacturers[0]?.id ?? 0,
|
|
device_id: null,
|
|
title: "",
|
|
document_type: "service_manual",
|
|
language: "de",
|
|
external_url: null,
|
|
paperless_document_id: "",
|
|
description: "",
|
|
tags: [],
|
|
});
|
|
setTags(document ? tagsToText(document.tags) : "");
|
|
setFile(null);
|
|
setFieldErrors({});
|
|
});
|
|
}, [document, initialManufacturerId, manufacturers, open]);
|
|
|
|
const filteredDevices = devices.filter((device) => device.manufacturer_id === payload.manufacturer_id);
|
|
const selectedManufacturer = manufacturers.find((manufacturer) => manufacturer.id === payload.manufacturer_id);
|
|
|
|
function validate() {
|
|
const errors: Record<string, string> = {};
|
|
if (!payload.manufacturer_id) {
|
|
errors.manufacturer_id = "Bitte wählen Sie einen Hersteller aus.";
|
|
}
|
|
if (!payload.device_id) {
|
|
errors.device_id = "Bitte wählen Sie ein Gerät aus.";
|
|
}
|
|
if (!payload.document_type) {
|
|
errors.document_type = "Bitte wählen Sie einen Dokumenttyp aus.";
|
|
}
|
|
if (!payload.title.trim()) {
|
|
errors.title = "Bitte geben Sie einen Titel ein.";
|
|
}
|
|
if (!document && !file) {
|
|
errors.file = "Bitte wählen Sie eine Datei aus.";
|
|
}
|
|
|
|
setFieldErrors(errors);
|
|
const firstMessage = Object.values(errors)[0];
|
|
if (firstMessage) {
|
|
onValidationError?.(firstMessage);
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function submit() {
|
|
if (!validate()) {
|
|
return;
|
|
}
|
|
onSubmit({ ...payload, tags: textToTags(tags) }, file);
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-3xl">
|
|
<DialogHeader><DialogTitle>{document ? "Dokument bearbeiten" : "Dokument hochladen"}</DialogTitle></DialogHeader>
|
|
<p className="text-sm text-slate-500">
|
|
Dokumente werden immer einem Gerät zugeordnet. Lege daher zuerst Hersteller und Gerät an.
|
|
</p>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className={fieldClass()}>
|
|
<Label>Hersteller</Label>
|
|
<select className="h-9 rounded-lg border px-2 text-sm" value={payload.manufacturer_id} onChange={(event) => setPayload({ ...payload, manufacturer_id: Number(event.target.value), device_id: null })}>
|
|
<option value={0}>Hersteller auswählen</option>
|
|
{manufacturers.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
|
|
</select>
|
|
{fieldErrors.manufacturer_id && <p className="text-xs text-red-600">{fieldErrors.manufacturer_id}</p>}
|
|
</div>
|
|
<div className={fieldClass()}>
|
|
<Label>Gerät</Label>
|
|
<select className="h-9 rounded-lg border px-2 text-sm" value={payload.device_id ?? ""} onChange={(event) => setPayload({ ...payload, device_id: event.target.value ? Number(event.target.value) : null })} disabled={!payload.manufacturer_id || filteredDevices.length === 0}>
|
|
<option value="">Gerät auswählen</option>
|
|
{filteredDevices.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
|
|
</select>
|
|
{payload.manufacturer_id && filteredDevices.length === 0 && (
|
|
<p className="text-xs text-amber-700">Für diesen Hersteller existiert noch kein Gerät.</p>
|
|
)}
|
|
{fieldErrors.device_id && <p className="text-xs text-red-600">{fieldErrors.device_id}</p>}
|
|
</div>
|
|
<div className={fieldClass()}><Label>Titel</Label><Input value={payload.title} onChange={(event) => setPayload({ ...payload, title: event.target.value })} />{fieldErrors.title && <p className="text-xs text-red-600">{fieldErrors.title}</p>}</div>
|
|
<div className={fieldClass()}><Label>Typ</Label><select className="h-9 rounded-lg border px-2 text-sm" value={payload.document_type} onChange={(event) => setPayload({ ...payload, document_type: event.target.value as DocumentType })}>{documentTypes.map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select>{fieldErrors.document_type && <p className="text-xs text-red-600">{fieldErrors.document_type}</p>}</div>
|
|
<div className={fieldClass()}><Label>Sprache</Label><Input value={payload.language} onChange={(event) => setPayload({ ...payload, language: event.target.value })} /></div>
|
|
<div className={fieldClass()}><Label>Paperless-ID</Label><Input value={payload.paperless_document_id} onChange={(event) => setPayload({ ...payload, paperless_document_id: event.target.value })} /></div>
|
|
<div className={fieldClass()}><Label>Externe URL</Label><Input value={payload.external_url ?? ""} onChange={(event) => setPayload({ ...payload, external_url: event.target.value || null })} /></div>
|
|
{!document && <div className={fieldClass()}><Label>Datei</Label><input type="file" className="h-9 rounded-lg border px-2 py-1 text-sm" onChange={(event) => setFile(event.target.files?.[0] ?? null)} />{fieldErrors.file && <p className="text-xs text-red-600">{fieldErrors.file}</p>}</div>}
|
|
<div className={fieldClass()}><Label>Tags</Label><Input value={tags} onChange={(event) => setTags(event.target.value)} placeholder="cb-funk, schaltplan" /></div>
|
|
<div className="grid gap-2 sm:col-span-2"><Label>Beschreibung</Label><textarea className="min-h-24 rounded-lg border border-input p-2 text-sm" value={payload.description} onChange={(event) => setPayload({ ...payload, description: event.target.value })} /></div>
|
|
{selectedManufacturer && filteredDevices.length === 0 && (
|
|
<p className="text-sm text-amber-700 sm:col-span-2">
|
|
Für {selectedManufacturer.name} existiert noch kein Gerät. Dokumente wie Schaltpläne oder Service Manuals müssen einem Gerät zugeordnet werden.
|
|
</p>
|
|
)}
|
|
{error && <p className="text-sm text-red-600 sm:col-span-2">{error}</p>}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={pending}>Abbrechen</Button>
|
|
<Button onClick={submit} disabled={pending}>Speichern</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export function KnowledgeNoteFormDialog({
|
|
open,
|
|
note,
|
|
manufacturers,
|
|
devices,
|
|
pending,
|
|
error,
|
|
onOpenChange,
|
|
onSubmit,
|
|
}: {
|
|
open: boolean;
|
|
note: KnowledgeNote | null;
|
|
manufacturers: KnowledgeManufacturer[];
|
|
devices: KnowledgeDevice[];
|
|
pending: boolean;
|
|
error: string;
|
|
onOpenChange: (open: boolean) => void;
|
|
onSubmit: (payload: NotePayload) => void;
|
|
}) {
|
|
const [payload, setPayload] = useState<NotePayload>({ manufacturer_id: null, device_id: null, title: "", content: "", note_type: "general", severity: "", tags: [] });
|
|
const [tags, setTags] = useState("");
|
|
|
|
useEffect(() => {
|
|
queueMicrotask(() => {
|
|
setPayload(note ? {
|
|
manufacturer_id: note.manufacturer_id,
|
|
device_id: note.device_id,
|
|
title: note.title,
|
|
content: note.content,
|
|
note_type: note.note_type,
|
|
severity: note.severity,
|
|
tags: note.tags,
|
|
} : { manufacturer_id: null, device_id: null, title: "", content: "", note_type: "general", severity: "", tags: [] });
|
|
setTags(note ? tagsToText(note.tags) : "");
|
|
});
|
|
}, [note, open]);
|
|
|
|
const filteredDevices = payload.manufacturer_id ? devices.filter((device) => device.manufacturer_id === payload.manufacturer_id) : devices;
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-3xl">
|
|
<DialogHeader><DialogTitle>{note ? "Notiz bearbeiten" : "Notiz erstellen"}</DialogTitle></DialogHeader>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className={fieldClass()}><Label>Hersteller</Label><select className="h-9 rounded-lg border px-2 text-sm" value={payload.manufacturer_id ?? ""} onChange={(event) => setPayload({ ...payload, manufacturer_id: event.target.value ? Number(event.target.value) : null, device_id: null })}><option value="">Kein Hersteller</option>{manufacturers.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}</select></div>
|
|
<div className={fieldClass()}><Label>Gerät</Label><select className="h-9 rounded-lg border px-2 text-sm" value={payload.device_id ?? ""} onChange={(event) => setPayload({ ...payload, device_id: event.target.value ? Number(event.target.value) : null })}><option value="">Kein Gerät</option>{filteredDevices.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}</select></div>
|
|
<div className={fieldClass()}><Label>Titel</Label><Input value={payload.title} onChange={(event) => setPayload({ ...payload, title: event.target.value })} /></div>
|
|
<div className={fieldClass()}><Label>Typ</Label><select className="h-9 rounded-lg border px-2 text-sm" value={payload.note_type} onChange={(event) => setPayload({ ...payload, note_type: event.target.value as NoteType })}>{noteTypes.map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select></div>
|
|
<div className={fieldClass()}><Label>Schweregrad</Label><select className="h-9 rounded-lg border px-2 text-sm" value={payload.severity} onChange={(event) => setPayload({ ...payload, severity: event.target.value as NotePayload["severity"] })}><option value="">Keiner</option><option value="low">Niedrig</option><option value="medium">Mittel</option><option value="high">Hoch</option><option value="critical">Kritisch</option></select></div>
|
|
<div className={fieldClass()}><Label>Tags</Label><Input value={tags} onChange={(event) => setTags(event.target.value)} /></div>
|
|
<div className="grid gap-2 sm:col-span-2"><Label>Inhalt</Label><textarea className="min-h-40 rounded-lg border border-input p-2 text-sm" value={payload.content} onChange={(event) => setPayload({ ...payload, content: event.target.value })} /></div>
|
|
{error && <p className="text-sm text-red-600 sm:col-span-2">{error}</p>}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={pending}>Abbrechen</Button>
|
|
<Button onClick={() => onSubmit({ ...payload, tags: textToTags(tags) })} disabled={pending}>Speichern</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|