vbv/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue

<script setup lang="ts">
import EvaluationIntro from "@/pages/cockpit/assignmentEvaluationPage/EvaluationIntro.vue";
import EvaluationSummary from "@/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue";
import EvaluationTask from "@/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue";
import type {
  Assignment,
  AssignmentCompletion,
  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 } from "vue";
import { useCourseSessionDetailQuery } from "@/composables";

const props = defineProps<{
  assignmentUser: CourseSessionUser;
  assignmentCompletion: AssignmentCompletion;
  assignment: Assignment;
}>();

const emit = defineEmits(["close"]);

log.debug("UserEvaluation setup");

// 0 = introduction, 1 - n = tasks, n+1 = submission
const stepIndex = useRouteQuery("step", "0", { transform: Number, mode: "push" });

const numTasks = computed(() => props.assignment.evaluation_tasks?.length ?? 0);
const evaluationSubmitted = computed(
  () => props.assignmentCompletion.completion_status === "EVALUATION_SUBMITTED"
);

onMounted(() => {
  if (stepIndex.value === 0 && evaluationSubmitted.value) {
    stepIndex.value = props.assignment.evaluation_tasks?.length + 1 ?? 0;
  }
});

function previousPage() {
  log.debug("previousTask");
  stepIndex.value = Math.max(0, stepIndex.value - 1);
}

function nextPage() {
  log.debug("nextTask");
  stepIndex.value = Math.min(numTasks.value + 1, stepIndex.value + 1);
}

function editTask(task: AssignmentEvaluationTask) {
  log.debug("editTask", task);
  const taskIndex =
    findIndex(props.assignment.evaluation_tasks, {
      id: task.id,
    }) ?? 0;
  stepIndex.value = taskIndex + 1;
}

const courseSessionDetailResult = useCourseSessionDetailQuery();

const assignmentDetail = computed(() => {
  return courseSessionDetailResult.findAssignmentByAssignmentId(
    props.assignment.id.toString()
  );
});

const dueDate = computed(() =>
  dayjs(assignmentDetail.value?.evaluation_deadline.start)
);

const inEvaluationTask = computed(
  () => stepIndex.value >= 1 && stepIndex.value <= numTasks.value
);
const taskIndex = computed(() => stepIndex.value - 1);
const task = computed(() => props.assignment.evaluation_tasks[taskIndex.value]);

const taskExpertDataText = computed(() => {
  let result = "";
  if (inEvaluationTask.value) {
    result =
      props.assignmentCompletion?.completion_data?.[task.value.id]?.expert_data?.text ??
      "";
  }
  return result;
});

function nextButtonEnabled() {
  if (inEvaluationTask.value) {
    return taskExpertDataText.value ?? false;
  }
  return true;
}

function finishButtonEnabled() {
  return props.assignmentCompletion.completion_status === "EVALUATION_SUBMITTED";
}
</script>

<template>
  <div class="flex min-h-full flex-col">
    <div class="overflow-y-auto">
      <section class="p-10">
        <EvaluationIntro
          v-if="stepIndex === 0"
          :assignment-user="props.assignmentUser"
          :assignment="props.assignment"
          :assignment-completion="props.assignmentCompletion"
          :due-date="dueDate"
          @start-evaluation="nextPage"
        ></EvaluationIntro>
        <EvaluationTask
          v-else-if="inEvaluationTask"
          :assignment-user="props.assignmentUser"
          :assignment="props.assignment"
          :assignment-completion="props.assignmentCompletion"
          :task-index="stepIndex - 1"
          :allow-edit="
            props.assignmentCompletion.completion_status !== 'EVALUATION_SUBMITTED'
          "
        />
        <EvaluationSummary
          v-else
          :assignment-user="props.assignmentUser"
          :assignment="props.assignment"
          :assignment-completion="props.assignmentCompletion"
          :due-date="dueDate"
          @edit-task="editTask"
        ></EvaluationSummary>
      </section>
    </div>

    <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"
          class="btn-secondary mr-2 flex items-center"
          data-cy="previous-step"
          @click="previousPage()"
        >
          <it-icon-arrow-left class="mr-2 h-6 w-6"></it-icon-arrow-left>
          {{ $t("general.backCapitalized") }}
        </button>
        <button
          v-if="stepIndex <= numTasks"
          :disabled="!nextButtonEnabled()"
          class="btn-secondary z-10 flex items-center"
          data-cy="next-step"
          @click="nextPage()"
        >
          {{ $t("general.next") }}
          <it-icon-arrow-right class="ml-2 h-6 w-6"></it-icon-arrow-right>
        </button>

        <button
          v-if="stepIndex > numTasks"
          :disabled="!finishButtonEnabled()"
          class="btn-secondary z-10"
          data-cy="next-step"
          @click="emit('close')"
        >
          <span class="flex items-center">
            {{ $t("a.Bewertung abschliessen") }}
            <it-icon-check class="ml-2 h-6 w-6"></it-icon-check>
          </span>
        </button>
      </div>
    </nav>
  </div>
</template>

<style lang="scss" scoped></style>