109 lines
3.3 KiB
Vue
109 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { useCompetenceStore } from "@/stores/competence";
|
|
import * as log from "loglevel";
|
|
import { computed } from "vue";
|
|
import _ from "lodash";
|
|
|
|
const props = defineProps<{
|
|
courseSlug: string;
|
|
}>();
|
|
|
|
log.debug("PerformanceCriteriaPage created", props);
|
|
|
|
const competenceStore = useCompetenceStore();
|
|
|
|
const uniqueLearningUnits = computed(() => {
|
|
// FIXME: this complex calculation can go away,
|
|
// once the criteria are in its own learning content
|
|
// get the learningUnits sorted by circle order in the course
|
|
const circles = competenceStore.circles.map((c, index) => {
|
|
return { ...c, sortKey: index };
|
|
});
|
|
return _.orderBy(
|
|
_.uniqBy(
|
|
competenceStore.flatPerformanceCriteria().map((pc) => {
|
|
return {
|
|
luId: pc.learning_unit.id,
|
|
luTitle: pc.learning_unit.title,
|
|
circleId: pc.circle.id,
|
|
circleTitle: pc.circle.title,
|
|
url: pc.learning_unit.evaluate_url,
|
|
sortKey: circles.find((c) => c.id === pc.circle.id)?.sortKey,
|
|
};
|
|
}),
|
|
"luId"
|
|
),
|
|
"sortKey"
|
|
);
|
|
});
|
|
|
|
const criteriaByLearningUnit = computed(() => {
|
|
return uniqueLearningUnits.value.map((lu) => {
|
|
const criteria = competenceStore
|
|
.flatPerformanceCriteria()
|
|
.filter((pc) => pc.learning_unit.id === lu.luId);
|
|
return {
|
|
...lu,
|
|
countSuccess: criteria.filter((c) => c.completion_status === "SUCCESS").length,
|
|
countFail: criteria.filter((c) => c.completion_status === "FAIL").length,
|
|
countUnknown: criteria.filter((c) => c.completion_status === "UNKNOWN").length,
|
|
criteria: criteria,
|
|
};
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container-large">
|
|
<h2 class="mb-4 lg:py-4">{{ $t("a.Selbsteinschätzungen") }}</h2>
|
|
<section class="mb-4 bg-white px-4 py-2">
|
|
<div
|
|
v-for="selfEvaluation in criteriaByLearningUnit"
|
|
:key="selfEvaluation.luId"
|
|
class="flex flex-col justify-between gap-4 border-b py-4 last:border-b-0 lg:flex-row lg:items-center"
|
|
>
|
|
<div class="lg:w-1/3">
|
|
{{ $t("a.Circle") }}
|
|
{{ selfEvaluation.circleTitle }}:
|
|
{{ selfEvaluation.luTitle }}
|
|
</div>
|
|
|
|
<div class="flex flex-row items-center lg:w-1/3">
|
|
<div class="mr-6 flex flex-row items-center">
|
|
<it-icon-smiley-thinking
|
|
class="mr-2 inline-block h-8 w-8"
|
|
></it-icon-smiley-thinking>
|
|
<div class="w-6">
|
|
{{ selfEvaluation.countFail }}
|
|
</div>
|
|
</div>
|
|
<li class="mr-6 flex flex-row items-center">
|
|
<it-icon-smiley-happy
|
|
class="mr-2 inline-block h-8 w-8"
|
|
></it-icon-smiley-happy>
|
|
<div class="w-6">
|
|
{{ selfEvaluation.countSuccess }}
|
|
</div>
|
|
</li>
|
|
<li class="flex flex-row items-center">
|
|
<it-icon-smiley-neutral
|
|
class="mr-2 inline-block h-8 w-8"
|
|
></it-icon-smiley-neutral>
|
|
<div class="w-6">
|
|
{{ selfEvaluation.countUnknown }}
|
|
</div>
|
|
</li>
|
|
</div>
|
|
|
|
<div>
|
|
<router-link :to="selfEvaluation.url" class="link">
|
|
{{ $t("a.Selbsteinschätzung anschauen") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|