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

44 lines
1.3 KiB
Vue

<script setup lang="ts">
import AssignmentProgressSummaryBox from "@/components/dashboard/AssignmentProgressSummaryBox.vue";
import type { ProgressDashboardAssignmentType } from "@/gql/graphql";
import { fetchProgressData } from "@/services/dashboard";
import type { Ref } from "vue";
import { computed, onMounted, ref } from "vue";
const props = defineProps<{
courseId: string;
courseSlug: string;
sessionToContinueId: string;
}>();
const DEFAULT_ASSIGNMENT = {
_id: "",
points_achieved_count: 0,
points_max_count: 0,
total_count: 0,
};
const assignment: Ref<ProgressDashboardAssignmentType | null> = ref(DEFAULT_ASSIGNMENT);
const competenceCertificateUrl = computed(() => {
return `/course/${props.courseSlug}/competence/certificates?courseSessionId=${props.sessionToContinueId}`;
});
onMounted(async () => {
const data = await fetchProgressData(props.courseId);
assignment.value = data?.assignment ?? null;
});
</script>
<template>
<div v-if="assignment">
<div class="sm:w-[395px]">
<AssignmentProgressSummaryBox
:total-assignments="assignment.total_count"
:achieved-points-count="assignment.points_achieved_count"
:max-points-count="assignment.points_max_count"
:details-link="competenceCertificateUrl"
/>
</div>
</div>
</template>