Add query url to assignment evaluation page

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() {
     <div class="flex-1 overflow-y-auto">
       <section class="p-10">
         <EvaluationIntro
-          v-if="state.pageIndex === 0"
+          v-if="stepIndex === 0"
           :assignment-user="props.assignmentUser"
           :assignment="props.assignment"
           :assignment-completion="props.assignmentCompletion"
@@ -119,7 +112,7 @@ function finishButtonEnabled() {
           v-else-if="inEvaluationTask"
           :assignment-user="props.assignmentUser"
           :assignment="props.assignment"
-          :task-index="state.pageIndex - 1"
+          :task-index="stepIndex - 1"
           :allow-edit="
             props.assignmentCompletion.completion_status !== 'evaluation_submitted'
           "
@@ -135,7 +128,7 @@ function finishButtonEnabled() {
       </section>
     </div>
 
-    <nav v-if="state.pageIndex > 0" class="sticky bottom-0 border-t bg-gray-200 p-6">
+    <nav v-if="stepIndex > 0" class="sticky bottom-0 border-t bg-gray-200 p-6">
       <div class="relative flex flex-row place-content-end">
         <button
           v-if="true"
@@ -147,7 +140,7 @@ function finishButtonEnabled() {
           {{ $t("general.backCapitalized") }}
         </button>
         <button
-          v-if="state.pageIndex <= numTasks"
+          v-if="stepIndex <= numTasks"
           :disabled="!nextButtonEnabled()"
           class="btn-secondary z-10 flex items-center"
           data-cy="next-step"
@@ -158,7 +151,7 @@ function finishButtonEnabled() {
         </button>
 
         <button
-          v-if="state.pageIndex > numTasks"
+          v-if="stepIndex > numTasks"
           :disabled="!finishButtonEnabled()"
           class="btn-secondary z-10"
           data-cy="next-step"