feat: add course list sub page

client/src/components/dashboard/CourseDetailDates.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import DueDatesList from "@/components/dueDates/DueDatesList.vue";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useDashboardStore } from "@/stores/dashboard";
+import { getCockpitUrl } from "@/utils/utils";
+
+const dashboardStore = useDashboardStore();
+const courseSessionsStore = useCourseSessionsStore();
+const allDueDates = courseSessionsStore.allDueDates();
+</script>
+
+<template>
+  <template v-if="dashboardStore.currentDashboardConfig">
+    <h4 class="mb-6 text-xl font-bold">{{ $t("a.Aktueller Lehrgang") }}</h4>
+
+    <div class="mb-6 border border-gray-300 p-6">
+      <h3 class="mb-6">{{ dashboardStore.currentDashboardConfig.name }}</h3>
+      <router-link
+        class="btn-blue"
+        target="_blank"
+        :to="getCockpitUrl(dashboardStore.currentDashboardConfig.slug)"
+      >
+        {{ $t("a.Cockpit anschauen") }}
+      </router-link>
+    </div>
+  </template>
+
+  <router-link class="mb-16 block text-sm underline" to="/statistic/list">
+    {{ $t("a.Alle Lehrgänge anzeigen") }}
+  </router-link>
+
+  <h3 class="mb-6 text-xl font-bold">{{ $t("a.AlleTermine") }}</h3>
+  <DueDatesList
+    :due-dates="allDueDates"
+    :max-count="13"
+    :show-top-border="true"
+    :show-all-due-dates-link="true"
+    :show-bottom-border="true"
+    :show-course-session="true"
+  ></DueDatesList>
+</template>

client/src/components/dashboard/SimpleDates.vue

@@ -7,7 +7,7 @@ const allDueDates = courseSessionsStore.allDueDates();
 </script>
 
 <template>
-  <h3 class="mb-6">Termine</h3>
+  <h4 class="mb-6 text-xl font-bold">{{ $t("a.AlleTermine") }}</h4>
   <DueDatesList
     :due-dates="allDueDates"
     :max-count="13"
@@ -17,5 +17,3 @@ const allDueDates = courseSessionsStore.allDueDates();
     :show-course-session="true"
   ></DueDatesList>
 </template>
-
-<style scoped></style>

client/src/gql/graphql.ts

@@ -442,7 +442,7 @@ export type DashboardConfigType = {
 
 export type DashboardType =
   | 'PROGRESS_DASHBOARD'
-  | 'SIMPLE_LIST_DASHBOARD'
+  | 'SIMPLE_DASHBOARD'
   | 'STATISTICS_DASHBOARD';
 
 export type DueDateObjectType = {

client/src/gql/schema.graphql

@@ -203,7 +203,7 @@ type DashboardConfigType {
 enum DashboardType {
   STATISTICS_DASHBOARD
   PROGRESS_DASHBOARD
-  SIMPLE_LIST_DASHBOARD
+  SIMPLE_DASHBOARD
 }
 
 type LearningPathObjectType implements CoursePageInterface {

client/src/pages/dashboard/CourseListPage.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { getCockpitUrl } from "@/utils/utils";
+import { useDashboardStore } from "@/stores/dashboard";
+
+const dashboardStore = useDashboardStore();
+</script>
+
+<template>
+  <div v-if="dashboardStore.currentDashboardConfig">
+    <div class="mb-14 flex flex-col space-y-8">
+      <div
+        v-for="config in dashboardStore.dashboardConfigs"
+        :key="config.id"
+        class="h-full bg-white p-6"
+      >
+        <h3 class="mb-4">{{ config.name }}</h3>
+        <div>
+          <router-link
+            class="btn-blue"
+            target="_blank"
+            :to="getCockpitUrl(config.slug)"
+            :data-cy="`continue-course-${config.id}`"
+          >
+            {{ $t("a.Cockpit anschauen") }}
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

client/src/pages/dashboard/DashboardPage.vue

@@ -7,8 +7,9 @@ import SimpleDates from "@/components/dashboard/SimpleDates.vue";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import { useDashboardStore } from "@/stores/dashboard";
 import type { DashboardType } from "@/gql/graphql";
-import SimpleListPage from "@/pages/dashboard/SimpleListPage.vue";
+import SimpleCoursePage from "@/pages/dashboard/SimpleCoursePage.vue";
 import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
+import CourseDetailDates from "@/components/dashboard/CourseDetailDates.vue";
 
 const dashboardStore = useDashboardStore();
 
@@ -19,8 +20,8 @@ interface DashboardPage {
 
 const boards: Record<DashboardType, DashboardPage> = {
   PROGRESS_DASHBOARD: { main: ProgressPage, aside: SimpleDates },
-  SIMPLE_LIST_DASHBOARD: { main: SimpleListPage, aside: SimpleDates },
-  STATISTICS_DASHBOARD: { main: StatisticPage, aside: SimpleDates },
+  SIMPLE_DASHBOARD: { main: SimpleCoursePage, aside: SimpleDates },
+  STATISTICS_DASHBOARD: { main: StatisticPage, aside: CourseDetailDates },
 };
 
 onMounted(dashboardStore.loadDashboardDetails);

client/src/router/index.ts

@@ -198,6 +198,11 @@ const router = createRouter({
           props: true,
           component: () => import("@/pages/dashboard/statistic/FeedbackList.vue"),
         },
+        {
+          path: "list",
+          props: true,
+          component: () => import("@/pages/dashboard/CourseListPage.vue"),
+        },
       ],
     },
     {

server/vbv_lernwelt/dashboard/graphql/queries.py

@@ -72,7 +72,7 @@ class DashboardQuery(graphene.ObjectType):
                     "course_id": c["id"],
                     "name": c["title"],
                     "slug": c["slug"],
-                    "dashboard_type": DashboardType.SIMPLE_LIST_DASHBOARD,
+                    "dashboard_type": DashboardType.SIMPLE_DASHBOARD,
                 }
                 for c in courses
             ]
@@ -202,12 +202,12 @@ def get_user_course_session_dashboards(
         if len(roles) == 1:
             course_role = roles.pop()
             if course_role == CourseSessionUser.Role.EXPERT:
-                resolved_dashboard_type = DashboardType.SIMPLE_LIST_DASHBOARD
+                resolved_dashboard_type = DashboardType.SIMPLE_DASHBOARD
             elif course_role == CourseSessionUser.Role.MEMBER:
                 resolved_dashboard_type = DashboardType.PROGRESS_DASHBOARD
         else:
             # fallback: just go with simple list dashboard
-            resolved_dashboard_type = DashboardType.SIMPLE_LIST_DASHBOARD
+            resolved_dashboard_type = DashboardType.SIMPLE_DASHBOARD
 
         dashboards.append(
             {

server/vbv_lernwelt/dashboard/graphql/types/dashboard.py

@@ -52,7 +52,7 @@ class StatisticsCourseSessionPropertiesType(graphene.ObjectType):
 class DashboardType(Enum):
     STATISTICS_DASHBOARD = "StatisticsDashboard"
     PROGRESS_DASHBOARD = "ProgressDashboard"
-    SIMPLE_LIST_DASHBOARD = "SimpleListDashboard"
+    SIMPLE_DASHBOARD = "SimpleDashboard"
 
 
 class DashboardConfigType(graphene.ObjectType):

server/vbv_lernwelt/dashboard/tests/graphql/test_dashboard.py

@@ -211,7 +211,7 @@ class DashboardTestCase(GraphQLTestCase):
         self.assertIsNotNone(course_3_config)
         self.assertEqual(course_3_config["name"], course_3.title)
         self.assertEqual(course_3_config["slug"], course_3.slug)
-        self.assertEqual(course_3_config["dashboard_type"], "SIMPLE_LIST_DASHBOARD")
+        self.assertEqual(course_3_config["dashboard_type"], "SIMPLE_DASHBOARD")
 
     def test_course_statistics_deny_not_allowed_user(self):
         # GIVEN