Admin
f2915b79fa
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>
458 lines
16 KiB
TypeScript
458 lines
16 KiB
TypeScript
"use client";
|
|
|
|
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";
|
|
|
|
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":
|
|
case "pending": return "#F59E0B"; // yellow
|
|
case "in_progress": return "#3B82F6"; // blue
|
|
case "done": return "#22C55E"; // green
|
|
case "cancelled": return "#6B7280"; // gray
|
|
default: return "#F59E0B";
|
|
}
|
|
}
|
|
|
|
function userColor(userId: string): string {
|
|
const colors = [
|
|
"#3B82F6", "#8B5CF6", "#EC4899", "#F59E0B",
|
|
"#10B981", "#06B6D4", "#F97316", "#6366F1",
|
|
];
|
|
let hash = 0;
|
|
for (let i = 0; i < userId.length; i++) {
|
|
hash = ((hash << 5) - hash) + userId.charCodeAt(i);
|
|
hash |= 0;
|
|
}
|
|
return colors[Math.abs(hash) % colors.length];
|
|
}
|
|
|
|
function isDueSoon(dateStr: string): boolean {
|
|
const due = new Date(dateStr).getTime();
|
|
const now = Date.now();
|
|
return due - now <= 7 * 24 * 60 * 60 * 1000;
|
|
}
|
|
|
|
function isPast(dateStr: string): boolean {
|
|
return new Date(dateStr).getTime() < Date.now();
|
|
}
|
|
|
|
function formatDate(dateStr: string): string {
|
|
return new Date(dateStr).toLocaleDateString(undefined, { month: "short", day: "numeric" });
|
|
}
|
|
|
|
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(currentStatus);
|
|
|
|
const swipeHandlers = useSwipeable({
|
|
onSwiping: (e) => {
|
|
if (e.dir === "Right" && !taskDone && onComplete) {
|
|
setSwipeOffset(Math.min(e.deltaX, 160));
|
|
}
|
|
},
|
|
onSwipedRight: (e) => {
|
|
if (e.absX > SWIPE_THRESHOLD && !taskDone && onComplete) {
|
|
setSwiped(true);
|
|
setTimeout(() => { onComplete(task.id); }, 300);
|
|
} else {
|
|
setSwipeOffset(0);
|
|
}
|
|
},
|
|
onSwiped: () => {
|
|
if (!swiped) setSwipeOffset(0);
|
|
},
|
|
trackMouse: false,
|
|
trackTouch: true,
|
|
preventScrollOnSwipe: false,
|
|
delta: 10,
|
|
});
|
|
|
|
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 */}
|
|
{onComplete && !taskDone && (
|
|
<div
|
|
className={`absolute inset-0 flex items-center pl-4 rounded-xl transition-colors ${
|
|
swipeOffset > SWIPE_THRESHOLD ? "bg-green-500" : "bg-green-400/80"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`flex items-center gap-1.5 text-white font-medium transition-opacity ${
|
|
showCompleteHint ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<span className="text-xs">{t("tasks.status.done")}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
{...swipeHandlers}
|
|
style={{
|
|
transform: `translateX(${swipeOffset}px)`,
|
|
transition: swipeOffset === 0 ? "transform 0.3s ease" : "none",
|
|
}}
|
|
>
|
|
{/* When editing, don't wrap in Link - just show the card with input */}
|
|
{editing ? (
|
|
<div
|
|
style={{
|
|
padding: "10px 14px",
|
|
borderRadius: 10,
|
|
background: "#13131A",
|
|
border: `1px solid ${groupColor ? groupColor + "30" : "#1E1E2E"}`,
|
|
borderLeft: `3px solid ${groupColor || "#2A2A3A"}`,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
}}
|
|
>
|
|
{/* LEFT: editable input */}
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<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 + status dot (still interactive) */}
|
|
<div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
|
|
<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>
|
|
))}
|
|
<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>
|
|
|
|
{/* 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>
|
|
) : (
|
|
/* 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>
|
|
);
|
|
}
|