Add Year pagination to calendar

ollieri3 · Jan 3, 2024 · 73551f2 · 73551f2
1 parent a2463bc
commit 73551f2
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/controllers/calendar.ts b/src/controllers/calendar.ts
@@ -17,10 +17,19 @@ export async function getCalendar(
     });
     paramSchema.parse(req.params.year);
 
-    const [userActivated, userDays] = await Promise.all([
-      user.isActive((req.user as any).id),
-      day.getAllForUserInYear((req.user as any).id, req.params.year),
-    ]);
+    const [userActivated, userDays, previousYearDays, nextYearDays] =
+      await Promise.all([
+        user.isActive((req.user as any).id),
+        day.getAllForUserInYear((req.user as any).id, req.params.year),
+        day.getAllForUserInYear(
+          (req.user as any).id,
+          `${parseInt(req.params.year) - 1}`,
+        ),
+        day.getAllForUserInYear(
+          (req.user as any).id,
+          `${parseInt(req.params.year) + 1}`,
+        ),
+      ]);
 
     const months = dayjs.monthsShort().map((month, index) => {
       const monthDate = dayjs(new Date(+req.params.year, index));
@@ -46,6 +55,12 @@ export async function getCalendar(
       userNotActive: userActivated === false,
       userHasNoDaysComplete: userDays.length === 0,
       today: dayjs().format("YYYY-MM-DD"),
+      year: req.params.year,
+      prevYear: parseInt(req.params.year) - 1,
+      nextYear: parseInt(req.params.year) + 1,
+      showYearNav: previousYearDays.length > 0 || nextYearDays.length > 0,
+      hidePrevYearLink: previousYearDays.length < 1,
+      hideNextYearLink: nextYearDays.length < 1,
     });
   } catch (err) {
     next(err);

diff --git a/src/views/layouts/main.handlebars b/src/views/layouts/main.handlebars
@@ -45,9 +45,18 @@
   <body class="h-full flex flex-col">
 
     <header class="w-full border-b p-5 shadow-sm">
-      <div class="flex items-center justify-between max-w-7xl m-auto">
-        <a href="/" class="inline-block text-xl font-medium">Daily Do It.</a>
-        <nav class="flex items-center gap-5 justify-center">
+      <div class="flex items-center justify-between max-w-7xl m-auto flex-wrap">
+        <a href="/" class="inline-block text-xl font-medium order-1">Daily Do It.</a>
+
+        {{#if showYearNav}}
+          <div class="md:order-2 md:flex-grow-0 md:mt-0 md:w-auto order-3 flex-grow-1 w-full flex justify-between items-baseline gap-6 mt-4 border-solid border border-gray-300 rounded-xl px-4 py-2">
+            <a class="w-8 text-center {{#if hidePrevYearLink}}invisible{{/if}}"href="/calendar/{{prevYear}}">←</a>
+            <a class="font-light text-slate-500">{{year}}</a>
+            <a class="w-8 text-center {{#if hideNextYearLink}}invisible{{/if}}"href="/calendar/{{nextYear}}">→</a>
+          </div>
+        {{/if}}
+
+        <nav class="flex items-center gap-5 justify-center order-2">
           {{#if user}}
             <form action="/signout" method="post" class="mb-0">
               <input type="hidden" name="_csrf" value="{{_csrfToken}}" />