97 lines
4.1 KiB
TypeScript
97 lines
4.1 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Save, Settings2, X } from "lucide-react";
|
|
|
|
import { appopsClient } from "@/api/appopsClient";
|
|
import type { App } from "@/types/appops";
|
|
import { showError, showSuccess } from "@/utils/toast";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { formatOperatorError } from "@/lib/operatorError";
|
|
|
|
const criticalities: App["criticality"][] = ["low", "medium", "high", "critical"];
|
|
|
|
interface AppMetadataEditorProps {
|
|
app: App;
|
|
onSaved: (app: App) => void;
|
|
}
|
|
|
|
export const AppMetadataEditor = ({ app, onSaved }: AppMetadataEditorProps) => {
|
|
const [editing, setEditing] = useState(false);
|
|
const [busy, setBusy] = useState(false);
|
|
const [name, setName] = useState(app.name);
|
|
const [category, setCategory] = useState(app.category);
|
|
const [criticality, setCriticality] = useState<App["criticality"]>(app.criticality);
|
|
|
|
useEffect(() => {
|
|
if (editing) return;
|
|
setName(app.name);
|
|
setCategory(app.category);
|
|
setCriticality(app.criticality);
|
|
}, [app, editing]);
|
|
|
|
const save = async () => {
|
|
if (!name.trim() || !category.trim() || busy) return;
|
|
setBusy(true);
|
|
try {
|
|
const result = await appopsClient.updateAppMetadata(app.id, {
|
|
name: name.trim(),
|
|
category: category.trim(),
|
|
criticality,
|
|
});
|
|
if (!result.success || !result.app) {
|
|
showError(result.message || "App-metadata kon niet worden opgeslagen.");
|
|
return;
|
|
}
|
|
onSaved(result.app);
|
|
setEditing(false);
|
|
showSuccess("App-metadata opgeslagen.");
|
|
} catch (error) {
|
|
showError(formatOperatorError(error, "App-metadata kon niet worden opgeslagen."));
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
if (!editing) {
|
|
return (
|
|
<Button type="button" size="sm" variant="outline" onClick={() => setEditing(true)} className="w-full border-slate-800 bg-slate-950 text-slate-300">
|
|
<Settings2 className="mr-2 h-4 w-4" /> Metadata wijzigen
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4 border-t border-slate-800 pt-4">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="app-metadata-name" className="text-[10px] font-bold uppercase text-slate-500">Naam</Label>
|
|
<Input id="app-metadata-name" value={name} onChange={event => setName(event.target.value)} maxLength={80} className="border-slate-800 bg-slate-950" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="app-metadata-category" className="text-[10px] font-bold uppercase text-slate-500">Categorie</Label>
|
|
<Input id="app-metadata-category" value={category} onChange={event => setCategory(event.target.value)} maxLength={40} placeholder="Bijv. Productivity, Monitoring of Dev" className="border-slate-800 bg-slate-950" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-[10px] font-bold uppercase text-slate-500">Criticality</Label>
|
|
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
|
{criticalities.map(level => (
|
|
<Button key={level} type="button" size="sm" variant="outline" onClick={() => setCriticality(level)} className={cn("border-slate-800 bg-slate-950 capitalize", criticality === level && "border-blue-500/50 bg-blue-500/10 text-blue-200")}>
|
|
{level}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<p className="text-[10px] leading-4 text-slate-500">Wijzigt alleen de AppOps-catalogus. Containers, connectorconfig, protection en voice blijven ongewijzigd.</p>
|
|
<div className="flex gap-2">
|
|
<Button type="button" size="sm" onClick={save} disabled={busy || !name.trim() || !category.trim()} className="flex-1">
|
|
<Save className="mr-2 h-4 w-4" /> {busy ? "Opslaan..." : "Opslaan"}
|
|
</Button>
|
|
<Button type="button" size="sm" variant="outline" onClick={() => setEditing(false)} disabled={busy} className="border-slate-800 bg-slate-950">
|
|
<X className="mr-2 h-4 w-4" /> Annuleren
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|