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

chore: use basebox based boxes for progress page

This commit is contained in:
Livio Bieri 2023-10-30 10:55:42 +01:00
parent d78b216875
commit a354650882
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<{
failCount: number;
successCount: number;
detailsLink: string;
}>();
</script>
<template>
<BaseBox :details-link="'/statistic/competence'">
<BaseBox :details-link="detailsLink">
<template #title>{{ $t("a.Selbsteinschätzungen") }}</template>
<template #content>
<div class="flex items-center">

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

@ -2,13 +2,14 @@
import { useDashboardStore } from "@/stores/dashboard";
import { computed } from "vue";
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import { getLearningPathUrl } from "@/utils/utils";
import type {
CourseProgressType,
ProgressDashboardAssignmentType,
ProgressDashboardCompetenceType,
} from "@/gql/graphql";
import CompetenceSummaryBox from "@/components/dashboard/CompetenceSummaryBox.vue";
import AssignmentProgressSummaryBox from "@/components/dashboard/AssignmentProgressSummaryBox.vue";
const dashboardStore = useDashboardStore();
@ -38,12 +39,6 @@ const competence = computed<ProgressDashboardCompetenceType>(
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(() => {
return `/course/${courseSlug.value}/competence/certificates?courseSessionId=${courseSessionProgress.value?.session_to_continue_id}`;
});
@ -78,55 +73,17 @@ const competenceCriteriaUrl = computed(() => {
</div>
</div>
<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">
<h4 class="mb-1 font-bold">{{ $t("a.Kompetenznachweis-Elemente") }}</h4>
<div class="flex items-center">
<i18next :translation="$t('a.NUMBER Elemente abgeschlossen')">
<template #NUMBER>
<span class="mr-3 text-4xl font-bold">
{{ assignment.total_count }}
</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: 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>
<AssignmentProgressSummaryBox
:total-assignments="assignment.total_count"
:achieved-points-count="assignment.points_achieved_count"
:max-points-count="assignment.points_max_count"
:details-link="competenceCertificateUrl"
/>
<CompetenceSummaryBox
:fail-count="competence.fail_count"
:success-count="competence.success_count"
:details-link="competenceCriteriaUrl"
/>
</div>
</div>
</template>

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

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