AssignmentDetailPage for Berufsbildner

client/src/composables.ts

@@ -129,8 +129,11 @@ export function useCourseSessionDetailQuery(courSessionId?: string) {
     return findUser(userId);
   }
 
-  function filterMembers() {
+  function filterMembers(userSelectionIds: string[] | null = null) {
     return (courseSessionDetail.value?.users ?? []).filter((u) => {
+      if (userSelectionIds) {
+        return userSelectionIds.includes(u.user_id) && u.role === "MEMBER";
+      }
       return u.role === "MEMBER";
     });
   }

client/src/pages/cockpit/cockpitPage/composables.ts

@@ -5,7 +5,10 @@ import {
 import { useExpertCockpitStore } from "@/stores/expertCockpit";
 import { ref } from "vue";
 
-export function useExpertCockpitPageData(courseSlug: string) {
+export function useExpertCockpitPageData(
+  courseSlug: string,
+  userSelectionIds: string[] | null = null
+) {
   const loading = ref(true);
 
   const cockpitStore = useExpertCockpitStore();
@@ -19,10 +22,12 @@ export function useExpertCockpitPageData(courseSlug: string) {
       courseSessionDetailResult.findCurrentUser()
     );
 
-    const userDataPromises = courseSessionDetailResult.filterMembers().map((m) => {
-      const completionData = useCourseDataWithCompletion(courseSlug, m.user_id);
-      return completionData.resultPromise;
-    });
+    const userDataPromises = courseSessionDetailResult
+      .filterMembers(userSelectionIds)
+      .map((m) => {
+        const completionData = useCourseDataWithCompletion(courseSlug, m.user_id);
+        return completionData.resultPromise;
+      });
 
     await Promise.all(userDataPromises);
     loading.value = false;

client/src/pages/dashboard/agentAssignment/AgentAssignmentDetailPage.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useCourseData, useCurrentCourseSession } from "@/composables";
+import AssignmentDetails from "@/pages/cockpit/assignmentsPage/AssignmentDetails.vue";
+import * as log from "loglevel";
+import { computed, onMounted } from "vue";
+import type { LearningContentAssignment, LearningContentEdoniqTest } from "@/types";
+import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
+
+const props = defineProps<{
+  courseSlug: string;
+  assignmentId: string;
+}>();
+
+log.debug("AgentAssignmentDetailPage created", props.courseSlug);
+
+const courseSession = useCurrentCourseSession();
+const { loading } = useExpertCockpitPageData(props.courseSlug);
+
+onMounted(async () => {
+  log.debug("AgentAssignmentDetailPage mounted");
+});
+
+const lpQueryResult = useCourseData(props.courseSlug);
+
+const learningContentAssignment = computed(() => {
+  return lpQueryResult.findLearningContent(props.assignmentId);
+});
+</script>
+
+<template>
+  <div v-if="!loading" class="bg-gray-200">
+    <div class="container-large">
+      <nav class="py-4 pb-4">
+        <router-link
+          class="btn-text inline-flex items-center pl-0"
+          :to="`/course/${props.courseSlug}/cockpit`"
+        >
+          <it-icon-arrow-left />
+          <span>{{ $t("general.back") }}</span>
+        </router-link>
+      </nav>
+      <main>
+        <div class="bg-white p-6">
+          <!-- prettier-ignore -->
+          <AssignmentDetails
+            v-if="learningContentAssignment"
+            :course-session="courseSession"
+            :learning-content="learningContentAssignment as (LearningContentAssignment | LearningContentEdoniqTest)"
+          />
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

client/src/pages/dashboard/agentAssignment/AgentAssignmentStatisticPage.vue

@@ -8,7 +8,6 @@ import {
 import type { BaseStatisticsType } from "@/gql/graphql";
 import { useDashboardStore } from "@/stores/dashboard";
 import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
-import courseStatistics from "@/components/dashboard/CourseStatistics.vue";
 import AssignmentList from "@/pages/dashboard/statistic/AssignmentList.vue";
 
 const dashboardStore = useDashboardStore();

client/src/router/index.ts

@@ -340,18 +340,18 @@ const router = createRouter({
       ],
     },
     {
-      path: "/statistic/:agentRole/:courseSlug",
+      path: "/statistic/:agentRole/:courseSlug/assignment",
       props: true,
       component: () =>
-        import("@/pages/dashboard/statistic/AgentStatisticParentPage.vue"),
-      children: [
-        {
-          path: "assignment",
-          props: true,
-          component: () => import("@/pages/dashboard/statistic/AssignmentList.vue"),
-        },
-      ],
+        import("@/pages/dashboard/agentAssignment/AgentAssignmentStatisticPage.vue"),
     },
+    {
+      path: "/statistic/:agentRole/:courseSlug/assignment/:assignmentId",
+      props: true,
+      component: () =>
+        import("@/pages/dashboard/agentAssignment/AgentAssignmentDetailPage.vue"),
+    },
+
     {
       path: "/shop",
       component: () => import("@/pages/ShopPage.vue"),

client/src/services/dashboard.ts

@@ -153,7 +153,7 @@ export const fetchDashboardConfig = async (): Promise<DashboardConfigType[] | nu
 
 export const fetchMentorCompetenceSummary = async (
   courseId: string,
-  roleKey: string,
+  roleKey: string
 ): Promise<BaseStatisticsType | null> => {
   let agentRole = "";
   if (