diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue index 45579a4b..1df4d380 100644 --- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue +++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue @@ -9,10 +9,11 @@ import type { AssignmentEvaluationTask, CourseSessionUser, } from "@/types"; +import { useRouteQuery } from "@vueuse/router"; import dayjs from "dayjs"; import { findIndex } from "lodash"; import * as log from "loglevel"; -import { computed, onMounted, reactive } from "vue"; +import { computed, onMounted } from "vue"; const props = defineProps<{ assignmentUser: CourseSessionUser; @@ -24,14 +25,8 @@ const emit = defineEmits(["close"]); log.debug("UserEvaluation setup"); -interface StateInterface { - // 0 = introduction, 1 - n = tasks, n+1 = submission - pageIndex: number; -} - -const state: StateInterface = reactive({ - pageIndex: 0, -}); +// 0 = introduction, 1 - n = tasks, n+1 = submission +const stepIndex = useRouteQuery("step", "0", { transform: Number, mode: "push" }); const assignmentStore = useAssignmentStore(); @@ -41,21 +36,19 @@ const evaluationSubmitted = computed( ); onMounted(() => { - if (evaluationSubmitted.value) { - state.pageIndex = props.assignment.evaluation_tasks?.length + 1 ?? 0; - } else { - state.pageIndex = 0; + if (stepIndex.value === 0 && evaluationSubmitted.value) { + stepIndex.value = props.assignment.evaluation_tasks?.length + 1 ?? 0; } }); function previousPage() { log.debug("previousTask"); - state.pageIndex = Math.max(0, state.pageIndex - 1); + stepIndex.value = Math.max(0, stepIndex.value - 1); } function nextPage() { log.debug("nextTask"); - state.pageIndex = Math.min(numTasks.value + 1, state.pageIndex + 1); + stepIndex.value = Math.min(numTasks.value + 1, stepIndex.value + 1); } function editTask(task: AssignmentEvaluationTask) { @@ -64,7 +57,7 @@ function editTask(task: AssignmentEvaluationTask) { findIndex(props.assignment.evaluation_tasks, { id: task.id, }) ?? 0; - state.pageIndex = taskIndex + 1; + stepIndex.value = taskIndex + 1; } const assignmentDetail = computed(() => @@ -76,9 +69,9 @@ const dueDate = computed(() => ); const inEvaluationTask = computed( - () => state.pageIndex >= 1 && state.pageIndex <= numTasks.value + () => stepIndex.value >= 1 && stepIndex.value <= numTasks.value ); -const taskIndex = computed(() => state.pageIndex - 1); +const taskIndex = computed(() => stepIndex.value - 1); const task = computed(() => props.assignment.evaluation_tasks[taskIndex.value]); const taskExpertDataText = computed(() => { @@ -108,7 +101,7 @@ function finishButtonEnabled() {
-