Add urls to `ItNavigationProgress` to make them clickable

client/src/components/ui/ItNavigationProgress.vue

@@ -8,11 +8,15 @@ export interface Props {
   currentStep: number;
   startBadgeText?: string;
   endBadgeText?: string;
+  baseUrl?: string;
+  queryParam?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   startBadgeText: undefined,
   endBadgeText: undefined,
+  baseUrl: undefined,
+  queryParam: "page",
 });
 
 const hasStartBadge = computed(() => typeof props.startBadgeText !== "undefined");
@@ -55,7 +59,10 @@ const endBadgeClasses = computed(() => {
       class="inline-flex h-7 items-center justify-center whitespace-nowrap rounded-3xl px-3 text-sm"
       :class="startBadgeClasses"
     >
-      {{ props.startBadgeText }}
+      <router-link v-if="props.baseUrl" :to="`${props.baseUrl}?${props.queryParam}=0`">
+        {{ props.startBadgeText }}
+      </router-link>
+      <span v-else>{{ props.startBadgeText }}</span>
     </div>
     <div v-for="(_, step) in numNumberSteps" :key="step" class="flex flex-row">
       <hr
@@ -66,7 +73,13 @@ const endBadgeClasses = computed(() => {
         class="inline-flex h-7 w-7 items-center justify-center rounded-full px-3 py-1 text-sm"
         :class="getPillClasses(step)"
       >
-        {{ step + 1 }}
+        <router-link
+          v-if="props.baseUrl"
+          :to="`${props.baseUrl}?${props.queryParam}=${step + 1}`"
+        >
+          {{ step + 1 }}
+        </router-link>
+        <span v-else>{{ step + 1 }}</span>
       </div>
     </div>
     <hr v-if="hasEndBadge" class="w-8 self-center border border-gray-400" />
@@ -75,7 +88,13 @@ const endBadgeClasses = computed(() => {
       class="inline-flex h-7 items-center justify-center whitespace-nowrap rounded-3xl px-3 text-sm"
       :class="endBadgeClasses"
     >
-      {{ props.endBadgeText }}
+      <router-link
+        v-if="props.baseUrl"
+        :to="`${props.baseUrl}?${props.queryParam}=${steps - 1}`"
+      >
+        {{ props.endBadgeText }}
+      </router-link>
+      <span v-else>{{ props.endBadgeText }}</span>
     </div>
   </div>
 </template>

client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue

@@ -146,6 +146,8 @@ const assignmentUser = computed(() => {
         :show-exit-button="showExitButton"
         :show-start-button="false"
         :show-previous-button="showPreviousButton"
+        :base-url="props.learningContent.frontend_url"
+        query-param="page"
         start-badge-text="Einleitung"
         end-badge-text="Abgabe"
         close-button-variant="close"

client/src/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue

@@ -19,6 +19,8 @@ interface Props {
   startBadgeText?: string;
   endBadgeText?: string;
   closeButtonVariant?: ClosingButtonVariant;
+  baseUrl?: string;
+  queryParam?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -55,6 +57,8 @@ const emit = defineEmits(["previous", "next", "exit"]);
       :start-badge-text="props.startBadgeText"
       :steps="stepsCount"
       :end-badge-text="props.endBadgeText"
+      :base-url="props.baseUrl"
+      :query-param="props.queryParam"
       class="overflow-hidden pb-12"
     ></ItNavigationProgress>
     <slot></slot>