Add cockpit store

client/src/components/ui/ItPersonRow.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const props = defineProps<{
-  avatarLink: string;
+  avatarUrl: string;
   name: string;
 }>();
 </script>
@@ -10,7 +10,7 @@ const props = defineProps<{
     class="py-4 leading-[45px] border-t border-gray-500 flex flex-row justify-between"
   >
     <div class="flex flex-row">
-      <img class="h-[45px] rounded-full mr-2" :src="avatarLink" />
+      <img class="h-[45px] rounded-full mr-2" :src="avatarUrl" />
       <p class="text-bold leading-[45px]">{{ name }}</p>
     </div>
     <div class="leading-[45px]">

client/src/pages/cockpit/CockpitIndexPage.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import ItPersonRow from "@/components/ui/ItPersonRow.vue";
 import ItProgress from "@/components/ui/ItProgress.vue";
+import { useCockpitStore } from "@/stores/cockpit";
 import * as log from "loglevel";
 import { ref } from "vue";
 
-log.debug("CockpitPage created");
+log.debug("CockpitIndexPage created");
+
+const cockpitStore = useCockpitStore();
 
 const data = {
   circles: ["KMU Teil 1", "KMU Teil 2", "3-Säuli-Prinzip"],
@@ -87,10 +90,15 @@ function setActiveCircle(index: number) {
       </div>
       <div>
         <!-- progress -->
-        <div class="bg-white p-6">
+        <div v-if="cockpitStore.courseSessionUsers?.length" class="bg-white p-6">
           <h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
           <ul>
-            <ItPersonRow name="Hansueli Meier" avatar-link="https://picsum.photos/200">
+            <ItPersonRow
+              v-for="csu in cockpitStore.courseSessionUsers"
+              :key="csu.user_id + csu.session_title"
+              :name="`${csu.first_name} ${csu.last_name}`"
+              :avatar-url="csu.avatar_url"
+            >
               <template #center>
                 <div class="flex flex-row">
                   <div>KMU Teil 1</div>

client/src/pages/cockpit/CockpitParentPage.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useCockpitStore } from "@/stores/cockpit";
+import * as log from "loglevel";
+import { onMounted } from "vue";
+
+log.debug("CockpitParentPage created");
+
+const props = defineProps<{
+  courseSlug: string;
+}>();
+
+const cockpitStore = useCockpitStore();
+
+onMounted(async () => {
+  log.debug("CockpitParentPage mounted", props.courseSlug);
+
+  try {
+    await cockpitStore.loadCourseSessionUsers(props.courseSlug);
+  } catch (error) {
+    log.error(error);
+  }
+});
+</script>
+
+<template>
+  <div class="bg-gray-200">
+    <main>
+      <router-view></router-view>
+    </main>
+  </div>
+</template>
+
+<style scoped></style>

client/src/pages/competence/CompetenceParentPage.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
 const competenceStore = useCompetenceStore();
 
 onMounted(async () => {
-  log.debug("CompetencesView mounted", props.courseSlug);
+  log.debug("CompetenceParentPage mounted", props.courseSlug);
 
   try {
     const competencePageSlug = props.courseSlug + "-competence";

client/src/router/index.ts

@@ -98,8 +98,14 @@ const router = createRouter({
     },
     {
       path: "/course/:courseSlug/cockpit",
-      component: () => import("../pages/cockpit/CockpitPage.vue"),
       props: true,
+      component: () => import("@/pages/cockpit/CockpitParentPage.vue"),
+      children: [
+        {
+          path: "",
+          component: () => import("@/pages/cockpit/CockpitIndexPage.vue"),
+        },
+      ],
     },
     {
       path: "/shop",

client/src/stores/cockpit.ts

@@ -0,0 +1,34 @@
+import { itGetCached } from "@/fetchHelpers";
+import type { CourseSessionUser } from "@/types";
+import log from "loglevel";
+
+import { defineStore } from "pinia";
+
+export type CockpitStoreState = {
+  courseSessionUsers: CourseSessionUser[] | undefined;
+};
+
+export const useCockpitStore = defineStore({
+  id: "cockpit",
+  state: () => {
+    return {
+      courseSessionUsers: undefined,
+    } as CockpitStoreState;
+  },
+  getters: {},
+  actions: {
+    async loadCourseSessionUsers(courseSlug: string, reload = false) {
+      log.debug("loadCockpitData called");
+      this.courseSessionUsers = await itGetCached(
+        `/api/course/sessions/${courseSlug}/users/`,
+        {
+          reload: reload,
+        }
+      );
+      if (!this.courseSessionUsers) {
+        throw `No courseSessionUsers data found for user`;
+      }
+      return this.courseSessionUsers;
+    },
+  },
+});

client/src/types.ts

@@ -326,3 +326,13 @@ export interface CourseSession {
   additional_json_data: unknown;
   experts: CircleExpert[];
 }
+
+export interface CourseSessionUser {
+  session_title: string;
+  user_id: number;
+  first_name: string;
+  last_name: string;
+  email: string;
+  avatar_url: string;
+  role: "MEMBER" | "EXPERT" | "TUTOR";
+}

server/vbv_lernwelt/course/views.py

@@ -132,6 +132,7 @@ def get_course_session_users(request, course_slug):
                 "last_name": csu.user.last_name,
                 "email": csu.user.email,
                 "avatar_url": csu.user.avatar_url,
+                "role": csu.role,
             }
             for csu in qs
         ]