Selecte courseSession from route query for dueDates

client/src/components/dueDates/DueDateSingle.vue

@@ -7,7 +7,6 @@ import dayjs from "dayjs";
 const props = defineProps<{
   dueDate: DashboardDueDate;
   singleLine?: boolean;
-  showCourseSession?: boolean;
 }>();
 
 const { t } = useTranslation();

client/src/pages/dashboard/DashboardDueDatesPage.vue

@@ -6,11 +6,12 @@ import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import { computed, ref, watch } from "vue";
 import { useTranslation } from "i18next-vue";
 import _ from "lodash";
-import DueDatesList from "@/components/dueDates/DueDatesList.vue";
+import { useRouteQuery } from "@vueuse/router";
+import DueDateSingle from "@/components/dueDates/DueDateSingle.vue";
 
 log.debug("DashboardPersonsPage created");
 
-const UNFILTERED = Number.MAX_SAFE_INTEGER.toString();
+const UNFILTERED = "0";
 
 type DropboxItem = {
   id: string;
@@ -74,8 +75,27 @@ const courseSessions = computed(() => {
   ];
 });
 
+const selectedSessionRouteQuery = useRouteQuery("session");
 const selectedSession = ref<DropboxItem>(courseSessions.value[0]);
 
+watch(selectedSession, () => {
+  selectedSessionRouteQuery.value = selectedSession.value.id;
+});
+
+watch(courseSessions, () => {
+  if (courseSessions.value.length > 0 && selectedSessionRouteQuery.value) {
+    // preselect session from route query
+    const selectedSessionFromRoute = courseSessions.value.find(
+      (cs) => cs.id === selectedSessionRouteQuery.value
+    );
+    if (selectedSessionFromRoute) {
+      selectedSession.value = selectedSessionFromRoute;
+      return;
+    }
+  }
+  selectedSession.value = courseSessions.value[0];
+});
+
 const filteredDueDates = computed(() => {
   return _.orderBy(
     dashboardDueDates.value
@@ -247,15 +267,9 @@ watch(selectedCourse, async () => {
           </section>
 
           <section>
-            <DueDatesList
+            <div v-for="dueDate in filteredDueDates" :key="dueDate.id" class="border-b">
-              :show-top-border="false"
+              <DueDateSingle :single-line="true" :due-date="dueDate"></DueDateSingle>
-              :show-bottom-border="false"
+            </div>
-              :due-dates="filteredDueDates"
-              :show-all-due-dates-link="false"
-              :max-count="100"
-              data-cy="due-date-list"
-              :show-course-session="true"
-            />
           </section>
         </div>
       </div>