Initial curated Unraid-AppOps-Gateway source from 3bd6f6fee310125bfbb4d4650389a817f498724d

src/components/AppMetadataEditor.tsx

@@ -0,0 +1,96 @@
+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>
+  );
+};