49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import BaseBox from "@/components/dashboard/BaseBox.vue";
|
|
import ItProgress from "@/components/ui/ItProgress.vue";
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps<{
|
|
detailsLink: string;
|
|
totalAssignments: number;
|
|
achievedPointsCount: number;
|
|
maxPointsCount: number;
|
|
}>();
|
|
|
|
const progress = computed(() => ({
|
|
SUCCESS: props.achievedPointsCount,
|
|
FAIL: 0,
|
|
UNKNOWN: props.maxPointsCount - props.achievedPointsCount,
|
|
}));
|
|
</script>
|
|
|
|
<template>
|
|
<BaseBox :details-link="detailsLink">
|
|
<template #title>{{ $t("a.Kompetenznachweis-Elemente") }}</template>
|
|
<template #content>
|
|
<div class="flex items-center">
|
|
<i18next :translation="$t('a.NUMBER Elemente abgeschlossen')">
|
|
<template #NUMBER>
|
|
<span class="mr-3 text-xl font-bold">{{ totalAssignments }}</span>
|
|
</template>
|
|
</i18next>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<i18next :translation="$t('a.xOfY Punkten erreicht')">
|
|
<template #xOfY>
|
|
<span class="mr-3 text-xl font-bold">
|
|
{{
|
|
$t("a.VALUE von MAXIMUM", {
|
|
VALUE: props.achievedPointsCount,
|
|
MAXIMUM: props.maxPointsCount,
|
|
})
|
|
}}
|
|
</span>
|
|
</template>
|
|
</i18next>
|
|
</div>
|
|
<ItProgress :status-count="progress"></ItProgress>
|
|
</template>
|
|
</BaseBox>
|
|
</template>
|