wip: course preview poc

client/src/components/header/CoursePreviewBar.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useTranslation } from "i18next-vue";
+import { useRouteLookups } from "@/utils/route";
+import { useCurrentCourseSession } from "@/composables";
+
+const { inCompetenceProfile, inLearningPath } = useRouteLookups();
+const courseSession = useCurrentCourseSession();
+
+const { t } = useTranslation();
+</script>
+
+<template>
+  <div data-cy="course-preview-bar">
+    <nav class="bg-yellow-500">
+      <div class="mx-auto px-4 lg:px-8">
+        <div
+          class="relative flex h-16 w-full flex-col items-center justify-end space-x-8 lg:flex-row lg:items-stretch lg:justify-center"
+        >
+          <strong class="flex items-center px-1 pt-1 text-black">
+            <!-- TODO: @livioso i18n -->
+            Vorschau: Teilnehmer ({{ courseSession.title }})
+          </strong>
+
+          <div class="flex space-x-8">
+            <router-link
+              :to="courseSession.learning_path_url"
+              class="preview-nav-item"
+              :class="{ 'preview-nav-item--active': inLearningPath() }"
+            >
+              {{ t("general.learningPath") }}
+            </router-link>
+
+            <router-link
+              :to="courseSession.competence_url"
+              class="preview-nav-item"
+              :class="{ 'preview-nav-item--active': inCompetenceProfile() }"
+            >
+              {{ t("competences.title") }}
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.preview-nav-item {
+  @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-black hover:text-gray-800;
+}
+
+.preview-nav-item--active {
+  @apply border-black;
+}
+</style>

client/src/components/header/MainNavigationBar.vue

@@ -14,6 +14,7 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { computed, onMounted, reactive } from "vue";
 import { useTranslation } from "i18next-vue";
+import CoursePreviewBar from "@/components/header/CoursePreviewBar.vue";
 
 log.debug("MainNavigationBar created");
 
@@ -41,13 +42,22 @@ const selectedCourseSessionTitle = computed(() => {
   return courseSessionsStore.currentCourseSession?.title;
 });
 
+const isTrainerInCourseSessionPreview = computed(() => {
+  // todo wip @livioso check if this is correct?
+  const isTrainer =
+    courseSessionsStore.currentCourseSession &&
+    courseSessionsStore.currentCourseSessionHasCockpit;
+  return isTrainer && !inCockpit();
+});
+
 onMounted(() => {
   log.debug("MainNavigationBar mounted");
 });
 </script>
 
 <template>
-  <div>
+  <CoursePreviewBar v-if="isTrainerInCourseSessionPreview" />
+  <div v-else>
     <Teleport to="body">
       <MobileMenu
         v-if="userStore.loggedIn"
@@ -116,7 +126,25 @@ onMounted(() => {
                 </router-link>
 
                 <router-link
-                  v-if="inCourse() && courseSessionsStore.currentCourseSession"
+                  v-if="
+                    inCourse() &&
+                    courseSessionsStore.currentCourseSession &&
+                    inCockpit()
+                  "
+                  :to="courseSessionsStore.currentCourseSession.learning_path_url"
+                  target="_blank"
+                  class="nav-item"
+                  :class="{ 'nav-item--active': inLearningPath() }"
+                >
+                  {{ t("general.preview") }}
+                </router-link>
+
+                <router-link
+                  v-if="
+                    inCourse() &&
+                    courseSessionsStore.currentCourseSession &&
+                    !courseSessionsStore.currentCourseSessionHasCockpit
+                  "
                   :to="courseSessionsStore.currentCourseSession.learning_path_url"
                   class="nav-item"
                   :class="{ 'nav-item--active': inLearningPath() }"
@@ -125,7 +153,11 @@ onMounted(() => {
                 </router-link>
 
                 <router-link
-                  v-if="inCourse() && courseSessionsStore.currentCourseSession"
+                  v-if="
+                    inCourse() &&
+                    courseSessionsStore.currentCourseSession &&
+                    !courseSessionsStore.currentCourseSessionHasCockpit
+                  "
                   :to="courseSessionsStore.currentCourseSession.competence_url"
                   class="nav-item"
                   :class="{ 'nav-item--active': inCompetenceProfile() }"

cypress/e2e/preview.cy.js

@@ -0,0 +1,23 @@
+import {login} from "./helpers";
+
+describe("preview.cy.js", () => {
+  beforeEach(() => {
+    cy.manageCommand("cypress_reset");
+  });
+
+  it("Student does not see preview", () => {
+    login("test-student1@example.com", "test");
+    cy.visit("/course/test-lehrgang/learn/fahrzeug");
+    cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+  });
+
+  it("Trainer sees preview exclusively on course", () => {
+    login("test-trainer1@example.com", "test");
+
+    cy.visit("/");
+    cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+
+    cy.visit("/course/test-lehrgang/learn/fahrzeug");
+    cy.get('[data-cy="course-preview-bar"]').should("exist");
+  });
+});