From 142d0f374ec7d3af738861ae1291e12e0d70d63f Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 17 Jan 2023 08:09:00 +0100
Subject: [PATCH] Add feedback completion

---
 client/src/components/FeedbackForm.vue        | 44 +++++++++++++------
 client/src/components/MobileMenu.vue          |  1 +
 .../learningPath/FeedbackCompletition.vue     | 41 +++++++++++++++++
 .../components/learningPath/FeedbackIntro.vue | 10 ++---
 .../learningPath/LearningContent.vue          |  1 -
 .../learningPath/LearningContentContainer.vue |  4 +-
 .../LearningContentNavigation.vue             |  9 ++--
 .../learningPath/SelfEvaluation.vue           |  2 +-
 client/src/components/ui/ItRadioGroup.vue     |  4 +-
 client/src/components/ui/ItTextarea.vue       |  2 +-
 client/src/locales/de.json                    |  8 +++-
 cypress/e2e/circle.cy.js                      |  2 +
 cypress/e2e/mediaLibrary.cy.js                |  2 +-
 13 files changed, 99 insertions(+), 31 deletions(-)
 create mode 100644 client/src/components/learningPath/FeedbackCompletition.vue

diff --git a/client/src/components/FeedbackForm.vue b/client/src/components/FeedbackForm.vue
index db722028..db983244 100644
--- a/client/src/components/FeedbackForm.vue
+++ b/client/src/components/FeedbackForm.vue
@@ -3,7 +3,11 @@
     <FeedbackIntro
       v-if="stepNo === 0"
       :title="circleStore.circle?.title"
-      :intro="$t('feedback.intro', {name: `${courseSessionsStore.circleExperts[0].first_name} ${courseSessionsStore.circleExperts[0].last_name}`})"
+      :intro="
+        $t('feedback.intro', {
+          name: `${courseSessionsStore.circleExperts[0].first_name} ${courseSessionsStore.circleExperts[0].last_name}`,
+        })
+      "
       @start="stepNo = 1"
     ></FeedbackIntro>
     <ItRadioGroup
@@ -75,19 +79,32 @@
       class="mb-8"
     />
     <ItTextarea
-      v-if="stepNo === 8"
+      v-if="stepNo === 10"
       v-model="coursePositiveFeedback"
       :label="$t('feedback.coursePositiveFeedbackLabel')"
       class="mb-8"
     />
+    <FeedbackCompletition
+      v-if="stepNo === 11"
+      :avatar-url="courseSessionsStore.circleExperts[0].avatar_url"
+      :title="
+        $t('feedback.completionTitle', {
+          name: `${courseSessionsStore.circleExperts[0].first_name} ${courseSessionsStore.circleExperts[0].last_name}`,
+        })
+      "
+      :description="$t('feedback.completionDescription')"
+      :feedback-sent="mutationResult != null"
+      @send-feedback="sendFeedback"
+    />
+
     <LearningContentNavigation
-          :show-back-button="stepNo > 0"
-          :show-next-button="stepNo > 0"
-          :question-index="stepNo"
-          :max-question-index="MAX_STEPS"
-          @back="previousStep"
-          @continue="nextStep"
-        ></LearningContentNavigation>
+      :show-back-button="stepNo > 0"
+      :show-next-button="stepNo > 0 && stepNo < MAX_STEPS - 1"
+      :question-index="stepNo"
+      :max-question-index="MAX_STEPS"
+      @back="previousStep"
+      @continue="nextStep"
+    ></LearningContentNavigation>
     <hr class="mb-10 mt-10" />
     <pre>
      satisfaction {{ satisfaction }}
@@ -112,14 +129,15 @@ import {
   RATINGS,
   YES_NO,
 } from "@/components/learningPath/feedback.constants";
-import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
-import ItTextarea from "@/components/ui/ItTextarea.vue";
+import FeedbackCompletition from "@/components/learningPath/FeedbackCompletition.vue";
 import FeedbackIntro from "@/components/learningPath/FeedbackIntro.vue";
 import LearningContentNavigation from "@/components/learningPath/LearningContentNavigation.vue";
+import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
+import ItTextarea from "@/components/ui/ItTextarea.vue";
 import { graphql } from "@/gql/";
 import type { SendFeedbackInput } from "@/gql/graphql";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useCircleStore } from "@/stores/circle";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { LearningContent } from "@/types";
 import { useMutation } from "@urql/vue";
 import log from "loglevel";
@@ -134,7 +152,7 @@ onMounted(async () => {
 });
 
 const stepNo = ref(0);
-const MAX_STEPS = 10;
+const MAX_STEPS = 12;
 
 const sendFeedbackMutation = graphql(`
   mutation SendFeedbackMutation($input: SendFeedbackInput!) {
diff --git a/client/src/components/MobileMenu.vue b/client/src/components/MobileMenu.vue
index 5ae62fcc..f21503f8 100644
--- a/client/src/components/MobileMenu.vue
+++ b/client/src/components/MobileMenu.vue
@@ -80,6 +80,7 @@ const clickLink = (to: string | undefined) => {
               </li>
               <li class="mt-6">
                 <button
+                  data-cy="medialibrary-link"
                   @click="
                     clickLink(
                       courseSessionsStore.courseSessionForRoute?.media_library_url
diff --git a/client/src/components/learningPath/FeedbackCompletition.vue b/client/src/components/learningPath/FeedbackCompletition.vue
new file mode 100644
index 00000000..ee27de0d
--- /dev/null
+++ b/client/src/components/learningPath/FeedbackCompletition.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h1 class="hidden lg:block lg:mb-12">{{ title }}</h1>
+    <div
+      class="b-0 lg:border lg:border-gray-400 p-8 flex flex-col lg:items-center lg:flex-row"
+    >
+      <img :src="avatarUrl" class="w-16 h-16 rounded-full mb-6 lg:mr-12" />
+      <h1 class="block lg:hidden mb-8">{{ title }}</h1>
+      <div>
+        <p class="mb-6">{{ description }}</p>
+        <button v-if="!feedbackSent" class="btn-primary" @click="$emit('sendFeedback')">
+          {{ $t("feedback.sendFeedback") }}
+        </button>
+        <p v-else class="bg-green-200 px-6 py-4 flex items-center">
+          <it-icon-check
+            class="text-green-800 w-7 h-7 mr-2 inline-block"
+          ></it-icon-check>
+          {{ $t("feedback.feedbackSent") }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  avatarUrl: string;
+  title: string;
+  description: string;
+  feedbackSent: boolean;
+}
+
+const _props = withDefaults(defineProps<Props>(), {
+  avatarUrl: "",
+  title: "",
+  description: "",
+  feedbackSent: false,
+});
+
+defineEmits(["sendFeedback"]);
+</script>
diff --git a/client/src/components/learningPath/FeedbackIntro.vue b/client/src/components/learningPath/FeedbackIntro.vue
index f5410ca9..7804adf3 100644
--- a/client/src/components/learningPath/FeedbackIntro.vue
+++ b/client/src/components/learningPath/FeedbackIntro.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <h1 class="mb-8">«{{ title }}»: {{ $t("feedback.areYouSatisfied") }}</h1>
-    <p class="mb-8"> {{ intro }}</p>
-    <button
-    class="btn-primary"
-    @click="$emit('start')">{{ $t("general.start") }}</button>
+    <p class="mb-8">{{ intro }}</p>
+    <button class="btn-primary" @click="$emit('start')">
+      {{ $t("general.start") }}
+    </button>
   </div>
 </template>
 
@@ -12,7 +12,7 @@
 interface Props {
   title: string;
   intro: string;
-};
+}
 
 const _props = withDefaults(defineProps<Props>(), {
   title: "",
diff --git a/client/src/components/learningPath/LearningContent.vue b/client/src/components/learningPath/LearningContent.vue
index ed9c116d..aa1799bd 100644
--- a/client/src/components/learningPath/LearningContent.vue
+++ b/client/src/components/learningPath/LearningContent.vue
@@ -52,7 +52,6 @@ const component = computed(() => {
 const showNavigationBorder = computed(() => {
   return block.value?.type !== "feedback";
 });
-
 </script>
 
 <template>
diff --git a/client/src/components/learningPath/LearningContentContainer.vue b/client/src/components/learningPath/LearningContentContainer.vue
index 68e936ce..a0bde5f5 100644
--- a/client/src/components/learningPath/LearningContentContainer.vue
+++ b/client/src/components/learningPath/LearningContentContainer.vue
@@ -47,11 +47,11 @@ defineEmits(["next", "exit"]);
         :class="{ 'border-t': showBorder }"
       >
         <div class="flex justify-between">
-          <!-- <LearningContentBadge
+          <LearningContentBadge
             v-if="learningContentBlock && learningContentBlock.type"
             :learning-content-type="learningContentBlock.type"
             class="mr-2"
-          /> -->
+          />
           <h1 class="text-base font-normal hidden lg:inline-block" data-cy="ln-title">
             {{ title }}
           </h1>
diff --git a/client/src/components/learningPath/LearningContentNavigation.vue b/client/src/components/learningPath/LearningContentNavigation.vue
index d60df919..4d9e2408 100644
--- a/client/src/components/learningPath/LearningContentNavigation.vue
+++ b/client/src/components/learningPath/LearningContentNavigation.vue
@@ -4,7 +4,7 @@ interface Props {
   showNextButton: boolean;
   questionIndex: number;
   maxQuestionIndex: number;
-};
+}
 
 const _props = withDefaults(defineProps<Props>(), {
   showBackButton: true,
@@ -13,7 +13,6 @@ const _props = withDefaults(defineProps<Props>(), {
   maxQuestionIndex: 0,
 });
 
-
 defineEmits(["back", "continue"]);
 </script>
 
@@ -23,8 +22,8 @@ defineEmits(["back", "continue"]);
       <button
         v-if="showBackButton"
         class="btn-secondary flex items-center mr-2"
-        @click="$emit('back')"
         data-cy="previous-step"
+        @click="$emit('back')"
       >
         <it-icon-arrow-left class="w-6 h-6 mr-2"></it-icon-arrow-left>
         {{ $t("general.backCapitalized") }}
@@ -32,8 +31,9 @@ defineEmits(["back", "continue"]);
       <button
         v-if="showNextButton"
         class="btn-secondary flex items-center"
+        data-cy="next-step"
         @click="$emit('continue')"
-        data-cy="next-step">
+      >
         {{ $t("general.next") }}
         <it-icon-arrow-right class="w-6 h-6 ml-2"></it-icon-arrow-right>
       </button>
@@ -47,6 +47,7 @@ defineEmits(["back", "continue"]);
     >
       <span
         v-for="i in maxQuestionIndex"
+        :key="i"
         class="w-full"
         :class="{
           'bg-sky-500': i <= questionIndex + 1,
diff --git a/client/src/components/learningPath/SelfEvaluation.vue b/client/src/components/learningPath/SelfEvaluation.vue
index 3560dae6..bf0f0df6 100644
--- a/client/src/components/learningPath/SelfEvaluation.vue
+++ b/client/src/components/learningPath/SelfEvaluation.vue
@@ -4,9 +4,9 @@ import type { LearningUnit } from "@/types";
 import * as log from "loglevel";
 
 import LearningContentContainer from "@/components/learningPath/LearningContentContainer.vue";
-import LearningContentNavigation from "./LearningContentNavigation.vue";
 import { COMPLETION_FAILURE, COMPLETION_SUCCESS } from "@/constants";
 import { computed, reactive } from "vue";
+import LearningContentNavigation from "./LearningContentNavigation.vue";
 
 log.debug("LearningContent.vue setup");
 
diff --git a/client/src/components/ui/ItRadioGroup.vue b/client/src/components/ui/ItRadioGroup.vue
index e3459362..83d4be6c 100644
--- a/client/src/components/ui/ItRadioGroup.vue
+++ b/client/src/components/ui/ItRadioGroup.vue
@@ -6,7 +6,9 @@
     <RadioGroupLabel class="heading-1 mb-8 block">
       {{ label }}
     </RadioGroupLabel>
-    <div class="flex flex-col md:flex-row justify-between align-items-center justify-items-center space-y-6 md:space-y-0 md:space-x-6">
+    <div
+      class="flex flex-col md:flex-row justify-between align-items-center justify-items-center space-y-6 md:space-y-0 md:space-x-6"
+    >
       <RadioGroupOption
         v-for="item in items"
         :key="item.value"
diff --git a/client/src/components/ui/ItTextarea.vue b/client/src/components/ui/ItTextarea.vue
index 21d1963b..56387aec 100644
--- a/client/src/components/ui/ItTextarea.vue
+++ b/client/src/components/ui/ItTextarea.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="text-5xl mb-12 leading-normal font-bold block">{{ label }}</h2>
+    <h2 class="heading-1 mb-8 block">{{ label }}</h2>
     <textarea
       :value="modelValue"
       class="w-full border-gray-500 h-40"
diff --git a/client/src/locales/de.json b/client/src/locales/de.json
index 15df84c4..2bac4a3e 100644
--- a/client/src/locales/de.json
+++ b/client/src/locales/de.json
@@ -59,7 +59,7 @@
     }
   },
   "learningContent": {
-    "completeAndContinue": "Abschliessen und weiter"
+    "completeAndContinue": "Als erledigt markieren"
   },
   "selfEvaluation": {
     "selfEvaluation": "Selbsteinschätzung",
@@ -127,7 +127,11 @@
     "instructorRespectLabel": "Fragen und Anregungen der Kursteilnehmenden wurden ernst genommen u. aufgegriffen.",
     "instructorOpenFeedbackLabel": "Was ich dem Kursleiter sonst noch sagen wollte:",
     "courseNegativeFeedbackLabel": "Wo sehen Sie Verbesserungspotenzial?",
-    "coursePositiveFeedbackLabel": "Was hat Ihnen besonders gut gefallen?"
+    "coursePositiveFeedbackLabel": "Was hat Ihnen besonders gut gefallen?",
+    "completionTitle": "Schicke dein Feedback an {name}",
+    "completionDescription": "Dein Feedback ist anonym. Dein Vor- und Nachname werden bei deiner Trainer/-in nicht angezeigt.",
+    "sendFeedback": "Feedback abschicken",
+    "feedbackSent": "Dein Feedback wurde abgeschickt"
   },
   "constants": {
     "yes": "Ja",
diff --git a/cypress/e2e/circle.cy.js b/cypress/e2e/circle.cy.js
index acf43bcb..e51eb98f 100644
--- a/cypress/e2e/circle.cy.js
+++ b/cypress/e2e/circle.cy.js
@@ -52,6 +52,8 @@ describe("circle page", () => {
       "Selbsteinschätzung Fahrzeug"
     );
     cy.get('[data-cy="success"]').click();
+    cy.get('[data-cy="next-step"]').click();
+    cy.get('[data-cy="success"]').click();
     cy.get('[data-cy="complete-and-continue"]').click();
 
     cy.get('[data-cy="ln-title"]').should(
diff --git a/cypress/e2e/mediaLibrary.cy.js b/cypress/e2e/mediaLibrary.cy.js
index 9b020bf4..6c08326f 100644
--- a/cypress/e2e/mediaLibrary.cy.js
+++ b/cypress/e2e/mediaLibrary.cy.js
@@ -5,7 +5,7 @@ describe("MediaLibrary", () => {
     cy.manageCommand("cypress_reset");
 
     login("admin", "test");
-    cy.visit("/");
+    cy.visit("/course/test-lehrgang");
   });
 
   it("should be accessible", () => {