81 lines
2.9 KiB
Vue
81 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { useDashboardStore } from "@/stores/dashboard";
|
|
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
|
|
import { onMounted, ref } from "vue";
|
|
import type { CompetenceRecordStatisticsType } from "@/gql/graphql";
|
|
import { CourseStatisticsType } from "@/gql/graphql";
|
|
import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
|
|
import { useCourseStatistics } from "@/composables";
|
|
import { courseIdForCourseSlug } from "@/services/dashboard";
|
|
|
|
const props = defineProps<{
|
|
courseSlug: string;
|
|
}>();
|
|
|
|
const dashboardStore = useDashboardStore();
|
|
const statistics = ref<CourseStatisticsType | null>(null);
|
|
|
|
const courseId = courseIdForCourseSlug(
|
|
dashboardStore.dashboardConfigsv2,
|
|
props.courseSlug
|
|
);
|
|
|
|
const { courseSessionName, circleMeta } = useCourseStatistics();
|
|
|
|
onMounted(async () => {
|
|
statistics.value = await dashboardStore.loadStatisticsDatav2(courseId);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<main v-if="statistics">
|
|
<div class="mb-10 flex items-center justify-between">
|
|
<h3>{{ $t("a.Selbsteinschätzung") }}</h3>
|
|
<ItDropdownSelect
|
|
:model-value="dashboardStore.currentDashboardConfig"
|
|
class="mt-4 w-full lg:mt-0 lg:w-96"
|
|
:items="dashboardStore.dashboardConfigs"
|
|
@update:model-value="dashboardStore.switchAndLoadDashboardConfig"
|
|
></ItDropdownSelect>
|
|
</div>
|
|
<div v-if="statistics.competences.records" class="mt-8 bg-white">
|
|
<StatisticFilterList
|
|
:course-session-properties="statistics.course_session_properties"
|
|
:items="statistics.competences.records"
|
|
>
|
|
<template #default="{ item }">
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<h4 class="font-bold">
|
|
{{ $t("a.Selbsteinschätzung") }}:
|
|
{{ (item as CompetenceRecordStatisticsType).title }}
|
|
</h4>
|
|
<div>
|
|
Durchführung «{{ courseSessionName(item.course_session_id) }}» - Circle
|
|
«{{ circleMeta(item.circle_id)?.name }}»
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="mb-4 flex items-center space-x-2">
|
|
<it-icon-smiley-happy class="h-8 w-8"></it-icon-smiley-happy>
|
|
<span class="pr-3">
|
|
{{ (item as CompetenceRecordStatisticsType).success_count }}
|
|
</span>
|
|
<it-icon-smiley-thinking class="h-8 w-8"></it-icon-smiley-thinking>
|
|
<span>{{ (item as CompetenceRecordStatisticsType).fail_count }}</span>
|
|
</div>
|
|
<router-link
|
|
class="whitespace-nowrap underline"
|
|
target="_blank"
|
|
:to="(item as CompetenceRecordStatisticsType).details_url"
|
|
>
|
|
{{ $t("a.Details anschauen") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</StatisticFilterList>
|
|
</div>
|
|
</main>
|
|
</template>
|