feat: enhance Kanban navigation and task editing
- Updated `KanbanPageClient` to retrieve `taskId` from URL search parameters for direct task editing. - Modified links in `DailyCheckboxItem` and `PendingTasksSection` to navigate to the Kanban page with the corresponding `taskId`, improving user experience by allowing quick access to task details. - Added logic in `KanbanBoardContainer` to automatically open the edit modal if a `taskId` is present, streamlining the editing process.
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
import { useSearchParams } from 'next/navigation';
|
||||||
import { KanbanBoardContainer } from '@/components/kanban/BoardContainer';
|
import { KanbanBoardContainer } from '@/components/kanban/BoardContainer';
|
||||||
import { Header } from '@/components/ui/Header';
|
import { Header } from '@/components/ui/Header';
|
||||||
import { TasksProvider, useTasksContext } from '@/contexts/TasksContext';
|
import { TasksProvider, useTasksContext } from '@/contexts/TasksContext';
|
||||||
@@ -25,6 +26,8 @@ function KanbanPageContent() {
|
|||||||
const { preferences, updateViewPreferences } = useUserPreferences();
|
const { preferences, updateViewPreferences } = useUserPreferences();
|
||||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||||
const isMobile = useIsMobile(768); // Tailwind md breakpoint
|
const isMobile = useIsMobile(768); // Tailwind md breakpoint
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const taskIdFromUrl = searchParams.get('taskId');
|
||||||
|
|
||||||
// Extraire les préférences du context
|
// Extraire les préférences du context
|
||||||
const showFilters = preferences.viewPreferences.showFilters;
|
const showFilters = preferences.viewPreferences.showFilters;
|
||||||
@@ -190,6 +193,7 @@ function KanbanPageContent() {
|
|||||||
<KanbanBoardContainer
|
<KanbanBoardContainer
|
||||||
showFilters={showFilters}
|
showFilters={showFilters}
|
||||||
showObjectives={showObjectives}
|
showObjectives={showObjectives}
|
||||||
|
initialTaskIdToEdit={taskIdFromUrl}
|
||||||
/>
|
/>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
@@ -128,7 +128,7 @@ export function DailyCheckboxItem({
|
|||||||
{/* Lien vers la tâche si liée */}
|
{/* Lien vers la tâche si liée */}
|
||||||
{checkbox.task && (
|
{checkbox.task && (
|
||||||
<Link
|
<Link
|
||||||
href={`/?highlight=${checkbox.task.id}`}
|
href={`/kanban?taskId=${checkbox.task.id}`}
|
||||||
className="text-xs text-[var(--primary)] hover:text-[var(--primary)]/80 font-mono truncate max-w-[100px]"
|
className="text-xs text-[var(--primary)] hover:text-[var(--primary)]/80 font-mono truncate max-w-[100px]"
|
||||||
title={`Tâche: ${checkbox.task.title}`}
|
title={`Tâche: ${checkbox.task.title}`}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useEffect, useCallback, useTransition } from 'react';
|
import { useState, useEffect, useCallback, useTransition } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||||
import { Button } from '@/components/ui/Button';
|
import { Button } from '@/components/ui/Button';
|
||||||
import { DailyCheckbox, DailyCheckboxType } from '@/lib/types';
|
import { DailyCheckbox, DailyCheckboxType } from '@/lib/types';
|
||||||
@@ -225,9 +226,12 @@ export function PendingTasksSection({
|
|||||||
`Il y a ${daysAgo} jours`}
|
`Il y a ${daysAgo} jours`}
|
||||||
</span>
|
</span>
|
||||||
{task.task && (
|
{task.task && (
|
||||||
<span className="text-[var(--primary)]">
|
<Link
|
||||||
|
href={`/kanban?taskId=${task.task.id}`}
|
||||||
|
className="text-[var(--primary)] hover:text-[var(--primary)]/80 font-mono"
|
||||||
|
>
|
||||||
🔗 {task.task.title}
|
🔗 {task.task.title}
|
||||||
</span>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { EditTaskForm } from '@/components/forms/EditTaskForm';
|
import { EditTaskForm } from '@/components/forms/EditTaskForm';
|
||||||
import { useTasksContext } from '@/contexts/TasksContext';
|
import { useTasksContext } from '@/contexts/TasksContext';
|
||||||
import { useUserPreferences } from '@/contexts/UserPreferencesContext';
|
import { useUserPreferences } from '@/contexts/UserPreferencesContext';
|
||||||
@@ -14,11 +14,13 @@ import { BoardRouter } from './BoardRouter';
|
|||||||
interface KanbanBoardContainerProps {
|
interface KanbanBoardContainerProps {
|
||||||
showFilters?: boolean;
|
showFilters?: boolean;
|
||||||
showObjectives?: boolean;
|
showObjectives?: boolean;
|
||||||
|
initialTaskIdToEdit?: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function KanbanBoardContainer({
|
export function KanbanBoardContainer({
|
||||||
showFilters = true,
|
showFilters = true,
|
||||||
showObjectives = true
|
showObjectives = true,
|
||||||
|
initialTaskIdToEdit = null
|
||||||
}: KanbanBoardContainerProps = {}) {
|
}: KanbanBoardContainerProps = {}) {
|
||||||
const {
|
const {
|
||||||
filteredTasks,
|
filteredTasks,
|
||||||
@@ -37,6 +39,16 @@ export function KanbanBoardContainer({
|
|||||||
const visibleStatuses = allStatuses.filter(status => isColumnVisible(status.key)).map(s => s.key);
|
const visibleStatuses = allStatuses.filter(status => isColumnVisible(status.key)).map(s => s.key);
|
||||||
const [editingTask, setEditingTask] = useState<Task | null>(null);
|
const [editingTask, setEditingTask] = useState<Task | null>(null);
|
||||||
|
|
||||||
|
// Effet pour ouvrir automatiquement la popup d'édition si un taskId est fourni dans l'URL
|
||||||
|
useEffect(() => {
|
||||||
|
if (initialTaskIdToEdit && filteredTasks.length > 0) {
|
||||||
|
const taskToEdit = filteredTasks.find(task => task.id === initialTaskIdToEdit);
|
||||||
|
if (taskToEdit) {
|
||||||
|
setEditingTask(taskToEdit);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [initialTaskIdToEdit, filteredTasks]);
|
||||||
|
|
||||||
const handleEditTask = (task: Task) => {
|
const handleEditTask = (task: Task) => {
|
||||||
setEditingTask(task);
|
setEditingTask(task);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user