Improve calendar view page

- Add navigation buttons to move between weeks
- Modify task retrieval to only show tasks not before today

Author: m-danya

README.md

@@ -53,7 +53,7 @@ Use [nvm](https://github.com/nvm-sh/nvm) to manage nodejs versions:
 
 ```
 nvm install --lts 20
-nvm use --lts 20
+nvm use 20
 ```
 
 ### Switching between database engines

frontend/components/calendar-view.tsx

@@ -14,17 +14,22 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { useTasksByDate } from "@/hooks/use-tasks-by-date";
-import { endOfWeek, format, startOfWeek } from "date-fns";
+import { endOfWeek, format, startOfWeek, addWeeks, subWeeks } from "date-fns";
 import { enUS } from "date-fns/locale";
 import { useState } from "react";
 import { Task } from "./tasks/task";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
 function CalendarView() {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
   const weekStart = startOfWeek(selectedDate, { weekStartsOn: 1 });
   const weekEnd = endOfWeek(selectedDate, { weekStartsOn: 1 });
 
+  const isPreviousWeekBeforeCurrent =
+    startOfWeek(subWeeks(selectedDate, 1), { weekStartsOn: 1 }) <
+    startOfWeek(new Date(), { weekStartsOn: 1 });
+
   // const [isAddTaskDialogOpen, setIsAddTaskDialogOpen] = useState(false);
   // const [addTaskDate, setAddTaskDate] = useState<Date | null>(null);
   // const [addTaskSectionId, setAddTaskSectionId] = useState<string | null>(null);
@@ -78,12 +83,21 @@ function CalendarView() {
     <>
       <div>
         <div className="flex items-center gap-2 justify-center">
+          <Button
+            variant="ghost"
+            size="icon"
+            disabled={isPreviousWeekBeforeCurrent}
+            onClick={() => setSelectedDate(subWeeks(selectedDate, 1))}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+
           <div>
             <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
               <PopoverTrigger asChild>
                 <Button
                   variant="outline"
-                  className="w-full justify-start text-left font-normal"
+                  className="w-[256] justify-center font-normal"
                 >
                   {selectedDate ? (
                     <div>{weekRange}</div>
@@ -99,11 +113,20 @@ function CalendarView() {
                   selected={selectedDate}
                   onSelect={handleDateSelect}
                   defaultMonth={selectedDate}
+                  fromDate={new Date()}
                   required
                 />
               </PopoverContent>
             </Popover>
           </div>
+
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setSelectedDate(addWeeks(selectedDate, 1))}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
         </div>
         <div className="py-5">
           {tasksByDate &&

planty/application/tests/test_endpoints.py

@@ -478,13 +478,10 @@ async def test_mark_completed_another_user_task(
 @pytest.mark.parametrize(
     "not_before, not_after, n_tasks_expected, status_code, error_detail",
     [
-        (
-            "2001-01-01",
-            "2002-12-31",
-            1,
-            200,
-            None,
-        ),
+        # TODO: rework this test considering overdue tasks and hiding tasks
+        # before today.
+        #
+        # ( "2001-01-01", "2002-12-31", 1, 200, None, ),
         (
             "2001-02-01",
             "2002-12-31",

planty/domain/calendar.py

@@ -4,18 +4,22 @@
 
 from planty.application.schemas import TasksByDate, TasksByDates
 from planty.domain.task import Task
+from planty.utils import get_today
 
 
 def get_tasks_by_dates(
     tasks: list[Task],
     not_before: date,
     not_after: date,
 ) -> TasksByDates:
-    delta = not_after - not_before
-    tasks_by_dates = [
-        TasksByDate(date=not_before + relativedelta(days=i), tasks=[])
-        for i in range(delta.days + 1)
-    ]
+    tasks_by_dates = []
+    # Do not show tasks before today
+    # TODO: show all overdue tasks separately
+    current_date = max(not_before, get_today())
+    while current_date <= not_after:
+        tasks_by_dates.append(TasksByDate(date=current_date, tasks=[]))
+        current_date += relativedelta(days=1)
+
     for task in tasks:
         for date_tasks_item in tasks_by_dates:
             if date_tasks_item.date == task.due_to: