Add user completion data loading hack

client/src/composables.ts

@@ -311,7 +311,7 @@ export function useLearningPathWithCompletion(
   }
 
   async function _start() {
-    Promise.all([courseResult.resultPromise, updateCompletionData()]).then(
+    return Promise.all([courseResult.resultPromise, updateCompletionData()]).then(
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       ([_queryResults, completionData]) => {
         _parseCompletionData(completionData);
@@ -320,11 +320,12 @@ export function useLearningPathWithCompletion(
     );
   }
 
-  _start();
+  const resultPromise = _start();
 
   return {
     ...courseResult,
     loaded,
+    resultPromise,
     updateCompletionData,
     markCompletion,
     nextLearningContent,

client/src/pages/cockpit/CockpitParentPage.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { useCourseSessionDetailQuery } from "@/composables";
+import {
+  useCourseSessionDetailQuery,
+  useLearningPathWithCompletion,
+} from "@/composables";
 import { useCockpitStore } from "@/stores/cockpit";
 import * as log from "loglevel";
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 
 log.debug("CockpitParentPage created");
 
@@ -13,6 +16,8 @@ const props = defineProps<{
 const cockpitStore = useCockpitStore();
 const courseSessionDetailResult = useCourseSessionDetailQuery();
 
+const loaded = ref(false);
+
 onMounted(async () => {
   log.debug("CockpitParentPage mounted", props.courseSlug);
 
@@ -22,9 +27,12 @@ onMounted(async () => {
       props.courseSlug,
       courseSessionDetailResult.findCurrentUser()
     );
-    // const members = courseSessionDetailResult.filterMembers().map((m) => {
-    //   return {}
-    // });
+    const userDataPromises = courseSessionDetailResult.filterMembers().map((m) => {
+      const completionData = useLearningPathWithCompletion(props.courseSlug, m.id);
+      return completionData.resultPromise;
+    });
+    await Promise.all(userDataPromises);
+    loaded.value = true;
   } catch (error) {
     log.error(error);
   }
@@ -34,7 +42,9 @@ onMounted(async () => {
 <template>
   <div class="bg-gray-200">
     <main>
+      <div v-if="loaded">
         <router-view></router-view>
+      </div>
     </main>
   </div>
 </template>

client/src/pages/cockpit/CockpitUserProfilePage.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useCompetenceStore } from "@/stores/competence";
 import * as log from "loglevel";
 import { computed, onMounted } from "vue";
 
@@ -17,7 +16,10 @@ const props = defineProps<{
 
 log.debug("CockpitUserProfilePage created", props.userId);
 
-const competenceStore = useCompetenceStore();
+const courseCompletionData = useLearningPathWithCompletion(
+  props.courseSlug,
+  props.userId
+);
 
 onMounted(async () => {
   log.debug("CockpitUserProfilePage mounted");
@@ -87,12 +89,9 @@ function setActiveClasses(isActive: boolean) {
           </li>
         </ul>
         <div>
-          <ul
-            v-if="competenceStore.competenceProfilePage(user.user_id)"
-            class="bg-white px-8"
-          >
+          <ul class="bg-white px-8">
             <li
-              v-for="competence in competenceStore.competences(user.user_id)"
+              v-for="competence in courseCompletionData.actionCompetences.value ?? []"
               :key="competence.id"
               class="border-b border-gray-500 p-8 last:border-0"
             >

client/src/pages/competence/CompetenceParentPage.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useCompetenceStore } from "@/stores/competence";
 import * as log from "loglevel";
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
@@ -10,8 +9,6 @@ const props = defineProps<{
   courseSlug: string;
 }>();
 
-const competenceStore = useCompetenceStore();
-
 const route = useRoute();
 
 function routeInOverview() {
@@ -32,13 +29,6 @@ function routeInActionCompetences() {
 
 onMounted(async () => {
   log.debug("CompetenceParentPage mounted", props.courseSlug);
-
-  try {
-    const competencePageSlug = props.courseSlug + "-competencenavi-competences";
-    await competenceStore.loadCompetenceProfilePage(competencePageSlug);
-  } catch (error) {
-    log.error(error);
-  }
 });
 </script>