409 lines
15 KiB
TypeScript
409 lines
15 KiB
TypeScript
// app/(app)/devices/DeviceEditModal.tsx
|
|
'use client';
|
|
|
|
import { useCallback, useEffect, useState, ChangeEvent, Dispatch, SetStateAction } from 'react';
|
|
import Modal from '@/components/ui/Modal';
|
|
import { PencilIcon } from '@heroicons/react/24/outline';
|
|
import DeviceHistorySidebar from './DeviceHistorySidebar';
|
|
import TagMultiCombobox, { TagOption } from '@/components/ui/TagMultiCombobox';
|
|
import type { DeviceDetail } from './page'; // Typ aus page.tsx (siehe unten)
|
|
|
|
type DeviceEditModalProps = {
|
|
open: boolean;
|
|
inventoryNumber: string | null;
|
|
onClose: () => void;
|
|
onSaved: (device: DeviceDetail) => void;
|
|
allTags: TagOption[];
|
|
setAllTags: Dispatch<SetStateAction<TagOption[]>>;
|
|
};
|
|
|
|
export default function DeviceEditModal({
|
|
open,
|
|
inventoryNumber,
|
|
onClose,
|
|
onSaved,
|
|
allTags,
|
|
setAllTags,
|
|
}: DeviceEditModalProps) {
|
|
const [editDevice, setEditDevice] = useState<DeviceDetail | null>(null);
|
|
const [editLoading, setEditLoading] = useState(false);
|
|
const [editError, setEditError] = useState<string | null>(null);
|
|
const [saveLoading, setSaveLoading] = useState(false);
|
|
|
|
// Gerät laden, wenn Modal geöffnet wird
|
|
useEffect(() => {
|
|
if (!open || !inventoryNumber) {
|
|
setEditDevice(null);
|
|
setEditError(null);
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
|
|
async function loadDevice() {
|
|
setEditLoading(true);
|
|
setEditError(null);
|
|
setEditDevice(null);
|
|
|
|
try {
|
|
const res = await fetch(
|
|
`/api/devices/${encodeURIComponent(inventoryNumber)}`,
|
|
{
|
|
method: 'GET',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
cache: 'no-store',
|
|
},
|
|
);
|
|
|
|
if (!res.ok) {
|
|
if (res.status === 404) {
|
|
throw new Error('Gerät wurde nicht gefunden.');
|
|
}
|
|
throw new Error('Beim Laden der Gerätedaten ist ein Fehler aufgetreten.');
|
|
}
|
|
|
|
const data = (await res.json()) as DeviceDetail;
|
|
if (!cancelled) {
|
|
setEditDevice(data);
|
|
}
|
|
} catch (err: any) {
|
|
console.error('Error loading device', err);
|
|
if (!cancelled) {
|
|
setEditError(
|
|
err instanceof Error ? err.message : 'Netzwerkfehler beim Laden der Gerätedaten.',
|
|
);
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setEditLoading(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
loadDevice();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [open, inventoryNumber]);
|
|
|
|
const handleFieldChange = (
|
|
field: keyof DeviceDetail,
|
|
e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
|
) => {
|
|
const value = e.target.value;
|
|
setEditDevice((prev) =>
|
|
prev ? ({ ...prev, [field]: value } as DeviceDetail) : prev,
|
|
);
|
|
};
|
|
|
|
const handleSave = useCallback(async () => {
|
|
if (!editDevice) return;
|
|
|
|
setSaveLoading(true);
|
|
setEditError(null);
|
|
|
|
try {
|
|
const res = await fetch(
|
|
`/api/devices/${encodeURIComponent(editDevice.inventoryNumber)}`,
|
|
{
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
name: editDevice.name,
|
|
manufacturer: editDevice.manufacturer,
|
|
model: editDevice.model,
|
|
serialNumber: editDevice.serialNumber || null,
|
|
productNumber: editDevice.productNumber || null,
|
|
comment: editDevice.comment || null,
|
|
group: editDevice.group || null,
|
|
location: editDevice.location || null,
|
|
ipv4Address: editDevice.ipv4Address || null,
|
|
ipv6Address: editDevice.ipv6Address || null,
|
|
macAddress: editDevice.macAddress || null,
|
|
username: editDevice.username || null,
|
|
passwordHash: editDevice.passwordHash || null,
|
|
tags: editDevice.tags ?? [],
|
|
}),
|
|
},
|
|
);
|
|
|
|
if (!res.ok) {
|
|
if (res.status === 404) {
|
|
throw new Error('Gerät wurde nicht gefunden.');
|
|
}
|
|
throw new Error('Speichern der Änderungen ist fehlgeschlagen.');
|
|
}
|
|
|
|
const updated = (await res.json()) as DeviceDetail;
|
|
setEditDevice(updated);
|
|
onSaved(updated); // Tabelle im Parent aktualisieren
|
|
} catch (err: any) {
|
|
console.error('Error saving device', err);
|
|
setEditError(
|
|
err instanceof Error ? err.message : 'Netzwerkfehler beim Speichern der Gerätedaten.',
|
|
);
|
|
} finally {
|
|
setSaveLoading(false);
|
|
}
|
|
}, [editDevice, onSaved]);
|
|
|
|
const handleClose = () => {
|
|
if (saveLoading) return;
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
onClose={handleClose}
|
|
title={
|
|
editDevice
|
|
? `Gerät bearbeiten: ${editDevice.name}`
|
|
: 'Gerätedaten werden geladen …'
|
|
}
|
|
icon={<PencilIcon className="size-6" />}
|
|
tone="info"
|
|
variant="centered"
|
|
size="lg"
|
|
primaryAction={{
|
|
label: saveLoading ? 'Speichern …' : 'Speichern',
|
|
onClick: handleSave,
|
|
autoFocus: true,
|
|
}}
|
|
secondaryAction={{
|
|
label: 'Abbrechen',
|
|
variant: 'secondary',
|
|
onClick: handleClose,
|
|
}}
|
|
sidebar={
|
|
editDevice ? (
|
|
<DeviceHistorySidebar
|
|
inventoryNumber={editDevice.inventoryNumber}
|
|
asSidebar
|
|
/>
|
|
) : undefined
|
|
}
|
|
>
|
|
{editLoading && (
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
Gerätedaten werden geladen …
|
|
</p>
|
|
)}
|
|
|
|
{editError && (
|
|
<p className="text-sm text-red-600 dark:text-red-400">{editError}</p>
|
|
)}
|
|
|
|
{!editLoading && !editError && editDevice && (
|
|
<div className="mt-3 grid grid-cols-1 gap-4 text-sm sm:grid-cols-2">
|
|
{/* Inventarnummer */}
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
Inventar-Nr.
|
|
</p>
|
|
<input
|
|
type="text"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-400 shadow-xs ring-1 ring-inset ring-gray-800"
|
|
value={editDevice.inventoryNumber}
|
|
readOnly
|
|
/>
|
|
</div>
|
|
|
|
{/* Bezeichnung */}
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
Bezeichnung
|
|
</p>
|
|
<input
|
|
type="text"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.name}
|
|
onChange={(e) => handleFieldChange('name', e)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Hersteller / Modell */}
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
Hersteller
|
|
</p>
|
|
<input
|
|
type="text"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.manufacturer}
|
|
onChange={(e) => handleFieldChange('manufacturer', e)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
Modell
|
|
</p>
|
|
<input
|
|
type="text"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.model}
|
|
onChange={(e) => handleFieldChange('model', e)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Seriennummer / Produktnummer */}
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
Seriennummer
|
|
</p>
|
|
<input
|
|
type="text"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.serialNumber ?? ''}
|
|
onChange={(e) => handleFieldChange('serialNumber', e)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
Produktnummer
|
|
</p>
|
|
<input
|
|
type="text"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.productNumber ?? ''}
|
|
onChange={(e) => handleFieldChange('productNumber', e)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Standort / Gruppe */}
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
Standort / Raum
|
|
</p>
|
|
<input
|
|
type="text"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.location ?? ''}
|
|
onChange={(e) => handleFieldChange('location', e)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
Gruppe
|
|
</p>
|
|
<input
|
|
type="text"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.group ?? ''}
|
|
onChange={(e) => handleFieldChange('group', e)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
<div className="sm:col-span-2">
|
|
<TagMultiCombobox
|
|
label="Tags"
|
|
availableTags={allTags}
|
|
value={(editDevice.tags ?? []).map((name) => ({ name }))}
|
|
onChange={(next) => {
|
|
const names = next.map((t) => t.name);
|
|
|
|
// in editDevice speichern
|
|
setEditDevice((prev) =>
|
|
prev ? ({ ...prev, tags: names } as DeviceDetail) : prev,
|
|
);
|
|
|
|
// allTags im Parent erweitern
|
|
setAllTags((prev) => {
|
|
const map = new Map(prev.map((t) => [t.name.toLowerCase(), t]));
|
|
for (const t of next) {
|
|
const key = t.name.toLowerCase();
|
|
if (!map.has(key)) {
|
|
map.set(key, t);
|
|
}
|
|
}
|
|
return Array.from(map.values());
|
|
});
|
|
}}
|
|
placeholder="z.B. Drucker, Serverraum, kritisch"
|
|
/>
|
|
</div>
|
|
|
|
{/* Netzwerkdaten */}
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
IPv4-Adresse
|
|
</p>
|
|
<input
|
|
type="text"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.ipv4Address ?? ''}
|
|
onChange={(e) => handleFieldChange('ipv4Address', e)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
IPv6-Adresse
|
|
</p>
|
|
<input
|
|
type="text"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.ipv6Address ?? ''}
|
|
onChange={(e) => handleFieldChange('ipv6Address', e)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="sm:col-span-2">
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
MAC-Adresse
|
|
</p>
|
|
<input
|
|
type="text"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.macAddress ?? ''}
|
|
onChange={(e) => handleFieldChange('macAddress', e)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
Benutzername
|
|
</p>
|
|
<input
|
|
type="text"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.username ?? ''}
|
|
onChange={(e) => handleFieldChange('username', e)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
Passwort
|
|
</p>
|
|
<input
|
|
type="password"
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.passwordHash ?? ''}
|
|
onChange={(e) => handleFieldChange('passwordHash', e)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Kommentar */}
|
|
<div className="sm:col-span-2">
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
|
|
Kommentar
|
|
</p>
|
|
<textarea
|
|
rows={3}
|
|
className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
|
|
value={editDevice.comment ?? ''}
|
|
onChange={(e) => handleFieldChange('comment', e)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|