From 97f4e96b5c56b6bcba9a369ef4b64bf339278232 Mon Sep 17 00:00:00 2001
From: Reto Aebersold <aeby@substyle.ch>
Date: Mon, 13 Nov 2023 13:41:37 +0100
Subject: [PATCH] feat: handle no course session

---
 .../components/dashboard/NoCourseSession.vue  |  43 ++++++
 .../src/components/onboarding/WizardPage.vue  |   2 +-
 .../components/onboarding/WizardSidePanel.vue |   4 +-
 client/src/pages/DashboardPage.vue            | 124 ------------------
 client/src/pages/dashboard/DashboardPage.vue  |   2 +
 .../src/pages/onboarding/AccountProfile.vue   |  16 ++-
 client/src/pages/onboarding/WizardBase.vue    |   8 +-
 client/src/stores/dashboard.ts                |   2 +-
 8 files changed, 67 insertions(+), 134 deletions(-)
 create mode 100644 client/src/components/dashboard/NoCourseSession.vue
 delete mode 100644 client/src/pages/DashboardPage.vue

diff --git a/client/src/components/dashboard/NoCourseSession.vue b/client/src/components/dashboard/NoCourseSession.vue
new file mode 100644
index 00000000..93b802c7
--- /dev/null
+++ b/client/src/components/dashboard/NoCourseSession.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useUserStore } from "@/stores/user";
+
+const user = useUserStore();
+</script>
+
+<template>
+  <div>
+    <h2 class="mb-12">Hallo {{ user.first_name }}, wähle jetzt deinen Lehrgang aus:</h2>
+
+    <div class="grid grid-cols-1 gap-12 md:grid-cols-2">
+      <div>
+        <img src="/static/images/mood_vv.jpg" alt="Versicherungsvermittler/-in" />
+        <h3 class="mb-4 mt-8">Versicherungsvermittler/-in</h3>
+        <p class="mb-4">
+          Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als
+          Versicherungs-vermittler/-in.
+        </p>
+        <router-link
+          :to="{ name: 'accountProfile', params: { courseType: 'vv' } }"
+          class="btn-primary"
+        >
+          Jetzt mit Lehrgang starten
+        </router-link>
+      </div>
+
+      <div>
+        <img src="/static/images/mood_uk.jpg" alt="Überbetriebliche Kurse" />
+        <h3 class="mb-4 mt-8">Überbetriebliche Kurse</h3>
+        <p class="mb-4">
+          Die überbetrieblichen Kurse der kaufmännischen Ausbildungs- und
+          Prüfungsbranche «Privatversicherung».
+        </p>
+        <router-link
+          :to="{ name: 'accountProfile', params: { courseType: 'uk' } }"
+          class="btn-primary"
+        >
+          Jetzt mit Lehrgang starten
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/onboarding/WizardPage.vue b/client/src/components/onboarding/WizardPage.vue
index d0f0943f..570081c0 100644
--- a/client/src/components/onboarding/WizardPage.vue
+++ b/client/src/components/onboarding/WizardPage.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="flex h-screen flex-grow flex-col">
+  <div class="flex h-screen flex-col">
     <div class="flex-grow scroll-smooth p-16 lg:overflow-auto">
       <ItNavigationProgress :steps="3" :current-step="props.step" />
       <slot name="content"></slot>
diff --git a/client/src/components/onboarding/WizardSidePanel.vue b/client/src/components/onboarding/WizardSidePanel.vue
index 4b77e52c..1e8c6549 100644
--- a/client/src/components/onboarding/WizardSidePanel.vue
+++ b/client/src/components/onboarding/WizardSidePanel.vue
@@ -16,9 +16,7 @@ async function changeLocale(language: AvailableLanguages) {
 }
 </script>
 <template>
-  <div
-    class="flex flex-col items-center justify-between space-y-8 bg-blue-900 p-8 lg:w-1/3"
-  >
+  <div class="flex flex-col items-center justify-between space-y-8 bg-blue-900 p-8">
     <div class="flex w-full items-center justify-between">
       <div class="flex justify-center">
         <div class="h-8 w-16">
diff --git a/client/src/pages/DashboardPage.vue b/client/src/pages/DashboardPage.vue
deleted file mode 100644
index 1b62c63f..00000000
--- a/client/src/pages/DashboardPage.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<script setup lang="ts">
-import DueDatesList from "@/components/dueDates/DueDatesList.vue";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
-import { useUserStore } from "@/stores/user";
-import type { CourseSession } from "@/types";
-import log from "loglevel";
-import { computed, onMounted } from "vue";
-import { getCockpitUrl, getLearningPathUrl } from "@/utils/utils";
-import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
-
-log.debug("DashboardPage created");
-
-const userStore = useUserStore();
-const courseSessionsStore = useCourseSessionsStore();
-
-onMounted(async () => {
-  log.debug("DashboardPage mounted");
-});
-
-const allDueDates = courseSessionsStore.allDueDates();
-const getNextStepLink = (courseSession: CourseSession) => {
-  return computed(() => {
-    if (courseSessionsStore.hasCockpit(courseSession)) {
-      return getCockpitUrl(courseSession.course.slug);
-    }
-    return getLearningPathUrl(courseSession.course.slug);
-  });
-};
-</script>
-
-<template>
-  <div class="flex flex-col lg:flex-row">
-    <main class="grow bg-gray-200 lg:order-2">
-      <div class="container-medium mt-14">
-        <h1 data-cy="welcome-message">
-          {{ $t("dashboard.welcome", { name: userStore.first_name }) }}
-        </h1>
-        <div v-if="courseSessionsStore.uniqueCourseSessionsByCourse.length > 0">
-          <div class="mb-14">
-            <h2 class="mb-3 mt-12">{{ $t("dashboard.courses") }}</h2>
-
-            <div class="grid auto-rows-fr grid-cols-1 gap-4 md:grid-cols-2">
-              <div
-                v-for="courseSession in courseSessionsStore.uniqueCourseSessionsByCourse"
-                :key="courseSession.id"
-              >
-                <div class="bg-white p-6 md:h-full">
-                  <h3 class="mb-4">{{ courseSession.course.title }}</h3>
-                  <div>
-                    <LearningPathDiagram
-                      class="mb-4"
-                      :course-slug="courseSession.course.slug"
-                      :course-session-id="courseSession.id"
-                      diagram-type="horizontalSmall"
-                    ></LearningPathDiagram>
-                  </div>
-                  <div>
-                    <router-link
-                      class="btn-blue"
-                      :to="getNextStepLink(courseSession).value"
-                      :data-cy="`continue-course-${courseSession.course.id}`"
-                    >
-                      {{ $t("general.nextStep") }}
-                    </router-link>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <h3 class="mb-6">{{ $t("dashboard.dueDatesTitle") }}</h3>
-            <DueDatesList
-              class="bg-white p-6"
-              :due-dates="allDueDates"
-              :max-count="13"
-              :show-top-border="false"
-              :show-all-due-dates-link="true"
-              :show-bottom-border="true"
-              :show-course-session="true"
-            ></DueDatesList>
-          </div>
-        </div>
-        <div v-else class="mb-14">
-          <div class="mb-12">
-            <h2 class="mb-3 mt-12">{{ $t("dashboard.courses") }}</h2>
-            <p class="mb-8">{{ $t("uk.dashboard.welcome") }}</p>
-            <p>{{ $t("uk.dashboard.nextSteps") }}</p>
-          </div>
-          <div>
-            <h2 class="mb-3 mt-12">{{ $t("uk.dashboard.allClear") }}</h2>
-            <h3 class="font-normal">{{ $t("footer.contact") }}</h3>
-            <address class="not-italic">
-              <p class="non-italic">
-                {{ $t("uk.contact.title") }}
-                <br />
-                {{ $t("uk.contact.team") }}
-                <br />
-                {{ $t("uk.contact.address") }}
-                <br />
-                <a class="link" href="mailto:uek-support@vbv-afa.ch">
-                  uek-support@vbv-afa.ch
-                </a>
-              </p>
-            </address>
-          </div>
-        </div>
-      </div>
-    </main>
-    <aside class="m-8 lg:order-1 lg:w-[343px]">
-      <div class="mx-auto mb-6 pb-6 text-center">
-        <img
-          class="mb-4 inline-block h-36 w-36 rounded-full"
-          :src="userStore.avatar_url"
-        />
-        <div>
-          <p class="text-bold">{{ userStore.first_name }} {{ userStore.last_name }}</p>
-          <p>{{ userStore.email }}</p>
-        </div>
-      </div>
-    </aside>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/client/src/pages/dashboard/DashboardPage.vue b/client/src/pages/dashboard/DashboardPage.vue
index 4e9fd417..704de32c 100644
--- a/client/src/pages/dashboard/DashboardPage.vue
+++ b/client/src/pages/dashboard/DashboardPage.vue
@@ -10,6 +10,7 @@ import type { DashboardType } from "@/gql/graphql";
 import SimpleCoursePage from "@/pages/dashboard/SimpleCoursePage.vue";
 import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
 import CourseDetailDates from "@/components/dashboard/CourseDetailDates.vue";
+import NoCourseSession from "@/components/dashboard/NoCourseSession.vue";
 
 const dashboardStore = useDashboardStore();
 
@@ -58,4 +59,5 @@ onMounted(dashboardStore.loadDashboardDetails);
       ></component>
     </aside>
   </div>
+  <NoCourseSession v-else class="container-medium mt-14" />
 </template>
diff --git a/client/src/pages/onboarding/AccountProfile.vue b/client/src/pages/onboarding/AccountProfile.vue
index ff4ac3c2..3091ab1d 100644
--- a/client/src/pages/onboarding/AccountProfile.vue
+++ b/client/src/pages/onboarding/AccountProfile.vue
@@ -11,6 +11,9 @@ import { useRoute } from "vue-router";
 const user = useUserStore();
 const route = useRoute();
 const selectedCompany = ref(companies[0]);
+const validCompany = computed(() => {
+  return selectedCompany.value.id !== "0";
+});
 
 const {
   upload: avatarUpload,
@@ -80,9 +83,16 @@ const nextRoute = computed(() => {
     </template>
 
     <template #footer>
-      <router-link :to="{ name: nextRoute }" class="btn-blue flex items-center">
-        Weiter
-        <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
+      <router-link v-slot="{ navigate }" :to="{ name: nextRoute }" custom>
+        <button
+          :disabled="!validCompany"
+          class="btn-blue flex items-center"
+          role="link"
+          @click="navigate"
+        >
+          Weiter
+          <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
+        </button>
       </router-link>
     </template>
   </WizardPage>
diff --git a/client/src/pages/onboarding/WizardBase.vue b/client/src/pages/onboarding/WizardBase.vue
index 5dc70552..3efdbcac 100644
--- a/client/src/pages/onboarding/WizardBase.vue
+++ b/client/src/pages/onboarding/WizardBase.vue
@@ -34,7 +34,11 @@ const courseData = computed(() => {
 
 <template>
   <div class="flex flex-col lg:flex-row">
-    <WizardSidePanel :image-url="courseData.imageUrl" :course-name="courseData.name" />
-    <router-view />
+    <WizardSidePanel
+      class="lg:w-1/3"
+      :image-url="courseData.imageUrl"
+      :course-name="courseData.name"
+    />
+    <router-view class="lg:w-2/3" />
   </div>
 </template>
diff --git a/client/src/stores/dashboard.ts b/client/src/stores/dashboard.ts
index 7286eec6..1b011169 100644
--- a/client/src/stores/dashboard.ts
+++ b/client/src/stores/dashboard.ts
@@ -48,7 +48,7 @@ export const useDashboardStore = defineStore("dashboard", () => {
   const loadDashboardConfig = async () => {
     if (dashboardConfigs.value.length > 0) return;
     const configData = await fetchDashboardConfig();
-    if (configData) {
+    if (configData && configData.length > 0) {
       dashboardConfigs.value = configData;
       await switchAndLoadDashboardConfig(configData[0]);
     }