From c2d50a912ff308a535b85a8c071f2a4749d0fadf Mon Sep 17 00:00:00 2001
From: sjschlapbach <julius.schlapbach@gmx.net>
Date: Sun, 22 Dec 2024 13:56:12 +0100
Subject: [PATCH] enhance: add possibility to switch between different
 activities of the same course on quiz dashboard

---
 .../quiz/QuizAnalyticsNavigation.tsx          | 68 ++++++++++++++++++-
 .../analytics/[courseId]/quizzes/[id].tsx     |  4 +-
 packages/i18n/messages/de.ts                  |  1 +
 packages/i18n/messages/en.ts                  |  1 +
 4 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/apps/frontend-manage/src/components/analytics/quiz/QuizAnalyticsNavigation.tsx b/apps/frontend-manage/src/components/analytics/quiz/QuizAnalyticsNavigation.tsx
index 942e3a39b8..083cc56c51 100644
--- a/apps/frontend-manage/src/components/analytics/quiz/QuizAnalyticsNavigation.tsx
+++ b/apps/frontend-manage/src/components/analytics/quiz/QuizAnalyticsNavigation.tsx
@@ -1,22 +1,84 @@
+import { useQuery } from '@apollo/client'
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { GetCourseActivitiesDocument } from '@klicker-uzh/graphql/dist/ops'
+import Loader from '@klicker-uzh/shared-components/src/Loader'
+import { SelectField } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
-function QuizAnalyticsNavigation({ courseId }: { courseId: string }) {
+function QuizAnalyticsNavigation({
+  courseId,
+  activityId,
+}: {
+  courseId: string
+  activityId: string
+}) {
+  const { data, loading } = useQuery(GetCourseActivitiesDocument, {
+    variables: { courseId },
+  })
   const t = useTranslations()
+  const router = useRouter()
+
+  if (loading) {
+    return <Loader />
+  }
 
   return (
-    <div className="flex w-full flex-row justify-between">
+    <div className="mb-6 grid w-full grid-cols-3">
       <Link
         href={`/analytics/${courseId}/quizzes`}
-        className="mb-6 flex flex-row items-center gap-2"
+        className="flex flex-row items-center gap-2"
       >
         <FontAwesomeIcon icon={faChevronLeft} size="lg" />
         <div className="flex flex-row items-center gap-0.5">
           {t('manage.analytics.backToActivitySelection')}
         </div>
       </Link>
+      <div className="flex justify-center">
+        <SelectField
+          label={`${t('shared.generic.activity')}:`}
+          labelType="large"
+          value={activityId}
+          groups={[
+            ...(data?.getCourseActivities?.practiceQuizzes &&
+            data.getCourseActivities.practiceQuizzes.length > 0
+              ? [
+                  {
+                    label: `${t('shared.generic.practiceQuizzes')}:`,
+                    items:
+                      data?.getCourseActivities?.practiceQuizzes?.map(
+                        (activity) => ({
+                          label: activity.name,
+                          value: activity.id,
+                        })
+                      ) ?? [],
+                  },
+                ]
+              : []),
+            ...(data?.getCourseActivities?.microLearnings &&
+            data.getCourseActivities.microLearnings.length > 0
+              ? [
+                  {
+                    label: `${t('shared.generic.microlearnings')}:`,
+                    items:
+                      data?.getCourseActivities?.microLearnings?.map(
+                        (activity) => ({
+                          label: activity.name,
+                          value: activity.id,
+                        })
+                      ) ?? [],
+                  },
+                ]
+              : []),
+          ]}
+          onChange={(value) => {
+            router.push({ pathname: `/analytics/${courseId}/quizzes/${value}` })
+          }}
+          className={{ select: { trigger: 'h-8' } }}
+        />
+      </div>
     </div>
   )
 }
diff --git a/apps/frontend-manage/src/pages/analytics/[courseId]/quizzes/[id].tsx b/apps/frontend-manage/src/pages/analytics/[courseId]/quizzes/[id].tsx
index 47a8abcc8b..baf90432db 100644
--- a/apps/frontend-manage/src/pages/analytics/[courseId]/quizzes/[id].tsx
+++ b/apps/frontend-manage/src/pages/analytics/[courseId]/quizzes/[id].tsx
@@ -22,7 +22,9 @@ function QuizAnalytics() {
     skip: !activityId,
   })
 
-  const navigation = <QuizAnalyticsNavigation courseId={courseId} />
+  const navigation = (
+    <QuizAnalyticsNavigation courseId={courseId} activityId={activityId} />
+  )
   const analytics = data?.getActivityAnalytics
 
   const chartColors = {
diff --git a/packages/i18n/messages/de.ts b/packages/i18n/messages/de.ts
index ba0e0ca152..55a8982c75 100644
--- a/packages/i18n/messages/de.ts
+++ b/packages/i18n/messages/de.ts
@@ -230,6 +230,7 @@ export default {
       q3: 'Q3',
       weeks: 'Wochen',
       student: 'Studierende(r)',
+      activity: 'Aktivität',
     },
     contentInput: {
       boldStyle:
diff --git a/packages/i18n/messages/en.ts b/packages/i18n/messages/en.ts
index 742655c4ba..4bc3afecc1 100644
--- a/packages/i18n/messages/en.ts
+++ b/packages/i18n/messages/en.ts
@@ -230,6 +230,7 @@ export default {
       q3: 'Q3',
       weeks: 'Weeks',
       student: 'Student',
+      activity: 'Activity',
     },
     contentInput: {
       boldStyle: