68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import TaskItem from './TaskItem';
|
|
import { Project } from '../../entities/Project';
|
|
import { Task } from '../../entities/Task';
|
|
|
|
interface TaskListProps {
|
|
tasks: Task[];
|
|
onTaskUpdate: (task: Task) => Promise<void>;
|
|
onTaskCompletionToggle?: (task: Task) => void;
|
|
onTaskCreate?: (task: Task) => void;
|
|
onTaskDelete: (taskId: number) => void;
|
|
projects: Project[];
|
|
hideProjectName?: boolean;
|
|
onToggleToday?: (taskId: number) => Promise<void>;
|
|
showCompletedTasks?: boolean; // New prop
|
|
}
|
|
|
|
const TaskList: React.FC<TaskListProps> = ({
|
|
tasks,
|
|
onTaskUpdate,
|
|
onTaskCompletionToggle,
|
|
onTaskDelete,
|
|
projects,
|
|
hideProjectName = false,
|
|
onToggleToday,
|
|
showCompletedTasks = false, // Default to false
|
|
}) => {
|
|
// Conditionally filter tasks based on showCompletedTasks prop
|
|
const filteredTasks = showCompletedTasks
|
|
? tasks
|
|
: tasks.filter((task) => {
|
|
const isCompleted =
|
|
task.status === 'done' ||
|
|
task.status === 'archived' ||
|
|
task.status === 2 ||
|
|
task.status === 3;
|
|
return !isCompleted;
|
|
});
|
|
|
|
return (
|
|
<div className="task-list-container">
|
|
{filteredTasks.length > 0 ? (
|
|
filteredTasks.map((task) => (
|
|
<div
|
|
key={task.id}
|
|
className="task-item-wrapper transition-all duration-200 ease-in-out"
|
|
>
|
|
<TaskItem
|
|
task={task}
|
|
onTaskUpdate={onTaskUpdate}
|
|
onTaskCompletionToggle={onTaskCompletionToggle}
|
|
onTaskDelete={onTaskDelete}
|
|
projects={projects}
|
|
hideProjectName={hideProjectName}
|
|
onToggleToday={onToggleToday}
|
|
/>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p className="text-gray-500 dark:text-gray-400 text-center mt-4">
|
|
No tasks available.
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TaskList;
|