feat(tasks): add inline title editing and status cycling in task list
Click task title to edit inline (Enter/blur saves via PUT API). Click status dot to cycle pending -> in_progress -> done. Optimistic UI updates with rollback on error. Detail page still accessible by clicking other card areas. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef } from "react";
|
||||
import { Task } from "@/lib/api";
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { Task, updateTask } from "@/lib/api";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import { useTranslation } from "@/lib/i18n";
|
||||
import Link from "next/link";
|
||||
import { useSwipeable } from "react-swipeable";
|
||||
@@ -10,8 +11,11 @@ interface TaskCardProps {
|
||||
task: Task;
|
||||
onComplete?: (taskId: string) => void;
|
||||
onAssign?: (taskId: string) => void;
|
||||
onUpdate?: () => void;
|
||||
}
|
||||
|
||||
const STATUS_CYCLE: Task["status"][] = ["pending", "in_progress", "done"];
|
||||
|
||||
function statusColor(status: string): string {
|
||||
switch (status) {
|
||||
case "todo":
|
||||
@@ -50,18 +54,42 @@ function formatDate(dateStr: string): string {
|
||||
return new Date(dateStr).toLocaleDateString(undefined, { month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps) {
|
||||
export default function TaskCard({ task, onComplete, onAssign, onUpdate }: TaskCardProps) {
|
||||
const { t } = useTranslation();
|
||||
const { token } = useAuth();
|
||||
const taskDone = task.status === "done";
|
||||
const [swipeOffset, setSwipeOffset] = useState(0);
|
||||
const [swiped, setSwiped] = useState(false);
|
||||
const cardRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Inline editing state
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [editTitle, setEditTitle] = useState(task.title);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Status cycling state
|
||||
const [currentStatus, setCurrentStatus] = useState(task.status);
|
||||
|
||||
// Sync with prop changes
|
||||
useEffect(() => {
|
||||
setEditTitle(task.title);
|
||||
setCurrentStatus(task.status);
|
||||
}, [task.title, task.status]);
|
||||
|
||||
// Focus input when entering edit mode
|
||||
useEffect(() => {
|
||||
if (editing && inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
inputRef.current.setSelectionRange(0, inputRef.current.value.length);
|
||||
}
|
||||
}, [editing]);
|
||||
|
||||
const SWIPE_THRESHOLD = 120;
|
||||
const assignees = task.assigned_to || [];
|
||||
const visibleAssignees = assignees.slice(0, 3);
|
||||
const groupColor = task.group_color;
|
||||
const sColor = statusColor(task.status);
|
||||
const sColor = statusColor(currentStatus);
|
||||
|
||||
const swipeHandlers = useSwipeable({
|
||||
onSwiping: (e) => {
|
||||
@@ -88,6 +116,67 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
|
||||
|
||||
const showCompleteHint = swipeOffset > 40;
|
||||
|
||||
// Save title edit
|
||||
const saveTitle = useCallback(async () => {
|
||||
const trimmed = editTitle.trim();
|
||||
if (!trimmed || trimmed === task.title || !token) {
|
||||
setEditTitle(task.title);
|
||||
setEditing(false);
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
try {
|
||||
await updateTask(token, task.id, { title: trimmed });
|
||||
setEditing(false);
|
||||
if (onUpdate) onUpdate();
|
||||
} catch (err) {
|
||||
console.error("Failed to update title:", err);
|
||||
setEditTitle(task.title);
|
||||
setEditing(false);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}, [editTitle, task.title, task.id, token, onUpdate]);
|
||||
|
||||
// Cycle status on dot click
|
||||
const cycleStatus = useCallback(async (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!token) return;
|
||||
|
||||
const idx = STATUS_CYCLE.indexOf(currentStatus);
|
||||
const nextStatus = STATUS_CYCLE[(idx + 1) % STATUS_CYCLE.length];
|
||||
|
||||
// Optimistic update
|
||||
setCurrentStatus(nextStatus);
|
||||
try {
|
||||
await updateTask(token, task.id, { status: nextStatus });
|
||||
if (onUpdate) onUpdate();
|
||||
} catch (err) {
|
||||
console.error("Failed to cycle status:", err);
|
||||
setCurrentStatus(task.status); // revert
|
||||
}
|
||||
}, [token, task.id, task.status, currentStatus, onUpdate]);
|
||||
|
||||
// Handle title click -> enter edit mode
|
||||
const handleTitleClick = useCallback((e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setEditing(true);
|
||||
}, []);
|
||||
|
||||
// Handle keyboard in edit input
|
||||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
saveTitle();
|
||||
}
|
||||
if (e.key === "Escape") {
|
||||
setEditTitle(task.title);
|
||||
setEditing(false);
|
||||
}
|
||||
}, [saveTitle, task.title]);
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden" ref={cardRef} style={{ margin: "0 0 5px" }}>
|
||||
{/* Swipe background */}
|
||||
@@ -117,7 +206,8 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
|
||||
transition: swipeOffset === 0 ? "transform 0.3s ease" : "none",
|
||||
}}
|
||||
>
|
||||
<Link href={`/tasks/${task.id}`} className="block">
|
||||
{/* When editing, don't wrap in Link - just show the card with input */}
|
||||
{editing ? (
|
||||
<div
|
||||
style={{
|
||||
padding: "10px 14px",
|
||||
@@ -125,42 +215,39 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
|
||||
background: "#13131A",
|
||||
border: `1px solid ${groupColor ? groupColor + "30" : "#1E1E2E"}`,
|
||||
borderLeft: `3px solid ${groupColor || "#2A2A3A"}`,
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
opacity: swiped ? 0 : 1,
|
||||
transition: swiped ? "opacity 0.3s" : undefined,
|
||||
}}
|
||||
>
|
||||
{/* LEFT: title + optional due date */}
|
||||
{/* LEFT: editable input */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
color: "#E8E8F0",
|
||||
textDecoration: taskDone ? "line-through" : "none",
|
||||
opacity: taskDone ? 0.5 : 1,
|
||||
}}>
|
||||
{task.title}
|
||||
</div>
|
||||
{task.due_at && isDueSoon(task.due_at) && (
|
||||
<div style={{
|
||||
fontSize: 11,
|
||||
color: isPast(task.due_at) ? "#EF4444" : "#F59E0B",
|
||||
marginTop: 2,
|
||||
}}>
|
||||
{formatDate(task.due_at)}
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={editTitle}
|
||||
onChange={(e) => setEditTitle(e.target.value)}
|
||||
onBlur={saveTitle}
|
||||
onKeyDown={handleKeyDown}
|
||||
disabled={saving}
|
||||
style={{
|
||||
width: "100%",
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
color: "#E8E8F0",
|
||||
background: "#1A1A28",
|
||||
border: "1px solid #3B82F6",
|
||||
borderRadius: 6,
|
||||
padding: "4px 8px",
|
||||
outline: "none",
|
||||
boxShadow: "0 0 0 2px rgba(59,130,246,0.3)",
|
||||
opacity: saving ? 0.6 : 1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* RIGHT: avatars + big status dot */}
|
||||
{/* RIGHT: avatars + status dot (still interactive) */}
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
|
||||
{/* Avatars */}
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
{visibleAssignees.map((userId, i) => (
|
||||
<div
|
||||
@@ -182,15 +269,13 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
|
||||
{userId.slice(0, 2).toUpperCase()}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* + add user button */}
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (onAssign) onAssign(task.id);
|
||||
}}
|
||||
title="Přidat uživatele"
|
||||
title="Pridat uzivatele"
|
||||
style={{
|
||||
width: 26, height: 26,
|
||||
borderRadius: "50%",
|
||||
@@ -208,20 +293,164 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Big colored status dot */}
|
||||
{/* Status dot - clickable to cycle */}
|
||||
<div
|
||||
title={t(`tasks.status.${task.status}`)}
|
||||
onClick={cycleStatus}
|
||||
title={t(`tasks.status.${currentStatus}`) + " (click to change)"}
|
||||
style={{
|
||||
width: 14, height: 14,
|
||||
borderRadius: "50%",
|
||||
background: sColor,
|
||||
flexShrink: 0,
|
||||
boxShadow: `0 0 6px ${sColor}80`,
|
||||
cursor: "pointer",
|
||||
transition: "transform 0.15s ease, box-shadow 0.15s ease",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = "scale(1.3)";
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = `0 0 10px ${sColor}`;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = "scale(1)";
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = `0 0 6px ${sColor}80`;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
/* Normal mode: Link wrapping for navigation on non-interactive areas */
|
||||
<Link href={`/tasks/${task.id}`} className="block">
|
||||
<div
|
||||
style={{
|
||||
padding: "10px 14px",
|
||||
borderRadius: 10,
|
||||
background: "#13131A",
|
||||
border: `1px solid ${groupColor ? groupColor + "30" : "#1E1E2E"}`,
|
||||
borderLeft: `3px solid ${groupColor || "#2A2A3A"}`,
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
opacity: swiped ? 0 : 1,
|
||||
transition: swiped ? "opacity 0.3s" : undefined,
|
||||
}}
|
||||
>
|
||||
{/* LEFT: title (clickable for inline edit) + optional due date */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div
|
||||
onClick={handleTitleClick}
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
color: "#E8E8F0",
|
||||
textDecoration: taskDone ? "line-through" : "none",
|
||||
opacity: taskDone ? 0.5 : 1,
|
||||
borderRadius: 4,
|
||||
padding: "1px 4px",
|
||||
margin: "-1px -4px",
|
||||
transition: "background 0.15s ease",
|
||||
cursor: "text",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.background = "rgba(59,130,246,0.1)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.background = "transparent";
|
||||
}}
|
||||
title="Click to edit title"
|
||||
>
|
||||
{task.title}
|
||||
</div>
|
||||
{task.due_at && isDueSoon(task.due_at) && (
|
||||
<div style={{
|
||||
fontSize: 11,
|
||||
color: isPast(task.due_at) ? "#EF4444" : "#F59E0B",
|
||||
marginTop: 2,
|
||||
}}>
|
||||
{formatDate(task.due_at)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* RIGHT: avatars + big status dot */}
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
|
||||
{/* Avatars */}
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
{visibleAssignees.map((userId, i) => (
|
||||
<div
|
||||
key={userId}
|
||||
title={userId}
|
||||
style={{
|
||||
width: 26, height: 26,
|
||||
borderRadius: "50%",
|
||||
marginLeft: i > 0 ? -8 : 0,
|
||||
border: "2px solid #13131A",
|
||||
background: userColor(userId),
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: 10, fontWeight: 700, color: "white",
|
||||
zIndex: 3 - i,
|
||||
position: "relative",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{userId.slice(0, 2).toUpperCase()}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* + add user button */}
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (onAssign) onAssign(task.id);
|
||||
}}
|
||||
title="Pridat uzivatele"
|
||||
style={{
|
||||
width: 26, height: 26,
|
||||
borderRadius: "50%",
|
||||
marginLeft: visibleAssignees.length > 0 ? -8 : 0,
|
||||
border: "2px dashed #3A3A5A",
|
||||
background: "transparent",
|
||||
cursor: "pointer",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: 14, color: "#4A4A6A",
|
||||
position: "relative", zIndex: 0,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
+
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Big colored status dot - clickable to cycle */}
|
||||
<div
|
||||
onClick={cycleStatus}
|
||||
title={t(`tasks.status.${currentStatus}`) + " (click to change)"}
|
||||
style={{
|
||||
width: 14, height: 14,
|
||||
borderRadius: "50%",
|
||||
background: sColor,
|
||||
flexShrink: 0,
|
||||
boxShadow: `0 0 6px ${sColor}80`,
|
||||
cursor: "pointer",
|
||||
transition: "transform 0.15s ease, box-shadow 0.15s ease",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = "scale(1.3)";
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = `0 0 10px ${sColor}`;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = "scale(1)";
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = `0 0 6px ${sColor}80`;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user