From 97edbbd751b182224d7e37d7b1e229219307750b Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Mon, 25 Sep 2023 17:13:27 +0200
Subject: [PATCH 01/19] wip: expose url for expert in duedate model

---
 server/vbv_lernwelt/course_session/models.py  | 14 +++++++++++
 server/vbv_lernwelt/duedate/admin.py          |  1 +
 .../migrations/0005_auto_20230925_1648.py     | 23 +++++++++++++++++++
 server/vbv_lernwelt/duedate/models.py         |  8 ++++++-
 server/vbv_lernwelt/duedate/serializers.py    |  4 ++++
 5 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py

diff --git a/server/vbv_lernwelt/course_session/models.py b/server/vbv_lernwelt/course_session/models.py
index 33ac4e6b..d72199a7 100644
--- a/server/vbv_lernwelt/course_session/models.py
+++ b/server/vbv_lernwelt/course_session/models.py
@@ -63,7 +63,11 @@ class CourseSessionAttendanceCourse(models.Model):
                 )
 
             if not self.due_date.manual_override_fields:
+                course = self.learning_content.get_course()
+
                 self.due_date.url = self.learning_content.get_frontend_url()
+                # TODO: @livioso move this to the learning content?
+                self.due_date.url_expert = f"/course/{course.slug}/cockpit/attendance?id={self.learning_content_id}"
                 self.due_date.title = self.learning_content.title
                 self.due_date.page = self.learning_content.page_ptr
                 self.due_date.assignment_type_translation_key = (
@@ -130,6 +134,12 @@ class CourseSessionAssignment(models.Model):
                 AssignmentType.REFLECTION.value: "learningContentTypes.reflection",
             }
 
+            # TODO @livioso move this to the learning content?
+            course = self.learning_content.get_course()
+            url_expert = (
+                f"/course/{course.slug}/cockpit/assignment/{self.learning_content_id}"
+            )
+
             if assignment_type in (
                 AssignmentType.CASEWORK.value,
                 AssignmentType.PREP_ASSIGNMENT.value,
@@ -141,6 +151,8 @@ class CourseSessionAssignment(models.Model):
 
                 if not self.submission_deadline.manual_override_fields:
                     self.submission_deadline.url = url
+                    # TODO: @livioso check what's expected here
+                    self.submission_deadline.url_expert = url_expert
                     self.submission_deadline.title = title
                     self.submission_deadline.assignment_type_translation_key = (
                         assignment_type_translation_keys[assignment_type]
@@ -160,6 +172,7 @@ class CourseSessionAssignment(models.Model):
 
                 if not self.evaluation_deadline.manual_override_fields:
                     self.evaluation_deadline.url = url
+                    self.submission_deadline.url_expert = url_expert
                     self.evaluation_deadline.title = title
                     self.evaluation_deadline.assignment_type_translation_key = (
                         assignment_type_translation_keys[assignment_type]
@@ -208,6 +221,7 @@ class CourseSessionEdoniqTest(models.Model):
 
             if not self.deadline.manual_override_fields:
                 self.deadline.url = self.learning_content.get_frontend_url()
+                self.deadline.expert_url = self.learning_content.get_expert_url()
                 self.deadline.title = self.learning_content.title
                 self.deadline.page = self.learning_content.page_ptr
                 self.deadline.assignment_type_translation_key = (
diff --git a/server/vbv_lernwelt/duedate/admin.py b/server/vbv_lernwelt/duedate/admin.py
index dcaf2359..048f4dee 100644
--- a/server/vbv_lernwelt/duedate/admin.py
+++ b/server/vbv_lernwelt/duedate/admin.py
@@ -38,6 +38,7 @@ class DueDateAdmin(admin.ModelAdmin):
                 "assignment_type_translation_key",
                 "date_type_translation_key",
                 "url",
+                "url_expert",
             ]
 
         return default_readonly
diff --git a/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py b/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py
new file mode 100644
index 00000000..b73e904d
--- /dev/null
+++ b/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py
@@ -0,0 +1,23 @@
+# Generated by Django 3.2.20 on 2023-09-25 14:48
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('duedate', '0004_alter_duedate_start'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='duedate',
+            name='url_expert',
+            field=models.CharField(blank=True, default='', help_text='URL wird aus dem LearningContent generiert (sichtbar für den Experten/Trainer)', max_length=1024),
+        ),
+        migrations.AlterField(
+            model_name='duedate',
+            name='url',
+            field=models.CharField(blank=True, default='', help_text='URL wird vom LearningContent übernommen (sichtbar für Member/Teilnehmer)', max_length=1024),
+        ),
+    ]
diff --git a/server/vbv_lernwelt/duedate/models.py b/server/vbv_lernwelt/duedate/models.py
index 5156bb59..a5ba2854 100644
--- a/server/vbv_lernwelt/duedate/models.py
+++ b/server/vbv_lernwelt/duedate/models.py
@@ -45,7 +45,13 @@ class DueDate(models.Model):
         default="",
         blank=True,
         max_length=1024,
-        help_text="URL wird vom LearningContent übernommen",
+        help_text="URL wird vom LearningContent übernommen (sichtbar für Member/Teilnehmer)",
+    )
+    url_expert = models.CharField(
+        default="",
+        blank=True,
+        max_length=1024,
+        help_text="URL wird aus dem LearningContent generiert (sichtbar für den Experten/Trainer)",
     )
     course_session = models.ForeignKey(
         "course.CourseSession",
diff --git a/server/vbv_lernwelt/duedate/serializers.py b/server/vbv_lernwelt/duedate/serializers.py
index 425f8b01..3e2bc427 100644
--- a/server/vbv_lernwelt/duedate/serializers.py
+++ b/server/vbv_lernwelt/duedate/serializers.py
@@ -17,6 +17,7 @@ class DueDateSerializer(serializers.ModelSerializer):
             "date_type_translation_key",
             "subtitle",
             "url",
+            "url_expert",
             "course_session",
             "page",
             "circle",
@@ -24,6 +25,9 @@ class DueDateSerializer(serializers.ModelSerializer):
 
     def get_circle(self, obj):
         circle = obj.get_circle()
+
+        page = obj.page
+
         if circle:
             return {
                 "id": circle.id,

From 9fc62607811666c72665122a9bec29f1ce6b7490 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Mon, 25 Sep 2023 17:15:33 +0200
Subject: [PATCH 02/19] revert: snafu unused debugging variable

---
 server/vbv_lernwelt/duedate/serializers.py | 2 --
 1 file changed, 2 deletions(-)

diff --git a/server/vbv_lernwelt/duedate/serializers.py b/server/vbv_lernwelt/duedate/serializers.py
index 3e2bc427..5529a924 100644
--- a/server/vbv_lernwelt/duedate/serializers.py
+++ b/server/vbv_lernwelt/duedate/serializers.py
@@ -26,8 +26,6 @@ class DueDateSerializer(serializers.ModelSerializer):
     def get_circle(self, obj):
         circle = obj.get_circle()
 
-        page = obj.page
-
         if circle:
             return {
                 "id": circle.id,

From 18bbc6701c0c1b7270ca29acf4aa1ead8bade2fc Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Mon, 25 Sep 2023 17:24:50 +0200
Subject: [PATCH 03/19] fix: due date CI errors fixes

---
 server/vbv_lernwelt/course_session/models.py  |  2 +-
 .../migrations/0005_auto_20230925_1648.py     | 25 +++++++++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/server/vbv_lernwelt/course_session/models.py b/server/vbv_lernwelt/course_session/models.py
index d72199a7..e54aa503 100644
--- a/server/vbv_lernwelt/course_session/models.py
+++ b/server/vbv_lernwelt/course_session/models.py
@@ -221,7 +221,7 @@ class CourseSessionEdoniqTest(models.Model):
 
             if not self.deadline.manual_override_fields:
                 self.deadline.url = self.learning_content.get_frontend_url()
-                self.deadline.expert_url = self.learning_content.get_expert_url()
+                self.deadline.expert_url = self.learning_content.get_frontend_url()
                 self.deadline.title = self.learning_content.title
                 self.deadline.page = self.learning_content.page_ptr
                 self.deadline.assignment_type_translation_key = (
diff --git a/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py b/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py
index b73e904d..cc71a2be 100644
--- a/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py
+++ b/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py
@@ -4,20 +4,29 @@ from django.db import migrations, models
 
 
 class Migration(migrations.Migration):
-
     dependencies = [
-        ('duedate', '0004_alter_duedate_start'),
+        ("duedate", "0004_alter_duedate_start"),
     ]
 
     operations = [
         migrations.AddField(
-            model_name='duedate',
-            name='url_expert',
-            field=models.CharField(blank=True, default='', help_text='URL wird aus dem LearningContent generiert (sichtbar für den Experten/Trainer)', max_length=1024),
+            model_name="duedate",
+            name="url_expert",
+            field=models.CharField(
+                blank=True,
+                default="",
+                help_text="URL wird aus dem LearningContent generiert (sichtbar für den Experten/Trainer)",
+                max_length=1024,
+            ),
         ),
         migrations.AlterField(
-            model_name='duedate',
-            name='url',
-            field=models.CharField(blank=True, default='', help_text='URL wird vom LearningContent übernommen (sichtbar für Member/Teilnehmer)', max_length=1024),
+            model_name="duedate",
+            name="url",
+            field=models.CharField(
+                blank=True,
+                default="",
+                help_text="URL wird vom LearningContent übernommen (sichtbar für Member/Teilnehmer)",
+                max_length=1024,
+            ),
         ),
     ]

From 4672698895ed7d4d8d803f9e3733ccdc7c75fae4 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Thu, 28 Sep 2023 17:08:22 +0200
Subject: [PATCH 04/19] wip: appointment filtering poc

---
 .../components/header/MainNavigationBar.vue   |  20 ++-
 client/src/pages/AppointmentsPage.vue         | 118 ++++++++++++++++++
 client/src/router/index.ts                    |   4 +
 client/src/utils/route.ts                     |  14 ++-
 4 files changed, 153 insertions(+), 3 deletions(-)
 create mode 100644 client/src/pages/AppointmentsPage.vue

diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index 09de45af..75792952 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -23,8 +23,14 @@ const breakpoints = useBreakpoints(breakpointsTailwind);
 const userStore = useUserStore();
 const courseSessionsStore = useCourseSessionsStore();
 const notificationsStore = useNotificationsStore();
-const { inCockpit, inCompetenceProfile, inCourse, inLearningPath, inMediaLibrary } =
-  useRouteLookups();
+const {
+  inCockpit,
+  inCompetenceProfile,
+  inCourse,
+  inLearningPath,
+  inMediaLibrary,
+  inDueDates,
+} = useRouteLookups();
 
 const { t } = useTranslation();
 const state = reactive({
@@ -159,6 +165,16 @@ onMounted(() => {
             </div>
 
             <div class="flex items-stretch justify-start space-x-8">
+              <router-link
+                v-if="userStore.loggedIn"
+                :to="`${''}/appointments`"
+                data-cy="all-duedates-link"
+                class="nav-item-no-mobile"
+                :class="{ 'nav-item--active': inDueDates() }"
+              >
+                <it-icon-media-library class="h-8 w-8" />
+              </router-link>
+
               <router-link
                 v-if="inCourse() && courseSessionsStore.currentCourseSession"
                 :to="courseSessionsStore.currentCourseSession.media_library_url"
diff --git a/client/src/pages/AppointmentsPage.vue b/client/src/pages/AppointmentsPage.vue
new file mode 100644
index 00000000..9d278388
--- /dev/null
+++ b/client/src/pages/AppointmentsPage.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useLearningPathStore } from "@/stores/learningPath";
+import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
+
+const UNFILTERED = Number.MAX_SAFE_INTEGER;
+
+const courseSessionsStore = useCourseSessionsStore();
+const learningPathStore = useLearningPathStore();
+
+function getCourseSession(id: number) {
+  return courseSessionsStore.allCourseSessions.find((cs) => cs.id === id);
+}
+
+const allItem = {
+  id: UNFILTERED,
+  name: "Alle",
+};
+
+const circles = ref([{ ...allItem }]);
+
+const courseSessions = [
+  { ...allItem },
+  ...courseSessionsStore.allCourseSessions.map((courseSession) => ({
+    id: courseSession.id,
+    name: courseSession.title,
+  })),
+];
+
+const selectedSession = ref(courseSessions[0]);
+const selectedCircle = ref(circles.value[0]);
+
+watch(selectedSession, async () => {
+  const cs = getCourseSession(selectedSession.value.id);
+
+  if (selectedSession.value.id === UNFILTERED || !cs) {
+    circles.value = [{ ...allItem }];
+    selectedCircle.value = circles.value[0];
+    return;
+  }
+
+  const data = await learningPathStore.loadLearningPath(
+    cs.course.slug + "-lp",
+    undefined,
+    false,
+    false
+  );
+
+  circles.value =
+    data?.circles.map((circle) => ({
+      id: circle.id,
+      name: circle.title,
+    })) || [];
+
+  circles.value = [{ ...allItem }, ...circles.value];
+  selectedCircle.value = circles.value[0];
+});
+
+const appointments = computed(() => {
+  console.log("recomputing appointments");
+  console.log("current session", selectedSession.value.name);
+  console.log("current circle", selectedCircle.value.name);
+  const filtered = courseSessionsStore
+    .allDueDates()
+    .filter(
+      (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;
+});
+</script>
+
+<template>
+  <div class="bg-gray-200">
+    <div class="container-large px-8 py-8">
+      <header class="mb-6">
+        <h1>{{ $t("a.AlleTermine") }}</h1>
+      </header>
+      <main>
+        <div class="col flex">
+          <span>{{ $t("a.Durchfuehrung") }}:</span>
+          <ItDropdownSelect
+            v-model="selectedSession"
+            class="mt-4 w-full lg:mt-0 lg:w-96"
+            :items="courseSessions"
+          ></ItDropdownSelect>
+          <template v-if="selectedSession.id !== UNFILTERED">
+            <span>{{ $t("a.Circle") }}:</span>
+            <ItDropdownSelect
+              v-model="selectedCircle"
+              class="mt-4 w-full lg:mt-0 lg:w-96"
+              :items="circles"
+            ></ItDropdownSelect>
+          </template>
+        </div>
+        <div class="bg-white px-4 py-4">
+          <ul>
+            <li v-for="appointment in appointments" :key="appointment.id">
+              {{ appointment.title }} - {{ appointment.start }}
+            </li>
+          </ul>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index dac7036f..80aa4add 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -183,6 +183,10 @@ const router = createRouter({
       path: "/notifications",
       component: () => import("@/pages/NotificationsPage.vue"),
     },
+    {
+      path: "/appointments",
+      component: () => import("@/pages/AppointmentsPage.vue"),
+    },
     {
       path: "/styleguide",
       component: () => import("../pages/StyleGuidePage.vue"),
diff --git a/client/src/utils/route.ts b/client/src/utils/route.ts
index 71f147a2..11a566a4 100644
--- a/client/src/utils/route.ts
+++ b/client/src/utils/route.ts
@@ -27,5 +27,17 @@ export function useRouteLookups() {
     return regex.test(route.path);
   }
 
-  return { inMediaLibrary, inCockpit, inLearningPath, inCompetenceProfile, inCourse };
+  function inDueDates() {
+    const regex = new RegExp("/[^/]+/duedates");
+    return regex.test(route.path);
+  }
+
+  return {
+    inMediaLibrary,
+    inCockpit,
+    inLearningPath,
+    inCompetenceProfile,
+    inCourse,
+    inDueDates,
+  };
 }

From daaecb57a077bfddd36a9e7816d38359161064aa Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Thu, 28 Sep 2023 17:44:07 +0200
Subject: [PATCH 05/19] fix: use trainer url

---
 .../src/components/dueDates/DueDateSingle.vue | 19 +++++++------------
 client/src/types.ts                           |  1 +
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/client/src/components/dueDates/DueDateSingle.vue b/client/src/components/dueDates/DueDateSingle.vue
index 8a5f179e..5ba7556c 100644
--- a/client/src/components/dueDates/DueDateSingle.vue
+++ b/client/src/components/dueDates/DueDateSingle.vue
@@ -8,19 +8,17 @@ const props = defineProps<{
   singleLine?: boolean;
 }>();
 
-/* FIXME @livioso 19.09.23: This is a temporary workaround to have a ship-able / deployable
-    version of the preview feature (VBV-516). The plan is to tackle the role-based
-    due dates calendar next (VBV-524) which will touch all usage of this component.
-    For now, just disable links for trainer / expert -> to reduce level of confusion ;)
-*/
 const courseSessionsStore = useCourseSessionsStore();
 const courseSession = courseSessionsStore.allCourseSessions.find(
   (cs: CourseSession) => cs.id === props.dueDate.course_session
 );
 
-const disableLink = courseSession
-  ? !courseSessionsStore.hasCockpit(courseSession)
-  : false;
+if (!courseSession) {
+  throw new Error("Course session not found");
+}
+
+const isExpert = courseSessionsStore.hasCockpit(courseSession);
+const url = isExpert ? props.dueDate.url_expert : props.dueDate.url;
 </script>
 
 <template>
@@ -30,12 +28,9 @@ const disableLink = courseSession
   >
     <div class="space-y-1">
       <div class="text-bold">
-        <a v-if="disableLink" class="underline" :href="props.dueDate.url">
+        <a class="underline" :href="url">
           {{ props.dueDate.title }}
         </a>
-        <template v-else>
-          {{ props.dueDate.title }}
-        </template>
       </div>
       <div class="text-small text-gray-900">
         <div v-if="props.dueDate.date_type_translation_key">
diff --git a/client/src/types.ts b/client/src/types.ts
index a300e47f..2efaeae6 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -630,6 +630,7 @@ export type DueDate = {
   date_type_translation_key: string;
   subtitle: string;
   url: string;
+  url_expert: string;
   course_session: number | null;
   page: number | null;
   circle: CircleLight | null;

From 86e7e0f82e8e9bb566e120e08517c55376cfa754 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Thu, 28 Sep 2023 17:44:38 +0200
Subject: [PATCH 06/19] chore: clean up the appointment filtering

---
 client/src/pages/AppointmentsPage.vue | 89 ++++++++++++++-------------
 1 file changed, 45 insertions(+), 44 deletions(-)

diff --git a/client/src/pages/AppointmentsPage.vue b/client/src/pages/AppointmentsPage.vue
index 9d278388..f96edb9b 100644
--- a/client/src/pages/AppointmentsPage.vue
+++ b/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) {
-  return courseSessionsStore.allCourseSessions.find((cs) => cs.id === id);
-}
+type Item = {
+  id: number;
+  name: string;
+};
 
-const allItem = {
+const initialItem: Item = {
   id: UNFILTERED,
   name: "Alle",
 };
 
-const circles = ref([{ ...allItem }]);
+const circles = ref<Item[]>([initialItem]);
 
-const courseSessions = [
-  { ...allItem },
-  ...courseSessionsStore.allCourseSessions.map((courseSession) => ({
-    id: courseSession.id,
-    name: courseSession.title,
-  })),
+const courseSessions: Item[] = [
+  initialItem,
+  ...courseSessionsStore.allCourseSessions.map((cs) => ({ id: cs.id, name: cs.title })),
 ];
 
-const selectedSession = ref(courseSessions[0]);
-const selectedCircle = ref(circles.value[0]);
+const selectedSession = ref<Item>(courseSessions[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) {
-    circles.value = [{ ...allItem }];
-    selectedCircle.value = circles.value[0];
+  if (!courseSession || isUnfiltered) {
+    resetCircles();
     return;
   }
 
   const data = await learningPathStore.loadLearningPath(
-    cs.course.slug + "-lp",
+    `${courseSession.course.slug}-lp`,
     undefined,
     false,
     false
   );
 
-  circles.value =
-    data?.circles.map((circle) => ({
-      id: circle.id,
-      name: circle.title,
-    })) || [];
-
-  circles.value = [{ ...allItem }, ...circles.value];
-  selectedCircle.value = circles.value[0];
+  updateCircles(data?.circles);
 });
 
+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");
-  console.log("current session", selectedSession.value.name);
-  console.log("current circle", selectedCircle.value.name);
-  const filtered = courseSessionsStore
+  return courseSessionsStore
     .allDueDates()
-    .filter(
-      (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;
+    .filter((dueDate) => isMatchingSession(dueDate) && isMatchingCircle(dueDate));
 });
+
+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>

From 540f8c7eb7288e75ccc8c33aaf272f94312f6d71 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Mon, 2 Oct 2023 09:20:26 +0200
Subject: [PATCH 07/19] chore: use new due date format

---
 .../src/components/dueDates/DueDateSingle.vue | 38 ++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/client/src/components/dueDates/DueDateSingle.vue b/client/src/components/dueDates/DueDateSingle.vue
index 5ba7556c..2fff8b4a 100644
--- a/client/src/components/dueDates/DueDateSingle.vue
+++ b/client/src/components/dueDates/DueDateSingle.vue
@@ -1,13 +1,18 @@
 <script lang="ts" setup>
-import { formatDueDate } from "@/components/dueDates/dueDatesUtils";
 import type { CourseSession, DueDate } from "@/types";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useTranslation } from "i18next-vue";
+import dayjs from "dayjs";
 
 const props = defineProps<{
   dueDate: DueDate;
   singleLine?: boolean;
 }>();
 
+const { t } = useTranslation();
+const dateType = t(props.dueDate.date_type_translation_key);
+const assignmentType = t(props.dueDate.assignment_type_translation_key);
+
 const courseSessionsStore = useCourseSessionsStore();
 const courseSession = courseSessionsStore.allCourseSessions.find(
   (cs: CourseSession) => cs.id === props.dueDate.course_session
@@ -27,23 +32,30 @@ const url = isExpert ? props.dueDate.url_expert : props.dueDate.url;
     :class="{ 'flex-col': props.singleLine, 'items-center': !props.singleLine }"
   >
     <div class="space-y-1">
-      <div class="text-bold">
+      <div>
         <a class="underline" :href="url">
-          {{ props.dueDate.title }}
+          <span class="text-bold">
+            {{ dayjs(props.dueDate.start).format("D. MMMM YYYY") }}:
+            <template v-if="dateType">
+              {{ dateType }}
+            </template>
+            <template v-else>
+              {{ assignmentType }}
+            </template>
+            {{ " " }}
+          </span>
+          <template v-if="assignmentType && dateType">
+            {{ assignmentType }}:
+            {{ props.dueDate.title }}
+          </template>
+          <template v-else>
+            {{ props.dueDate.title }}
+          </template>
         </a>
       </div>
       <div class="text-small text-gray-900">
-        <div v-if="props.dueDate.date_type_translation_key">
-          {{ $t(props.dueDate.assignment_type_translation_key) }}:
-          {{ $t(props.dueDate.date_type_translation_key) }}
-        </div>
-        <div v-else>
-          {{ $t(props.dueDate.assignment_type_translation_key) }}
-        </div>
+        <div>{{ $t("a.Circle") }} «{{ props.dueDate.circle?.title }}»</div>
       </div>
     </div>
-    <div>
-      {{ formatDueDate(props.dueDate.start, props.dueDate.end) }}
-    </div>
   </div>
 </template>

From 4068a3d3656cf6feebde534b3a76c58711666e26 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Mon, 2 Oct 2023 09:21:08 +0200
Subject: [PATCH 08/19] chore: course appointment route

---
 client/src/router/index.ts | 4 ++++
 client/src/utils/route.ts  | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 80aa4add..5267e651 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -187,6 +187,10 @@ const router = createRouter({
       path: "/appointments",
       component: () => import("@/pages/AppointmentsPage.vue"),
     },
+    {
+      path: "/course/:courseSlug/appointments",
+      component: () => import("@/pages/AppointmentsPage.vue"),
+    },
     {
       path: "/styleguide",
       component: () => import("../pages/StyleGuidePage.vue"),
diff --git a/client/src/utils/route.ts b/client/src/utils/route.ts
index 11a566a4..8f2a9b69 100644
--- a/client/src/utils/route.ts
+++ b/client/src/utils/route.ts
@@ -27,8 +27,8 @@ export function useRouteLookups() {
     return regex.test(route.path);
   }
 
-  function inDueDates() {
-    const regex = new RegExp("/[^/]+/duedates");
+  function inAppointments() {
+    const regex = new RegExp("/(?:[^/]+/)?appointments");
     return regex.test(route.path);
   }
 
@@ -38,6 +38,6 @@ export function useRouteLookups() {
     inLearningPath,
     inCompetenceProfile,
     inCourse,
-    inDueDates,
+    inAppointments: inAppointments,
   };
 }

From fd885d7b5e2ffaeee82374195bb1b10cb57cf698 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Mon, 2 Oct 2023 13:53:26 +0200
Subject: [PATCH 09/19] chore: styling

---
 client/src/components/ui/ItDropdownSelect.vue |  7 +-
 client/src/pages/AppointmentsPage.vue         | 99 ++++++++++++-------
 2 files changed, 69 insertions(+), 37 deletions(-)

diff --git a/client/src/components/ui/ItDropdownSelect.vue b/client/src/components/ui/ItDropdownSelect.vue
index 0c896c4b..9421c218 100644
--- a/client/src/components/ui/ItDropdownSelect.vue
+++ b/client/src/components/ui/ItDropdownSelect.vue
@@ -10,6 +10,7 @@ interface Props {
     name: string;
   };
   items?: DropdownSelectable[];
+  borderless?: boolean;
 }
 
 const emit = defineEmits<{
@@ -36,7 +37,11 @@ const dropdownSelected = computed<DropdownSelectable>({
   <Listbox v-model="dropdownSelected" as="div">
     <div class="relative mt-1 w-full">
       <ListboxButton
-        class="relative flex w-full cursor-default flex-row items-center border bg-white py-3 pl-5 pr-10 text-left font-bold"
+        class="relative flex w-full cursor-default flex-row items-center bg-white py-3 pl-5 pr-10 text-left"
+        :class="{
+          border: !props.borderless,
+          'font-bold': !props.borderless,
+        }"
       >
         <span v-if="dropdownSelected.iconName" class="mr-4">
           <component :is="dropdownSelected.iconName"></component>
diff --git a/client/src/pages/AppointmentsPage.vue b/client/src/pages/AppointmentsPage.vue
index f96edb9b..b615408c 100644
--- a/client/src/pages/AppointmentsPage.vue
+++ b/client/src/pages/AppointmentsPage.vue
@@ -2,11 +2,14 @@
 import { computed, ref, watch } from "vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 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";
+
+const { t } = useTranslation();
 
 const UNFILTERED = Number.MAX_SAFE_INTEGER;
-
 const courseSessionsStore = useCourseSessionsStore();
 const learningPathStore = useLearningPathStore();
 
@@ -15,22 +18,33 @@ type Item = {
   name: string;
 };
 
-const initialItem: Item = {
+const initialItemCircle: Item = {
   id: UNFILTERED,
-  name: "Alle",
+  name: t("a.AlleCircle"),
 };
 
-const circles = ref<Item[]>([initialItem]);
-
+const circles = ref<Item[]>([initialItemCircle]);
 const courseSessions: Item[] = [
-  initialItem,
+  {
+    id: UNFILTERED,
+    name: t("a.AlleDurchführungen"),
+  },
   ...courseSessionsStore.allCourseSessions.map((cs) => ({ id: cs.id, name: cs.title })),
 ];
 
 const selectedSession = ref<Item>(courseSessions[0]);
 const selectedCircle = ref<Item>(circles.value[0]);
 
+if (courseSessionsStore.currentCourseSession) {
+  selectedSession.value = {
+    id: courseSessionsStore.currentCourseSession.id,
+    name: courseSessionsStore.currentCourseSession.title,
+  };
+}
+
 watch(selectedSession, async () => {
+  // We don't have all circles for the unfiltered session,
+  // we fetch them from the learning path when the session changes
   const isUnfiltered = selectedSession.value.id === UNFILTERED;
   const courseSession = courseSessionsStore.allCourseSessions.find(
     (item) => item.id === selectedSession.value.id
@@ -48,21 +62,23 @@ watch(selectedSession, async () => {
     false
   );
 
-  updateCircles(data?.circles);
+  if (data) {
+    updateCircles(data.circles);
+  } else {
+    resetCircles();
+  }
 });
 
 const resetCircles = () => {
-  circles.value = [initialItem];
+  circles.value = [initialItemCircle];
   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];
+const updateCircles = (newCircles: { id: number; title: string }[]) => {
+  circles.value = [
+    initialItemCircle,
+    ...newCircles.map((circle) => ({ id: circle.id, name: circle.title })),
+  ];
   selectedCircle.value = circles.value[0];
 };
 
@@ -88,32 +104,43 @@ const isMatchingCircle = (dueDate: DueDate) =>
         <h1>{{ $t("a.AlleTermine") }}</h1>
       </header>
       <main>
-        <div class="col flex">
-          <span>{{ $t("a.Durchfuehrung") }}:</span>
-          <ItDropdownSelect
-            v-model="selectedSession"
-            class="mt-4 w-full lg:mt-0 lg:w-96"
-            :items="courseSessions"
-          ></ItDropdownSelect>
-          <template v-if="selectedSession.id !== UNFILTERED">
-            <span>{{ $t("a.Circle") }}:</span>
+        <div class="flex flex-col space-y-2">
+          <div class="flex flex-col space-x-3 bg-white lg:flex-row">
             <ItDropdownSelect
-              v-model="selectedCircle"
-              class="mt-4 w-full lg:mt-0 lg:w-96"
-              :items="circles"
+              v-model="selectedSession"
+              :items="courseSessions"
+              borderless
             ></ItDropdownSelect>
-          </template>
-        </div>
-        <div class="bg-white px-4 py-4">
-          <ul>
-            <li v-for="appointment in appointments" :key="appointment.id">
-              {{ appointment.title }} - {{ appointment.start }}
-            </li>
-          </ul>
+            <template v-if="selectedSession.id !== UNFILTERED">
+              <ItDropdownSelect
+                v-model="selectedCircle"
+                :items="circles"
+                borderless
+              ></ItDropdownSelect>
+            </template>
+          </div>
+          <div class="bg-white px-5">
+            <ul class="no-border-last">
+              <li
+                v-for="appointment in appointments"
+                :key="appointment.id"
+                class="border-b"
+              >
+                <DueDateSingle :due-date="appointment"></DueDateSingle>
+              </li>
+            </ul>
+            <div v-if="appointments.length === 0" class="w-full py-5">
+              {{ $t("dueDates.noDueDatesAvailable") }}
+            </div>
+          </div>
         </div>
       </main>
     </div>
   </div>
 </template>
 
-<style scoped></style>
+<style lang="postcss" scoped>
+.no-border-last li:last-child {
+  border-bottom: none !important;
+}
+</style>

From 13581389c0dc0e7982628edee7c975bda673bd1e Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Mon, 2 Oct 2023 13:53:39 +0200
Subject: [PATCH 10/19] fix: navigation

---
 .../components/header/MainNavigationBar.vue   | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index 75792952..e58a89a6 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -29,7 +29,7 @@ const {
   inCourse,
   inLearningPath,
   inMediaLibrary,
-  inDueDates,
+  inAppointments,
 } = useRouteLookups();
 
 const { t } = useTranslation();
@@ -49,6 +49,15 @@ const selectedCourseSessionTitle = computed(() => {
   return courseSessionsStore.currentCourseSession?.title;
 });
 
+const appointmentsUrl = computed(() => {
+  const currentCourseSession = courseSessionsStore.currentCourseSession;
+  if (currentCourseSession) {
+    return `/course/${currentCourseSession.course.slug}/appointments`;
+  } else {
+    return `/appointments`;
+  }
+});
+
 onMounted(() => {
   log.debug("MainNavigationBar mounted");
 });
@@ -167,12 +176,12 @@ onMounted(() => {
             <div class="flex items-stretch justify-start space-x-8">
               <router-link
                 v-if="userStore.loggedIn"
-                :to="`${''}/appointments`"
+                :to="appointmentsUrl"
                 data-cy="all-duedates-link"
-                class="nav-item-no-mobile"
-                :class="{ 'nav-item--active': inDueDates() }"
+                class="nav-item"
+                :class="{ 'nav-item--active': inAppointments() }"
               >
-                <it-icon-media-library class="h-8 w-8" />
+                <it-icon-calendar-light class="h-8 w-8" />
               </router-link>
 
               <router-link

From 7794203cd99171fe47f6055e9e66fdd6d0092abb Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Mon, 2 Oct 2023 15:09:37 +0200
Subject: [PATCH 11/19] chore: due dates list refactor

---
 .../src/components/dueDates/DueDatesList.vue  | 20 +++++++---
 .../components/dueDates/DueDatesShortList.vue |  2 +
 .../components/header/MainNavigationBar.vue   | 20 +++++-----
 client/src/pages/AppointmentsPage.vue         | 40 ++++++++++++-------
 client/src/pages/DashboardPage.vue            |  2 +
 5 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/client/src/components/dueDates/DueDatesList.vue b/client/src/components/dueDates/DueDatesList.vue
index 4ba57f1f..5b02c6a6 100644
--- a/client/src/components/dueDates/DueDatesList.vue
+++ b/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">
-      <!--a href="">{{ $t("dueDates.showAllDueDates") }}</a-->
+    <div v-if="allDueDates.length === 0">{{ $t("dueDates.noDueDatesAvailable") }}</div>
+    <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>
diff --git a/client/src/components/dueDates/DueDatesShortList.vue b/client/src/components/dueDates/DueDatesShortList.vue
index 752206e6..166a4d40 100644
--- a/client/src/components/dueDates/DueDatesShortList.vue
+++ b/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>
diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index e58a89a6..c95e586e 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/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>
diff --git a/client/src/pages/AppointmentsPage.vue b/client/src/pages/AppointmentsPage.vue
index b615408c..cb251c83 100644
--- a/client/src/pages/AppointmentsPage.vue
+++ b/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">
-              <li
-                v-for="appointment in appointments"
-                :key="appointment.id"
-                class="border-b"
-              >
-                <DueDateSingle :due-date="appointment"></DueDateSingle>
-              </li>
-            </ul>
-            <div v-if="appointments.length === 0" class="w-full py-5">
-              {{ $t("dueDates.noDueDatesAvailable") }}
-            </div>
+            <DueDatesList
+              :show-top-border="false"
+              :show-bottom-border="canLoadMore"
+              :due-dates="appointments"
+              :show-all-due-dates-link="false"
+              :max-count="numAppointmentsToShow"
+            />
+            <button
+              v-if="canLoadMore"
+              class="py-4 underline"
+              data-cy="load-more-notifications"
+              @click="loadAdditionalAppointments()"
+            >
+              {{ $t("notifications.load_more") }}
+            </button>
           </div>
         </div>
       </main>
diff --git a/client/src/pages/DashboardPage.vue b/client/src/pages/DashboardPage.vue
index 4a2b8523..e08ff039 100644
--- a/client/src/pages/DashboardPage.vue
+++ b/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>

From 79d4246b8873948cf68c1a5c8f6b7d40e08be49c Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Mon, 2 Oct 2023 16:22:21 +0200
Subject: [PATCH 12/19] chore: some tests

---
 client/src/pages/AppointmentsPage.vue |  3 ++
 cypress/e2e/appointments.cy.js        | 49 +++++++++++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 cypress/e2e/appointments.cy.js

diff --git a/client/src/pages/AppointmentsPage.vue b/client/src/pages/AppointmentsPage.vue
index cb251c83..3518ab65 100644
--- a/client/src/pages/AppointmentsPage.vue
+++ b/client/src/pages/AppointmentsPage.vue
@@ -117,12 +117,14 @@ async function loadAdditionalAppointments() {
           <div class="flex flex-col space-x-0 bg-white lg:flex-row lg:space-x-3">
             <ItDropdownSelect
               v-model="selectedSession"
+              data-cy="appointments-session-select"
               :items="courseSessions"
               borderless
             ></ItDropdownSelect>
             <template v-if="selectedSession.id !== UNFILTERED">
               <ItDropdownSelect
                 v-model="selectedCircle"
+                data-cy="appointments-circle-select"
                 :items="circles"
                 borderless
               ></ItDropdownSelect>
@@ -135,6 +137,7 @@ async function loadAdditionalAppointments() {
               :due-dates="appointments"
               :show-all-due-dates-link="false"
               :max-count="numAppointmentsToShow"
+              data-cy="appointments-list"
             />
             <button
               v-if="canLoadMore"
diff --git a/cypress/e2e/appointments.cy.js b/cypress/e2e/appointments.cy.js
new file mode 100644
index 00000000..abf29041
--- /dev/null
+++ b/cypress/e2e/appointments.cy.js
@@ -0,0 +1,49 @@
+import {login} from "./helpers";
+
+const CIRCLE_SELECT = '[data-cy=appointments-circle-select]';
+const SESSION_SELECT = '[data-cy=appointments-session-select]';
+const APPOINTMENTS = '[data-cy=appointments-list]';
+
+describe("circle.cy.js", () => {
+  beforeEach(() => {
+    cy.manageCommand("cypress_reset");
+    login("test-student2@example.com", "test");
+    cy.visit("/course/test-lehrgang/appointments");
+
+    // Pre-Select Bern
+    cy.get(SESSION_SELECT).click();
+    cy.get(SESSION_SELECT).contains("Bern").click();
+    cy.get(SESSION_SELECT).should("contain", "Bern");
+  });
+
+  it("preselects the correct course session (Bern)", () => {
+    cy.visit("/course/test-lehrgang/appointments");
+    cy.get(SESSION_SELECT).should("contain", "Bern");
+  })
+
+  it("preselects NO course session (all)", () => {
+    cy.visit("/appointments");
+    cy.get(SESSION_SELECT).should("contain", "Alle");
+  })
+
+  it("can filter by circle", () => {
+    // TODO: Fix this test (somehow the circle select is not working)
+    //  because it's loading on change of the session select?
+
+    // cy.get(CIRCLE_SELECT).click();
+    // cy.get(CIRCLE_SELECT).contains("Fahrzeug").click();
+    //
+    // // THEN
+    // cy.get(APPOINTMENTS).should("not.contain", "Keine Termine");
+  })
+
+  it("can switch course session to Zurich", () => {
+    cy.get(SESSION_SELECT).click();
+    cy.get(SESSION_SELECT).contains("Zürich").click();
+    cy.get(SESSION_SELECT).should("contain", "Zürich");
+
+    // THEN
+    cy.get(APPOINTMENTS).should("contain", "Keine Termine");
+  })
+
+})

From ac06dff5c38af89605347ada6ba3c100c82361eb Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Tue, 3 Oct 2023 17:03:20 +0200
Subject: [PATCH 13/19] feat: migration for url_expert

---
 server/vbv_lernwelt/course_session/models.py  | 18 ++---
 .../migrations/0005_auto_20230925_1648.py     | 65 +++++++++++++++++++
 2 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/server/vbv_lernwelt/course_session/models.py b/server/vbv_lernwelt/course_session/models.py
index e54aa503..f96d07ea 100644
--- a/server/vbv_lernwelt/course_session/models.py
+++ b/server/vbv_lernwelt/course_session/models.py
@@ -63,11 +63,8 @@ class CourseSessionAttendanceCourse(models.Model):
                 )
 
             if not self.due_date.manual_override_fields:
-                course = self.learning_content.get_course()
-
                 self.due_date.url = self.learning_content.get_frontend_url()
-                # TODO: @livioso move this to the learning content?
-                self.due_date.url_expert = f"/course/{course.slug}/cockpit/attendance?id={self.learning_content_id}"
+                self.due_date.url_expert = f"/course/{self.due_date.course_session.course.slug}/cockpit/attendance?id={self.learning_content_id}"
                 self.due_date.title = self.learning_content.title
                 self.due_date.page = self.learning_content.page_ptr
                 self.due_date.assignment_type_translation_key = (
@@ -134,11 +131,7 @@ class CourseSessionAssignment(models.Model):
                 AssignmentType.REFLECTION.value: "learningContentTypes.reflection",
             }
 
-            # TODO @livioso move this to the learning content?
-            course = self.learning_content.get_course()
-            url_expert = (
-                f"/course/{course.slug}/cockpit/assignment/{self.learning_content_id}"
-            )
+            url_expert = f"/course/{self.course_session.course.slug}/cockpit/assignment/{self.learning_content_id}"
 
             if assignment_type in (
                 AssignmentType.CASEWORK.value,
@@ -151,7 +144,6 @@ class CourseSessionAssignment(models.Model):
 
                 if not self.submission_deadline.manual_override_fields:
                     self.submission_deadline.url = url
-                    # TODO: @livioso check what's expected here
                     self.submission_deadline.url_expert = url_expert
                     self.submission_deadline.title = title
                     self.submission_deadline.assignment_type_translation_key = (
@@ -172,7 +164,7 @@ class CourseSessionAssignment(models.Model):
 
                 if not self.evaluation_deadline.manual_override_fields:
                     self.evaluation_deadline.url = url
-                    self.submission_deadline.url_expert = url_expert
+                    self.evaluation_deadline.url_expert = url_expert
                     self.evaluation_deadline.title = title
                     self.evaluation_deadline.assignment_type_translation_key = (
                         assignment_type_translation_keys[assignment_type]
@@ -221,7 +213,9 @@ class CourseSessionEdoniqTest(models.Model):
 
             if not self.deadline.manual_override_fields:
                 self.deadline.url = self.learning_content.get_frontend_url()
-                self.deadline.expert_url = self.learning_content.get_frontend_url()
+                self.deadline.url_expert = (
+                    f"/course/{self.course_session.course.slug}/cockpit/"
+                )
                 self.deadline.title = self.learning_content.title
                 self.deadline.page = self.learning_content.page_ptr
                 self.deadline.assignment_type_translation_key = (
diff --git a/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py b/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py
index cc71a2be..f54b2a27 100644
--- a/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py
+++ b/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py
@@ -3,6 +3,70 @@
 from django.db import migrations, models
 
 
+def set_url_expert_course_session_assignments(apps):
+    Course = apps.get_model("course", "Course")  # noqa
+
+    CourseSessionAssignment = apps.get_model(  # noqa
+        "course_session", "CourseSessionAssignment"
+    )
+
+    for assignment in CourseSessionAssignment.objects.all():
+        for due_date in [
+            assignment.submission_deadline,
+            assignment.evaluation_deadline,
+        ]:
+            if due_date and due_date.page:
+                course_slug = due_date.course_session.course.slug
+                content_id = due_date.page.id
+                due_date.url_expert = (
+                    f"/course/{course_slug}/cockpit/assignment/{content_id}"
+                )
+                due_date.save()
+
+
+def set_url_expert_course_session_edoniq_test(apps):
+    CourseSessionEdoniqTest = apps.get_model(  # noqa
+        "course_session", "CourseSessionEdoniqTest"
+    )
+
+    for edoniq_test in CourseSessionEdoniqTest.objects.all():
+        due_date = edoniq_test.deadline
+
+        if due_date:
+            course_slug = due_date.course_session.course.slug
+            due_date.url_expert = f"/course/{course_slug}/cockpit/"
+            due_date.save()
+
+
+def set_url_expert_course_session_attendances(apps):
+    Course = apps.get_model("course", "Course")  # noqa
+
+    CourseSessionAttendanceCourse = apps.get_model(  # noqa
+        "course_session", "CourseSessionAttendanceCourse"
+    )
+
+    for attendance in CourseSessionAttendanceCourse.objects.all():
+        due_date = attendance.due_date
+        if due_date and due_date.page:
+            course_slug = due_date.course_session.course.slug
+            content_id = due_date.page.id
+            due_date.url_expert = (
+                f"/course/{course_slug}/cockpit/attendance?id={content_id}"
+            )
+            due_date.save()
+
+
+def set_url_expert_default(apps, schema_editor):
+    set_url_expert_course_session_assignments(apps)
+    set_url_expert_course_session_attendances(apps)
+    set_url_expert_course_session_edoniq_test(apps)
+
+
+def reverse_func(apps, schema_editor):
+    # so we can reverse this migration, but noop
+    pass
+
+
 class Migration(migrations.Migration):
     dependencies = [
         ("duedate", "0004_alter_duedate_start"),
@@ -29,4 +93,5 @@ class Migration(migrations.Migration):
                 max_length=1024,
             ),
         ),
+        migrations.RunPython(set_url_expert_default, reverse_func),
     ]

From a3642ab99690e00fd28fdff3abc3a5d20a4170e3 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Tue, 3 Oct 2023 17:33:08 +0200
Subject: [PATCH 14/19] fix: cypress test name

---
 cypress/e2e/appointments.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/appointments.cy.js b/cypress/e2e/appointments.cy.js
index abf29041..29d724e8 100644
--- a/cypress/e2e/appointments.cy.js
+++ b/cypress/e2e/appointments.cy.js
@@ -4,7 +4,7 @@ const CIRCLE_SELECT = '[data-cy=appointments-circle-select]';
 const SESSION_SELECT = '[data-cy=appointments-session-select]';
 const APPOINTMENTS = '[data-cy=appointments-list]';
 
-describe("circle.cy.js", () => {
+describe("appointments.cy.js", () => {
   beforeEach(() => {
     cy.manageCommand("cypress_reset");
     login("test-student2@example.com", "test");

From 6048129507e0dbb7489fbc8d3ca24e4653dbe11e Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 4 Oct 2023 15:41:46 +0200
Subject: [PATCH 15/19] Add courseSessionId query param to url and switch to it

---
 .../src/components/dueDates/DueDateSingle.vue | 19 +++++-
 .../src/components/dueDates/DueDatesList.vue  |  6 +-
 .../components/dueDates/DueDatesShortList.vue |  1 +
 client/src/components/header/AccountMenu.vue  |  2 +-
 client/src/pages/AppointmentsPage.vue         |  1 +
 client/src/pages/DashboardPage.vue            |  1 +
 client/src/router/guards.ts                   | 59 +++++++++++++++----
 client/src/router/index.ts                    |  6 +-
 client/src/stores/courseSessions.ts           | 23 +++++++-
 server/vbv_lernwelt/course/admin.py           |  8 ++-
 server/vbv_lernwelt/course_session/models.py  | 18 +++---
 .../migrations/0005_auto_20230925_1648.py     | 50 ++++------------
 server/vbv_lernwelt/learnpath/models.py       |  9 ++-
 13 files changed, 137 insertions(+), 66 deletions(-)

diff --git a/client/src/components/dueDates/DueDateSingle.vue b/client/src/components/dueDates/DueDateSingle.vue
index 2fff8b4a..45148417 100644
--- a/client/src/components/dueDates/DueDateSingle.vue
+++ b/client/src/components/dueDates/DueDateSingle.vue
@@ -3,10 +3,12 @@ import type { CourseSession, DueDate } from "@/types";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useTranslation } from "i18next-vue";
 import dayjs from "dayjs";
+import { computed } from "vue";
 
 const props = defineProps<{
   dueDate: DueDate;
   singleLine?: boolean;
+  showCourseSession?: boolean;
 }>();
 
 const { t } = useTranslation();
@@ -24,6 +26,16 @@ if (!courseSession) {
 
 const isExpert = courseSessionsStore.hasCockpit(courseSession);
 const url = isExpert ? props.dueDate.url_expert : props.dueDate.url;
+
+const courseSessionTitle = computed(() => {
+  if (props.dueDate.course_session) {
+    return (
+      courseSessionsStore.getCourseSessionById(props.dueDate.course_session)?.title ??
+      ""
+    );
+  }
+  return "";
+});
 </script>
 
 <template>
@@ -54,7 +66,12 @@ const url = isExpert ? props.dueDate.url_expert : props.dueDate.url;
         </a>
       </div>
       <div class="text-small text-gray-900">
-        <div>{{ $t("a.Circle") }} «{{ props.dueDate.circle?.title }}»</div>
+        <div>
+          <span v-if="props.showCourseSession ?? courseSessionTitle">
+            {{ courseSessionTitle }}:
+          </span>
+          {{ $t("a.Circle") }} «{{ props.dueDate.circle?.title }}»
+        </div>
       </div>
     </div>
   </div>
diff --git a/client/src/components/dueDates/DueDatesList.vue b/client/src/components/dueDates/DueDatesList.vue
index 5b02c6a6..95818ff7 100644
--- a/client/src/components/dueDates/DueDatesList.vue
+++ b/client/src/components/dueDates/DueDatesList.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
   showTopBorder: boolean;
   showBottomBorder: boolean;
   showAllDueDatesLink: boolean;
+  showCourseSession: boolean;
 }>();
 
 const allDueDates = computed(() => {
@@ -28,7 +29,10 @@ const dueDatesDisplayed = computed(() => {
         :key="dueDate.id"
         :class="{ 'first:border-t': props.showTopBorder, 'border-b': true }"
       >
-        <DueDateSingle :due-date="dueDate"></DueDateSingle>
+        <DueDateSingle
+          :due-date="dueDate"
+          :show-course-session="props.showCourseSession"
+        ></DueDateSingle>
       </li>
     </ul>
     <div v-if="allDueDates.length === 0">{{ $t("dueDates.noDueDatesAvailable") }}</div>
diff --git a/client/src/components/dueDates/DueDatesShortList.vue b/client/src/components/dueDates/DueDatesShortList.vue
index 166a4d40..48bb324f 100644
--- a/client/src/components/dueDates/DueDatesShortList.vue
+++ b/client/src/components/dueDates/DueDatesShortList.vue
@@ -6,6 +6,7 @@
       :show-top-border="props.showTopBorder"
       show-all-due-dates-link
       show-bottom-border
+      :show-course-session="false"
     ></DueDatesList>
   </div>
 </template>
diff --git a/client/src/components/header/AccountMenu.vue b/client/src/components/header/AccountMenu.vue
index 3ed1bc55..a6f0db29 100644
--- a/client/src/components/header/AccountMenu.vue
+++ b/client/src/components/header/AccountMenu.vue
@@ -18,7 +18,7 @@ const logout = () => {
   userStore.handleLogout();
 };
 const selectCourseSession = (courseSession: CourseSession) => {
-  courseSessionsStore.switchCourseSession(courseSession);
+  courseSessionsStore.switchCourseSessionById(courseSession.id);
 };
 
 const courseSessionsStore = useCourseSessionsStore();
diff --git a/client/src/pages/AppointmentsPage.vue b/client/src/pages/AppointmentsPage.vue
index 3518ab65..9bfdfca2 100644
--- a/client/src/pages/AppointmentsPage.vue
+++ b/client/src/pages/AppointmentsPage.vue
@@ -138,6 +138,7 @@ async function loadAdditionalAppointments() {
               :show-all-due-dates-link="false"
               :max-count="numAppointmentsToShow"
               data-cy="appointments-list"
+              :show-course-session="true"
             />
             <button
               v-if="canLoadMore"
diff --git a/client/src/pages/DashboardPage.vue b/client/src/pages/DashboardPage.vue
index e08ff039..f543f45a 100644
--- a/client/src/pages/DashboardPage.vue
+++ b/client/src/pages/DashboardPage.vue
@@ -73,6 +73,7 @@ const getNextStepLink = (courseSession: CourseSession) => {
               :show-top-border="false"
               :show-all-due-dates-link="true"
               :show-bottom-border="true"
+              :show-course-session="true"
             ></DueDatesList>
           </div>
         </div>
diff --git a/client/src/router/guards.ts b/client/src/router/guards.ts
index f7090336..27116000 100644
--- a/client/src/router/guards.ts
+++ b/client/src/router/guards.ts
@@ -17,7 +17,9 @@ export const redirectToLoginIfRequired: NavigationGuard = (to) => {
   if (loginRequired(to) && !userStore.loggedIn) {
     const appEnv = import.meta.env.VITE_APP_ENVIRONMENT || "local";
     const ssoLogin = appEnv.startsWith("prod") || appEnv.startsWith("stage");
-    return ssoLogin ? `/login?next=${to.fullPath}` : `/login-local?next=${to.fullPath}`;
+    return ssoLogin
+      ? `/login?next=${encodeURIComponent(to.fullPath)}`
+      : `/login-local?next=${encodeURIComponent(to.fullPath)}`;
   }
 };
 
@@ -46,15 +48,52 @@ export const expertRequired: NavigationGuard = (to: RouteLocationNormalized) =>
   }
 };
 
-export async function handleCourseSessions(to: RouteLocationNormalized) {
+export async function handleCurrentCourseSession(to: RouteLocationNormalized) {
   // register after login hooks
-  const courseSessionsStore = useCourseSessionsStore();
-  if (to.params.courseSlug) {
-    courseSessionsStore._currentCourseSlug = to.params.courseSlug as string;
-  } else {
-    courseSessionsStore._currentCourseSlug = "";
-  }
-  if (!courseSessionsStore.loaded) {
-    await courseSessionsStore.loadCourseSessionsData();
+  const userStore = useUserStore();
+  if (userStore.loggedIn) {
+    const courseSessionsStore = useCourseSessionsStore();
+    if (to.params.courseSlug) {
+      courseSessionsStore._currentCourseSlug = to.params.courseSlug as string;
+    } else {
+      courseSessionsStore._currentCourseSlug = "";
+    }
+    if (!courseSessionsStore.loaded) {
+      await courseSessionsStore.loadCourseSessionsData();
+    }
+  }
+}
+
+export async function handleCourseSessionAsQueryParam(to: RouteLocationNormalized) {
+  /**
+   * switch to course session with id from query param `courseSessionId` if it
+   * is present and valid.
+   */
+  // register after login hooks
+  const userStore = useUserStore();
+  if (userStore.loggedIn) {
+    const courseSessionsStore = useCourseSessionsStore();
+    if (!courseSessionsStore.loaded) {
+      await courseSessionsStore.loadCourseSessionsData();
+    }
+
+    if (to.query.courseSessionId) {
+      const { courseSessionId, ...restOfQuery } = to.query;
+      const switchSuccessful = courseSessionsStore.switchCourseSessionById(
+        courseSessionId.toString()
+      );
+      if (switchSuccessful) {
+        return {
+          path: to.path,
+          query: restOfQuery,
+          replace: true,
+        };
+      } else {
+        // courseSessionId is invalid for current user -> redirect to home
+        return {
+          path: "/",
+        };
+      }
+    }
   }
 }
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 79725d55..805a1e9c 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -1,7 +1,8 @@
 import DashboardPage from "@/pages/DashboardPage.vue";
 import LoginPage from "@/pages/LoginPage.vue";
 import {
-  handleCourseSessions,
+  handleCourseSessionAsQueryParam,
+  handleCurrentCourseSession,
   redirectToLoginIfRequired,
   updateLoggedIn,
 } from "@/router/guards";
@@ -214,7 +215,8 @@ router.beforeEach(updateLoggedIn);
 router.beforeEach(redirectToLoginIfRequired);
 
 // register after login hooks
-router.beforeEach(handleCourseSessions);
+router.beforeEach(handleCurrentCourseSession);
+router.beforeEach(handleCourseSessionAsQueryParam);
 
 router.beforeEach(addToHistory);
 
diff --git a/client/src/stores/courseSessions.ts b/client/src/stores/courseSessions.ts
index 7c6bb476..99ab78a0 100644
--- a/client/src/stores/courseSessions.ts
+++ b/client/src/stores/courseSessions.ts
@@ -91,13 +91,31 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     return undefined;
   }
 
-  function switchCourseSession(courseSession: CourseSession) {
+  function _switchCourseSession(courseSession: CourseSession) {
     log.debug("switchCourseSession", courseSession);
     selectedCourseSessionMap.value.set(courseSession.course.slug, courseSession.id);
     // Emit event so that the App can re-render with the new courseSession
     eventBus.emit("switchedCourseSession", courseSession.id);
   }
 
+  function getCourseSessionById(courseSessionId: number | string) {
+    return allCourseSessions.value.find((cs) => {
+      return courseSessionId.toString() === cs.id.toString();
+    });
+  }
+
+  function switchCourseSessionById(courseSessionId: number | string) {
+    const courseSession = allCourseSessions.value.find((cs) => {
+      return courseSessionId.toString() === cs.id.toString();
+    });
+    if (courseSession) {
+      _switchCourseSession(courseSession);
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   function courseSessionForCourse(courseSlug: string) {
     if (courseSlug) {
       const courseSession = selectedCourseSessionForCourse(courseSlug);
@@ -268,7 +286,8 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     uniqueCourseSessionsByCourse,
     allCurrentCourseSessions,
     courseSessionForCourse,
-    switchCourseSession,
+    getCourseSessionById,
+    switchCourseSessionById,
     hasCockpit,
     hasCourseSessionPreview,
     currentCourseSessionHasCockpit,
diff --git a/server/vbv_lernwelt/course/admin.py b/server/vbv_lernwelt/course/admin.py
index 3a83f956..581266a9 100644
--- a/server/vbv_lernwelt/course/admin.py
+++ b/server/vbv_lernwelt/course/admin.py
@@ -37,8 +37,9 @@ class CourseSessionUserAdmin(admin.ModelAdmin):
         "user_first_name",
         "course_session",
         "role",
-        "created_at",
-        "updated_at",
+        "circles",
+        # "created_at",
+        # "updated_at",
     ]
     search_fields = [
         "user__first_name",
@@ -66,6 +67,9 @@ class CourseSessionUserAdmin(admin.ModelAdmin):
     user_last_name.short_description = "Last Name"
     user_last_name.admin_order_field = "user__last_name"
 
+    def circles(self, obj):
+        return ", ".join([c.title for c in obj.expert.all()])
+
     fieldsets = [
         (None, {"fields": ("user", "course_session", "role")}),
         (
diff --git a/server/vbv_lernwelt/course_session/models.py b/server/vbv_lernwelt/course_session/models.py
index f96d07ea..9c094de1 100644
--- a/server/vbv_lernwelt/course_session/models.py
+++ b/server/vbv_lernwelt/course_session/models.py
@@ -63,8 +63,10 @@ class CourseSessionAttendanceCourse(models.Model):
                 )
 
             if not self.due_date.manual_override_fields:
-                self.due_date.url = self.learning_content.get_frontend_url()
-                self.due_date.url_expert = f"/course/{self.due_date.course_session.course.slug}/cockpit/attendance?id={self.learning_content_id}"
+                self.due_date.url = self.learning_content.get_frontend_url(
+                    course_session_id=self.course_session.id
+                )
+                self.due_date.url_expert = f"/course/{self.due_date.course_session.course.slug}/cockpit/attendance?id={self.learning_content_id}&courseSessionId={self.course_session.id}"
                 self.due_date.title = self.learning_content.title
                 self.due_date.page = self.learning_content.page_ptr
                 self.due_date.assignment_type_translation_key = (
@@ -123,7 +125,9 @@ class CourseSessionAssignment(models.Model):
         if self.learning_content_id:
             title = self.learning_content.title
             page = self.learning_content.page_ptr
-            url = self.learning_content.get_frontend_url()
+            url = self.learning_content.get_frontend_url(
+                course_session_id=self.course_session.id
+            )
             assignment_type = self.learning_content.assignment_type
             assignment_type_translation_keys = {
                 AssignmentType.CASEWORK.value: "learningContentTypes.casework",
@@ -131,7 +135,7 @@ class CourseSessionAssignment(models.Model):
                 AssignmentType.REFLECTION.value: "learningContentTypes.reflection",
             }
 
-            url_expert = f"/course/{self.course_session.course.slug}/cockpit/assignment/{self.learning_content_id}"
+            url_expert = f"/course/{self.course_session.course.slug}/cockpit/assignment/{self.learning_content_id}?courseSessionId={self.course_session.id}"
 
             if assignment_type in (
                 AssignmentType.CASEWORK.value,
@@ -212,10 +216,10 @@ class CourseSessionEdoniqTest(models.Model):
                 )
 
             if not self.deadline.manual_override_fields:
-                self.deadline.url = self.learning_content.get_frontend_url()
-                self.deadline.url_expert = (
-                    f"/course/{self.course_session.course.slug}/cockpit/"
+                self.deadline.url = self.learning_content.get_frontend_url(
+                    course_session_id=self.course_session.id
                 )
+                self.deadline.url_expert = f"/course/{self.course_session.course.slug}/cockpit?courseSessionId={self.course_session.id}"
                 self.deadline.title = self.learning_content.title
                 self.deadline.page = self.learning_content.page_ptr
                 self.deadline.assignment_type_translation_key = (
diff --git a/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py b/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py
index f54b2a27..a7df7df6 100644
--- a/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py
+++ b/server/vbv_lernwelt/duedate/migrations/0005_auto_20230925_1648.py
@@ -4,56 +4,30 @@ from django.db import migrations, models
 
 
 def set_url_expert_course_session_assignments(apps):
-    Course = apps.get_model("course", "Course")  # noqa
-
-    CourseSessionAssignment = apps.get_model(  # noqa
-        "course_session", "CourseSessionAssignment"
-    )
+    # need to load concrete model, so that wagtail page has `specific` instance  method...
+    from vbv_lernwelt.course_session.models import CourseSessionAssignment
 
     for assignment in CourseSessionAssignment.objects.all():
-        for due_date in [
-            assignment.submission_deadline,
-            assignment.evaluation_deadline,
-        ]:
-            if due_date and due_date.page:
-                course_slug = due_date.course_session.course.slug
-                content_id = due_date.page.id
-                due_date.url_expert = (
-                    f"/course/{course_slug}/cockpit/assignment/{content_id}"
-                )
-                due_date.save()
+        # trigger save to update due_date foreign key fields
+        assignment.save()
 
 
 def set_url_expert_course_session_edoniq_test(apps):
-    CourseSessionEdoniqTest = apps.get_model(  # noqa
-        "course_session", "CourseSessionEdoniqTest"
-    )
+    # need to load concrete model, so that wagtail page has `specific` instance  method...
+    from vbv_lernwelt.course_session.models import CourseSessionEdoniqTest
 
     for edoniq_test in CourseSessionEdoniqTest.objects.all():
-        due_date = edoniq_test.deadline
-
-        if due_date:
-            course_slug = due_date.course_session.course.slug
-            due_date.url_expert = f"/course/{course_slug}/cockpit/"
-            due_date.save()
+        # trigger save to update due_date foreign key fields
+        edoniq_test.save()
 
 
 def set_url_expert_course_session_attendances(apps):
-    Course = apps.get_model("course", "Course")  # noqa
-
-    CourseSessionAttendanceCourse = apps.get_model(  # noqa
-        "course_session", "CourseSessionAttendanceCourse"
-    )
+    # need to load concrete model, so that wagtail page has `specific` instance  method...
+    from vbv_lernwelt.course_session.models import CourseSessionAttendanceCourse
 
     for attendance in CourseSessionAttendanceCourse.objects.all():
-        due_date = attendance.due_date
-        if due_date and due_date.page:
-            course_slug = due_date.course_session.course.slug
-            content_id = due_date.page.id
-            due_date.url_expert = (
-                f"/course/{course_slug}/cockpit/attendance?id={content_id}"
-            )
-            due_date.save()
+        # trigger save to update due_date foreign key fields
+        attendance.save()
 
 
 def set_url_expert_default(apps, schema_editor):
diff --git a/server/vbv_lernwelt/learnpath/models.py b/server/vbv_lernwelt/learnpath/models.py
index a3632b96..b5b351ed 100644
--- a/server/vbv_lernwelt/learnpath/models.py
+++ b/server/vbv_lernwelt/learnpath/models.py
@@ -268,14 +268,19 @@ class LearningContent(CourseBasePage):
             <span style="margin-left: 8px;">{self.get_admin_display_title()}</span>
           </span>"""
 
-    def get_frontend_url(self):
+    def get_frontend_url(self, course_session_id=None):
         r = re.compile(
             r"^(?P<coursePart>.+?)-lp-circle-(?P<circlePart>.+?)-lc-(?P<lcPart>.+)$"
         )
         m = r.match(self.slug)
         if m is None:
             return "ERROR: could not parse slug"
-        return f"/course/{m.group('coursePart')}/learn/{m.group('circlePart')}/{m.group('lcPart')}"
+        url = f"/course/{m.group('coursePart')}/learn/{m.group('circlePart')}/{m.group('lcPart')}"
+
+        if course_session_id:
+            url += f"?courseSessionId={course_session_id}"
+
+        return url
 
     def get_parent_circle(self):
         try:

From a180c5c82568fcb4473fa9454a686a8f72fd1bbb Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 4 Oct 2023 17:39:04 +0200
Subject: [PATCH 16/19] Filter appointments by course

---
 .../src/components/dueDates/DueDatesList.vue  |   1 +
 client/src/pages/AppointmentsPage.vue         | 119 +++++++++---------
 cypress/e2e/appointments.cy.js                |  48 +++----
 3 files changed, 83 insertions(+), 85 deletions(-)

diff --git a/client/src/components/dueDates/DueDatesList.vue b/client/src/components/dueDates/DueDatesList.vue
index 95818ff7..f5ce0702 100644
--- a/client/src/components/dueDates/DueDatesList.vue
+++ b/client/src/components/dueDates/DueDatesList.vue
@@ -27,6 +27,7 @@ const dueDatesDisplayed = computed(() => {
       <li
         v-for="dueDate in dueDatesDisplayed"
         :key="dueDate.id"
+        class="cy-single-due-date"
         :class="{ 'first:border-t': props.showTopBorder, 'border-b': true }"
       >
         <DueDateSingle
diff --git a/client/src/pages/AppointmentsPage.vue b/client/src/pages/AppointmentsPage.vue
index 9bfdfca2..f5c73c00 100644
--- a/client/src/pages/AppointmentsPage.vue
+++ b/client/src/pages/AppointmentsPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useLearningPathStore } from "@/stores/learningPath";
 import { useTranslation } from "i18next-vue";
@@ -18,74 +18,71 @@ type Item = {
   name: string;
 };
 
+const courses: (Item & { slug: string })[] =
+  courseSessionsStore.uniqueCourseSessionsByCourse.map((cs) => ({
+    id: cs.course.id,
+    name: cs.course.title,
+    slug: cs.course.slug,
+  }));
+const selectedCourse = ref<Item>(courses[0]);
+
+const courseSessions = computed(() => {
+  return [
+    {
+      id: UNFILTERED,
+      name: t("a.AlleDurchführungen"),
+    },
+    ...courseSessionsStore.allCourseSessions
+      .filter((cs) => cs.course.id === selectedCourse.value.id)
+      .map((cs) => ({ id: cs.id, name: cs.title })),
+  ];
+});
+const selectedSession = ref<Item>(courseSessions.value[0]);
+
 const initialItemCircle: Item = {
   id: UNFILTERED,
   name: t("a.AlleCircle"),
 };
-
 const circles = ref<Item[]>([initialItemCircle]);
-const courseSessions: Item[] = [
-  {
-    id: UNFILTERED,
-    name: t("a.AlleDurchführungen"),
-  },
-  ...courseSessionsStore.allCourseSessions.map((cs) => ({ id: cs.id, name: cs.title })),
-];
-
-const selectedSession = ref<Item>(courseSessions[0]);
 const selectedCircle = ref<Item>(circles.value[0]);
 
-if (courseSessionsStore.currentCourseSession) {
-  selectedSession.value = {
-    id: courseSessionsStore.currentCourseSession.id,
-    name: courseSessionsStore.currentCourseSession.title,
-  };
-}
-
-watch(selectedSession, async () => {
-  // We don't have all circles for the unfiltered session,
-  // we fetch them from the learning path when the session changes
-  const isUnfiltered = selectedSession.value.id === UNFILTERED;
-  const courseSession = courseSessionsStore.allCourseSessions.find(
-    (item) => item.id === selectedSession.value.id
-  );
-
-  if (!courseSession || isUnfiltered) {
-    resetCircles();
-    return;
-  }
-
+async function loadCircleValues() {
   const data = await learningPathStore.loadLearningPath(
-    `${courseSession.course.slug}-lp`,
+    `${selectedCourse.value.slug}-lp`,
     undefined,
     false,
     false
   );
-
   if (data) {
-    updateCircles(data.circles);
+    circles.value = [
+      initialItemCircle,
+      ...data.circles.map((circle) => ({ id: circle.id, name: circle.title })),
+    ];
   } else {
-    resetCircles();
+    circles.value = [initialItemCircle];
   }
+
+  selectedCircle.value = circles.value[0];
+}
+
+watch(selectedCourse, async () => {
+  selectedSession.value = courseSessions.value[0];
+  await loadCircleValues();
 });
 
-const resetCircles = () => {
-  circles.value = [initialItemCircle];
-  selectedCircle.value = circles.value[0];
-};
-
-const updateCircles = (newCircles: { id: number; title: string }[]) => {
-  circles.value = [
-    initialItemCircle,
-    ...newCircles.map((circle) => ({ id: circle.id, name: circle.title })),
-  ];
-  selectedCircle.value = circles.value[0];
-};
+onMounted(async () => {
+  await loadCircleValues();
+});
 
 const appointments = computed(() => {
   return courseSessionsStore
     .allDueDates()
-    .filter((dueDate) => isMatchingSession(dueDate) && isMatchingCircle(dueDate));
+    .filter(
+      (dueDate) =>
+        isMatchingCourse(dueDate) &&
+        isMatchingSession(dueDate) &&
+        isMatchingCircle(dueDate)
+    );
 });
 
 const isMatchingSession = (dueDate: DueDate) =>
@@ -96,6 +93,9 @@ const isMatchingCircle = (dueDate: DueDate) =>
   selectedCircle.value.id === UNFILTERED ||
   dueDate.circle?.id === selectedCircle.value.id;
 
+const isMatchingCourse = (dueDate: DueDate) =>
+  courseSessions.value.map((cs) => cs.id).includes(dueDate.course_session as number);
+
 const numAppointmentsToShow = ref(7);
 const canLoadMore = computed(() => {
   return numAppointmentsToShow.value < appointments.value.length;
@@ -109,8 +109,15 @@ async function loadAdditionalAppointments() {
 <template>
   <div class="bg-gray-200">
     <div class="container-large px-8 py-8">
-      <header class="mb-6">
+      <header class="mb-6 flex flex-col lg:flex-row lg:items-center lg:justify-between">
         <h1>{{ $t("a.AlleTermine") }}</h1>
+        <div>
+          <ItDropdownSelect
+            v-model="selectedCourse"
+            data-cy="appointments-course-select"
+            :items="courses"
+          ></ItDropdownSelect>
+        </div>
       </header>
       <main>
         <div class="flex flex-col space-y-2">
@@ -121,14 +128,12 @@ async function loadAdditionalAppointments() {
               :items="courseSessions"
               borderless
             ></ItDropdownSelect>
-            <template v-if="selectedSession.id !== UNFILTERED">
-              <ItDropdownSelect
-                v-model="selectedCircle"
-                data-cy="appointments-circle-select"
-                :items="circles"
-                borderless
-              ></ItDropdownSelect>
-            </template>
+            <ItDropdownSelect
+              v-model="selectedCircle"
+              data-cy="appointments-circle-select"
+              :items="circles"
+              borderless
+            ></ItDropdownSelect>
           </div>
           <div class="bg-white px-5">
             <DueDatesList
diff --git a/cypress/e2e/appointments.cy.js b/cypress/e2e/appointments.cy.js
index 29d724e8..c61e156a 100644
--- a/cypress/e2e/appointments.cy.js
+++ b/cypress/e2e/appointments.cy.js
@@ -1,49 +1,41 @@
-import {login} from "./helpers";
+import { login } from "./helpers";
 
-const CIRCLE_SELECT = '[data-cy=appointments-circle-select]';
-const SESSION_SELECT = '[data-cy=appointments-session-select]';
-const APPOINTMENTS = '[data-cy=appointments-list]';
+// constants
+const COURSE_SELECT = "[data-cy=appointments-course-select]";
+const SESSION_SELECT = "[data-cy=appointments-session-select]";
+const CIRCLE_SELECT = "[data-cy=appointments-circle-select]";
+const APPOINTMENTS = "[data-cy=appointments-list]";
 
 describe("appointments.cy.js", () => {
   beforeEach(() => {
     cy.manageCommand("cypress_reset");
     login("test-student2@example.com", "test");
     cy.visit("/course/test-lehrgang/appointments");
-
-    // Pre-Select Bern
-    cy.get(SESSION_SELECT).click();
-    cy.get(SESSION_SELECT).contains("Bern").click();
-    cy.get(SESSION_SELECT).should("contain", "Bern");
   });
 
-  it("preselects the correct course session (Bern)", () => {
+  it("preselects first course (Test Lehrgang)", () => {
     cy.visit("/course/test-lehrgang/appointments");
-    cy.get(SESSION_SELECT).should("contain", "Bern");
-  })
-
-  it("preselects NO course session (all)", () => {
-    cy.visit("/appointments");
+    cy.get(COURSE_SELECT).should("contain", "Test Lehrgang");
     cy.get(SESSION_SELECT).should("contain", "Alle");
-  })
+    cy.get(CIRCLE_SELECT).should("contain", "Alle");
+
+    cy.get(".cy-single-due-date").should("have.length", 4);
+  });
 
   it("can filter by circle", () => {
-    // TODO: Fix this test (somehow the circle select is not working)
-    //  because it's loading on change of the session select?
+    cy.get(CIRCLE_SELECT).click();
+    cy.get(CIRCLE_SELECT).contains("Fahrzeug").click();
 
-    // cy.get(CIRCLE_SELECT).click();
-    // cy.get(CIRCLE_SELECT).contains("Fahrzeug").click();
-    //
-    // // THEN
-    // cy.get(APPOINTMENTS).should("not.contain", "Keine Termine");
-  })
+    // THEN
+    cy.get(APPOINTMENTS).should("not.contain", "Keine Termine");
+  });
 
-  it("can switch course session to Zurich", () => {
+  it("can switch course session", () => {
     cy.get(SESSION_SELECT).click();
     cy.get(SESSION_SELECT).contains("Zürich").click();
     cy.get(SESSION_SELECT).should("contain", "Zürich");
 
     // THEN
     cy.get(APPOINTMENTS).should("contain", "Keine Termine");
-  })
-
-})
+  });
+});

From 372fa9ceaa05bbc1387eed975bf2518019a6dc9d Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 4 Oct 2023 18:44:29 +0200
Subject: [PATCH 17/19] Fix typecheck errors

---
 client/src/pages/AppointmentsPage.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/AppointmentsPage.vue b/client/src/pages/AppointmentsPage.vue
index f5c73c00..9b088a16 100644
--- a/client/src/pages/AppointmentsPage.vue
+++ b/client/src/pages/AppointmentsPage.vue
@@ -18,13 +18,18 @@ type Item = {
   name: string;
 };
 
-const courses: (Item & { slug: string })[] =
-  courseSessionsStore.uniqueCourseSessionsByCourse.map((cs) => ({
+type CourseItem = Item & {
+  slug: string;
+};
+
+const courses: CourseItem[] = courseSessionsStore.uniqueCourseSessionsByCourse.map(
+  (cs) => ({
     id: cs.course.id,
     name: cs.course.title,
     slug: cs.course.slug,
-  }));
-const selectedCourse = ref<Item>(courses[0]);
+  })
+);
+const selectedCourse = ref<CourseItem>(courses[0]);
 
 const courseSessions = computed(() => {
   return [

From cebfbf011bc41ca9ce4dedb92d1bcdf352516c3e Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 4 Oct 2023 21:27:43 +0200
Subject: [PATCH 18/19] fix: select course& session if in course session

---
 client/src/pages/AppointmentsPage.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/client/src/pages/AppointmentsPage.vue b/client/src/pages/AppointmentsPage.vue
index 9b088a16..a5496775 100644
--- a/client/src/pages/AppointmentsPage.vue
+++ b/client/src/pages/AppointmentsPage.vue
@@ -44,6 +44,15 @@ const courseSessions = computed(() => {
 });
 const selectedSession = ref<Item>(courseSessions.value[0]);
 
+// pre-select course and session if we are in a course session
+if (courseSessionsStore.currentCourseSession) {
+  const session = courseSessionsStore.currentCourseSession;
+  const { id: courseId, title: courseName, slug: courseSlug } = session.course;
+  selectedCourse.value = { id: courseId, name: courseName, slug: courseSlug };
+  const { id: sessionId, title: sessionName } = session;
+  selectedSession.value = { id: sessionId, name: sessionName };
+}
+
 const initialItemCircle: Item = {
   id: UNFILTERED,
   name: t("a.AlleCircle"),

From 4b59f052bfd40e68e938e50f0f7177b430db00de Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 4 Oct 2023 21:46:18 +0200
Subject: [PATCH 19/19] fix: update test to match new default session

---
 cypress/e2e/appointments.cy.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/appointments.cy.js b/cypress/e2e/appointments.cy.js
index c61e156a..e3f618f5 100644
--- a/cypress/e2e/appointments.cy.js
+++ b/cypress/e2e/appointments.cy.js
@@ -1,4 +1,4 @@
-import { login } from "./helpers";
+import {login} from "./helpers";
 
 // constants
 const COURSE_SELECT = "[data-cy=appointments-course-select]";
@@ -16,7 +16,7 @@ describe("appointments.cy.js", () => {
   it("preselects first course (Test Lehrgang)", () => {
     cy.visit("/course/test-lehrgang/appointments");
     cy.get(COURSE_SELECT).should("contain", "Test Lehrgang");
-    cy.get(SESSION_SELECT).should("contain", "Alle");
+    cy.get(SESSION_SELECT).should("contain", "Bern");
     cy.get(CIRCLE_SELECT).should("contain", "Alle");
 
     cy.get(".cy-single-due-date").should("have.length", 4);