136 lines
5.1 KiB
TypeScript
136 lines
5.1 KiB
TypeScript
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>
|
|
);
|
|
}
|