Add filters to dashboard person table

client/src/pages/dashboard/DashboardPersonsPage.vue

@@ -2,10 +2,117 @@
 import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
 import log from "loglevel";
 import { useDashboardPersons } from "@/composables";
+import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
+import { computed, ref, watch } from "vue";
+import { useTranslation } from "i18next-vue";
+import _ from "lodash";
+import type { DashboardPersonCourseSessionType } from "@/services/dashboard";
 
 log.debug("DashboardPersonsPage created");
 
+const UNFILTERED = 0;
+
+type MenuItem = {
+  id: number;
+  name: string;
+};
+
+const { t } = useTranslation();
+
 const { loading: loadingPersons, dashboardPersons } = useDashboardPersons();
+
+const courses = computed(() => {
+  return [
+    {
+      id: UNFILTERED,
+      name: t("a.Alle Lehrgänge"),
+    },
+    ..._(dashboardPersons.value)
+      .flatMap((person) => person.course_sessions)
+      .map((cs) => {
+        return { name: cs.course_title, id: cs.course_id };
+      })
+      .uniqBy("id")
+      .orderBy("name")
+      .value(),
+  ];
+});
+
+const selectedCourse = ref<MenuItem>(courses.value[0]);
+
+const courseSessions = computed(() => {
+  let sessions = _(dashboardPersons.value)
+    .flatMap((person) => person.course_sessions)
+    .map((cs) => {
+      return Object.assign({}, cs, { name: cs.session_title, id: cs.id });
+    })
+    .uniqBy("id")
+    .orderBy("name")
+    .value();
+
+  // filter by selected course
+  if (selectedCourse.value.id !== UNFILTERED) {
+    sessions = sessions.filter((cs) => cs.course_id === selectedCourse.value.id);
+  }
+
+  return [
+    {
+      id: UNFILTERED,
+      name: t("a.AlleDurchführungen"),
+    },
+    ...sessions,
+  ];
+});
+
+watch(selectedCourse, () => {
+  selectedSession.value = courseSessions.value[0];
+});
+
+const selectedSession = ref<MenuItem>(courseSessions.value[0]);
+
+const filteredPersons = computed(() => {
+  return _.orderBy(
+    dashboardPersons.value
+      .filter((person) => {
+        if (selectedCourse.value.id === UNFILTERED) {
+          return true;
+        }
+        return person.course_sessions.some(
+          (cs) => cs.course_id === selectedCourse.value.id
+        );
+      })
+      .filter((person) => {
+        if (selectedSession.value.id === UNFILTERED) {
+          return true;
+        }
+        return person.course_sessions.some((cs) => cs.id === selectedSession.value.id);
+      }),
+    ["last_name", "first_name"]
+  );
+});
+
+const filtersVisible = computed(() => {
+  return courses.value.length > 2 || courseSessions.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");
+    }
+  }
+
+  return "";
+}
 </script>
 
 <template>
@@ -16,8 +123,28 @@ const { loading: loadingPersons, dashboardPersons } = useDashboardPersons();
     <div v-else class="bg-gray-200">
       <div class="container-large">
         <div class="bg-white px-4 py-2">
+          <section
+            v-if="filtersVisible"
+            class="flex flex-col space-x-0 border-b bg-white lg:flex-row lg:space-x-3"
+          >
+            <ItDropdownSelect
+              v-if="courses.length > 2"
+              v-model="selectedCourse"
+              data-cy="session-select"
+              :items="courses"
+              borderless
+            ></ItDropdownSelect>
+
+            <ItDropdownSelect
+              v-if="courseSessions.length > 2"
+              v-model="selectedSession"
+              data-cy="session-select"
+              :items="courseSessions"
+              borderless
+            ></ItDropdownSelect>
+          </section>
           <div
-            v-for="person in dashboardPersons"
+            v-for="person in filteredPersons"
             :key="person.user_id"
             data-cy="person"
             class="flex flex-col justify-between gap-4 border-b p-2 last:border-b-0 md:flex-row md:items-center md:justify-between md:gap-16"
@@ -51,8 +178,9 @@ const { loading: loadingPersons, dashboardPersons } = useDashboardPersons();
                     <div v-if="cs.is_uk">{{ cs.session_title }}</div>
                   </div>
                   <div class="md:w-1/4">
-                    <div>{{ cs.user_role }}</div>
+                    <!--                    <div>{{ cs.user_role }}</div>-->
-                    <div>my role: {{ cs.my_role }}</div>
+                    <!--                    <div>my role: {{ cs.my_role }}</div>-->
+                    {{ personRoleDisplayValue(cs) }}
                   </div>
                   <div class="md:w-1/4 md:text-right">
                     <div
@@ -81,14 +209,6 @@ const { loading: loadingPersons, dashboardPersons } = useDashboardPersons();
                 </div>
               </div>
             </div>
-
-            <!--            <button-->
-            <!--              class="underline"-->
-            <!--              data-cy="lm-my-mentor-remove"-->
-            <!--              @click="removeMyMentor(learningMentor.id)"-->
-            <!--            >-->
-            <!--              {{ $t("a.Entfernen") }}-->
-            <!--            </button>-->
           </div>
         </div>
       </div>