109 lines
3.6 KiB
Vue
109 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { useDashboardStore } from "@/stores/dashboard";
|
|
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
|
|
import { computed } from "vue";
|
|
import type {
|
|
AssignmentCompletionMetricsType,
|
|
AssignmentStatisticsRecordType,
|
|
CourseStatisticsType,
|
|
} from "@/gql/graphql";
|
|
import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
|
|
import { useCourseStatistics } from "@/composables";
|
|
import ItProgress from "@/components/ui/ItProgress.vue";
|
|
import { getDateString } from "@/components/dueDates/dueDatesUtils";
|
|
import dayjs from "dayjs";
|
|
|
|
const dashboardStore = useDashboardStore();
|
|
|
|
const statistics = computed(() => {
|
|
return dashboardStore.currentDashBoardData as CourseStatisticsType;
|
|
});
|
|
|
|
const { courseSessionName, circleMeta } = useCourseStatistics();
|
|
|
|
const assignmentStats = (metrics: AssignmentCompletionMetricsType) => {
|
|
if (!metrics.ranking_completed) {
|
|
return {
|
|
SUCCESS: 0,
|
|
FAIL: 0,
|
|
UNKNOWN: 0,
|
|
};
|
|
}
|
|
|
|
return {
|
|
SUCCESS: metrics.passed_count,
|
|
FAIL: metrics.failed_count,
|
|
UNKNOWN: metrics.unranked_count,
|
|
};
|
|
};
|
|
|
|
const total = (metrics: AssignmentCompletionMetricsType) => {
|
|
return metrics.passed_count + metrics.failed_count;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<main v-if="statistics">
|
|
<div class="mb-10 flex items-center justify-between">
|
|
<h3>{{ $t("a.Arbeiten") }}</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.assignments.records" class="mt-8 bg-white">
|
|
<StatisticFilterList
|
|
:course-session-properties="statistics.course_session_properties"
|
|
:items="statistics.assignments.records"
|
|
>
|
|
<template #default="{ item }">
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<h4 class="font-bold">
|
|
{{ (item as AssignmentStatisticsRecordType).assignment_title }}
|
|
</h4>
|
|
<div>
|
|
{{ $t("a.Durchfuehrung") }} «{{
|
|
courseSessionName(item.course_session_id)
|
|
}}» - Circle «{{ circleMeta(item.circle_id)?.name }}»
|
|
</div>
|
|
<div class="mt-4">
|
|
{{ $t("a.Abgabetermin") }}:
|
|
{{
|
|
getDateString(
|
|
dayjs((item as AssignmentStatisticsRecordType).deadline)
|
|
)
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
v-if="(item as AssignmentStatisticsRecordType).metrics.ranking_completed"
|
|
>
|
|
{{ (item as AssignmentStatisticsRecordType).metrics.passed_count }} von
|
|
{{ total((item as AssignmentStatisticsRecordType).metrics) }}
|
|
bestanden
|
|
</div>
|
|
<div v-else>Noch nicht bestätigt</div>
|
|
<ItProgress
|
|
:status-count="
|
|
assignmentStats((item as AssignmentStatisticsRecordType).metrics)
|
|
"
|
|
></ItProgress>
|
|
<router-link
|
|
class="underline"
|
|
target="_blank"
|
|
:to="(item as AssignmentStatisticsRecordType).details_url"
|
|
>
|
|
{{ $t("a.Details anschauen") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</StatisticFilterList>
|
|
</div>
|
|
</main>
|
|
</template>
|