Merged in bugfix/auftrag_ui_test_rework (pull request #80)

Auftrag UI Test rework

* UI test rework

* Fix cypress tests

client/src/components/ui/ItSuccessAlert.vue

@@ -7,6 +7,6 @@ defineProps<{
 <template>
   <div class="flex flex-row items-center space-x-2 bg-green-200 px-6">
     <it-icon-check class="it-icon"></it-icon-check>
-    <p class="text-large py-4">{{ text }}</p>
+    <p class="py-4 text-base">{{ text }}</p>
   </div>
 </template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Assignment } from "@/types";
+import { useRouteQuery } from "@vueuse/router";
 import type { Dayjs } from "dayjs";
 
 interface Props {
@@ -10,6 +11,8 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   dueDate: undefined,
 });
+
+const step = useRouteQuery("step");
 </script>
 
 <template>
@@ -27,9 +30,13 @@ const props = withDefaults(defineProps<Props>(), {
     {{ $t("assignment.taskDefinition") }}
   </p>
   <ul>
-    <li v-for="task in props.assignment.tasks" :key="task.id">
-      -
-      <span class="text-large underline">{{ task.value.title }}</span>
+    <li v-for="(task, index) in props.assignment.tasks" :key="task.id">
+      <button
+        class="text-large text-left underline"
+        @click="step = (index + 1).toString()"
+      >
+        - {{ task.value.title }}
+      </button>
     </li>
   </ul>
 

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

@@ -73,7 +73,7 @@ const onSubmit = async () => {
 
     <div v-if="completionStatus === 'in_progress'">
       <ItCheckbox
-        class="w-full border-b border-gray-400 py-6"
+        class="w-full border-b border-gray-400 py-10 sm:py-6"
         :checkbox-item="{
           label: $t('assignment.confirmSubmitResults'),
           value: 'value',
@@ -81,8 +81,9 @@ const onSubmit = async () => {
         }"
         @toggle="state.confirmInput = !state.confirmInput"
       ></ItCheckbox>
-      <div class="w-full border-b border-gray-400 py-6">
+      <div class="w-full border-b border-gray-400">
         <ItCheckbox
+          class="py-6"
           :checkbox-item="{
             label: $t('assignment.confirmSubmitPerson'),
             value: 'value',
@@ -90,7 +91,7 @@ const onSubmit = async () => {
           }"
           @toggle="state.confirmPerson = !state.confirmPerson"
         ></ItCheckbox>
-        <div class="flex flex-row items-center pl-[49px] pt-3">
+        <div class="flex flex-row items-center pb-6 pl-[49px]">
           <img
             alt="Notification icon"
             class="mr-2 h-[45px] min-w-[45px] rounded-full"

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

@@ -119,6 +119,7 @@ const completionStatus = computed(() => {
           v-html="block.value.text"
         ></p>
         <ItTextarea
+          class="w-[300px] sm:w-[600px]"
           :model-value="(getBlockData(block.id) as string) ?? ''"
           :cy-key="`user-text-input-${index}`"
           :disabled="completionStatus !== 'in_progress'"

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

@@ -142,9 +142,9 @@ const assignmentUser = computed(() => {
         :title="getTitle()"
         learning-content-type="assignment"
         :steps-count="numPages"
-        :show-next-button="showNextButton"
+        :show-next-button="showNextButton && stepIndex !== 0"
         :show-exit-button="showExitButton"
-        :show-start-button="false"
+        :show-start-button="showNextButton && stepIndex === 0"
         :show-previous-button="showPreviousButton"
         :base-url="props.learningContent.frontend_url"
         step-query-param="step"

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

@@ -53,7 +53,7 @@ defineEmits(["start", "previous", "next"]);
         v-if="props.showStartButton"
         type="button"
         class="btn-blue z-10 flex items-center"
-        data-cy="start"
+        data-cy="next-step"
         @click="$emit('start')"
       >
         {{ $t("general.start") }}

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

@@ -28,6 +28,8 @@ const props = withDefaults(defineProps<Props>(), {
   startBadgeText: undefined,
   endBadgeText: undefined,
   closeButtonVariant: "mark_as_done",
+  baseUrl: undefined,
+  stepQueryParam: undefined,
 });
 
 const emit = defineEmits(["previous", "next", "exit"]);
@@ -37,13 +39,13 @@ const emit = defineEmits(["previous", "next", "exit"]);
   <div class="container-large">
     <div
       v-if="props.learningContentType !== 'placeholder'"
-      class="flex h-min w-min items-center gap-2 rounded-full pb-10"
+      class="flex h-min items-center gap-2 rounded-full pb-10"
     >
       <component
         :is="learningContentTypeData(props.learningContentType).icon"
         class="h-6 w-6 text-gray-900"
       ></component>
-      <p class="whitespace-nowrap text-gray-900" data-cy="lc-subtitle">
+      <p class="text-gray-900" data-cy="lc-subtitle">
         {{ props.subtitle }}
       </p>
     </div>