Fix navigation when assignment completion is submitted

client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue

@@ -39,6 +39,10 @@ const circleExpertName = computed(() => {
   return `${circleExpert.value?.first_name} ${circleExpert.value?.last_name}`;
 });
 
+const completionStatus = computed(() => {
+  return assignmentStore.assignmentCompletion?.completion_status ?? "in_progress";
+});
+
 const onEditTask = (task: AssignmentTask) => {
   emit("editTask", task);
 };
@@ -67,7 +71,7 @@ const onSubmit = async () => {
       {{ $t("assignment.acceptConditionsDisclaimer") }}
     </h3>
 
-    <div v-if="!assignmentStore.submitted">
+    <div v-if="completionStatus === 'in_progress'">
       <ItCheckbox
         class="w-full border-b border-gray-400 py-6"
         :checkbox-item="{
@@ -100,7 +104,7 @@ const onSubmit = async () => {
       </div>
       <div class="flex flex-col space-x-2 pt-6 text-base sm:flex-row">
         <p>{{ $t("assignment.assessmentDocumentDisclaimer") }}</p>
-        <a :href="props.assignment.assessment_document_url" class="underline">
+        <a :href="props.assignment.evaluation_document_url" class="underline">
           {{ $t("assignment.showAssessmentDocument") }}
         </a>
       </div>
@@ -129,7 +133,7 @@ const onSubmit = async () => {
   <AssignmentSubmissionResponses
     :assignment="props.assignment"
     :assignment-completion-data="props.assignmentCompletionData"
-    :allow-edit="true"
+    :allow-edit="completionStatus === 'in_progress'"
     @edit-task="onEditTask"
   ></AssignmentSubmissionResponses>
 </template>

client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue

@@ -11,7 +11,7 @@ import type {
 } from "@/types";
 import { useDebounceFn } from "@vueuse/core";
 import dayjs from "dayjs";
-import { reactive, ref } from "vue";
+import { computed, reactive, ref } from "vue";
 
 const props = defineProps<{
   assignmentId: number;
@@ -87,6 +87,10 @@ const onToggleCheckbox = (id: string) => {
   checkboxState[id] = !checkboxState[id];
   onUpdateConfirmation(id, checkboxState[id]);
 };
+
+const completionStatus = computed(() => {
+  return assignmentStore.assignmentCompletion?.completion_status ?? "in_progress";
+});
 </script>
 
 <template>
@@ -95,6 +99,7 @@ const onToggleCheckbox = (id: string) => {
       <div v-if="block.type === 'explanation'">
         <p class="default-wagtail-rich-text text-large" v-html="block.value.text"></p>
       </div>
+
       <div v-if="block.type === 'user_confirmation'">
         <ItCheckbox
           :checkbox-item="{
@@ -102,7 +107,7 @@ const onToggleCheckbox = (id: string) => {
             value: `confirmation-${index}`,
             checked: getBlockData(block.id) as boolean,
           }"
-          :disabled="assignmentStore.submitted"
+          :disabled="completionStatus !== 'in_progress'"
           @toggle="onToggleCheckbox(block.id)"
         ></ItCheckbox>
       </div>
@@ -111,7 +116,7 @@ const onToggleCheckbox = (id: string) => {
         <ItTextarea
           :model-value="(getBlockData(block.id) as string) ?? ''"
           :cy-key="`user-text-input-${index}`"
-          :disabled="assignmentStore.submitted"
+          :disabled="completionStatus !== 'in_progress'"
           label=""
           @update:model-value="onUpdateText(block.id, $event)"
         ></ItTextarea>

client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue

@@ -38,6 +38,11 @@ const props = defineProps<{
   learningContent: LearningContent;
 }>();
 
+const assignmentCompletion = computed(() => assignmentStore.assignmentCompletion);
+const completionStatus = computed(() => {
+  return assignmentCompletion.value?.completion_status ?? "in_progress";
+});
+
 onMounted(async () => {
   log.debug("AssignmentView mounted", props.assignmentId, props.learningContent);
 
@@ -52,7 +57,12 @@ onMounted(async () => {
       props.assignmentId,
       courseSessionId.value
     );
-    log.debug(state.assignment, state.courseSessionAssignmentDetails);
+
+    if (completionStatus.value === "in_progress") {
+      state.pageIndex = 0;
+    } else {
+      state.pageIndex = numPages.value - 1;
+    }
   } catch (error) {
     log.error(error);
   }
@@ -60,7 +70,9 @@ onMounted(async () => {
 
 const numTasks = computed(() => state.assignment?.tasks?.length ?? 0);
 const numPages = computed(() => numTasks.value + 2);
-const showPreviousButton = computed(() => state.pageIndex != 0);
+const showPreviousButton = computed(
+  () => state.pageIndex != 0 && completionStatus.value === "in_progress"
+);
 const showNextButton = computed(() => state.pageIndex + 1 < numPages.value);
 const showExitButton = computed(() => numPages.value === state.pageIndex + 1);
 const dueDate = computed(() =>
@@ -75,7 +87,6 @@ const currentTask = computed(() => {
   }
   return undefined;
 });
-const assignmentCompletion = computed(() => assignmentStore.assignmentCompletion);
 
 const handleBack = () => {
   log.debug("handleBack");