From 9a3af24f722d22a43b61c3b1e646956c07d4838b Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 19 Apr 2024 12:34:28 +0200
Subject: [PATCH] Only show future appointments

---
 .../src/components/cockpit/CockpitDates.vue   | 33 +++++++++++++++----
 client/src/composables.ts                     | 17 ++++++++++
 .../pages/dashboard/DashboardDueDatesPage.vue |  2 +-
 server/vbv_lernwelt/dashboard/views.py        | 14 ++++----
 4 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/client/src/components/cockpit/CockpitDates.vue b/client/src/components/cockpit/CockpitDates.vue
index 2eb89c32..fa672504 100644
--- a/client/src/components/cockpit/CockpitDates.vue
+++ b/client/src/components/cockpit/CockpitDates.vue
@@ -1,31 +1,50 @@
 <script setup lang="ts">
-import { useCurrentCourseSession } from "@/composables";
+import { useCurrentCourseSession, useDashboardPersons } from "@/composables";
 import DueDateSingle from "@/components/dueDates/DueDateSingle.vue";
 import { computed } from "vue";
 import { useExpertCockpitStore } from "@/stores/expertCockpit";
+import _ from "lodash";
+import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
 
 const expertCockpitStore = useExpertCockpitStore();
 const courseSession = useCurrentCourseSession();
 
+const courseSessionId = courseSession.value.id;
+
+const { loading: loadingDates, currentDueDates } = useDashboardPersons();
+
 const circleDates = computed(() => {
-  const dueDates = courseSession.value.due_dates.filter((dueDate) => {
-    if (!expertCockpitStore.currentCircle) return false;
-    return expertCockpitStore.currentCircle.id == dueDate?.circle?.id;
+  const courseSessionId = courseSession.value.id;
+  const circleId = expertCockpitStore.currentCircle?.id ?? "0";
+  const dueDates = currentDueDates.value.filter((dueDate) => {
+    return (
+      dueDate.course_session_id === courseSessionId && dueDate.circle?.id === circleId
+    );
   });
-  return dueDates.slice(0, 4);
+  return _.take(dueDates, 3);
 });
 </script>
 
 <template>
-  <div class="flex flex-col space-y-2">
+  <div v-if="loadingDates" class="m-8 flex justify-center">
+    <LoadingSpinner />
+  </div>
+  <div v-else class="flex flex-col space-y-2">
     <h3 class="heading-3">{{ $t("Nächste Termine") }}</h3>
     <div
       v-for="dueDate in circleDates"
       :key="dueDate.id"
       class="border-t border-gray-500 pt-2"
     >
-      <DueDateSingle :due-date="dueDate" :single-line="true"></DueDateSingle>
+      <DueDateSingle :due-date="dueDate"></DueDateSingle>
     </div>
     <div v-if="circleDates.length === 0">{{ $t("dueDates.noDueDatesAvailable") }}</div>
   </div>
+
+  <router-link
+    class="btn-secondary mt-4"
+    :to="`/dashboard/due-dates?session=${courseSessionId}`"
+  >
+    {{ $t("a.Alle Termine anzeigen") }}
+  </router-link>
 </template>
diff --git a/client/src/composables.ts b/client/src/composables.ts
index 8cc0f03e..c733f092 100644
--- a/client/src/composables.ts
+++ b/client/src/composables.ts
@@ -34,6 +34,7 @@ import type {
   PerformanceCriteria,
 } from "@/types";
 import { useQuery } from "@urql/vue";
+import dayjs from "dayjs";
 import { t } from "i18next";
 import orderBy from "lodash/orderBy";
 import log from "loglevel";
@@ -502,6 +503,9 @@ export function useDashboardPersons() {
   const dashboardDueDates = ref<DashboardDueDate[]>([]);
   const loading = ref(false);
 
+  // due dates from today to the next year
+  const currentDueDates = ref<DashboardDueDate[]>([]);
+
   const fetchData = async () => {
     loading.value = true;
     try {
@@ -519,6 +523,18 @@ export function useDashboardPersons() {
         }
         return dueDate;
       });
+
+      currentDueDates.value = dashboardDueDates.value.filter((dueDate) => {
+        let refDate = dayjs(dueDate.start);
+        if (dueDate.end) {
+          refDate = dayjs(dueDate.end);
+        }
+
+        return (
+          refDate >= dayjs().startOf("day") &&
+          refDate <= dayjs().add(1, "year").endOf("day")
+        );
+      });
     } catch (error) {
       console.error("Error fetching data:", error);
     } finally {
@@ -531,6 +547,7 @@ export function useDashboardPersons() {
   return {
     dashboardPersons,
     dashboardDueDates,
+    currentDueDates,
     loading,
   };
 }
diff --git a/client/src/pages/dashboard/DashboardDueDatesPage.vue b/client/src/pages/dashboard/DashboardDueDatesPage.vue
index f427ee25..cb1397b7 100644
--- a/client/src/pages/dashboard/DashboardDueDatesPage.vue
+++ b/client/src/pages/dashboard/DashboardDueDatesPage.vue
@@ -24,7 +24,7 @@ type CourseItem = DropboxItem & {
 
 const { t } = useTranslation();
 
-const { loading, dashboardDueDates } = useDashboardPersons();
+const { loading, currentDueDates: dashboardDueDates } = useDashboardPersons();
 
 const courses = computed(() => {
   return [
diff --git a/server/vbv_lernwelt/dashboard/views.py b/server/vbv_lernwelt/dashboard/views.py
index 6011354a..bac8875f 100644
--- a/server/vbv_lernwelt/dashboard/views.py
+++ b/server/vbv_lernwelt/dashboard/views.py
@@ -248,13 +248,13 @@ def get_dashboard_due_dates(request):
         due_dates = []
         today = date.today()
         for due_date in all_due_dates:
-            due_dates.append(due_date)
-            # if due_date.end:
-            #     if due_date.end.date() >= today:
-            #         due_dates.append(due_date)
-            # elif due_date.start:
-            #     if due_date.start.date() >= today:
-            #         due_dates.append(due_date)
+            # due_dates.append(due_date)
+            if due_date.end:
+                if due_date.end.date() >= today:
+                    due_dates.append(due_date)
+            elif due_date.start:
+                if due_date.start.date() >= today:
+                    due_dates.append(due_date)
 
         due_dates.sort(key=lambda x: x.start)