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:
@@ -13,6 +13,11 @@ import { Clock, Calendar, Play, Pause, MoreHorizontal, Edit, Trash2, Timer, Chec
|
||||
import { Task, Label } from '@shared/schema';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
|
||||
interface TaskCardProps {
|
||||
task: Task;
|
||||
@@ -98,12 +103,19 @@ export default function TaskCard({ task, onStartTimer, onStopTimer, onEdit, onDe
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
{/* Checkbox for quick completion */}
|
||||
<Checkbox
|
||||
checked={task.status === 'done'}
|
||||
onClick={handleToggleComplete}
|
||||
data-testid={`checkbox-complete-${task.id}`}
|
||||
className="mt-0.5"
|
||||
/>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Checkbox
|
||||
checked={task.status === 'done'}
|
||||
onClick={handleToggleComplete}
|
||||
data-testid={`checkbox-complete-${task.id}`}
|
||||
className="mt-0.5"
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t('taskCard.toggleComplete')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<div
|
||||
className="flex-1 min-w-0 cursor-pointer"
|
||||
@@ -165,18 +177,25 @@ export default function TaskCard({ task, onStartTimer, onStopTimer, onEdit, onDe
|
||||
<div className="flex items-start gap-1">
|
||||
{/* Quick delete button */}
|
||||
{onDelete && (
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
}}
|
||||
data-testid={`button-delete-${task.id}`}
|
||||
className="w-6 h-6 text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
}}
|
||||
data-testid={`button-delete-${task.id}`}
|
||||
className="w-6 h-6 text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t('taskCard.quickDelete')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
<DropdownMenu>
|
||||
|
||||
@@ -70,6 +70,8 @@
|
||||
"moveToTodo": "Zu erledigen verschieben",
|
||||
"reopenTask": "Aufgabe erneut öffnen",
|
||||
"deleteTask": "Aufgabe löschen",
|
||||
"quickDelete": "Schnell löschen",
|
||||
"toggleComplete": "Aufgabe als erledigt/unerledigt markieren",
|
||||
"running": "läuft",
|
||||
"overdue": "Überfällig",
|
||||
"timeTracked": "{{hours}}Std {{minutes}}Min erfasst"
|
||||
|
||||
@@ -70,6 +70,8 @@
|
||||
"moveToTodo": "Move to Todo",
|
||||
"reopenTask": "Reopen Task",
|
||||
"deleteTask": "Delete Task",
|
||||
"quickDelete": "Quick delete",
|
||||
"toggleComplete": "Mark task as complete/incomplete",
|
||||
"running": "running",
|
||||
"overdue": "Overdue",
|
||||
"timeTracked": "{{hours}}h {{minutes}}m tracked"
|
||||
|
||||
Reference in New Issue
Block a user