VBV-672: Link zu gefilteter Personenliste

client/src/components/dashboard/MentorMenteeCount.vue

@@ -20,7 +20,7 @@ onMounted(async () => {
 <template>
   <div class="w-[325px]">
     <BaseBox
-      :details-link="`/dashboard/persons`"
+      :details-link="`/dashboard/persons?course=${props.courseId}`"
       data-cy="dashboard.mentor.competenceSummary"
     >
       <template #title>{{ $t("a.Personen") }}</template>

client/src/pages/dashboard/DashboardPersonsPage.vue

@@ -7,6 +7,7 @@ import { computed, ref, watch } from "vue";
 import { useTranslation } from "i18next-vue";
 import _ from "lodash";
 import type { DashboardPersonCourseSessionType } from "@/services/dashboard";
+import { useRouteQuery } from "@vueuse/router";
 
 log.debug("DashboardPersonsPage created");
 
@@ -38,6 +39,20 @@ const courses = computed(() => {
   ];
 });
 const selectedCourse = ref<MenuItem>(courses.value[0]);
+const selectedCourseRouteQuery = useRouteQuery("course", UNFILTERED, {
+  mode: "replace",
+});
+
+watch(selectedCourse, () => {
+  selectedCourseRouteQuery.value = selectedCourse.value.id;
+});
+watch(courses, () => {
+  if (selectedCourseRouteQuery.value !== UNFILTERED) {
+    selectedCourse.value =
+      courses.value.find((course) => course.id === selectedCourseRouteQuery.value) ||
+      courses.value[0];
+  }
+});
 
 const regions = computed(() => {
   let values = _(dashboardPersons.value)
@@ -45,6 +60,7 @@ const regions = computed(() => {
     .map((cs) => {
       return Object.assign({}, cs, { name: cs.region, id: cs.region });
     })
+    .filter((cs) => !!cs.region)
     .uniqBy("id")
     .orderBy("name")
     .value();
@@ -99,6 +115,7 @@ const generations = computed(() => {
     .map((cs) => {
       return Object.assign({}, cs, { name: cs.generation, id: cs.generation });
     })
+    .filter((cs) => !!cs.generation)
     .uniqBy("id")
     .orderBy("name")
     .value();
@@ -117,7 +134,10 @@ const roles = computed(() => {
   const values = _(dashboardPersons.value)
     .flatMap((person) => person.course_sessions)
     .map((cs) => {
-      return Object.assign({}, cs, { name: cs.user_role_display, id: cs.user_role_display });
+      return Object.assign({}, cs, {
+        name: cs.user_role_display,
+        id: cs.user_role_display,
+      });
     })
     .uniqBy("id")
     .orderBy("name")
@@ -133,7 +153,6 @@ const roles = computed(() => {
 });
 const selectedRole = ref<MenuItem>(roles.value[0]);
 
-
 const filteredPersons = computed(() => {
   return _.orderBy(
     dashboardPersons.value