59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import type { StatusCount, StatusCountKey } from "@/components/ui/ItProgress.vue";
|
|
import ItProgress from "@/components/ui/ItProgress.vue";
|
|
import type { AssignmentLearningContent } from "@/services/assignmentService";
|
|
import { loadAssignmentCompletionStatusData } from "@/services/assignmentService";
|
|
import type { AssignmentCompletionStatus, CourseSession } from "@/types";
|
|
import { countBy } from "lodash";
|
|
import log from "loglevel";
|
|
import { onMounted, reactive } from "vue";
|
|
|
|
const props = defineProps<{
|
|
courseSession: CourseSession;
|
|
assignment: AssignmentLearningContent;
|
|
showTitle: boolean;
|
|
}>();
|
|
|
|
log.debug("AssignmentSubmissionProgress created", props.assignment.assignmentId);
|
|
|
|
const state = reactive({
|
|
statusByUser: [] as {
|
|
userStatus: AssignmentCompletionStatus;
|
|
progressStatus: StatusCountKey;
|
|
userId: number;
|
|
}[],
|
|
progressStatusCount: {} as StatusCount,
|
|
});
|
|
|
|
onMounted(async () => {
|
|
state.statusByUser = await loadAssignmentCompletionStatusData(
|
|
props.assignment.assignmentId,
|
|
props.courseSession.id
|
|
);
|
|
|
|
state.progressStatusCount = countBy(
|
|
state.statusByUser,
|
|
"progressStatus"
|
|
) as StatusCount;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="state.statusByUser.length">
|
|
<div v-if="showTitle">
|
|
{{ props.assignment.title }}
|
|
</div>
|
|
<div><ItProgress :status-count="state.progressStatusCount" /></div>
|
|
<div class="text-gray-900" :class="{ 'text-gray-900': showTitle }">
|
|
{{ state.progressStatusCount.success || 0 }} von
|
|
{{
|
|
(state.progressStatusCount.success || 0) +
|
|
(state.progressStatusCount.unknown || 0)
|
|
}}
|
|
Lernenden haben ihre Ergebnisse eingereicht.
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|