chore: removes CockpitParentPage.vue

client/src/pages/cockpit/CockpitParentPage.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import {
-  useCourseDataWithCompletion,
-  useCourseSessionDetailQuery,
-} from "@/composables";
-import { useCockpitStore } from "@/stores/cockpit";
-import * as log from "loglevel";
-import { onMounted, ref } from "vue";
-
-log.debug("CockpitParentPage created");
-
-const props = defineProps<{
-  courseSlug: string;
-}>();
-
-const cockpitStore = useCockpitStore();
-const courseSessionDetailResult = useCourseSessionDetailQuery();
-
-const loaded = ref(false);
-
-onMounted(async () => {
-  log.debug("CockpitParentPage mounted", props.courseSlug);
-
-  try {
-    await courseSessionDetailResult.waitForData();
-    await cockpitStore.loadCircles(
-      props.courseSlug,
-      courseSessionDetailResult.findCurrentUser()
-    );
-
-    // workaround so that the completion data is loaded before display
-    const userDataPromises = courseSessionDetailResult.filterMembers().map((m) => {
-      const completionData = useCourseDataWithCompletion(props.courseSlug, m.id);
-      return completionData.resultPromise;
-    });
-    await Promise.all(userDataPromises);
-
-    loaded.value = true;
-  } catch (error) {
-    log.error(error);
-  }
-});
-</script>
-
-<template>
-  <div class="bg-gray-200">
-    <main>
-      <div v-if="loaded">
-        <router-view></router-view>
-      </div>
-    </main>
-  </div>
-</template>
-
-<style scoped></style>

client/src/pages/cockpit/CockpitUserCirclePage.vue

@@ -3,6 +3,7 @@ import CirclePage from "@/pages/learningPath/circlePage/CirclePage.vue";
 import * as log from "loglevel";
 import { computed, onMounted } from "vue";
 import { useCourseSessionDetailQuery } from "@/composables";
+import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
 
 const props = defineProps<{
   userId: string;
@@ -12,6 +13,8 @@ const props = defineProps<{
 
 log.debug("CockpitUserCirclePage created", props.userId, props.circleSlug);
 
+const { loading } = useExpertCockpitPageData(props.courseSlug);
+
 onMounted(async () => {
   log.debug("CockpitUserCirclePage mounted");
 });
@@ -25,7 +28,7 @@ const user = computed(() => {
 
 <template>
   <CirclePage
-    v-if="user"
+    v-if="user && !loading"
     :course-slug="props.courseSlug"
     :circle-slug="props.circleSlug"
     :profile-user="user"

client/src/pages/cockpit/CockpitUserProfilePage.vue

@@ -5,9 +5,10 @@ import { computed, onMounted } from "vue";
 import CompetenceDetail from "@/pages/competence/ActionCompetenceDetail.vue";
 import LearningPathPathView from "@/pages/learningPath/learningPathPage/LearningPathPathView.vue";
 import {
-  useCourseSessionDetailQuery,
   useCourseDataWithCompletion,
+  useCourseSessionDetailQuery,
 } from "@/composables";
+import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
 
 const props = defineProps<{
   userId: string;
@@ -16,6 +17,8 @@ const props = defineProps<{
 
 log.debug("CockpitUserProfilePage created", props.userId);
 
+const { loading } = useExpertCockpitPageData(props.courseSlug);
+
 const courseCompletionData = useCourseDataWithCompletion(
   props.courseSlug,
   props.userId
@@ -43,7 +46,7 @@ function setActiveClasses(isActive: boolean) {
 </script>
 
 <template>
-  <div class="bg-gray-200">
+  <div v-if="!loading" class="bg-gray-200">
     <div v-if="user" class="container-large">
       <nav class="py-4 pb-4">
         <router-link

client/src/pages/cockpit/FeedbackPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-gray-200">
+  <div v-if="!loading" class="bg-gray-200">
     <div class="container-large">
       <nav class="py-4 pb-4">
         <router-link
@@ -36,6 +36,7 @@ import { onMounted, ref } from "vue";
 import type { FeedbackData, FeedbackType } from "@/types";
 import FeedbackPageVV from "@/pages/cockpit/FeedbackPageVV.vue";
 import FeedbackPageUK from "@/pages/cockpit/FeedbackPageUK.vue";
+import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
 
 const props = defineProps<{
   courseSlug: string;
@@ -43,7 +44,7 @@ const props = defineProps<{
 }>();
 
 log.debug("FeedbackPage created", props.circleId);
-
+const { loading } = useExpertCockpitPageData(props.courseSlug);
 const courseSession = useCurrentCourseSession();
 const feedbackData = ref<FeedbackData | undefined>(undefined);
 const feedbackType = ref<FeedbackType | undefined>(undefined);

client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue

@@ -10,6 +10,7 @@ import { computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { getPreviousRoute } from "@/router/history";
 import { getAssignmentTypeTitle } from "../../../utils/utils";
+import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
 
 const props = defineProps<{
   courseSlug: string;
@@ -19,6 +20,7 @@ const props = defineProps<{
 
 log.debug("AssignmentEvaluationPage created", props.assignmentId, props.userId);
 
+const { loading } = useExpertCockpitPageData(props.courseSlug);
 const courseSession = useCurrentCourseSession();
 const router = useRouter();
 
@@ -62,7 +64,7 @@ const assignment = computed(
 </script>
 
 <template>
-  <div class="absolute bottom-0 top-0 z-10 w-full bg-white">
+  <div v-if="!loading" class="absolute bottom-0 top-0 z-10 w-full bg-white">
     <div v-if="queryResult.fetching.value"></div>
     <div v-else-if="queryResult.error.value">{{ queryResult.error.value }}</div>
     <div v-else>

client/src/pages/cockpit/assignmentsPage/AssignmentsPage.vue

@@ -4,6 +4,7 @@ import AssignmentDetails from "@/pages/cockpit/assignmentsPage/AssignmentDetails
 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;
@@ -13,6 +14,7 @@ const props = defineProps<{
 log.debug("AssignmentsPage created", props.courseSlug);
 
 const courseSession = useCurrentCourseSession();
+const { loading } = useExpertCockpitPageData(props.courseSlug);
 
 onMounted(async () => {
   log.debug("AssignmentsPage mounted");
@@ -26,7 +28,7 @@ const learningContentAssignment = computed(() => {
 </script>
 
 <template>
-  <div class="bg-gray-200">
+  <div v-if="!loading" class="bg-gray-200">
     <div class="container-large">
       <nav class="py-4 pb-4">
         <router-link

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

@@ -9,6 +9,7 @@ import log from "loglevel";
 import CockpitDates from "@/pages/cockpit/cockpitPage/CockpitDates.vue";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import UserStatusCount from "@/pages/cockpit/cockpitPage/UserStatusCount.vue";
+import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
 
 const props = defineProps<{
   courseSlug: string;
@@ -16,13 +17,15 @@ const props = defineProps<{
 
 log.debug("CockpitIndexPage created", props.courseSlug);
 
+const { loading } = useExpertCockpitPageData(props.courseSlug);
+
 const cockpitStore = useCockpitStore();
 const courseSession = useCurrentCourseSession();
 const courseSessionDetailResult = useCourseSessionDetailQuery();
 </script>
 
 <template>
-  <div class="bg-gray-200">
+  <div v-if="!loading" class="bg-gray-200">
     <div v-if="cockpitStore.circles?.length">
       <div v-if="cockpitStore.currentCircle" class="container-large">
         <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">

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

@@ -0,0 +1,36 @@
+import {
+  useCourseDataWithCompletion,
+  useCourseSessionDetailQuery,
+} from "@/composables";
+import { useCockpitStore } from "@/stores/cockpit";
+import { ref } from "vue";
+
+export function useExpertCockpitPageData(courseSlug: string) {
+  const loading = ref(true);
+
+  const cockpitStore = useCockpitStore();
+  const courseSessionDetailResult = useCourseSessionDetailQuery();
+
+  async function loadData() {
+    loading.value = true;
+    await courseSessionDetailResult.waitForData();
+    await cockpitStore.loadCircles(
+      courseSlug,
+      courseSessionDetailResult.findCurrentUser()
+    );
+
+    const userDataPromises = courseSessionDetailResult.filterMembers().map((m) => {
+      const completionData = useCourseDataWithCompletion(courseSlug, m.id);
+      return completionData.resultPromise;
+    });
+
+    await Promise.all(userDataPromises);
+    loading.value = false;
+  }
+
+  loadData();
+
+  return {
+    loading,
+  };
+}

client/src/pages/cockpit/documentPage/DocumentPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useCurrentCourseSession, useCourseData } from "@/composables";
+import { useCourseData, useCurrentCourseSession } from "@/composables";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import { useCockpitStore } from "@/stores/cockpit";
 import ItModal from "@/components/ui/ItModal.vue";
@@ -16,6 +16,7 @@ import {
 } from "@/services/files";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import DocumentListItem from "@/components/circle/DocumentListItem.vue";
+import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
 
 const cockpitStore = useCockpitStore();
 const courseSession = useCurrentCourseSession();
@@ -24,6 +25,8 @@ const courseData = useCourseData(courseSession.value?.course.slug);
 
 const { t } = useTranslation();
 
+useExpertCockpitPageData(courseData.course.value?.slug || "");
+
 const showUploadModal = ref(false);
 const showUploadErrorMessage = ref(false);
 const isUploading = ref(false);

client/src/router/index.ts

@@ -128,8 +128,6 @@ const router = createRouter({
     },
     {
       path: "/course/:courseSlug/cockpit",
-      props: true,
-      component: () => import("@/pages/cockpit/CockpitParentPage.vue"),
       children: [
         {
           path: "",