VBV-525: Fix feedback rendering

client/src/components/ui/OpenFeedback.vue

@@ -1,8 +1,10 @@
 <template>
   <QuestionSummary :title="props.title" :text="props.text">
-    <h5 class="mb-8 text-base">{{ answers.length }} {{ $t("feedback.answers") }}</h5>
+    <h5 class="mb-8 text-base">
+      {{ uniqueAnswers.length }} {{ $t("feedback.answers") }}
+    </h5>
     <ol>
-      <li v-for="answer of props.answers" :key="answer" class="mb-2 last:mb-0">
+      <li v-for="answer of uniqueAnswers" :key="answer" class="mb-2 last:mb-0">
         <p>{{ answer }}</p>
       </li>
     </ol>
@@ -11,12 +13,17 @@
 
 <script setup lang="ts">
 import QuestionSummary from "@/components/ui/QuestionSummary.vue";
+import { computed } from "vue";
 
 const props = defineProps<{
   answers: string[];
   title: string;
   text: string;
 }>();
+
+const uniqueAnswers = computed(() => {
+  return [...new Set(props.answers)];
+});
 </script>
 
 <style lang="postcss" scoped></style>

client/src/components/ui/RatingScale.vue

@@ -75,6 +75,7 @@ import QuestionSummary from "@/components/ui/QuestionSummary.vue";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import { computed } from "vue";
 import { useTranslation } from "i18next-vue";
+import log from "loglevel";
 
 const { t } = useTranslation();
 
@@ -97,7 +98,11 @@ const props = defineProps<{
   text: string;
 }>();
 
+log.debug("RatingScale created", props);
+
 const rating = computed((): number => {
+  console.log(props.ratings);
+  console.log(props);
   const sum = props.ratings.reduce((a, b) => a + b, 0);
   return sum / props.ratings.length;
 });

client/src/pages/cockpit/FeedbackPage.vue

@@ -10,13 +10,13 @@
           <span>{{ $t("general.back") }}</span>
         </router-link>
       </nav>
-      <main>
+      <main v-if="feedbackData">
         <h1 class="mb-2">{{ $t("feedback.feedbackPageTitle") }}</h1>
         <p class="mb-10">
           <span class="font-bold">{{ feedbackData.amount }}</span>
           {{ $t("feedback.feedbackPageInfo") }}
         </p>
-        <ol v-if="Object.keys(feedbackData).length > 0">
+        <ol>
           <li v-for="(question, i) in orderedQuestions" :key="i">
             <RatingScale
               v-if="ratingKeys.includes(question.key)"
@@ -67,7 +67,7 @@ import VerticalBarChart from "@/components/ui/VerticalBarChart.vue";
 import { useCurrentCourseSession } from "@/composables";
 import { itGet } from "@/fetchHelpers";
 import * as log from "loglevel";
-import { onMounted, reactive } from "vue";
+import { onMounted, ref } from "vue";
 import { useTranslation } from "i18next-vue";
 
 interface FeedbackData {
@@ -144,14 +144,13 @@ const openKeys = [
   "instructor_open_feedback",
 ];
 
-const feedbackData = reactive<FeedbackData>({ amount: 0, questions: {} });
+const feedbackData = ref<FeedbackData | undefined>(undefined);
 
 onMounted(async () => {
   log.debug("FeedbackPage mounted");
-  const data = await itGet(
+  feedbackData.value = await itGet(
     `/api/core/feedback/${courseSession.value.id}/${props.circleId}`
   );
-  Object.assign(feedbackData, data);
 });
 </script>