Skip to content

Commit 41ed728

Browse files
mwarmanmwarman
authored
Task detail improvements (#197)
* feat: update translations * feat: update task detail layout and related components * feat: use NavLink in settings menu * feat: add 'view-task' translation and link task title in TaskListItem component
1 parent 9be003f commit 41ed728

19 files changed

Lines changed: 284 additions & 186 deletions

‎packages/web/src/common/utils/i18n/locales/en/tasks.json‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
{
2-
"addTask": "Add a new task",
3-
"editTask": "Edit task",
2+
"add-task": "Add a new task",
3+
"create-task": "Create task",
4+
"created-task": "Task created.",
5+
"delete-task": "Delete task",
6+
"edit-task": "Edit task",
7+
"errors": {
8+
"not-found": "Not found",
9+
"unable-to-find-task": "We're unable to find the task you requested."
10+
},
11+
"go-back-to-task-list": "Go back to task list",
412
"label": {
5-
"title": "Title",
6-
"completed": "Is complete"
13+
"assignee": "Assignee",
14+
"completed": "Is complete",
15+
"status": "Status",
16+
"title": "Title"
717
},
8-
"createdTask": "Task created.",
9-
"markComplete": "Mark complete",
10-
"markIncomplete": "Mark incomplete",
11-
"markedComplete": "Marked task complete",
12-
"markedIncomplete": "Marked task incomplete",
18+
"list-tasks": "List tasks",
19+
"mark-complete": "Mark complete",
20+
"mark-incomplete": "Mark incomplete",
21+
"marked-complete": "Marked task complete",
22+
"marked-incomplete": "Marked task incomplete",
1323
"marking-complete": "Marking task complete...",
1424
"marking-incomplete": "Marking task incomplete...",
1525
"status": {
@@ -20,6 +30,7 @@
2030
"task": "Task",
2131
"tasks": "Tasks",
2232
"tasks-empty": "Nothing to do. Create a task to get started.",
23-
"updatedTask": "Task updated.",
24-
"update-failed": "Failed to update task. Detail: {{message}}"
33+
"updated-task": "Task updated.",
34+
"update-failed": "Failed to update task. Detail: {{message}}",
35+
"view-task": "View task"
2536
}

‎packages/web/src/common/utils/i18n/locales/es/tasks.json‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
{
2-
"addTask": "Crear una nueva tarea",
3-
"editTask": "Editar tarea",
2+
"add-task": "Crear una nueva tarea",
3+
"create-task": "Crear tarea",
4+
"created-task": "Tarea creada.",
5+
"delete-task": "Eliminar tarea",
6+
"edit-task": "Editar tarea",
7+
"errors": {
8+
"not-found": "No encontrado",
9+
"unable-to-find-task": "No podemos encontrar la tarea que solicitaste."
10+
},
11+
"go-back-to-task-list": "Volver a la lista de tareas",
412
"label": {
5-
"title": "Título",
6-
"completed": "Está completo"
13+
"assignee": "Asignado a",
14+
"completed": "Está completo",
15+
"status": "Estado",
16+
"title": "Título"
717
},
8-
"createdTask": "Tarea creada.",
9-
"markComplete": "Márcalo completo",
10-
"markIncomplete": "Márcalo como incompleto",
11-
"markedComplete": "Tarea marcada completada",
12-
"markedIncomplete": "Tarea marcada como incompleta",
18+
"list-tasks": "Listar tareas",
19+
"mark-complete": "Márcalo completo",
20+
"mark-incomplete": "Márcalo como incompleto",
21+
"marked-complete": "Tarea marcada completada",
22+
"marked-incomplete": "Tarea marcada como incompleta",
1323
"marking-complete": "Marcando la tarea como completada...",
1424
"marking-incomplete": "Marcando la tarea como incompleta...",
1525
"status": {
@@ -20,6 +30,7 @@
2030
"task": "Tarea",
2131
"tasks": "Tareas",
2232
"tasks-empty": "No hay nada que hacer. Haz una tarea para empezar.",
23-
"updatedTask": "Tarea actualizada.",
24-
"update-failed": "Error al actualizar la tarea. Detalle: {{message}}"
33+
"updated-task": "Tarea actualizada.",
34+
"update-failed": "Error al actualizar la tarea. Detalle: {{message}}",
35+
"view-task": "Ver tarea"
2536
}

‎packages/web/src/common/utils/i18n/locales/fr/tasks.json‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
{
2-
"addTask": "Créer une nouvelle tâche",
3-
"editTask": "Modifier la tâche",
2+
"add-task": "Créer une nouvelle tâche",
3+
"create-task": "Créer la tâche",
4+
"created-task": "Tâche créée.",
5+
"delete-task": "Supprimer la tâche",
6+
"edit-task": "Modifier la tâche",
7+
"errors": {
8+
"not-found": "Non trouvé",
9+
"unable-to-find-task": "Nous ne pouvons pas trouver la tâche que vous avez demandée."
10+
},
11+
"go-back-to-task-list": "Retour à la liste des tâches",
412
"label": {
5-
"title": "Titre",
6-
"completed": "Est complet"
13+
"assignee": "Assigné à",
14+
"completed": "Est complet",
15+
"status": "Statut",
16+
"title": "Titre"
717
},
8-
"createdTask": "Tâche créée.",
9-
"markComplete": "Marquez-le comme terminé",
10-
"markIncomplete": "Marquez-le comme incomplet",
11-
"markedComplete": "Tâche marquée terminée",
12-
"markedIncomplete": "Tâche marquée incomplète",
18+
"list-tasks": "Lister les tâches",
19+
"mark-complete": "Marquez-le comme terminé",
20+
"mark-incomplete": "Marquez-le comme incomplet",
21+
"marked-complete": "Tâche marquée terminée",
22+
"marked-incomplete": "Tâche marquée incomplète",
1323
"marking-complete": "Marquage de la tâche comme terminée...",
1424
"marking-incomplete": "Marquage de la tâche comme incomplète...",
1525
"status": {
@@ -20,6 +30,7 @@
2030
"task": "Tâche",
2131
"tasks": "Tâches",
2232
"tasks-empty": "Rien à faire. Créez une tâche pour commencer.",
23-
"updatedTask": "Tâche mise à jour.",
24-
"update-failed": "Échec de la mise à jour de la tâche. Détail : {{message}}"
33+
"updated-task": "Tâche mise à jour.",
34+
"update-failed": "Échec de la mise à jour de la tâche. Détail : {{message}}",
35+
"view-task": "Voir la tâche"
2536
}

‎packages/web/src/pages/Settings/SettingsPage.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link, Outlet } from 'react-router-dom';
1+
import { NavLink, Outlet } from 'react-router-dom';
22
import { Palette } from 'lucide-react';
33

44
import { Page } from '@react-starter/shared/components/Content/Page';
@@ -8,7 +8,7 @@ import { Skeleton } from '@react-starter/shared/components/shadcn/skeleton';
88
import { Avatar, AvatarFallback } from '@react-starter/shared/components/shadcn/avatar';
99

1010
import { useGetCurrentUser } from '@/common/api/useGetCurrentUser';
11-
import SettingsPageBreadcrumbs from '@/pages/Settings/components/SettingsPageBreadcrumbs';
11+
import { SettingsPageBreadcrumbs } from '@/pages/Settings/components/SettingsPageBreadcrumbs';
1212
import { Button } from '@react-starter/shared/components/shadcn/button';
1313

1414
/**
@@ -44,10 +44,10 @@ const SettingsPage = () => {
4444
<ul className="*:not-last:mb-1">
4545
<li>
4646
<Button variant="ghost" className="w-full justify-start" asChild>
47-
<Link to="appearance" aria-label="Appearance Settings">
47+
<NavLink to="appearance" aria-label="Appearance Settings">
4848
<Palette />
4949
Appearance
50-
</Link>
50+
</NavLink>
5151
</Button>
5252
</li>
5353
</ul>

‎packages/web/src/pages/Settings/components/SettingsPageBreadcrumbs.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
33

44
import { render, screen } from '@/test/test-utils';
55

6-
import SettingsPageBreadcrumbs from './SettingsPageBreadcrumbs';
6+
import { SettingsPageBreadcrumbs } from './SettingsPageBreadcrumbs';
77

88
describe('SettingsPageBreadcrumbs', () => {
99
it('should render successfully', async () => {

‎packages/web/src/pages/Settings/components/SettingsPageBreadcrumbs.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,10 @@ const SettingsPageBreadcrumbs = ({ className, testId = 'page-settings-breadcrumb
3232
<>
3333
<BreadcrumbSeparator />
3434
<BreadcrumbItem>
35-
<BreadcrumbPage className="capitalize" data-testid={`${testId}-page-${pathElements[3]}`}>
35+
<BreadcrumbPage
36+
className="max-w-40 truncate capitalize"
37+
data-testid={`${testId}-page-${pathElements[3]}`}
38+
>
3639
{pathElements[3].replace('-', ' ')}
3740
</BreadcrumbPage>
3841
</BreadcrumbItem>
@@ -43,4 +46,4 @@ const SettingsPageBreadcrumbs = ({ className, testId = 'page-settings-breadcrumb
4346
);
4447
};
4548

46-
export default SettingsPageBreadcrumbs;
49+
export { SettingsPageBreadcrumbs };

‎packages/web/src/pages/Tasks/TasksPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Page } from '@react-starter/shared/components/Content/Page';
55
import { Container } from '@react-starter/shared/components/Content/Container';
66
import { Heading } from '@react-starter/shared/components/Text/Heading';
77

8-
import TasksPageBreadcrumbs from '@/pages/Tasks/components/TasksPageBreadcrumbs';
8+
import { TasksPageBreadcrumbs } from '@/pages/Tasks/components/TasksPageBreadcrumbs';
99
import { AddTaskButton } from '@/pages/Tasks/components/Add/AddTaskButton';
1010

1111
/**

‎packages/web/src/pages/Tasks/components/Add/AddTaskButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@ const AddTaskButton = ({ ...props }: React.ComponentProps<typeof Button>) => {
1616
return (
1717
<Tooltip>
1818
<TooltipTrigger asChild>
19-
<Button variant="outline" size="icon" aria-label={t('addTask', { ns: 'tasks' })} {...props}>
19+
<Button variant="outline" size="icon" aria-label={t('add-task', { ns: 'tasks' })} {...props}>
2020
<Link to="/app/tasks/add">
2121
<Plus />
2222
</Link>
2323
</Button>
2424
</TooltipTrigger>
25-
<TooltipContent>{t('addTask', { ns: 'tasks' })}</TooltipContent>
25+
<TooltipContent>{t('add-task', { ns: 'tasks' })}</TooltipContent>
2626
</Tooltip>
2727
);
2828
};

‎packages/web/src/pages/Tasks/components/Add/TaskAdd.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const TaskAdd = ({ className, testId = 'task-add' }: BaseComponentProps) => {
4141
{ task: data },
4242
{
4343
onSuccess: () => {
44-
toast(t('createdTask', { ns: 'tasks' }));
44+
toast(t('created-task', { ns: 'tasks' }));
4545
navigate(-1);
4646
},
4747
onError: (err) => {
@@ -59,7 +59,7 @@ const TaskAdd = ({ className, testId = 'task-add' }: BaseComponentProps) => {
5959
<div className={className} data-testid={testId}>
6060
{/* heading */}
6161
<Heading level={2} className="mb-4">
62-
{t('addTask', { ns: 'tasks' })}
62+
{t('add-task', { ns: 'tasks' })}
6363
</Heading>
6464

6565
{/* error state */}

‎packages/web/src/pages/Tasks/components/Delete/TaskDeleteDialog.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
DialogDescription,
1111
DialogFooter,
1212
} from '@react-starter/shared/components/shadcn/dialog';
13+
import { Tooltip, TooltipTrigger, TooltipContent } from '@react-starter/shared/components/shadcn/tooltip';
1314
import { toast } from '@react-starter/shared/components/shadcn/sonner';
1415
import { ErrorAlert } from '@react-starter/shared/components/Alert/ErrorAlert';
1516

@@ -67,9 +68,14 @@ const TaskDeleteDialog = ({ onSuccess, task, trigger, ...props }: TaskDeleteDial
6768
return (
6869
<Dialog {...props}>
6970
{trigger && (
70-
<DialogTrigger data-testid={`task-delete-dialog-trigger-${task.id}`} asChild>
71-
{trigger}
72-
</DialogTrigger>
71+
<Tooltip>
72+
<TooltipTrigger asChild>
73+
<DialogTrigger data-testid={`task-delete-dialog-trigger-${task.id}`} asChild>
74+
{trigger}
75+
</DialogTrigger>
76+
</TooltipTrigger>
77+
<TooltipContent>{t('delete-task', { ns: 'tasks' })}</TooltipContent>
78+
</Tooltip>
7379
)}
7480
<DialogContent>
7581
<DialogHeader>

0 commit comments

Comments
 (0)