Remove calendar functionality from the Kanban board view
Removes the weekly calendar rendering and task dropping logic from the KanbanBoard component, simplifying its functionality to focus solely on board display. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/bLPlkWk
This commit is contained in:
paul-nothaft
@@ -19,7 +19,7 @@ localPort = 35345
|
||||
externalPort = 3002
|
||||
|
||||
[[ports]]
|
||||
localPort = 40293
|
||||
localPort = 39333
|
||||
externalPort = 3001
|
||||
|
||||
[[ports]]
|
||||
|
||||
@@ -7,7 +7,7 @@ import { LayoutGrid, Calendar as CalendarIcon, ChevronLeft, ChevronRight } from
|
||||
import { Task, Label } from '@shared/schema';
|
||||
import TaskCard from './TaskCard';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { format, startOfWeek, endOfWeek, startOfMonth, endOfMonth, addWeeks, addMonths, isWithinInterval, addDays, isSameDay, getDaysInMonth } from 'date-fns';
|
||||
import { format, startOfWeek, endOfWeek, startOfMonth, endOfMonth, addWeeks, addMonths, isWithinInterval } from 'date-fns';
|
||||
|
||||
interface KanbanBoardProps {
|
||||
tasks: Task[];
|
||||
@@ -78,8 +78,10 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate }:
|
||||
const navigatePeriod = (direction: 'prev' | 'next') => {
|
||||
if (viewMode === 'weekly') {
|
||||
setCurrentDate(addWeeks(currentDate, direction === 'next' ? 1 : -1));
|
||||
console.log(`Navigating to week of ${format(addWeeks(currentDate, direction === 'next' ? 1 : -1), 'd.M.yyyy')}`);
|
||||
} else if (viewMode === 'monthly') {
|
||||
setCurrentDate(addMonths(currentDate, direction === 'next' ? 1 : -1));
|
||||
console.log(`Navigating to month of ${format(addMonths(currentDate, direction === 'next' ? 1 : -1), 'MMM yyyy')}`);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -92,195 +94,6 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate }:
|
||||
return 'All Tasks';
|
||||
};
|
||||
|
||||
const getTasksForDate = (date: Date) => {
|
||||
return tasks.filter(task =>
|
||||
task.dueDate && isSameDay(task.dueDate, date)
|
||||
);
|
||||
};
|
||||
|
||||
const handleDateDrop = (date: Date) => {
|
||||
if (draggedTask) {
|
||||
const task = tasks.find(t => t.id === draggedTask);
|
||||
if (task) {
|
||||
onTaskUpdate?.(draggedTask, { dueDate: date });
|
||||
console.log(`Task ${draggedTask} moved to ${format(date, 'yyyy-MM-dd')}`);
|
||||
}
|
||||
setDraggedTask(null);
|
||||
}
|
||||
};
|
||||
|
||||
const renderWeeklyCalendar = () => {
|
||||
const weekStart = startOfWeek(currentDate);
|
||||
const dates = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{dates.map((date, index) => {
|
||||
const dayTasks = getTasksForDate(date);
|
||||
const isToday = isSameDay(date, new Date());
|
||||
const isWeekend = date.getDay() === 0 || date.getDay() === 6;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={index}
|
||||
className={`p-3 min-h-[200px] transition-all ${
|
||||
isToday ? 'ring-2 ring-primary' : ''
|
||||
} ${
|
||||
isWeekend ? 'bg-muted/30' : ''
|
||||
}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={() => handleDateDrop(date)}
|
||||
data-testid={`calendar-date-${format(date, 'yyyy-MM-dd')}`}
|
||||
>
|
||||
<div className="text-center mb-2">
|
||||
<div className="text-xs text-muted-foreground font-medium">
|
||||
{format(date, 'EEE')}
|
||||
</div>
|
||||
<div className={`text-sm font-semibold ${
|
||||
isToday ? 'text-primary' : ''
|
||||
}`}>
|
||||
{format(date, 'd')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
{dayTasks.slice(0, 3).map((task) => {
|
||||
const taskLabel = task.labelId && labels.length > 0 ? labels.find(label => label.id === task.labelId) : null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
draggable
|
||||
onDragStart={() => handleDragStart(task.id)}
|
||||
onDragEnd={handleDragEnd}
|
||||
className={`cursor-move ${draggedTask === task.id ? 'opacity-50' : ''}`}
|
||||
data-testid={`calendar-task-${task.id}`}
|
||||
>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="w-full justify-start text-xs p-1 h-auto"
|
||||
style={taskLabel ? {
|
||||
borderColor: taskLabel.color,
|
||||
borderWidth: '2px',
|
||||
borderStyle: 'solid'
|
||||
} : {}}
|
||||
>
|
||||
<div className="truncate flex-1 text-left">
|
||||
{task.title}
|
||||
</div>
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{dayTasks.length > 3 && (
|
||||
<Badge variant="secondary" className="w-full justify-center text-xs">
|
||||
+{dayTasks.length - 3} more
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderMonthlyCalendar = () => {
|
||||
const monthStart = startOfMonth(currentDate);
|
||||
const monthEnd = endOfMonth(currentDate);
|
||||
const calendarStart = startOfWeek(monthStart);
|
||||
const calendarEnd = endOfWeek(monthEnd);
|
||||
|
||||
const dates = [];
|
||||
let currentDateIterator = calendarStart;
|
||||
|
||||
while (currentDateIterator <= calendarEnd) {
|
||||
dates.push(currentDateIterator);
|
||||
currentDateIterator = addDays(currentDateIterator, 1);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{/* Month grid header */}
|
||||
<div className="grid grid-cols-7 gap-2 mb-2">
|
||||
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
|
||||
<div key={day} className="text-center text-xs font-medium text-muted-foreground p-2">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Month grid */}
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{dates.map((date, index) => {
|
||||
const dayTasks = getTasksForDate(date);
|
||||
const isToday = isSameDay(date, new Date());
|
||||
const isCurrentMonth = date >= monthStart && date <= monthEnd;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={index}
|
||||
className={`p-2 min-h-[100px] transition-all ${
|
||||
isToday ? 'ring-2 ring-primary' : ''
|
||||
} ${
|
||||
!isCurrentMonth ? 'bg-muted/50 text-muted-foreground' : ''
|
||||
}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={() => handleDateDrop(date)}
|
||||
data-testid={`calendar-date-${format(date, 'yyyy-MM-dd')}`}
|
||||
>
|
||||
<div className="text-center mb-1">
|
||||
<div className={`text-xs font-semibold ${
|
||||
isToday ? 'text-primary' : ''
|
||||
}`}>
|
||||
{format(date, 'd')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
{dayTasks.slice(0, 2).map((task) => {
|
||||
const taskLabel = task.labelId && labels.length > 0 ? labels.find(label => label.id === task.labelId) : null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
draggable
|
||||
onDragStart={() => handleDragStart(task.id)}
|
||||
onDragEnd={handleDragEnd}
|
||||
className={`cursor-move ${draggedTask === task.id ? 'opacity-50' : ''}`}
|
||||
data-testid={`calendar-task-${task.id}`}
|
||||
>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="w-full justify-start text-xs p-1 h-auto"
|
||||
style={taskLabel ? {
|
||||
borderColor: taskLabel.color,
|
||||
borderWidth: '2px',
|
||||
borderStyle: 'solid'
|
||||
} : {}}
|
||||
>
|
||||
<div className="truncate flex-1 text-left">
|
||||
{task.title}
|
||||
</div>
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{dayTasks.length > 2 && (
|
||||
<Badge variant="secondary" className="w-full justify-center text-xs">
|
||||
+{dayTasks.length - 2}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -339,8 +152,8 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate }:
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* All view modes use the same kanban layout, just with different filtering */}
|
||||
<TabsContent value="traditional" className="mt-4">
|
||||
{/* Kanban Columns */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{columns.map((column) => {
|
||||
const columnTasks = getTasksForColumn(column.status);
|
||||
@@ -402,11 +215,125 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate }:
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="weekly" className="mt-4">
|
||||
{renderWeeklyCalendar()}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{columns.map((column) => {
|
||||
const columnTasks = getTasksForColumn(column.status);
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={column.id}
|
||||
className="p-4"
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={() => handleDrop(column.status)}
|
||||
data-testid={`column-${column.id}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-sm" data-testid={`text-column-title-${column.id}`}>
|
||||
{column.title}
|
||||
</h3>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{columnTasks.length}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 min-h-[200px]">
|
||||
{columnTasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
draggable
|
||||
onDragStart={() => handleDragStart(task.id)}
|
||||
onDragEnd={handleDragEnd}
|
||||
className={`cursor-move ${draggedTask === task.id ? 'opacity-50' : ''}`}
|
||||
>
|
||||
<TaskCard
|
||||
task={task}
|
||||
onPlay={() => {
|
||||
onTaskUpdate?.(task.id, { isTracking: true });
|
||||
console.log(`Timer started for ${task.title}`);
|
||||
}}
|
||||
onPause={() => {
|
||||
onTaskUpdate?.(task.id, { isTracking: false });
|
||||
console.log(`Timer paused for ${task.title}`);
|
||||
}}
|
||||
onEdit={() => {
|
||||
console.log(`Edit task ${task.title}`);
|
||||
}}
|
||||
isDragging={draggedTask === task.id}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{columnTasks.length === 0 && (
|
||||
<div className="text-center text-muted-foreground text-sm py-8">
|
||||
No tasks in {column.title.toLowerCase()} for this week
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="monthly" className="mt-4">
|
||||
{renderMonthlyCalendar()}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{columns.map((column) => {
|
||||
const columnTasks = getTasksForColumn(column.status);
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={column.id}
|
||||
className="p-4"
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={() => handleDrop(column.status)}
|
||||
data-testid={`column-${column.id}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-sm" data-testid={`text-column-title-${column.id}`}>
|
||||
{column.title}
|
||||
</h3>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{columnTasks.length}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 min-h-[200px]">
|
||||
{columnTasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
draggable
|
||||
onDragStart={() => handleDragStart(task.id)}
|
||||
onDragEnd={handleDragEnd}
|
||||
className={`cursor-move ${draggedTask === task.id ? 'opacity-50' : ''}`}
|
||||
>
|
||||
<TaskCard
|
||||
task={task}
|
||||
onPlay={() => {
|
||||
onTaskUpdate?.(task.id, { isTracking: true });
|
||||
console.log(`Timer started for ${task.title}`);
|
||||
}}
|
||||
onPause={() => {
|
||||
onTaskUpdate?.(task.id, { isTracking: false });
|
||||
console.log(`Timer paused for ${task.title}`);
|
||||
}}
|
||||
onEdit={() => {
|
||||
console.log(`Edit task ${task.title}`);
|
||||
}}
|
||||
isDragging={draggedTask === task.id}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{columnTasks.length === 0 && (
|
||||
<div className="text-center text-muted-foreground text-sm py-8">
|
||||
No tasks in {column.title.toLowerCase()} for this month
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user