From 48cf9026d951441ea2ff8f117571889a243c2ad4 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 2 Dec 2022 14:13:16 +0100
Subject: [PATCH] Add cockpit store

---
 client/src/components/ui/ItPersonRow.vue      |  4 +--
 .../{CockpitPage.vue => CockpitIndexPage.vue} | 14 ++++++--
 .../src/pages/cockpit/CockpitParentPage.vue   | 33 ++++++++++++++++++
 .../pages/competence/CompetenceParentPage.vue |  2 +-
 client/src/router/index.ts                    |  8 ++++-
 client/src/stores/cockpit.ts                  | 34 +++++++++++++++++++
 client/src/types.ts                           | 10 ++++++
 server/vbv_lernwelt/course/views.py           |  1 +
 8 files changed, 99 insertions(+), 7 deletions(-)
 rename client/src/pages/cockpit/{CockpitPage.vue => CockpitIndexPage.vue} (89%)
 create mode 100644 client/src/pages/cockpit/CockpitParentPage.vue
 create mode 100644 client/src/stores/cockpit.ts

diff --git a/client/src/components/ui/ItPersonRow.vue b/client/src/components/ui/ItPersonRow.vue
index 5e09c321..5ab36d42 100644
--- a/client/src/components/ui/ItPersonRow.vue
+++ b/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]">
diff --git a/client/src/pages/cockpit/CockpitPage.vue b/client/src/pages/cockpit/CockpitIndexPage.vue
similarity index 89%
rename from client/src/pages/cockpit/CockpitPage.vue
rename to client/src/pages/cockpit/CockpitIndexPage.vue
index db1e1e27..b212d437 100644
--- a/client/src/pages/cockpit/CockpitPage.vue
+++ b/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>
diff --git a/client/src/pages/cockpit/CockpitParentPage.vue b/client/src/pages/cockpit/CockpitParentPage.vue
new file mode 100644
index 00000000..676b0bf2
--- /dev/null
+++ b/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>
diff --git a/client/src/pages/competence/CompetenceParentPage.vue b/client/src/pages/competence/CompetenceParentPage.vue
index 78051812..ff4dab2c 100644
--- a/client/src/pages/competence/CompetenceParentPage.vue
+++ b/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";
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index a61031c1..14e3f583 100644
--- a/client/src/router/index.ts
+++ b/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",
diff --git a/client/src/stores/cockpit.ts b/client/src/stores/cockpit.ts
new file mode 100644
index 00000000..45c80af1
--- /dev/null
+++ b/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;
+    },
+  },
+});
diff --git a/client/src/types.ts b/client/src/types.ts
index 78928b91..67eb034e 100644
--- a/client/src/types.ts
+++ b/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";
+}
diff --git a/server/vbv_lernwelt/course/views.py b/server/vbv_lernwelt/course/views.py
index a047cfce..0b12650d 100644
--- a/server/vbv_lernwelt/course/views.py
+++ b/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
         ]