feat: Labels-Feature vollständig entfernen (PROJ-9)
Backend: - internal/labelstore/ gelöscht (Store, Schema, CRUD) - internal/api/label_handlers.go gelöscht (alle Label-Routen) - internal/api/server.go: labels-Feld + SetLabels() entfernt - internal/api/search_handlers.go: label_id-Filter + Enrichment entfernt - internal/index/index.go: LabelID aus SearchRequest entfernt - internal/imapserver/server.go: labels-Feld + labelbasierte Mailboxen entfernt - cmd/archivmail/main.go: labelstore-Init + SetLabels() entfernt - cmd/archivmail/version.go: labelstore-Modul entfernt, index-Kommentar korrigiert Frontend: - LabelList.tsx, LabelPicker.tsx, LabelsTab.tsx gelöscht - src/lib/api/system.ts: MailLabel/LabelRule-Typen + alle Label-Funktionen entfernt - src/lib/api/index.ts: Label-Exports entfernt - src/app/search/page.tsx: LabelList + selectedLabelId State entfernt - src/app/mail/[id]/page.tsx: LabelPicker + Labels-State entfernt - src/app/admin/page.tsx: LabelsTab + alle Label-Handler/State entfernt Docs: - features/PROJ-9: Status auf Removed gesetzt - features/INDEX.md: PROJ-9 auf Removed gesetzt Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
sysops
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
4d1bdb6e8b
commit
fdb25cb16a
@@ -1,308 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
getLabels,
|
||||
createLabel,
|
||||
updateLabel,
|
||||
deleteLabel,
|
||||
type MailLabel,
|
||||
} from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
const LABEL_COLORS = [
|
||||
"#ef4444",
|
||||
"#f97316",
|
||||
"#eab308",
|
||||
"#22c55e",
|
||||
"#06b6d4",
|
||||
"#6366f1",
|
||||
"#a855f7",
|
||||
"#ec4899",
|
||||
];
|
||||
|
||||
interface LabelListProps {
|
||||
selectedLabelId?: number | null;
|
||||
onLabelSelect: (id: number | null) => void;
|
||||
}
|
||||
|
||||
export function LabelList({ selectedLabelId, onLabelSelect }: LabelListProps) {
|
||||
const [labels, setLabels] = useState<MailLabel[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
// Create form
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [newName, setNewName] = useState("");
|
||||
const [newColor, setNewColor] = useState(LABEL_COLORS[0]);
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
// Edit state
|
||||
const [editId, setEditId] = useState<number | null>(null);
|
||||
const [editName, setEditName] = useState("");
|
||||
const [editColor, setEditColor] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Hover state
|
||||
const [hoveredId, setHoveredId] = useState<number | null>(null);
|
||||
|
||||
const loadLabels = useCallback(async () => {
|
||||
try {
|
||||
const data = await getLabels();
|
||||
setLabels(data || []);
|
||||
setError("");
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Fehler beim Laden");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadLabels();
|
||||
}, [loadLabels]);
|
||||
|
||||
async function handleCreate(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!newName.trim()) return;
|
||||
setCreating(true);
|
||||
try {
|
||||
await createLabel(newName.trim(), newColor);
|
||||
setNewName("");
|
||||
setNewColor(LABEL_COLORS[0]);
|
||||
setShowCreate(false);
|
||||
await loadLabels();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Fehler beim Erstellen");
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUpdate(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!editId || !editName.trim()) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await updateLabel(editId, editName.trim(), editColor);
|
||||
setEditId(null);
|
||||
await loadLabels();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Fehler beim Speichern");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(label: MailLabel) {
|
||||
if (!window.confirm(`Label "${label.name}" wirklich loeschen?`)) return;
|
||||
try {
|
||||
await deleteLabel(label.id);
|
||||
if (selectedLabelId === label.id) onLabelSelect(null);
|
||||
await loadLabels();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Fehler beim Loeschen");
|
||||
}
|
||||
}
|
||||
|
||||
function startEdit(label: MailLabel) {
|
||||
setEditId(label.id);
|
||||
setEditName(label.name);
|
||||
setEditColor(label.color);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-2 p-2" aria-label="Labels laden">
|
||||
<Skeleton className="h-5 w-24" />
|
||||
<Skeleton className="h-6 w-full" />
|
||||
<Skeleton className="h-6 w-full" />
|
||||
<Skeleton className="h-6 w-full" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className="space-y-2" aria-label="Label-Filter">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">Labels</h3>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-destructive">{error}</p>
|
||||
)}
|
||||
|
||||
{/* Label list */}
|
||||
<ul className="space-y-0.5">
|
||||
{labels.map((label) => (
|
||||
<li
|
||||
key={label.id}
|
||||
className={`group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm cursor-pointer transition-colors ${
|
||||
selectedLabelId === label.id
|
||||
? "bg-muted font-medium"
|
||||
: "hover:bg-muted/50"
|
||||
}`}
|
||||
onMouseEnter={() => setHoveredId(label.id)}
|
||||
onMouseLeave={() => setHoveredId(null)}
|
||||
onClick={() =>
|
||||
onLabelSelect(selectedLabelId === label.id ? null : label.id)
|
||||
}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onLabelSelect(selectedLabelId === label.id ? null : label.id);
|
||||
}
|
||||
}}
|
||||
aria-pressed={selectedLabelId === label.id}
|
||||
aria-label={`Label ${label.name}${label.is_global ? " (global)" : ""}`}
|
||||
>
|
||||
<span
|
||||
className="inline-block h-3 w-3 rounded-full shrink-0"
|
||||
style={{ backgroundColor: label.color }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="truncate flex-1">{label.name}</span>
|
||||
{label.is_global && (
|
||||
<span className="text-xs text-muted-foreground" title="Globales Label" aria-label="Globales Label">
|
||||
<svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
{!label.is_global && hoveredId === label.id && (
|
||||
<span className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
|
||||
<button
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
title="Bearbeiten"
|
||||
aria-label={`Label ${label.name} bearbeiten`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
startEdit(label);
|
||||
}}
|
||||
>
|
||||
<svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
title="Loeschen"
|
||||
aria-label={`Label ${label.name} loeschen`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDelete(label);
|
||||
}}
|
||||
>
|
||||
<svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{labels.length === 0 && !error && (
|
||||
<p className="text-xs text-muted-foreground px-2">Keine Labels vorhanden.</p>
|
||||
)}
|
||||
|
||||
{/* Edit inline form */}
|
||||
{editId !== null && (
|
||||
<form onSubmit={handleUpdate} className="space-y-2 rounded-md border p-2">
|
||||
<Input
|
||||
value={editName}
|
||||
onChange={(e) => setEditName(e.target.value)}
|
||||
placeholder="Label-Name"
|
||||
className="h-7 text-sm"
|
||||
autoFocus
|
||||
aria-label="Label-Name bearbeiten"
|
||||
/>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{LABEL_COLORS.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
className={`h-5 w-5 rounded-full border-2 transition-transform ${
|
||||
editColor === c ? "border-foreground scale-110" : "border-transparent"
|
||||
}`}
|
||||
style={{ backgroundColor: c }}
|
||||
onClick={() => setEditColor(c)}
|
||||
aria-label={`Farbe ${c}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<Button type="submit" size="sm" className="h-7 text-xs" disabled={saving}>
|
||||
{saving ? "..." : "Speichern"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setEditId(null)}
|
||||
>
|
||||
Abbrechen
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Create form */}
|
||||
{showCreate ? (
|
||||
<form onSubmit={handleCreate} className="space-y-2 rounded-md border p-2">
|
||||
<Input
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
placeholder="Neues Label"
|
||||
className="h-7 text-sm"
|
||||
autoFocus
|
||||
aria-label="Neuer Label-Name"
|
||||
/>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{LABEL_COLORS.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
className={`h-5 w-5 rounded-full border-2 transition-transform ${
|
||||
newColor === c ? "border-foreground scale-110" : "border-transparent"
|
||||
}`}
|
||||
style={{ backgroundColor: c }}
|
||||
onClick={() => setNewColor(c)}
|
||||
aria-label={`Farbe ${c}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<Button type="submit" size="sm" className="h-7 text-xs" disabled={creating || !newName.trim()}>
|
||||
{creating ? "..." : "Erstellen"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setShowCreate(false)}
|
||||
>
|
||||
Abbrechen
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-xs text-muted-foreground h-7"
|
||||
onClick={() => setShowCreate(true)}
|
||||
>
|
||||
+ Neues Label
|
||||
</Button>
|
||||
)}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -1,141 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { assignLabel, removeLabelFromEmail, type MailLabel } from "@/lib/api";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface LabelPickerProps {
|
||||
emailId: string;
|
||||
assignedLabelIds: number[];
|
||||
allLabels: MailLabel[];
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
export function LabelPicker({
|
||||
emailId,
|
||||
assignedLabelIds,
|
||||
allLabels,
|
||||
onUpdate,
|
||||
}: LabelPickerProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [actionLoading, setActionLoading] = useState<number | null>(null);
|
||||
|
||||
const assignedSet = new Set(assignedLabelIds);
|
||||
|
||||
async function toggleLabel(label: MailLabel) {
|
||||
setActionLoading(label.id);
|
||||
try {
|
||||
if (assignedSet.has(label.id)) {
|
||||
await removeLabelFromEmail(emailId, label.id);
|
||||
} else {
|
||||
await assignLabel(emailId, label.id);
|
||||
}
|
||||
onUpdate();
|
||||
} catch (e) {
|
||||
console.error("Label toggle failed:", e);
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
}
|
||||
|
||||
const assignedLabels = allLabels.filter((l) => assignedSet.has(l.id));
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-2" aria-label="E-Mail-Labels">
|
||||
{assignedLabels.map((label) => (
|
||||
<Badge
|
||||
key={label.id}
|
||||
variant="secondary"
|
||||
className="gap-1.5 text-xs font-normal"
|
||||
style={{
|
||||
borderColor: label.color,
|
||||
borderWidth: "1px",
|
||||
borderStyle: "solid",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="inline-block h-2 w-2 rounded-full shrink-0"
|
||||
style={{ backgroundColor: label.color }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{label.name}
|
||||
</Badge>
|
||||
))}
|
||||
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-6 px-2 text-xs text-muted-foreground"
|
||||
aria-label="Label hinzufuegen oder entfernen"
|
||||
>
|
||||
+ Label
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-56 p-2" align="start">
|
||||
<p className="mb-2 text-xs font-medium text-muted-foreground">
|
||||
Labels zuweisen
|
||||
</p>
|
||||
{allLabels.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground py-2 text-center">
|
||||
Keine Labels vorhanden.
|
||||
</p>
|
||||
)}
|
||||
<ul className="space-y-0.5 max-h-60 overflow-y-auto">
|
||||
{allLabels.map((label) => {
|
||||
const isAssigned = assignedSet.has(label.id);
|
||||
const isLoading = actionLoading === label.id;
|
||||
return (
|
||||
<li key={label.id}>
|
||||
<button
|
||||
className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted/50 transition-colors disabled:opacity-50"
|
||||
onClick={() => toggleLabel(label)}
|
||||
disabled={isLoading}
|
||||
aria-pressed={isAssigned}
|
||||
aria-label={`Label ${label.name} ${isAssigned ? "entfernen" : "zuweisen"}`}
|
||||
>
|
||||
<span
|
||||
className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
|
||||
isAssigned
|
||||
? "bg-primary border-primary text-primary-foreground"
|
||||
: "border-muted-foreground/30"
|
||||
}`}
|
||||
>
|
||||
{isAssigned && (
|
||||
<svg
|
||||
className="h-3 w-3"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
className="inline-block h-2.5 w-2.5 rounded-full shrink-0"
|
||||
style={{ backgroundColor: label.color }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="truncate">{label.name}</span>
|
||||
{isLoading && (
|
||||
<span className="ml-auto text-xs text-muted-foreground">...</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,282 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { type MailLabel, type LabelRule } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
interface LabelsTabProps {
|
||||
adminLabels: MailLabel[];
|
||||
adminLabelsLoading: boolean;
|
||||
adminLabelsError: string;
|
||||
newLabelName: string;
|
||||
setNewLabelName: (v: string) => void;
|
||||
newLabelColor: string;
|
||||
setNewLabelColor: (v: string) => void;
|
||||
labelCreating: boolean;
|
||||
labelRules: LabelRule[];
|
||||
labelRulesLoading: boolean;
|
||||
newRuleField: string;
|
||||
setNewRuleField: (v: string) => void;
|
||||
newRuleValue: string;
|
||||
setNewRuleValue: (v: string) => void;
|
||||
newRuleLabelId: number | null;
|
||||
setNewRuleLabelId: (v: number | null) => void;
|
||||
ruleCreating: boolean;
|
||||
onCreateLabel: (e: React.FormEvent) => void;
|
||||
onDeleteLabel: (id: number, name: string) => void;
|
||||
onCreateRule: (e: React.FormEvent) => void;
|
||||
onDeleteRule: (id: number) => void;
|
||||
}
|
||||
|
||||
export function LabelsTab({
|
||||
adminLabels,
|
||||
adminLabelsLoading,
|
||||
adminLabelsError,
|
||||
newLabelName,
|
||||
setNewLabelName,
|
||||
newLabelColor,
|
||||
setNewLabelColor,
|
||||
labelCreating,
|
||||
labelRules,
|
||||
labelRulesLoading,
|
||||
newRuleField,
|
||||
setNewRuleField,
|
||||
newRuleValue,
|
||||
setNewRuleValue,
|
||||
newRuleLabelId,
|
||||
setNewRuleLabelId,
|
||||
ruleCreating,
|
||||
onCreateLabel,
|
||||
onDeleteLabel,
|
||||
onCreateRule,
|
||||
onDeleteRule,
|
||||
}: LabelsTabProps) {
|
||||
return (
|
||||
<div className="mt-4 space-y-6">
|
||||
{adminLabelsError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{adminLabelsError}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Globale Labels */}
|
||||
<Card>
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<h3 className="text-sm font-semibold">Globale Labels</h3>
|
||||
<form onSubmit={onCreateLabel} className="flex items-end gap-3">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="label-name" className="text-xs">Name</Label>
|
||||
<Input
|
||||
id="label-name"
|
||||
value={newLabelName}
|
||||
onChange={(e) => setNewLabelName(e.target.value)}
|
||||
placeholder="Label-Name"
|
||||
className="h-8 w-48"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">Farbe</Label>
|
||||
<div className="flex gap-1.5">
|
||||
{["#ef4444","#f97316","#eab308","#22c55e","#06b6d4","#6366f1","#a855f7","#ec4899"].map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
className={`h-6 w-6 rounded-full border-2 transition-transform ${
|
||||
newLabelColor === c ? "border-foreground scale-110" : "border-transparent"
|
||||
}`}
|
||||
style={{ backgroundColor: c }}
|
||||
onClick={() => setNewLabelColor(c)}
|
||||
aria-label={`Farbe ${c}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" size="sm" disabled={labelCreating || !newLabelName.trim()}>
|
||||
{labelCreating ? "..." : "Anlegen"}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{adminLabelsLoading ? (
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-full" />
|
||||
<Skeleton className="h-8 w-full" />
|
||||
</div>
|
||||
) : adminLabels.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Keine globalen Labels vorhanden.</p>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead className="w-24">Farbe</TableHead>
|
||||
<TableHead className="w-24">Aktionen</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{adminLabels.map((label) => (
|
||||
<TableRow key={label.id}>
|
||||
<TableCell className="font-medium">{label.name}</TableCell>
|
||||
<TableCell>
|
||||
<span
|
||||
className="inline-block h-4 w-4 rounded-full"
|
||||
style={{ backgroundColor: label.color }}
|
||||
aria-label={`Farbe ${label.color}`}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive h-7"
|
||||
onClick={() => onDeleteLabel(label.id, label.name)}
|
||||
>
|
||||
Loeschen
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Auto-Regeln */}
|
||||
<Card>
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<h3 className="text-sm font-semibold">Auto-Regeln</h3>
|
||||
<form onSubmit={onCreateRule} className="flex items-end gap-3 flex-wrap">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="rule-field" className="text-xs">Bedingung</Label>
|
||||
<Select value={newRuleField} onValueChange={setNewRuleField}>
|
||||
<SelectTrigger id="rule-field" className="h-8 w-44 text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="from_domain">Absender-Domain</SelectItem>
|
||||
<SelectItem value="source">Import-Quelle</SelectItem>
|
||||
<SelectItem value="subject_contains">Betreff enthaelt</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="rule-value" className="text-xs">Wert</Label>
|
||||
<Input
|
||||
id="rule-value"
|
||||
value={newRuleValue}
|
||||
onChange={(e) => setNewRuleValue(e.target.value)}
|
||||
placeholder="z.B. example.com"
|
||||
className="h-8 w-48"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="rule-label" className="text-xs">Label</Label>
|
||||
<Select
|
||||
value={newRuleLabelId !== null ? String(newRuleLabelId) : ""}
|
||||
onValueChange={(v) => setNewRuleLabelId(Number(v))}
|
||||
>
|
||||
<SelectTrigger id="rule-label" className="h-8 w-44 text-xs">
|
||||
<SelectValue placeholder="Label waehlen..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{adminLabels.map((l) => (
|
||||
<SelectItem key={l.id} value={String(l.id)}>
|
||||
<span className="flex items-center gap-2">
|
||||
<span
|
||||
className="inline-block h-2.5 w-2.5 rounded-full"
|
||||
style={{ backgroundColor: l.color }}
|
||||
/>
|
||||
{l.name}
|
||||
</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Button type="submit" size="sm" disabled={ruleCreating || !newRuleValue.trim() || !newRuleLabelId}>
|
||||
{ruleCreating ? "..." : "Regel anlegen"}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{labelRulesLoading ? (
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-full" />
|
||||
<Skeleton className="h-8 w-full" />
|
||||
</div>
|
||||
) : labelRules.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Keine Regeln vorhanden.</p>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Bedingung</TableHead>
|
||||
<TableHead>Wert</TableHead>
|
||||
<TableHead>Label</TableHead>
|
||||
<TableHead className="w-24">Aktionen</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{labelRules.map((rule) => {
|
||||
const condLabels: Record<string, string> = {
|
||||
from_domain: "Absender-Domain",
|
||||
source: "Import-Quelle",
|
||||
subject_contains: "Betreff enthaelt",
|
||||
};
|
||||
const matchLabel = adminLabels.find((l) => l.id === rule.label_id);
|
||||
return (
|
||||
<TableRow key={rule.id}>
|
||||
<TableCell className="text-sm">{condLabels[rule.condition_field] || rule.condition_field}</TableCell>
|
||||
<TableCell className="text-sm font-mono">{rule.condition_value}</TableCell>
|
||||
<TableCell>
|
||||
{matchLabel ? (
|
||||
<span className="flex items-center gap-2 text-sm">
|
||||
<span
|
||||
className="inline-block h-3 w-3 rounded-full"
|
||||
style={{ backgroundColor: matchLabel.color }}
|
||||
/>
|
||||
{matchLabel.name}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">ID {rule.label_id}</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive h-7"
|
||||
onClick={() => onDeleteRule(rule.id)}
|
||||
>
|
||||
Loeschen
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user