Improve task management with quick delete and complete options

Add tooltip functionality for quick delete and toggle complete actions on TaskCard component, and update translations.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/7gWYrTe
This commit is contained in:
paul-nothaft
2025-10-24 07:47:41 +00:00
parent 037256401f
commit 7870d0b31e
3 changed files with 41 additions and 18 deletions
+19
View File
@@ -13,6 +13,11 @@ import { Clock, Calendar, Play, Pause, MoreHorizontal, Edit, Trash2, Timer, Chec
import { Task, Label } from '@shared/schema'; import { Task, Label } from '@shared/schema';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
interface TaskCardProps { interface TaskCardProps {
task: Task; task: Task;
@@ -98,12 +103,19 @@ export default function TaskCard({ task, onStartTimer, onStopTimer, onEdit, onDe
> >
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
{/* Checkbox for quick completion */} {/* Checkbox for quick completion */}
<Tooltip>
<TooltipTrigger asChild>
<Checkbox <Checkbox
checked={task.status === 'done'} checked={task.status === 'done'}
onClick={handleToggleComplete} onClick={handleToggleComplete}
data-testid={`checkbox-complete-${task.id}`} data-testid={`checkbox-complete-${task.id}`}
className="mt-0.5" className="mt-0.5"
/> />
</TooltipTrigger>
<TooltipContent>
<p>{t('taskCard.toggleComplete')}</p>
</TooltipContent>
</Tooltip>
<div <div
className="flex-1 min-w-0 cursor-pointer" className="flex-1 min-w-0 cursor-pointer"
@@ -165,6 +177,8 @@ export default function TaskCard({ task, onStartTimer, onStopTimer, onEdit, onDe
<div className="flex items-start gap-1"> <div className="flex items-start gap-1">
{/* Quick delete button */} {/* Quick delete button */}
{onDelete && ( {onDelete && (
<Tooltip>
<TooltipTrigger asChild>
<Button <Button
size="icon" size="icon"
variant="ghost" variant="ghost"
@@ -177,6 +191,11 @@ export default function TaskCard({ task, onStartTimer, onStopTimer, onEdit, onDe
> >
<X className="w-3 h-3" /> <X className="w-3 h-3" />
</Button> </Button>
</TooltipTrigger>
<TooltipContent>
<p>{t('taskCard.quickDelete')}</p>
</TooltipContent>
</Tooltip>
)} )}
<DropdownMenu> <DropdownMenu>
+2
View File
@@ -70,6 +70,8 @@
"moveToTodo": "Zu erledigen verschieben", "moveToTodo": "Zu erledigen verschieben",
"reopenTask": "Aufgabe erneut öffnen", "reopenTask": "Aufgabe erneut öffnen",
"deleteTask": "Aufgabe löschen", "deleteTask": "Aufgabe löschen",
"quickDelete": "Schnell löschen",
"toggleComplete": "Aufgabe als erledigt/unerledigt markieren",
"running": "läuft", "running": "läuft",
"overdue": "Überfällig", "overdue": "Überfällig",
"timeTracked": "{{hours}}Std {{minutes}}Min erfasst" "timeTracked": "{{hours}}Std {{minutes}}Min erfasst"
+2
View File
@@ -70,6 +70,8 @@
"moveToTodo": "Move to Todo", "moveToTodo": "Move to Todo",
"reopenTask": "Reopen Task", "reopenTask": "Reopen Task",
"deleteTask": "Delete Task", "deleteTask": "Delete Task",
"quickDelete": "Quick delete",
"toggleComplete": "Mark task as complete/incomplete",
"running": "running", "running": "running",
"overdue": "Overdue", "overdue": "Overdue",
"timeTracked": "{{hours}}h {{minutes}}m tracked" "timeTracked": "{{hours}}h {{minutes}}m tracked"