vbv/client/src/components/cockpit/mentor/FeedbackSubmissionProgress.vue

50 lines
1.2 KiB
Vue

<script setup lang="ts">
import type { CourseSession } from "@/types";
import log from "loglevel";
import { computed, onMounted, ref } from "vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import { itGet } from "@/fetchHelpers";
import { useCourseSessionDetailQuery } from "@/composables";
const props = defineProps<{
courseSession: CourseSession;
circleId: string;
}>();
log.debug("FeedbackSubmissionProgress created");
const courseSessionDetailResult = useCourseSessionDetailQuery();
const completeFeedbacks = ref(0);
const numFeedbacks = computed(() => {
return courseSessionDetailResult.filterMembers().length;
});
onMounted(async () => {
const data = await itGet(
`/api/core/feedback/${props.courseSession.id}/${props.circleId}/`
);
completeFeedbacks.value = data.amount;
});
</script>
<template>
<div>
<ItProgress
:status-count="{
SUCCESS: completeFeedbacks,
UNKNOWN: numFeedbacks - completeFeedbacks,
FAIL: 0,
}"
/>
<div class="text-gray-900">
{{
$t("x von y Feedbacks abgegeben", {
x: completeFeedbacks,
y: numFeedbacks,
})
}}
</div>
</div>
</template>