FE people management

2025-12-03 23:57:46 +01:00
parent 333c180b17
commit 29e1c2b3cc
7 changed files with 308 additions and 28 deletions
--- a/libertas-frontend/src/components/people/person-assignment-dialog.tsx
+++ b/libertas-frontend/src/components/people/person-assignment-dialog.tsx
@@ -0,0 +1,135 @@
+import { useState } from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useListPeople, useCreatePerson } from "@/features/people/use-people";
+import { useAssignFace } from "@/features/faces/use-faces";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { UserSquare, Plus } from "lucide-react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+type PersonAssignmentDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    faceId: string;
+    mediaId: string;
+    currentPersonId: string | null;
+};
+
+export function PersonAssignmentDialog({
+    isOpen,
+    onOpenChange,
+    faceId,
+    mediaId,
+    currentPersonId,
+}: PersonAssignmentDialogProps) {
+    const [searchQuery, setSearchQuery] = useState("");
+    const [isCreating, setIsCreating] = useState(false);
+    const [newPersonName, setNewPersonName] = useState("");
+
+    const { data: people } = useListPeople();
+    const assignFace = useAssignFace(faceId, mediaId);
+    const createPerson = useCreatePerson();
+
+    const filteredPeople = people?.filter((person) =>
+        person.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    const handleAssign = (personId: string) => {
+        assignFace.mutate(
+            { person_id: personId },
+            {
+                onSuccess: () => {
+                    onOpenChange(false);
+                },
+            }
+        );
+    };
+
+    const handleCreateAndAssign = () => {
+        if (!newPersonName.trim()) return;
+
+        createPerson.mutate(
+            { name: newPersonName },
+            {
+                onSuccess: (newPerson) => {
+                    handleAssign(newPerson.id);
+                },
+            }
+        );
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>Assign Person</DialogTitle>
+                </DialogHeader>
+
+                {isCreating ? (
+                    <div className="space-y-4 py-4">
+                        <Input
+                            placeholder="Enter person name"
+                            value={newPersonName}
+                            onChange={(e) => setNewPersonName(e.target.value)}
+                            autoFocus
+                        />
+                        <div className="flex justify-end gap-2">
+                            <Button variant="outline" onClick={() => setIsCreating(false)}>
+                                Cancel
+                            </Button>
+                            <Button onClick={handleCreateAndAssign} disabled={!newPersonName.trim()}>
+                                Create & Assign
+                            </Button>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="space-y-4">
+                        <Input
+                            placeholder="Search people..."
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                        />
+
+                        <ScrollArea className="h-[300px] pr-4">
+                            <div className="space-y-2">
+                                <Button
+                                    variant="ghost"
+                                    className="w-full justify-start gap-2"
+                                    onClick={() => setIsCreating(true)}
+                                >
+                                    <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
+                                        <Plus size={16} />
+                                    </div>
+                                    <span>Create "{searchQuery || "New Person"}"</span>
+                                </Button>
+
+                                {filteredPeople?.map((person) => (
+                                    <Button
+                                        key={person.id}
+                                        variant={currentPersonId === person.id ? "secondary" : "ghost"}
+                                        className="w-full justify-start gap-2"
+                                        onClick={() => handleAssign(person.id)}
+                                    >
+                                        <Avatar className="h-8 w-8">
+                                            {/* TODO: Add thumbnail URL if available */}
+                                            <AvatarFallback>
+                                                <UserSquare size={16} />
+                                            </AvatarFallback>
+                                        </Avatar>
+                                        <span>{person.name}</span>
+                                    </Button>
+                                ))}
+                            </div>
+                        </ScrollArea>
+                    </div>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+}