ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add performanceCriteriaStatusCount to index page

This commit is contained in:
Daniel Egger 2023-09-07 15:09:05 +02:00
parent 24511df01e
commit fde7e2edef
2 changed files with 57 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/header/MainNavigationBar.vue
View File

@ -132,15 +132,6 @@ onMounted(() => {
>
{{ t("competences.title") }}
</router-link>
<router-link
v-if="inCourse() && courseSessionsStore.currentCourseSession"
:to="`${courseSessionsStore.currentCourseSession.competence_url}-old`"
class="nav-item"
:class="{ 'nav-item--active': inCompetenceProfile() }"
>
{{ t("competences.title") }} (old)
</router-link>
</div>
</div>

59
client/src/pages/competence/CompetenceIndexPage.vue
View File

@ -11,6 +11,7 @@ import {
competenceCertificateProgressStatusCount,
} from "@/pages/competence/utils";
import ItProgress from "@/components/ui/ItProgress.vue";
import { useCompetenceStore } from "@/stores/competence";
const props = defineProps<{
courseSlug: string;
@ -20,6 +21,8 @@ log.debug("CompetenceIndexPage setup", props);
const courseSession = useCurrentCourseSession();
const competenceStore = useCompetenceStore();
const certificatesQuery = useQuery({
query: COMPETENCE_NAVI_CERTIFICATE_QUERY,
variables: {
@ -46,13 +49,17 @@ const totalPointsEvaluatedAssignments = computed(() => {
const userPointsEvaluatedAssignments = computed(() => {
return assignmentsUserPoints(allAssignments.value);
});
const performanceCriteriaStatusCount = computed(() => {
return competenceStore.calcStatusCount(competenceStore.flatPerformanceCriteria());
});
</script>
<template>
<div class="container-large lg:mt-4">
<h1 class="mb-8">{{ $t("a.KompetenzNavi") }}</h1>
<div class="mb-4 bg-white p-8">
<section class="mb-4 bg-white p-8">
<div class="flex items-center">
<h3>{{ $t("a.Kompetenznachweise") }}</h3>
</div>
@ -113,7 +120,55 @@ const userPointsEvaluatedAssignments = computed(() => {
</div>
</div>
</div>
</div>
</section>
<section class="mb-4 bg-white px-8 py-4 lg:mb-8 lg:py-8">
<h3 class="mb-4 border-b pb-4 lg:border-0 lg:pb-0">
{{ $t("a.Selbsteinschätzungen") }}
</h3>
<ul
class="mb-6 flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8"
>
<li
class="mb-4 inline-block w-1/3 flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:border-r lg:pb-0"
>
<h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.no") }}»</h5>
<div class="flex flex-row items-center">
<it-icon-smiley-thinking class="h-16 w-16"></it-icon-smiley-thinking>
<p class="ml-4 inline-block text-7xl font-bold">
{{ performanceCriteriaStatusCount.FAIL }}
</p>
</div>
</li>
<li
class="mb-4 inline-block w-1/3 flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:border-r lg:pb-0"
>
<h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.yes") }}»</h5>
<div class="flex flex-row items-center">
<it-icon-smiley-happy class="h-16 w-16"></it-icon-smiley-happy>
<p class="ml-4 inline-block text-7xl font-bold">
{{ performanceCriteriaStatusCount.SUCCESS }}
</p>
</div>
</li>
<li class="w-1/3 flex-1 border-b pb-4 lg:mb-0 lg:border-b-0 lg:pb-0">
<h5 class="mb-4 text-gray-700">{{ $t("competences.notAssessed") }}</h5>
<div class="flex flex-row items-center">
<it-icon-smiley-neutral class="h-16 w-16"></it-icon-smiley-neutral>
<p class="ml-4 inline-block text-7xl font-bold">
{{ performanceCriteriaStatusCount.UNKNOWN }}
</p>
</div>
</li>
</ul>
<!-- <router-link-->
<!-- :to="`${competenceStore.competenceProfilePage()?.frontend_url}-old/criteria`"-->
<!-- class="btn-text inline-flex items-center py-2 pl-0"-->
<!-- >-->
<!-- <span>{{ $t("general.showAll") }}</span>-->
<!-- <it-icon-arrow-right></it-icon-arrow-right>-->
<!-- </router-link>-->
</section>
</div>
</template>