chore: due dates list refactor

client/src/components/dueDates/DueDatesList.vue

@@ -7,6 +7,8 @@ const props = defineProps<{
   maxCount: number;
   dueDates: DueDate[];
   showTopBorder: boolean;
+  showBottomBorder: boolean;
+  showAllDueDatesLink: boolean;
 }>();
 
 const allDueDates = computed(() => {
@@ -20,7 +22,7 @@ const dueDatesDisplayed = computed(() => {
 
 <template>
   <div>
-    <ul>
+    <ul :class="showBottomBorder ? '' : 'no-border-last'">
       <li
         v-for="dueDate in dueDatesDisplayed"
         :key="dueDate.id"
@@ -29,11 +31,19 @@ const dueDatesDisplayed = computed(() => {
         <DueDateSingle :due-date="dueDate"></DueDateSingle>
       </li>
     </ul>
-    <div v-if="allDueDates.length > props.maxCount" class="flex items-center pt-6">
+    <div v-if="allDueDates.length === 0">{{ $t("dueDates.noDueDatesAvailable") }}</div>
-      <!--a href="">{{ $t("dueDates.showAllDueDates") }}</a-->
+    <div
+      v-if="showAllDueDatesLink && allDueDates.length > 0"
+      class="flex items-center pt-6"
+    >
+      <a href="/appointments">{{ $t("dueDates.showAllDueDates") }}</a>
       <it-icon-arrow-right />
     </div>
-
-    <div v-if="allDueDates.length === 0">{{ $t("dueDates.noDueDatesAvailable") }}</div>
   </div>
 </template>
+
+<style lang="postcss" scoped>
+.no-border-last li:last-child {
+  border-bottom: none !important;
+}
+</style>

client/src/components/dueDates/DueDatesShortList.vue

@@ -4,6 +4,8 @@
       :due-dates="allDueDates"
       :max-count="props.maxCount"
       :show-top-border="props.showTopBorder"
+      show-all-due-dates-link
+      show-bottom-border
     ></DueDatesList>
   </div>
 </template>

client/src/components/header/MainNavigationBar.vue

@@ -174,16 +174,6 @@ onMounted(() => {
             </div>
 
             <div class="flex items-stretch justify-start space-x-8">
-              <router-link
-                v-if="userStore.loggedIn"
-                :to="appointmentsUrl"
-                data-cy="all-duedates-link"
-                class="nav-item"
-                :class="{ 'nav-item--active': inAppointments() }"
-              >
-                <it-icon-calendar-light class="h-8 w-8" />
-              </router-link>
-
               <router-link
                 v-if="inCourse() && courseSessionsStore.currentCourseSession"
                 :to="courseSessionsStore.currentCourseSession.media_library_url"
@@ -194,6 +184,16 @@ onMounted(() => {
                 <it-icon-media-library class="h-8 w-8" />
               </router-link>
 
+              <router-link
+                v-if="userStore.loggedIn"
+                :to="appointmentsUrl"
+                data-cy="all-duedates-link"
+                class="nav-item"
+                :class="{ 'nav-item--active': inAppointments() }"
+              >
+                <it-icon-calendar-light class="h-8 w-8" />
+              </router-link>
+
               <!-- Notification Bell & Menu -->
               <div v-if="userStore.loggedIn" class="nav-item leading-none">
                 <NotificationPopover>

client/src/pages/AppointmentsPage.vue

@@ -5,7 +5,7 @@ import { useLearningPathStore } from "@/stores/learningPath";
 import { useTranslation } from "i18next-vue";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import type { DueDate } from "@/types";
-import DueDateSingle from "@/components/dueDates/DueDateSingle.vue";
+import DueDatesList from "@/components/dueDates/DueDatesList.vue";
 
 const { t } = useTranslation();
 
@@ -95,6 +95,15 @@ const isMatchingSession = (dueDate: DueDate) =>
 const isMatchingCircle = (dueDate: DueDate) =>
   selectedCircle.value.id === UNFILTERED ||
   dueDate.circle?.id === selectedCircle.value.id;
+
+const numAppointmentsToShow = ref(7);
+const canLoadMore = computed(() => {
+  return numAppointmentsToShow.value < appointments.value.length;
+});
+
+async function loadAdditionalAppointments() {
+  numAppointmentsToShow.value *= 2;
+}
 </script>
 
 <template>
@@ -105,7 +114,7 @@ const isMatchingCircle = (dueDate: DueDate) =>
       </header>
       <main>
         <div class="flex flex-col space-y-2">
-          <div class="flex flex-col space-x-3 bg-white lg:flex-row">
+          <div class="flex flex-col space-x-0 bg-white lg:flex-row lg:space-x-3">
             <ItDropdownSelect
               v-model="selectedSession"
               :items="courseSessions"
@@ -120,18 +129,21 @@ const isMatchingCircle = (dueDate: DueDate) =>
             </template>
           </div>
           <div class="bg-white px-5">
-            <ul class="no-border-last">
+            <DueDatesList
-              <li
+              :show-top-border="false"
-                v-for="appointment in appointments"
+              :show-bottom-border="canLoadMore"
-                :key="appointment.id"
+              :due-dates="appointments"
-                class="border-b"
+              :show-all-due-dates-link="false"
+              :max-count="numAppointmentsToShow"
+            />
+            <button
+              v-if="canLoadMore"
+              class="py-4 underline"
+              data-cy="load-more-notifications"
+              @click="loadAdditionalAppointments()"
             >
-                <DueDateSingle :due-date="appointment"></DueDateSingle>
+              {{ $t("notifications.load_more") }}
-              </li>
+            </button>
-            </ul>
-            <div v-if="appointments.length === 0" class="w-full py-5">
-              {{ $t("dueDates.noDueDatesAvailable") }}
-            </div>
           </div>
         </div>
       </main>

client/src/pages/DashboardPage.vue

@@ -71,6 +71,8 @@ const getNextStepLink = (courseSession: CourseSession) => {
               :due-dates="allDueDates"
               :max-count="13"
               :show-top-border="false"
+              :show-all-due-dates-link="true"
+              :show-bottom-border="true"
             ></DueDatesList>
           </div>
         </div>