Add steps to feedback form, fix some styling

client/src/components/Feedback.vue

@@ -1,36 +1,47 @@
 <template>
   <div>
+    <p class="text-gray-800 mb-4">Schritt {{ stepNo + 1 }} von {{ MAX_STEPS }}</p>
+    <p class="mb-10 text-xl">
+      Patrizia Huggel, deine Trainerin, bittet dich, ihr Feedback zu geben. <br />
+      Das ist freiwillig, würde ihr aber helfen, dein Lernerlebnis zu verbessern.
+    </p>
     <ItRadioGroup
+      v-if="stepNo === 0"
       v-model="wouldRecommend"
       label="Würden Sie den Kurs weiterempfehlen?"
       class="mb-8"
       :items="YES_NO"
     />
     <ItRadioGroup
+      v-if="stepNo === 1"
       v-model="satisfaction"
       label="Zufriedenheit insgesamt"
       class="mb-8"
       :items="RATINGS"
     />
     <ItRadioGroup
+      v-if="stepNo === 2"
       v-model="goalAttainment"
       label="Zielerreichung insgesamt"
       class="mb-8"
       :items="RATINGS"
     />
     <ItRadioGroup
+      v-if="stepNo === 3"
       v-model="proficiency"
       label="Wie beurteilen Sie Ihre Sicherheit bezüglichen den Themen nach dem Kurs?"
       class="mb-8"
       :items="PERCENTAGES"
     />
     <ItRadioGroup
+      v-if="stepNo === 4"
       v-model="receivedMaterials"
       label="Haben Sie Vorbereitungsunterlagen (z.B. eLearning) erhalten?"
       class="mb-8"
       :items="YES_NO"
     />
     <ItRadioGroup
+      v-if="stepNo === 4 && receivedMaterials"
       v-model="materialsRating"
       label="Falls ja: Wie beurteilen Sie die Vorbereitungsunterlagen (z.B.
 eLearning)?"
@@ -38,12 +49,14 @@ eLearning)?"
       :items="RATINGS"
     />
     <ItRadioGroup
+      v-if="stepNo === 5"
       v-model="instructorCompetence"
       label="Der Kursleiter war themenstark, fachkompetent."
       class="mb-8"
       :items="RATINGS"
     />
     <ItRadioGroup
+      v-if="stepNo === 6"
       v-model="instructorRespect"
       class="mb-8"
       label="Fragen und Anregungen der Kursteilnehmenden wurden ernst
@@ -103,13 +116,16 @@ 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 { useCircleStore } from "@/stores/circle";
 import type { LearningContent } from "@/types";
 import { useMutation } from "@urql/vue";
 import log from "loglevel";
 import { reactive, ref } from "vue";
 
-const { page } = defineProps<{ page: LearningContent }>();
+const props = defineProps<{ page: LearningContent }>();
+
+const stepNo = ref(0);
+const MAX_STEPS = 10;
+
 const instructorOpenFeedbackLabel = "Was ich dem Kursleiter sonst noch sagen wollte:";
 const courseNegativeFeedbackLabel = "Wo sehen Sie Verbesserungspotenzial?";
 const coursePositiveFeedbackLabel = "Was hat Ihnen besonders gut gefallen?";
@@ -146,6 +162,17 @@ const instructorOpenFeedback = ref("");
 
 const mutationResult = ref<any>(null);
 
+const previousStep = () => {
+  if (stepNo.value > 0) {
+    stepNo.value -= 1;
+  }
+};
+const nextStep = () => {
+  if (stepNo.value < MAX_STEPS - 1) {
+    stepNo.value += 1;
+  }
+};
+
 const sendFeedback = () => {
   log.info("sending feedback");
   const input: SendFeedbackInput = reactive({
@@ -160,7 +187,7 @@ const sendFeedback = () => {
     proficiency,
     receivedMaterials,
     wouldRecommend,
-    page: page.translation_key,
+    page: props.page.translation_key,
   });
   const variables = reactive({
     input,

client/src/components/ui/ItRadioGroup.vue

@@ -16,7 +16,7 @@
         :value="item.value"
       >
         <div
-          class="py-10 text-xl flex-1 text-center mr-6 last:mr-0 cursor-pointer font-bold ui-checked:bg-sky-500 ui-not-checked:border hover:border-gray-500 hover:bg-gray-200"
+          class="py-10 text-xl flex-1 text-center cursor-pointer font-bold ui-checked:bg-sky-500 ui-not-checked:border hover:border-gray-500 hover:bg-gray-200"
         >
           <RadioGroupLabel as="span">
             {{ item.name }}