feat(HAI-002): add queued prop to TaskCard with drag disable and badge
This commit is contained in:
@@ -5,11 +5,12 @@ import type { ToastType } from "../hooks/useToast";
|
||||
|
||||
interface TaskCardProps {
|
||||
task: Task;
|
||||
queued?: boolean;
|
||||
onOpenDetail: (task: TaskDetail) => void;
|
||||
addToast: (message: string, type?: ToastType) => void;
|
||||
}
|
||||
|
||||
export function TaskCard({ task, onOpenDetail, addToast }: TaskCardProps) {
|
||||
export function TaskCard({ task, queued, onOpenDetail, addToast }: TaskCardProps) {
|
||||
const [dragging, setDragging] = useState(false);
|
||||
|
||||
const handleDragStart = useCallback((e: React.DragEvent) => {
|
||||
@@ -31,22 +32,27 @@ export function TaskCard({ task, onOpenDetail, addToast }: TaskCardProps) {
|
||||
}
|
||||
}, [task.id, onOpenDetail, addToast]);
|
||||
|
||||
const cardClass = `card${dragging ? " dragging" : ""}${queued ? " queued" : ""}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`card${dragging ? " dragging" : ""}`}
|
||||
className={cardClass}
|
||||
data-id={task.id}
|
||||
draggable
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
draggable={!queued}
|
||||
onDragStart={queued ? undefined : handleDragStart}
|
||||
onDragEnd={queued ? undefined : handleDragEnd}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<span className="card-id">{task.id}</span>
|
||||
<div className="card-title">{task.title}</div>
|
||||
{task.dependencies && task.dependencies.length > 0 && (
|
||||
{((task.dependencies && task.dependencies.length > 0) || queued) && (
|
||||
<div className="card-meta">
|
||||
<span className="card-dep-badge">
|
||||
⛓ {task.dependencies.length} dep{task.dependencies.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
{task.dependencies && task.dependencies.length > 0 && (
|
||||
<span className="card-dep-badge">
|
||||
⛓ {task.dependencies.length} dep{task.dependencies.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
)}
|
||||
{queued && <span className="queued-badge">⏳ Queued</span>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user