chore: render mentor / expert cockpit based on role

client/src/pages/cockpit/cockpitPage/CockpitPage.vue

@@ -1,20 +1,26 @@
 <script setup lang="ts">
-import log from "loglevel";
+import { useCockpitStore } from "@/stores/cockpit";
+import { useCurrentCourseSession } from "@/composables";
+import { onMounted } from "vue";
+import CockpitExpertPage from "./CockpitExpertPage.vue";
+import CockpitMentorPage from "./CockpitMentorPage.vue";
 
-const props = defineProps<{
-  courseSlug: string;
-}>();
+const courseSession = useCurrentCourseSession();
+const cockpitStore = useCockpitStore();
 
-// FIXME: Decide which page to show
-//  -> CockpitExpertPage.vue
-//  -> CockpitMentorPage.vue
-
-log.debug("Cockpit page created", props.courseSlug);
+onMounted(async () => {
+  await cockpitStore.fetchCockpitType(courseSession.value.course.id);
+});
 </script>
 
 <template>
   <div class="bg-gray-200">
-    <h1>TODO</h1>
+    <template v-if="cockpitStore.cockpitType == 'expert'">
+      <CockpitExpertPage :course-slug="courseSession.course.slug" />
+    </template>
+    <template v-else-if="cockpitStore.cockpitType == 'mentor'">
+      <CockpitMentorPage :course-slug="courseSession.course.slug" />
+    </template>
   </div>
 </template>
 

client/src/router/index.ts

@@ -136,7 +136,7 @@ const router = createRouter({
       children: [
         {
           path: "",
-          component: () => import("@/pages/cockpit/cockpitPage/CockpitExpertPage.vue"),
+          component: () => import("@/pages/cockpit/cockpitPage/CockpitPage.vue"),
           props: true,
         },
         {

client/src/stores/cockpit.ts

@@ -0,0 +1,21 @@
+import { itGetCached } from "@/fetchHelpers";
+import { defineStore } from "pinia";
+import type { Ref } from "vue";
+import { ref } from "vue";
+
+type CockpitType = "mentor" | "expert" | null;
+
+export const useCockpitStore = defineStore("cockpit", () => {
+  const cockpitType: Ref<CockpitType> = ref(null);
+  const cockpitTypeIsLoading = ref(false);
+
+  async function fetchCockpitType(courseId: string) {
+    cockpitTypeIsLoading.value = true;
+    const url = `/api/course/${courseId}/cockpit/`;
+    const response = await itGetCached(url);
+    cockpitType.value = response.type;
+    cockpitTypeIsLoading.value = false;
+  }
+
+  return { cockpitType, cockpitTypeIsLoading, fetchCockpitType };
+});

server/config/urls.py

@@ -125,7 +125,7 @@ urlpatterns = [
     path(r"api/course/completion/<signed_int:course_session_id>/<uuid:user_id>/",
          request_course_completion_for_user,
          name="request_course_completion_for_user"),
-    path(r"api/course/<int:course_id>/cockpit/",
+    path(r"api/course/<signed_int:course_id>/cockpit/",
          get_cockpit_type,
          name="get_cockpit_type"),
 

server/vbv_lernwelt/api/tests/test_cockpit.py

@@ -56,4 +56,4 @@ class MeUserViewTest(APITestCase):
 
         # THEN
         self.assertEqual(response.status_code, status.HTTP_200_OK)
-        self.assertEquals(response.data["type"], "trainer")
+        self.assertEquals(response.data["type"], "expert")

server/vbv_lernwelt/api/user.py

@@ -22,6 +22,6 @@ def get_cockpit_type(request, course_id: int):
         course_session__course=course,
         role=CourseSessionUser.Role.EXPERT,
     ).exists():
-        cockpit_type = "trainer"
+        cockpit_type = "expert"
 
     return Response({"type": cockpit_type})