From 3858cdfc7987cd1a1789e1bba8b61127073cb5e4 Mon Sep 17 00:00:00 2001
From: Elia Bieri <elia.bieri@iterativ.ch>
Date: Thu, 11 May 2023 12:48:33 +0000
Subject: [PATCH] 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         |  2 +-
 .../assignment/AssignmentIntroductionView.vue       | 13 ++++++++++---
 .../assignment/AssignmentSubmissionView.vue         |  7 ++++---
 .../assignment/AssignmentTaskView.vue               |  1 +
 .../assignment/AssignmentView.vue                   |  4 ++--
 .../layouts/LearningContentFooter.vue               |  2 +-
 .../layouts/LearningContentMultiLayout.vue          |  6 ++++--
 7 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/client/src/components/ui/ItSuccessAlert.vue b/client/src/components/ui/ItSuccessAlert.vue
index e5aa78f1..e3709a8e 100644
--- a/client/src/components/ui/ItSuccessAlert.vue
+++ b/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>
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
index 685e1a6d..56ccdc13 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
+++ b/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>
 
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue
index 140cb3b1..fd045272 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue
+++ b/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"
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue
index 2c6e5608..e1cfc704 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue
+++ b/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'"
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue
index 9b1eb527..f977078a 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue
+++ b/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"
diff --git a/client/src/pages/learningPath/learningContentPage/layouts/LearningContentFooter.vue b/client/src/pages/learningPath/learningContentPage/layouts/LearningContentFooter.vue
index 9f0eaeab..c77d0147 100644
--- a/client/src/pages/learningPath/learningContentPage/layouts/LearningContentFooter.vue
+++ b/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") }}
diff --git a/client/src/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue b/client/src/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue
index fc51c65b..be80be49 100644
--- a/client/src/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue
+++ b/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>