ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

VBV-525: Fix feedback rendering

This commit is contained in:
Daniel Egger 2023-09-21 15:03:34 +02:00
parent d80400ea8c
commit ce15054340
3 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/components/ui/OpenFeedback.vue
View File

@ -1,8 +1,10 @@
<template> <template>
<QuestionSummary :title="props.title" :text="props.text"> <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> <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> <p>{{ answer }}</p>
</li> </li>
</ol> </ol>
@ -11,12 +13,17 @@
<script setup lang="ts"> <script setup lang="ts">
import QuestionSummary from "@/components/ui/QuestionSummary.vue"; import QuestionSummary from "@/components/ui/QuestionSummary.vue";
import { computed } from "vue";
const props = defineProps<{ const props = defineProps<{
answers: string[]; answers: string[];
title: string; title: string;
text: string; text: string;
}>(); }>();
const uniqueAnswers = computed(() => {
return [...new Set(props.answers)];
});
</script> </script>
<style lang="postcss" scoped></style> <style lang="postcss" scoped></style>

5
client/src/components/ui/RatingScale.vue
View File

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

11
client/src/pages/cockpit/FeedbackPage.vue
View File

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