From 9eb2bbceba140c2556f7db2761e647dd6485b710 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Tue, 12 Dec 2023 10:24:11 +0100
Subject: [PATCH] chore: removes CockpitParentPage.vue

---
 .../src/pages/cockpit/CockpitParentPage.vue   | 55 -------------------
 .../pages/cockpit/CockpitUserCirclePage.vue   |  5 +-
 .../pages/cockpit/CockpitUserProfilePage.vue  |  7 ++-
 client/src/pages/cockpit/FeedbackPage.vue     |  5 +-
 .../AssignmentEvaluationPage.vue              |  4 +-
 .../assignmentsPage/AssignmentsPage.vue       |  4 +-
 .../pages/cockpit/cockpitPage/CockpitPage.vue |  5 +-
 .../pages/cockpit/cockpitPage/composables.ts  | 36 ++++++++++++
 .../cockpit/documentPage/DocumentPage.vue     |  5 +-
 client/src/router/index.ts                    |  2 -
 10 files changed, 62 insertions(+), 66 deletions(-)
 delete mode 100644 client/src/pages/cockpit/CockpitParentPage.vue
 create mode 100644 client/src/pages/cockpit/cockpitPage/composables.ts

diff --git a/client/src/pages/cockpit/CockpitParentPage.vue b/client/src/pages/cockpit/CockpitParentPage.vue
deleted file mode 100644
index 1c29046b..00000000
--- a/client/src/pages/cockpit/CockpitParentPage.vue
+++ /dev/null
@@ -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>
diff --git a/client/src/pages/cockpit/CockpitUserCirclePage.vue b/client/src/pages/cockpit/CockpitUserCirclePage.vue
index e7d2889f..eb892680 100644
--- a/client/src/pages/cockpit/CockpitUserCirclePage.vue
+++ b/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"
diff --git a/client/src/pages/cockpit/CockpitUserProfilePage.vue b/client/src/pages/cockpit/CockpitUserProfilePage.vue
index 662c92be..88df5bd4 100644
--- a/client/src/pages/cockpit/CockpitUserProfilePage.vue
+++ b/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
diff --git a/client/src/pages/cockpit/FeedbackPage.vue b/client/src/pages/cockpit/FeedbackPage.vue
index 0a5c8384..0267d5f4 100644
--- a/client/src/pages/cockpit/FeedbackPage.vue
+++ b/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);
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue b/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue
index ad72a035..513a66a3 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue
+++ b/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>
diff --git a/client/src/pages/cockpit/assignmentsPage/AssignmentsPage.vue b/client/src/pages/cockpit/assignmentsPage/AssignmentsPage.vue
index 159281be..19bf2a7f 100644
--- a/client/src/pages/cockpit/assignmentsPage/AssignmentsPage.vue
+++ b/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
diff --git a/client/src/pages/cockpit/cockpitPage/CockpitPage.vue b/client/src/pages/cockpit/cockpitPage/CockpitPage.vue
index 48aee1a4..7a88b6e0 100644
--- a/client/src/pages/cockpit/cockpitPage/CockpitPage.vue
+++ b/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">
diff --git a/client/src/pages/cockpit/cockpitPage/composables.ts b/client/src/pages/cockpit/cockpitPage/composables.ts
new file mode 100644
index 00000000..2ef892a4
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/client/src/pages/cockpit/documentPage/DocumentPage.vue b/client/src/pages/cockpit/documentPage/DocumentPage.vue
index 1fdfd40f..ff6689d1 100644
--- a/client/src/pages/cockpit/documentPage/DocumentPage.vue
+++ b/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);
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 9a07c64d..9d3b8765 100644
--- a/client/src/router/index.ts
+++ b/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: "",