Add role filter to persons page

client/src/composables.ts

@@ -13,7 +13,11 @@ import {
   circleFlatLearningUnits,
   someFinishedInLearningSequence,
 } from "@/services/circle";
-import type { DashboardDueDate, DashboardPersonType } from "@/services/dashboard";
+import type {
+  DashboardDueDate,
+  DashboardPersonRoleType,
+  DashboardPersonType,
+} from "@/services/dashboard";
 import {
   courseIdForCourseSlug,
   fetchDashboardDueDates,
@@ -504,6 +508,40 @@ export function useMyLearningMentors() {
   };
 }
 
+export function getVvRoleDisplay(role: DashboardPersonRoleType) {
+  switch (role) {
+    case "LEARNING_MENTOR":
+      return t("a.Lernbegleitung");
+    case "LEARNING_MENTEE":
+      return t("a.Teilnehmer");
+    case "EXPERT":
+      return t("a.Experte");
+    case "MEMBER":
+      return t("a.Teilnehmer");
+    case "SUPERVISOR":
+      return t("a.Regionenleiter");
+    default:
+      return role;
+  }
+}
+
+export function getUkRoleDisplay(role: DashboardPersonRoleType) {
+  switch (role) {
+    case "LEARNING_MENTOR":
+      return t("a.Praxisbildner");
+    case "LEARNING_MENTEE":
+      return t("a.Teilnehmer");
+    case "EXPERT":
+      return t("a.Trainer");
+    case "MEMBER":
+      return t("a.Teilnehmer");
+    case "SUPERVISOR":
+      return t("a.Regionenleiter");
+    default:
+      return role;
+  }
+}
+
 export function useDashboardPersons() {
   const dashboardPersons = ref<DashboardPersonType[]>([]);
   const dashboardDueDates = ref<DashboardDueDate[]>([]);
@@ -520,6 +558,23 @@ export function useDashboardPersons() {
         fetchDashboardDueDates(),
       ]);
       dashboardPersons.value = persons;
+
+      // attach role name to persons
+      dashboardPersons.value.forEach((person) => {
+        person.course_sessions.forEach((cs) => {
+          if (cs.is_uk) {
+            cs.my_role_display = getUkRoleDisplay(cs.my_role);
+            cs.user_role_display = getUkRoleDisplay(cs.user_role);
+          } else if (cs.is_vv) {
+            cs.my_role_display = getVvRoleDisplay(cs.my_role);
+            cs.user_role_display = getVvRoleDisplay(cs.user_role);
+          } else {
+            cs.my_role_display = "";
+            cs.user_role_display = "";
+          }
+        });
+      });
+
       dashboardDueDates.value = dueDates.map((dueDate) => {
         const dateType = t(dueDate.date_type_translation_key);
         const assignmentType = t(dueDate.assignment_type_translation_key);

client/src/pages/dashboard/DashboardDueDatesPage.vue

@@ -31,7 +31,7 @@ const courses = computed(() => {
   return [
     {
       id: UNFILTERED,
-      name: t("a.Alle Lehrgänge"),
+      name: `${t("Lehrgang")}: ${t("a.Alle")}`,
       slug: "",
     },
     ..._(dashboardDueDates.value)
@@ -70,7 +70,7 @@ const courseSessions = computed(() => {
   return [
     {
       id: UNFILTERED,
-      name: t("a.AlleDurchführungen"),
+      name: `${t("Durchführung")}: ${t("a.Alle")}`,
     },
     ...sessions,
   ];
@@ -165,7 +165,7 @@ const circles = computed(() => {
   return [
     {
       id: UNFILTERED,
-      name: t("a.AlleCircle"),
+      name: `${t("Circle")}: ${t("a.Alle")}`,
     },
     ...circleList,
   ];

client/src/pages/dashboard/DashboardPersonsPage.vue

@@ -113,6 +113,27 @@ const generations = computed(() => {
 });
 const selectedGeneration = ref<MenuItem>(generations.value[0]);
 
+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 });
+    })
+    .uniqBy("id")
+    .orderBy("name")
+    .value();
+
+  return [
+    {
+      id: "",
+      name: `${t("Rolle")}: ${t("a.Alle")}`,
+    },
+    ...values,
+  ];
+});
+const selectedRole = ref<MenuItem>(roles.value[0]);
+
+
 const filteredPersons = computed(() => {
   return _.orderBy(
     dashboardPersons.value
@@ -145,6 +166,14 @@ const filteredPersons = computed(() => {
         return person.course_sessions.some(
           (cs) => cs.generation === selectedGeneration.value.id
         );
+      })
+      .filter((person) => {
+        if (selectedRole.value.id === "") {
+          return true;
+        }
+        return person.course_sessions.some(
+          (cs) => cs.user_role_display === selectedRole.value.id
+        );
       }),
     ["last_name", "first_name"]
   );
@@ -154,24 +183,17 @@ const filtersVisible = computed(() => {
   return (
     courses.value.length > 2 ||
     courseSessions.value.length > 2 ||
-    regions.value.length > 2
+    regions.value.length > 2 ||
+    generations.value.length > 2 ||
+    roles.value.length > 2
   );
 });
 
 function personRoleDisplayValue(personCourseSession: DashboardPersonCourseSessionType) {
-  if (personCourseSession.is_uk) {
-    if (personCourseSession.user_role === "EXPERT") {
-      return t("a.Trainer");
-    }
-    if (personCourseSession.user_role === "LEARNING_MENTOR") {
-      return t("a.Praxisbildner");
-    }
-  }
-
-  if (personCourseSession.is_vv) {
-    if (personCourseSession.user_role === "LEARNING_MENTOR") {
-      return t("a.Lernbegleitung");
-    }
+  if (
+    ["SUPERVISOR", "EXPERT", "LEARNING_MENTOR"].includes(personCourseSession.user_role)
+  ) {
+    return personCourseSession.user_role_display;
   }
 
   return "";
@@ -183,6 +205,8 @@ watch(selectedCourse, () => {
 
 watch(selectedRegion, () => {
   selectedSession.value = courseSessions.value[0];
+  selectedGeneration.value = generations.value[0];
+  selectedRole.value = roles.value[0];
 });
 </script>
 
@@ -238,6 +262,14 @@ watch(selectedRegion, () => {
               :items="generations"
               borderless
             ></ItDropdownSelect>
+
+            <ItDropdownSelect
+              v-if="roles.length > 2"
+              v-model="selectedRole"
+              data-cy="select-role"
+              :items="roles"
+              borderless
+            ></ItDropdownSelect>
           </section>
           <div
             v-for="person in filteredPersons"

client/src/services/dashboard.ts

@@ -47,7 +47,9 @@ export type DashboardPersonCourseSessionType = {
   region: string;
   generation: string;
   user_role: DashboardPersonRoleType;
+  user_role_display: string;
   my_role: DashboardPersonRoleType;
+  my_role_display: string;
   is_uk: boolean;
   is_vv: boolean;
 };

server/vbv_lernwelt/learning_mentor/admin.py

@@ -1,5 +1,6 @@
 from django.contrib import admin
 
+from vbv_lernwelt.course.models import CourseSessionUser
 from vbv_lernwelt.learning_mentor.models import LearningMentor, MentorInvitation
 
 
@@ -14,6 +15,21 @@ class LearningMentorAdmin(admin.ModelAdmin):
 
     search_fields = ["mentor__email"]
 
+    raw_id_fields = [
+        "mentor",
+        "course_session",
+    ]
+
+    def formfield_for_manytomany(self, db_field, request, **kwargs):
+        if db_field.name == "participants":
+            if request.resolver_match.kwargs.get("object_id"):
+                object_id = str(request.resolver_match.kwargs.get("object_id"))
+                lm = LearningMentor.objects.get(id=object_id)
+                kwargs["queryset"] = CourseSessionUser.objects.filter(
+                    course_session=lm.course_session
+                )
+        return super().formfield_for_manytomany(db_field, request, **kwargs)
+
 
 @admin.register(MentorInvitation)
 class MentorInvitationAdmin(admin.ModelAdmin):