VBV-232: WIP - Style feedback content type

client/src/components/FeedbackForm.vue

@@ -1,88 +1,93 @@
 <template>
   <div>
-    <p class="text-gray-800 mb-4">Schritt {{ stepNo + 1 }} von {{ MAX_STEPS }}</p>
-    <p class="mb-10 text-xl" v-html="$t('feedback.intro')"></p>
-    <ItRadioGroup
+    <FeedbackIntro
       v-if="stepNo === 0"
+      :title="circleStore.circle?.title"
+      :intro="$t('feedback.intro', {name: `${courseSessionsStore.circleExperts[0].first_name} ${courseSessionsStore.circleExperts[0].last_name}`})"
+      @start="stepNo = 1"
+    ></FeedbackIntro>
+    <ItRadioGroup
+      v-if="stepNo === 1"
       v-model="wouldRecommend"
       :label="$t('feedback.recommendLabel')"
       class="mb-8"
       :items="YES_NO"
     />
     <ItRadioGroup
-      v-if="stepNo === 1"
+      v-if="stepNo === 2"
       v-model="satisfaction"
       :label="$t('feedback.satisfactionLabel')"
       class="mb-8"
       :items="RATINGS"
     />
     <ItRadioGroup
-      v-if="stepNo === 2"
+      v-if="stepNo === 3"
       v-model="goalAttainment"
       :label="$t('feedback.goalAttainmentLabel')"
       class="mb-8"
       :items="RATINGS"
     />
     <ItRadioGroup
-      v-if="stepNo === 3"
+      v-if="stepNo === 4"
       v-model="proficiency"
       :label="$t('feedback.proficiencyLabel')"
       class="mb-8"
       :items="PERCENTAGES"
     />
     <ItRadioGroup
-      v-if="stepNo === 4"
+      v-if="stepNo === 5"
       v-model="receivedMaterials"
       :label="$t('feedback.receivedMaterialsLabel')"
       class="mb-8"
       :items="YES_NO"
     />
     <ItRadioGroup
-      v-if="stepNo === 4 && receivedMaterials"
+      v-if="stepNo === 5 && receivedMaterials"
       v-model="materialsRating"
       :label="$t('feedback.materialsRatingLabel')"
       class="mb-8"
       :items="RATINGS"
     />
     <ItRadioGroup
-      v-if="stepNo === 5"
+      v-if="stepNo === 6"
       v-model="instructorCompetence"
       :label="$t('feedback.instructorCompetenceLabel')"
       class="mb-8"
       :items="RATINGS"
     />
     <ItRadioGroup
-      v-if="stepNo === 6"
+      v-if="stepNo === 7"
       v-model="instructorRespect"
       class="mb-8"
       :label="$t('feedback.instructorRespectLabel')"
       :items="RATINGS"
     />
     <ItTextarea
-      v-if="stepNo === 7"
+      v-if="stepNo === 8"
       v-model="instructorOpenFeedback"
       :label="$t('feedback.instructorOpenFeedbackLabel')"
       class="mb-8"
     />
     <ItTextarea
-      v-if="stepNo === 8"
+      v-if="stepNo === 9"
       v-model="courseNegativeFeedback"
       :label="$t('feedback.courseNegativeFeedbackLabel')"
       class="mb-8"
     />
     <ItTextarea
-      v-if="stepNo === 9"
+      v-if="stepNo === 8"
       v-model="coursePositiveFeedback"
       :label="$t('feedback.coursePositiveFeedbackLabel')"
       class="mb-8"
     />
-    <button class="btn-blue" @click="sendFeedback">Senden und abschliessen</button>
-    <button class="btn-blue mr-4" :disabled="stepNo <= 0" @click="previousStep">
-      Zurück
-    </button>
-    <button class="btn-blue" :disabled="stepNo >= MAX_STEPS - 1" @click="nextStep">
-      Weiter
-    </button>
+    <LearningContentNavigation
+          :show-back-button="stepNo > 0"
+          :show-next-button="stepNo > 0"
+          :question-index="stepNo"
+          :max-question-index="MAX_STEPS"
+          @back="previousStep"
+          @continue="nextStep"
+        ></LearningContentNavigation>
     <hr class="mb-10 mt-10" />
     <pre>
      satisfaction {{ satisfaction }}
@@ -109,9 +114,12 @@ import {
 } from "@/components/learningPath/feedback.constants";
 import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
 import ItTextarea from "@/components/ui/ItTextarea.vue";
+import FeedbackIntro from "@/components/learningPath/FeedbackIntro.vue";
+import LearningContentNavigation from "@/components/learningPath/LearningContentNavigation.vue";
 import { graphql } from "@/gql/";
 import type { SendFeedbackInput } from "@/gql/graphql";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useCircleStore } from "@/stores/circle";
 import type { LearningContent } from "@/types";
 import { useMutation } from "@urql/vue";
 import log from "loglevel";
@@ -119,6 +127,7 @@ import { onMounted, reactive, ref } from "vue";
 
 const props = defineProps<{ page: LearningContent }>();
 const courseSessionsStore = useCourseSessionsStore();
+const circleStore = useCircleStore();
 
 onMounted(async () => {
   log.debug("Feedback mounted");

client/src/components/learningPath/FeedbackIntro.vue

@@ -0,0 +1,23 @@
+<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>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title: string;
+  intro: string;
+};
+
+const _props = withDefaults(defineProps<Props>(), {
+  title: "",
+  intro: "",
+});
+
+defineEmits(["start"]);
+</script>

client/src/components/learningPath/LearningContent.vue

@@ -48,6 +48,11 @@ const component = computed(() => {
   }
   return DEFAULT_BLOCK;
 });
+
+const showNavigationBorder = computed(() => {
+  return block.value?.type !== "feedback";
+});
+
 </script>
 
 <template>
@@ -56,6 +61,7 @@ const component = computed(() => {
     :title="learningContent.title"
     :next-button-text="$t('learningContent.completeAndContinue')"
     :learning-content-block="learningContent.contents[0]"
+    :show-border="showNavigationBorder"
     @exit="circleStore.closeLearningContent(props.learningContent)"
     @next="circleStore.continueFromLearningContent(props.learningContent)"
   >

client/src/components/learningPath/LearningContentContainer.vue

@@ -12,7 +12,7 @@ interface Props {
   showBorder: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const _props = withDefaults(defineProps<Props>(), {
   title: "",
   nextButtonText: "",
   learningContentBlock: null,
@@ -47,11 +47,11 @@ defineEmits(["next", "exit"]);
         :class="{ 'border-t': showBorder }"
       >
         <div class="flex justify-between">
-          <LearningContentBadge
-            v-if="learningContentBlock"
+          <!-- <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>

client/src/components/learningPath/LearningContentNavigation.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
-const props = defineProps<{
+interface Props {
   showBackButton: boolean;
+  showNextButton: boolean;
   questionIndex: number;
   maxQuestionIndex: number;
-}>();
+};
+
+const _props = withDefaults(defineProps<Props>(), {
+  showBackButton: true,
+  showNextButton: true,
+  questionIndex: 0,
+  maxQuestionIndex: 0,
+});
+
 
 defineEmits(["back", "continue"]);
 </script>
@@ -21,6 +30,7 @@ defineEmits(["back", "continue"]);
         {{ $t("general.backCapitalized") }}
       </button>
       <button
+        v-if="showNextButton"
         class="btn-secondary flex items-center"
         @click="$emit('continue')"
         data-cy="next-step">

client/src/components/ui/ItCheckboxGroup.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     :model-value="modelValue"
-    class="border p-12"
     @update:modelValue="$emit('update:modelValue', $event)"
   >
     <h2 class="text-5xl mb-12 leading-normal font-bold block">{{ label }}</h2>

client/src/components/ui/ItRadioGroup.vue

@@ -1,13 +1,12 @@
 <template>
   <RadioGroup
     :model-value="modelValue"
-    class="border p-12"
     @update:modelValue="$emit('update:modelValue', $event)"
   >
-    <RadioGroupLabel class="text-5xl mb-12 leading-normal font-bold block">
+    <RadioGroupLabel class="heading-1 mb-8 block">
       {{ label }}
     </RadioGroupLabel>
-    <div class="flex justify-between align-items-center justify-items-center 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"

client/src/components/ui/ItTextarea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="border p-12">
+  <div>
     <h2 class="text-5xl mb-12 leading-normal font-bold block">{{ label }}</h2>
     <textarea
       :value="modelValue"

client/src/locales/de.json

@@ -115,7 +115,8 @@
     "sendMessage": "Nachricht schreiben"
   },
   "feedback": {
-    "intro": "Dein/e Trainer/in bittet dich, ihr/ihm Feedback zu geben. <br /> Das ist freiwillig, würde ihr aber helfen, dein Lernerlebnis zu verbessern.",
+    "intro": "{name}, dein/e Trainer/-in, bittet dich, ihm/ihr Feedback zu geben. Das ist freiwillig, würde aber ihm/ihr helfen, deine Lernerlebniss zu verbessern.",
+    "areYouSatisfied": "Wie zufrieden bist du?",
     "recommendLabel": "Würden Sie den Kurs weiterempfehlen?",
     "satisfactionLabel": "Zufriedenheit insgesamt",
     "goalAttainmentLabel": "Zielerreichung insgesamt",

client/src/types.ts

@@ -74,6 +74,10 @@ export interface PlaceholderBlock extends BaseLearningContentBlock {
   readonly type: "placeholder";
 }
 
+export interface FeedbackBlock extends BaseLearningContentBlock {
+  readonly type: "feedback";
+}
+
 export type LearningContentBlock =
   | AssignmentBlock
   | BookBlock
@@ -85,7 +89,8 @@ export type LearningContentBlock =
   | TestBlock
   | VideoBlock
   | LearningModuleBlock
-  | PlaceholderBlock;
+  | PlaceholderBlock
+  | FeedbackBlock;
 
 export type LearningContentType = LearningContentBlock["type"];