Load courseSessions for CockpitPage

client/src/pages/CockpitPage.vue

@@ -1,16 +1,29 @@
 <script setup lang="ts">
+import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
-import * as log from "loglevel";
+import log from "loglevel";
+import { onMounted } from "vue";
 
 log.debug("CockpitView created");
 
 const userStore = useUserStore();
+const courseSessionsStore = useCourseSessionsStore();
 
 function employer() {
   return userStore.email === "bianca.muster@eiger-versicherungen.ch"
     ? "Eiger Versicherungen"
     : "VBV";
 }
+
+onMounted(async () => {
+  log.debug("CockpitView mounted");
+
+  try {
+    await courseSessionsStore.loadCourseSessionsData();
+  } catch (error) {
+    log.error(error);
+  }
+});
 </script>
 
 <template>
@@ -22,22 +35,16 @@ function employer() {
         </h1>
         <div class="mb-14">
           <h2 class="mt-12 mb-3">Kurse</h2>
-          <div class="flex flex-col md:flex-row justify-between">
-            <div class="bg-white p-6 md:w-[48%] mb-4 md:mb-0">
-              <h3 class="mb-4">Versicherungsvermittler/in</h3>
-              <img class="mb-8 block" :src="'/static/icons/demo/vm-lernpfad.svg'" />
-              <router-link class="btn-blue" to="/learn/versicherungsvermittlerin-lp">
-                {{ $t("general.nextStep") }}
-              </router-link>
-            </div>
-            <div class="bg-white p-6 md:w-[48%]">
-              <h3 class="mb-4">Überbetriebliche Kurse</h3>
-              <img class="mb-8 block" :src="'/static/icons/demo/uk-lernpfad.svg'" />
-              <button
-                class="bg-green-500 font-semibold py-2 px-4 align-middle inline-block text-blue-900 border-2 border-green-500"
-              >
-                Abgeschlossen
-              </button>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
+            <div v-for="courseSession in courseSessionsStore.courseSessions">
+              <div class="bg-white p-6 md:h-full">
+                <h3 class="mb-4">{{ courseSession.title }}</h3>
+                <img class="mb-8 block" :src="'/static/icons/demo/vm-lernpfad.svg'" />
+                <router-link class="btn-blue" :to="courseSession.learning_path_url">
+                  {{ $t("general.nextStep") }}
+                </router-link>
+              </div>
             </div>
           </div>
         </div>

client/src/stores/courseSessions.ts

@@ -0,0 +1,32 @@
+import { itGet } from "@/fetchHelpers";
+import type { CourseSession } from "@/types";
+import log from "loglevel";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useCourseSessionsStore = defineStore("courseSessions", () => {
+  const courseSessions = ref<CourseSession[] | undefined>(undefined);
+  let loadPromise: Promise<CourseSession[]> | undefined = undefined;
+
+  async function loadCourseSessionsData(reload = false) {
+    log.debug("loadCourseSessionsData called");
+    if (courseSessions.value && !reload) {
+      return courseSessions.value;
+    }
+
+    if (!loadPromise) {
+      loadPromise = itGet(`/api/course/sessions/`);
+    }
+
+    const courseSessionsData = await loadPromise;
+
+    if (!courseSessionsData) {
+      throw `No courseSessionData found for user`;
+    }
+
+    courseSessions.value = courseSessionsData;
+    return courseSessionsData || [];
+  }
+
+  return { courseSessions, loadCourseSessionsData };
+});

client/src/types.ts

@@ -301,3 +301,28 @@ export interface DropdownListItem {
   icon: Component;
   data: object;
 }
+
+export interface CircleExpert {
+  user_id: number;
+  user_email: string;
+  user_first_name: string;
+  user_last_name: string;
+  circle_id: number;
+  circle_slug: string;
+  circle_translation_key: string;
+}
+
+export interface CourseSession {
+  id: number;
+  created_at: string;
+  updated_at: string;
+  course: Course;
+  title: string;
+  start_date: string;
+  end_date: string;
+  learning_path_url: string;
+  competence_url: string;
+  media_library_url: string;
+  additional_json_data: unknown;
+  experts: CircleExpert[];
+}