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

Merge remote-tracking branch 'origin/feature/VBV-496-dash-regionalleiter' into feature/VBV-496-dash-regionalleiter

This commit is contained in:
Reto Aebersold 2023-10-30 10:58:54 +01:00
parent c079be32e7 a354650882
commit 0635602c68
4 changed files with 64 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
client/src/components/dashboard/AssignmentProgressSummaryBox.vue Normal file
View File

@ -0,0 +1,48 @@
<script setup lang="ts">
import { computed } from "vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import BaseBox from "@/components/dashboard/BaseBox.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-4xl 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-4xl 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>

3
client/src/components/dashboard/CompetenceSummaryBox.vue
View File

@ -4,11 +4,12 @@ import BaseBox from "@/components/dashboard/BaseBox.vue";
defineProps<{ defineProps<{
failCount: number; failCount: number;
successCount: number; successCount: number;
detailsLink: string;
}>(); }>();
</script> </script>
<template> <template>
<BaseBox :details-link="'/statistic/competence'"> <BaseBox :details-link="detailsLink">
<template #title>{{ $t("a.Selbsteinschätzungen") }}</template> <template #title>{{ $t("a.Selbsteinschätzungen") }}</template>
<template #content> <template #content>
<div class="flex items-center"> <div class="flex items-center">

69
client/src/pages/dashboard/ProgressPage.vue
View File

@ -2,13 +2,14 @@
import { useDashboardStore } from "@/stores/dashboard"; import { useDashboardStore } from "@/stores/dashboard";
import { computed } from "vue"; import { computed } from "vue";
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue"; import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import { getLearningPathUrl } from "@/utils/utils"; import { getLearningPathUrl } from "@/utils/utils";
import type { import type {
CourseProgressType, CourseProgressType,
ProgressDashboardAssignmentType, ProgressDashboardAssignmentType,
ProgressDashboardCompetenceType, ProgressDashboardCompetenceType,
} from "@/gql/graphql"; } from "@/gql/graphql";
import CompetenceSummaryBox from "@/components/dashboard/CompetenceSummaryBox.vue";
import AssignmentProgressSummaryBox from "@/components/dashboard/AssignmentProgressSummaryBox.vue";
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
@ -38,12 +39,6 @@ const competence = computed<ProgressDashboardCompetenceType>(
DEFAULT_COMPETENCE DEFAULT_COMPETENCE
); );
const assignment_progress = computed(() => ({
SUCCESS: assignment.value.points_achieved_count,
FAIL: 0,
UNKNOWN: assignment.value.points_max_count - assignment.value.points_achieved_count,
}));
const competenceCertificateUrl = computed(() => { const competenceCertificateUrl = computed(() => {
return `/course/${courseSlug.value}/competence/certificates?courseSessionId=${courseSessionProgress.value?.session_to_continue_id}`; return `/course/${courseSlug.value}/competence/certificates?courseSessionId=${courseSessionProgress.value?.session_to_continue_id}`;
}); });
@ -78,55 +73,17 @@ const competenceCriteriaUrl = computed(() => {
</div> </div>
</div> </div>
<div class="grid auto-rows-fr grid-cols-1 gap-8 xl:grid-cols-2"> <div class="grid auto-rows-fr grid-cols-1 gap-8 xl:grid-cols-2">
<div class="flex flex-col space-y-4 bg-white p-6"> <AssignmentProgressSummaryBox
<h4 class="mb-1 font-bold">{{ $t("a.Kompetenznachweis-Elemente") }}</h4> :total-assignments="assignment.total_count"
<div class="flex items-center"> :achieved-points-count="assignment.points_achieved_count"
<i18next :translation="$t('a.NUMBER Elemente abgeschlossen')"> :max-points-count="assignment.points_max_count"
<template #NUMBER> :details-link="competenceCertificateUrl"
<span class="mr-3 text-4xl font-bold"> />
{{ assignment.total_count }} <CompetenceSummaryBox
</span> :fail-count="competence.fail_count"
</template> :success-count="competence.success_count"
</i18next> :details-link="competenceCriteriaUrl"
</div> />
<div class="flex items-center">
<i18next :translation="$t('a.xOfY Punkten erreicht')">
<template #xOfY>
<span class="mr-3 text-4xl font-bold">
{{
$t("a.VALUE von MAXIMUM", {
VALUE: assignment.points_achieved_count,
MAXIMUM: assignment.points_max_count,
})
}}
</span>
</template>
</i18next>
</div>
<ItProgress :status-count="assignment_progress"></ItProgress>
<router-link class="pt-8 underline" :to="competenceCertificateUrl">
{{ $t("a.Details anschauen") }}
</router-link>
</div>
<div class="flex flex-col space-y-4 bg-white p-6">
<h4 class="mb-1 font-bold">{{ $t("a.Selbsteinschätzungen") }}</h4>
<div class="flex items-center space-x-3">
<it-icon-smiley-happy class="h-12 w-12"></it-icon-smiley-happy>
<span class="text-4xl font-bold">{{ competence.success_count }}</span>
<span>{{ $t("a.Ich kann das") }}</span>
</div>
<div class="flex items-center space-x-3">
<it-icon-smiley-thinking class="h-12 w-12"></it-icon-smiley-thinking>
<span class="text-4xl font-bold">{{ competence.fail_count }}</span>
<span>{{ $t("a.Das muss ich nochmals anschauen") }}</span>
</div>
<router-link class="pt-8 underline" :to="competenceCriteriaUrl">
{{ $t("a.Details anschauen") }}
</router-link>
</div>
</div> </div>
</div> </div>
</template> </template>

1
client/src/pages/dashboard/StatisticPage.vue
View File

@ -59,6 +59,7 @@ const feebackSummary = computed(() => {
<CompetenceSummaryBox <CompetenceSummaryBox
:fail-count="competenceSummary.fail_total" :fail-count="competenceSummary.fail_total"
:success-count="competenceSummary.success_total" :success-count="competenceSummary.success_total"
details-link="/statistic/competence"
/> />
</div> </div>
</div> </div>