chore: clean up the appointment filtering

client/src/pages/AppointmentsPage.vue

@@ -3,81 +3,82 @@ import { computed, ref, watch } from "vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useLearningPathStore } from "@/stores/learningPath";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
+import type { DueDate } from "@/types";
 
 const UNFILTERED = Number.MAX_SAFE_INTEGER;
 
 const courseSessionsStore = useCourseSessionsStore();
 const learningPathStore = useLearningPathStore();
 
-function getCourseSession(id: number) {
+type Item = {
-  return courseSessionsStore.allCourseSessions.find((cs) => cs.id === id);
+  id: number;
-}
+  name: string;
+};
 
-const allItem = {
+const initialItem: Item = {
   id: UNFILTERED,
   name: "Alle",
 };
 
-const circles = ref([{ ...allItem }]);
+const circles = ref<Item[]>([initialItem]);
 
-const courseSessions = [
+const courseSessions: Item[] = [
-  { ...allItem },
+  initialItem,
-  ...courseSessionsStore.allCourseSessions.map((courseSession) => ({
+  ...courseSessionsStore.allCourseSessions.map((cs) => ({ id: cs.id, name: cs.title })),
-    id: courseSession.id,
-    name: courseSession.title,
-  })),
 ];
 
-const selectedSession = ref(courseSessions[0]);
+const selectedSession = ref<Item>(courseSessions[0]);
-const selectedCircle = ref(circles.value[0]);
+const selectedCircle = ref<Item>(circles.value[0]);
 
 watch(selectedSession, async () => {
-  const cs = getCourseSession(selectedSession.value.id);
+  const isUnfiltered = selectedSession.value.id === UNFILTERED;
+  const courseSession = courseSessionsStore.allCourseSessions.find(
+    (item) => item.id === selectedSession.value.id
+  );
 
-  if (selectedSession.value.id === UNFILTERED || !cs) {
+  if (!courseSession || isUnfiltered) {
-    circles.value = [{ ...allItem }];
+    resetCircles();
-    selectedCircle.value = circles.value[0];
     return;
   }
 
   const data = await learningPathStore.loadLearningPath(
-    cs.course.slug + "-lp",
+    `${courseSession.course.slug}-lp`,
     undefined,
     false,
     false
   );
 
-  circles.value =
+  updateCircles(data?.circles);
-    data?.circles.map((circle) => ({
-      id: circle.id,
-      name: circle.title,
-    })) || [];
-
-  circles.value = [{ ...allItem }, ...circles.value];
-  selectedCircle.value = circles.value[0];
 });
 
+const resetCircles = () => {
+  circles.value = [initialItem];
+  selectedCircle.value = circles.value[0];
+};
+
+const updateCircles = (newCircles?: { id: number; title: string }[]) => {
+  circles.value = newCircles
+    ? [
+        initialItem,
+        ...newCircles.map((circle) => ({ id: circle.id, name: circle.title })),
+      ]
+    : [initialItem];
+  selectedCircle.value = circles.value[0];
+};
+
 const appointments = computed(() => {
-  console.log("recomputing appointments");
+  return courseSessionsStore
-  console.log("current session", selectedSession.value.name);
-  console.log("current circle", selectedCircle.value.name);
-  const filtered = courseSessionsStore
     .allDueDates()
-    .filter(
+    .filter((dueDate) => isMatchingSession(dueDate) && isMatchingCircle(dueDate));
-      (appointment) =>
-        // first filter by course session
-        selectedSession.value.id === UNFILTERED ||
-        appointment.course_session === selectedSession.value.id
-    )
-    .filter(
-      (appointment) =>
-        // then filter by circle
-        selectedCircle.value.id === UNFILTERED ||
-        appointment.circle?.id === selectedCircle.value.id
-    );
-  console.table(filtered);
-  return filtered;
 });
+
+const isMatchingSession = (dueDate: DueDate) =>
+  selectedSession.value.id === UNFILTERED ||
+  dueDate.course_session === selectedSession.value.id;
+
+const isMatchingCircle = (dueDate: DueDate) =>
+  selectedCircle.value.id === UNFILTERED ||
+  dueDate.circle?.id === selectedCircle.value.id;
 </script>
 
 <template>