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

Add evaluation task stepper

This commit is contained in:
Daniel Egger 2023-05-05 09:32:08 +02:00
parent fef864df25
commit 9a5feb2ba6
3 changed files with 100 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import type { StatusCount, StatusCountKey } from "@/components/ui/ItProgress.vue";
import UserEvaluation from "@/pages/cockpit/assignmentEvaluationPage/UserEvaluation.vue";
import EvaluationContainer from "@/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue";
import AssignmentSubmissionResponses from "@/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionResponses.vue";
import { useAssignmentStore } from "@/stores/assignmentStore";
import { useCourseSessionsStore } from "@/stores/courseSessions";
@ -69,7 +69,7 @@ function exit() {
</script>
<template>
<div v-if="state.assignment && state.completionData">
<div v-if="state.assignment && state.completionData" class="relative">
<header
class="relative flex h-12 w-full items-center justify-between border-b border-b-gray-400 bg-white px-4 lg:h-16 lg:px-8"
>
@ -85,7 +85,7 @@ function exit() {
</header>
<div class="flex">
<div class="w-1/2 flex-initial bg-white p-10">
<div class="overflow-auto-y min-h-full w-1/2 flex-initial bg-white p-10">
<h3>Ergebnisse</h3>
<div class="my-6 flex items-center">
<img
@ -103,12 +103,12 @@ function exit() {
:allow-edit="false"
></AssignmentSubmissionResponses>
</div>
<div class="w-1/2 flex-initial bg-gray-200 p-10">
<UserEvaluation
<div class="overflow-auto-y min-h-full w-1/2 flex-initial bg-gray-200">
<EvaluationContainer
:assignment-completion="state.completionData"
:assignment-user="state.assignmentUser"
:assignment="state.assignment"
></UserEvaluation>
></EvaluationContainer>
</div>
</div>
</div>

94
client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue Normal file
View File

@ -0,0 +1,94 @@
<script setup lang="ts">
import EvaluationTask from "@/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue";
import type { Assignment, AssignmentCompletion, CourseSessionUser } from "@/types";
import dayjs from "dayjs";
import * as log from "loglevel";
import { computed, reactive } from "vue";
const props = defineProps<{
assignmentUser: CourseSessionUser;
assignmentCompletion: AssignmentCompletion;
assignment: Assignment;
}>();
log.debug("UserEvaluation setup");
interface StateInterface {
pageIndex: number;
}
const state: StateInterface = reactive({
pageIndex: 0,
});
const numTasks = computed(() => props.assignment.evaluation_tasks?.length ?? 0);
function previousTask() {
log.debug("previousTask");
state.pageIndex = Math.max(0, state.pageIndex - 1);
}
function nextTask() {
log.debug("nextTask");
state.pageIndex = Math.min(numTasks.value - 1, state.pageIndex + 1);
}
</script>
<template>
<div class="flex min-h-full flex-col">
<div class="flex-1 overflow-y-auto">
<section class="p-10">
<div class="mb-4">
{{ props.assignmentUser.first_name }} {{ props.assignmentUser.last_name }} hat
die Ergebnisse am
{{ dayjs(props.assignmentCompletion.submitted_at).format("DD.MM.YYYY") }} um
{{ dayjs(props.assignmentCompletion.submitted_at).format("HH.mm") }} Uhr
abgegeben.
</div>
<h3>Bewertung</h3>
<EvaluationTask
:assignment-user="props.assignmentUser"
:assignment="props.assignment"
:task-index="state.pageIndex"
/>
</section>
</div>
<nav class="sticky bottom-0 border-t bg-blue-400 p-10">
<div class="relative flex flex-row place-content-end">
<button
v-if="true"
class="btn-secondary mr-2 flex items-center"
data-cy="previous-step"
@click="previousTask()"
>
<it-icon-arrow-left class="mr-2 h-6 w-6"></it-icon-arrow-left>
{{ $t("general.backCapitalized") }}
</button>
<button
v-if="true"
class="btn-secondary z-10 flex items-center"
data-cy="next-step"
@click="nextTask()"
>
{{ $t("general.next") }}
<it-icon-arrow-right class="ml-2 h-6 w-6"></it-icon-arrow-right>
</button>
</div>
</nav>
</div>
</template>
<style lang="scss" scoped>
$nav-height: 86px;
.h-content {
height: calc(100vh - $nav-height);
}
.nav {
height: $nav-height;
}
</style>

46
client/src/pages/cockpit/assignmentEvaluationPage/UserEvaluation.vue
View File

@ -1,46 +0,0 @@
<script setup lang="ts">
import UserEvaluationTask from "@/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue";
import type { Assignment, AssignmentCompletion, CourseSessionUser } from "@/types";
import dayjs from "dayjs";
import * as log from "loglevel";
const props = defineProps<{
assignmentUser: CourseSessionUser;
assignmentCompletion: AssignmentCompletion;
assignment: Assignment;
}>();
log.debug("UserEvaluation setup");
</script>
<template>
<div>
<div class="mb-4">
{{ props.assignmentUser.first_name }} {{ props.assignmentUser.last_name }} hat die
Ergebnisse am
{{ dayjs(props.assignmentCompletion.submitted_at).format("DD.MM.YYYY") }} um
{{ dayjs(props.assignmentCompletion.submitted_at).format("HH.mm") }} Uhr
abgegeben.
</div>
<h3>Bewertung</h3>
<UserEvaluationTask
:assignment-user="props.assignmentUser"
:assignment="props.assignment"
:task-index="0"
/>
</div>
</template>
<style lang="scss" scoped>
$nav-height: 86px;
.h-content {
height: calc(100vh - $nav-height);
}
.nav {
height: $nav-height;
}
</style>