From b6d187d477141d75316fe6b1dea3a6de6846cbd0 Mon Sep 17 00:00:00 2001 From: paul-nothaft <40865108-paul-nothaft@users.noreply.replit.com> Date: Thu, 11 Sep 2025 09:47:35 +0000 Subject: [PATCH] Add a scrollable calendar view to the tasks page for drag and drop scheduling Refactors the `TasksWithCalendar` component to display a 7-day calendar view at the bottom of the tasks page, enabling drag-and-drop functionality for task scheduling. Removes the tabbed view toggle and updates date navigation logic to use `startOfToday` and a new `navigateCalendar` function. 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/sqJIbnU --- .replit | 4 - client/src/components/TasksWithCalendar.tsx | 263 +++++++++----------- 2 files changed, 120 insertions(+), 147 deletions(-) diff --git a/.replit b/.replit index 2b8bbf4..74ed208 100644 --- a/.replit +++ b/.replit @@ -14,10 +14,6 @@ run = ["npm", "run", "start"] localPort = 5000 externalPort = 80 -[[ports]] -localPort = 39317 -externalPort = 3000 - [env] PORT = "5000" diff --git a/client/src/components/TasksWithCalendar.tsx b/client/src/components/TasksWithCalendar.tsx index 337d0fd..4351bec 100644 --- a/client/src/components/TasksWithCalendar.tsx +++ b/client/src/components/TasksWithCalendar.tsx @@ -4,12 +4,11 @@ import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; -import { Search, Filter, SortAsc, Calendar, List, ChevronLeft, ChevronRight } from 'lucide-react'; +import { Search, Filter, SortAsc, Calendar, ChevronLeft, ChevronRight } from 'lucide-react'; import { Task } from './TaskCard'; import TaskCard from './TaskCard'; import TimeCompletionModal from './TimeCompletionModal'; -import { addDays, format, isSameDay, startOfWeek } from 'date-fns'; +import { addDays, format, isSameDay, startOfToday } from 'date-fns'; interface TasksWithCalendarProps { tasks: Task[]; @@ -24,17 +23,15 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T const [searchQuery, setSearchQuery] = useState(''); const [sortBy, setSortBy] = useState('dueDate'); const [filterBy, setFilterBy] = useState('all'); - const [currentDate, setCurrentDate] = useState(new Date()); + const [calendarStartDate, setCalendarStartDate] = useState(startOfToday()); const [draggedTask, setDraggedTask] = useState(null); - const [activeView, setActiveView] = useState<'list' | 'calendar'>('list'); const [completionModal, setCompletionModal] = useState<{ isOpen: boolean; task: Task | null }>({ isOpen: false, task: null }); - // Get two weeks starting from current week for calendar - const startDate = startOfWeek(currentDate); - const dates = Array.from({ length: 14 }, (_, i) => addDays(startDate, i)); + // Get 7 days starting from today for calendar + const dates = Array.from({ length: 7 }, (_, i) => addDays(calendarStartDate, i)); const isOverdue = (task: Task) => { if (!task.dueDate) return false; @@ -127,10 +124,10 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T e.dataTransfer.dropEffect = 'move'; }; - const navigateWeek = (direction: 'prev' | 'next') => { - const newDate = addDays(currentDate, direction === 'next' ? 7 : -7); - setCurrentDate(newDate); - console.log(`Navigating to week of ${newDate.toLocaleDateString()}`); + const navigateCalendar = (direction: 'prev' | 'next') => { + const newDate = addDays(calendarStartDate, direction === 'next' ? 7 : -7); + setCalendarStartDate(newDate); + console.log(`Navigating calendar to ${newDate.toLocaleDateString()}`); }; const handleTaskComplete = (task: Task) => { @@ -216,112 +213,99 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T - {/* View Toggle */} - setActiveView(value as 'list' | 'calendar')}> - - - - List View - - - - Calendar View - - - - - {/* Task List */} -
- {unscheduledTasks.length === 0 ? ( -
-

- {searchQuery || filterBy !== 'all' - ? 'No unscheduled tasks match your filters' - : 'No unscheduled tasks. Drag tasks to the calendar to schedule them!' - } -

+ {/* Unscheduled Task List */} +
+ {unscheduledTasks.length === 0 ? ( +
+

+ {searchQuery || filterBy !== 'all' + ? 'No unscheduled tasks match your filters' + : 'No unscheduled tasks. Drag tasks to the calendar below to schedule them!' + } +

+
+ ) : ( + <> +
+ Unscheduled Tasks - Drag to calendar below to schedule +
+ {unscheduledTasks.map((task) => ( +
handleDragStart(task.id, e)} + onDragEnd={handleDragEnd} + className={`cursor-move transition-transform ${ + draggedTask === task.id ? 'opacity-50 scale-95' : 'hover:scale-[1.02]' + }`} + > + { + onTaskUpdate?.(task.id, { isTracking: true, timeTracked: task.timeTracked }); + console.log(`Timer started for ${task.title}`); + }} + onPause={() => { + onTaskUpdate?.(task.id, { isTracking: false }); + console.log(`Timer paused for ${task.title}`); + }} + onEdit={() => { + onTaskEdit?.(task); + console.log(`Edit task ${task.title}`); + }} + onStatusChange={(newStatus) => { + if (newStatus === 'done') { + handleTaskComplete(task); + } else { + onTaskUpdate?.(task.id, { status: newStatus }); + } + console.log(`Task ${task.title} status changed to ${newStatus}`); + }} + isDragging={draggedTask === task.id} + />
- ) : ( - <> -
- Unscheduled Tasks - Drag to calendar to schedule -
- {unscheduledTasks.map((task) => ( -
handleDragStart(task.id, e)} - onDragEnd={handleDragEnd} - className={`cursor-move transition-transform ${ - draggedTask === task.id ? 'opacity-50 scale-95' : 'hover:scale-[1.02]' - }`} - > - { - onTaskUpdate?.(task.id, { isTracking: true, timeTracked: task.timeTracked }); - console.log(`Timer started for ${task.title}`); - }} - onPause={() => { - onTaskUpdate?.(task.id, { isTracking: false }); - console.log(`Timer paused for ${task.title}`); - }} - onEdit={() => { - onTaskEdit?.(task); - console.log(`Edit task ${task.title}`); - }} - onStatusChange={(newStatus) => { - if (newStatus === 'done') { - handleTaskComplete(task); - } else { - onTaskUpdate?.(task.id, { status: newStatus }); - } - console.log(`Task ${task.title} status changed to ${newStatus}`); - }} - isDragging={draggedTask === task.id} - /> -
- ))} - - )} -
- + ))} + + )} +
- - {/* Calendar Header */} -
-
- -

- Next Two Weeks -

-
+ {/* Calendar Section */} +
+ {/* Calendar Header */} +
+
+ +

+ Next 7 Days +

+
+ +
+ -
- - - -
+
+
- {/* Calendar Grid */} -
+ {/* Horizontal Scrollable Calendar */} +
+
{dates.map((date, index) => { const dayTasks = getTasksForDate(date); const isToday = isSameDay(date, new Date()); @@ -330,7 +314,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T return ( -
+
{format(date, 'EEE')}
- {format(date, 'd')} + {format(date, 'MMM d')}
-
- {dayTasks.slice(0, 3).map((task) => ( +
+ {dayTasks.slice(0, 2).map((task) => (
-
+
{task.title}
))} - {dayTasks.length > 3 && ( + {dayTasks.length > 2 && ( - +{dayTasks.length - 3} more + +{dayTasks.length - 2} )} - {dayTasks.length === 0 && draggedTask && ( -
- Drop task here + {dayTasks.length === 0 && ( +
+ {draggedTask ? 'Drop here' : 'No tasks'}
)}
@@ -392,24 +380,13 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T ); })}
- - {/* Calendar Legend */} -
-
-
- Today -
-
-
- Weekend -
-
-
- Drop zone -
-
- - +
+ + {/* Calendar Instructions */} +
+ Drag tasks from above to schedule them • Use arrow buttons to see more days +
+
{/* Time Completion Modal */}