Return circle expert data, use circle data

client/src/pages/cockpit/CockpitIndexPage.vue

@@ -37,14 +37,14 @@ const data = {
 
 const selectedCircle = ref(1);
 
-function setActiveClasses(index: number) {
+function setActiveClasses(id: number) {
-  return selectedCircle.value === index
+  return cockpitStore.selectedCircle === id
     ? ["bg-blue-900", "text-white"]
     : ["text-bg-900"];
 }
 
-function setActiveCircle(index: number) {
+function setActiveCircle(id: number) {
-  selectedCircle.value = index;
+  cockpitStore.selectedCircle = id;
 }
 </script>
 
@@ -55,16 +55,16 @@ function setActiveCircle(index: number) {
         <h1 class="heading-3">{{ $t("general.circles") }}:</h1>
         <ul class="flex flex-row leading-7 text-base font-bold ml-4">
           <li
-            v-for="(circle, index) in data.circles"
+            v-for="circle in cockpitStore.circles"
-            :key="circle"
+            :key="circle.id"
             class="mr-4 last:mr-0"
           >
             <button
               class="border-2 border-blue-900 rounded-full px-4 mr-4 last:mr-0"
-              :class="setActiveClasses(index)"
+              :class="setActiveClasses(circle.id)"
-              @click="setActiveCircle(index)"
+              @click="setActiveCircle(circle.id)"
             >
-              {{ circle }}
+              {{ circle.title }}
             </button>
           </li>
         </ul>

client/src/stores/cockpit.ts

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

client/src/types.ts

@@ -329,6 +329,8 @@ export interface CourseSession {
   experts: CircleExpert[];
 }
 
+export type Role = "MEMBER" | "EXPERT" | "TUTOR";
+
 export interface CourseSessionUser {
   session_title: string;
   user_id: number;
@@ -336,5 +338,13 @@ export interface CourseSessionUser {
   last_name: string;
   email: string;
   avatar_url: string;
-  role: "MEMBER" | "EXPERT" | "TUTOR";
+  role: Role;
+}
+
+export interface ExpertSessionUser extends CourseSessionUser {
+  role: "EXPERT";
+  circles: {
+    id: number;
+    title: string;
+  }[];
 }

server/vbv_lernwelt/course/models.py

@@ -224,3 +224,14 @@ class CourseSessionUser(models.Model):
                 name="course_session_user_unique_course_session_user",
             )
         ]
+
+    def to_dict(self):
+        return {
+            "session_title": self.course_session.title,
+            "user_id": self.user.id,
+            "first_name": self.user.first_name,
+            "last_name": self.user.last_name,
+            "email": self.user.email,
+            "avatar_url": self.user.avatar_url,
+            "role": self.role,
+        }

server/vbv_lernwelt/course/views.py

@@ -129,18 +129,18 @@ def get_course_session_users(request, course_slug):
             course__slug=course_slug
         )
         qs = CourseSessionUser.objects.filter(course_session__in=course_sessions)
-        data = [
+        cockpit_user_csu = qs.filter(user_id=request.user.id)
-            {
+
-                "session_title": csu.course_session.title,
+        if len(cockpit_user_csu) == 0:
-                "user_id": csu.user.id,
+            return Response({"error": "User not found"}, status=404)
-                "first_name": csu.user.first_name,
+
-                "last_name": csu.user.last_name,
+        user_data = [csu.to_dict() for csu in qs.exclude(user_id=request.user.id)]
-                "email": csu.user.email,
+
-                "avatar_url": csu.user.avatar_url,
+        data = {
-                "role": csu.role,
+            "cockpit_user": cockpit_user_csu[0].to_dict()
+            | {"circles": cockpit_user_csu[0].expert.all().values("id", "title")},
+            "users": user_data,
         }
-            for csu in qs
-        ]
 
         return Response(status=200, data=data)
     except PermissionDenied as e: