40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import BaseBox from "@/components/dashboard/BaseBox.vue";
|
|
import { fetchOpenTasksCount } from "@/services/dashboard";
|
|
import type { Ref } from "vue";
|
|
import { onMounted, ref } from "vue";
|
|
|
|
const props = defineProps<{
|
|
courseId: string;
|
|
courseSlug: string;
|
|
}>();
|
|
|
|
const openTaskCount: Ref<number> = ref(0);
|
|
|
|
onMounted(async () => {
|
|
const data = await fetchOpenTasksCount(props.courseId);
|
|
openTaskCount.value = data?.open_task_count;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-[325px]">
|
|
<BaseBox
|
|
:details-link="`/course/${props.courseSlug}/learning-mentor/tasks`"
|
|
data-cy="dashboard.mentor.openTasksCount"
|
|
>
|
|
<template #title>{{ $t("Zu erledigen") }}</template>
|
|
<template #content>
|
|
<div class="flex flex-row space-x-3 bg-white pb-6">
|
|
<div
|
|
class="flex h-[74px] w-[74px] items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-3xl font-bold"
|
|
>
|
|
<span>{{ openTaskCount }}</span>
|
|
</div>
|
|
<p class="ml-3 mt-0 leading-[74px]">{{ $t("Elemente zu erledigen") }}</p>
|
|
</div>
|
|
</template>
|
|
</BaseBox>
|
|
</div>
|
|
</template>
|