vbv/client/src/components/dashboard/CompetenceSummary.vue

35 lines
1.1 KiB
Vue

<script setup lang="ts">
import { computed, onMounted, ref, Ref } from "vue";
import type { ProgressDashboardCompetenceType } from "@/gql/graphql";
import CompetenceSummaryBox from "@/components/dashboard/CompetenceSummaryBox.vue";
import { fetchProgressData } from "@/services/dashboard";
const props = defineProps<{
courseId: string;
courseSlug: string;
sessionToContinueId: string;
}>();
const DEFAULT_COMPETENCE = { total_count: 0, success_count: 0, fail_count: 0 };
const competence: Ref<ProgressDashboardCompetenceType> = ref(DEFAULT_COMPETENCE);
const competenceCriteriaUrl = computed(() => {
return `/course/${props.courseSlug}/competence/self-evaluation-and-feedback?courseSessionId=${props.sessionToContinueId}`;
});
onMounted(async () => {
const data = await fetchProgressData(props.courseId);
competence.value = data.competence;
});
</script>
<template>
<div v-if="competence" class="mb-14">
<CompetenceSummaryBox
:fail-count="competence.fail_count"
:success-count="competence.success_count"
:details-link="competenceCriteriaUrl"
/>
</div>
</template>