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

<script setup lang="ts">
import { useCurrentCourseSession } from "@/composables";
import { ASSIGNMENT_COMPLETION_QUERY } from "@/graphql/queries";
import EvaluationContainer from "@/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue";
import AssignmentSubmissionResponses from "@/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionResponses.vue";
import type {
  Assignment,
  AssignmentCompletion,
  CourseSessionAssignment,
  CourseSessionUser,
} from "@/types";
import { useQuery } from "@urql/vue";
import log from "loglevel";
import { computed, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { getPreviousRoute } from "@/router/history";
import { getAssignmentTypeTitle } from "@/utils/utils";

const props = defineProps<{
  courseSlug: string;
  assignmentId: string;
  userId: string;
}>();

log.debug("AssignmentEvaluationPage created", props.assignmentId, props.userId);

interface StateInterface {
  courseSessionAssignment: CourseSessionAssignment | undefined;
  assignmentUser: CourseSessionUser | undefined;
}

const state: StateInterface = reactive({
  courseSessionAssignment: undefined,
  assignmentUser: undefined,
});

const courseSession = useCurrentCourseSession();
const router = useRouter();

// noinspection TypeScriptValidateTypes TODO: because of IntelliJ
const queryResult = useQuery({
  query: ASSIGNMENT_COMPLETION_QUERY,
  variables: {
    courseSessionId: courseSession.value.id.toString(),
    assignmentId: props.assignmentId,
    assignmentUserId: props.userId,
  },
});

onMounted(async () => {
  log.debug("AssignmentView mounted", props.assignmentId, props.userId);

  state.assignmentUser = courseSession.value.users.find(
    (user) => user.user_id === props.userId
  );
});

const previousRoute = getPreviousRoute();

function close() {
  if (previousRoute) {
    router.push(previousRoute);
  } else {
    router.push({
      path: `/course/${props.courseSlug}/cockpit`,
    });
  }
}

const assignmentCompletion = computed(
  () =>
    queryResult.data.value?.assignment_completion as AssignmentCompletion | undefined
);

const assignment = computed(
  () => queryResult.data.value?.assignment as Assignment | undefined
);
</script>

<template>
  <div class="absolute bottom-0 top-0 z-10 w-full bg-white">
    <div v-if="queryResult.fetching.value"></div>
    <div v-else-if="queryResult.error.value">{{ queryResult.error.value }}</div>
    <div v-else>
      <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"
      >
        <div class="flex items-center text-gray-900">
          <it-icon-assignment class="h-6 w-6"></it-icon-assignment>
          <div class="ml-2">
            <span v-if="assignment">
              {{ getAssignmentTypeTitle(assignment.assignment_type) }}:
            </span>
            {{ assignment?.title }}
          </div>
        </div>
        <button
          type="button"
          class="absolute right-2 top-2 h-8 w-8 cursor-pointer lg:right-4 lg:top-4"
          data-cy="close-learning-content"
          @click="close()"
        >
          <it-icon-close></it-icon-close>
        </button>
      </header>
      <div
        v-if="assignment && assignmentCompletion && state.assignmentUser"
        class="relative"
      >
        <div class="md:h-content flex flex-col md:flex-row">
          <div
            class="bg-white md:h-full md:overflow-y-auto"
            :class="{ 'md:w-1/2': assignment.needs_expert_evaluation }"
          >
            <!-- Left part content goes here -->
            <div class="p-10" data-cy="student-submission">
              <h3>{{ $t("a.Ergebnisse") }}</h3>

              <div class="my-6 flex items-center">
                <img
                  :src="state.assignmentUser?.avatar_url"
                  class="mr-4 h-11 w-11 rounded-full"
                />
                <div class="font-bold">
                  {{ state.assignmentUser?.first_name }}
                  {{ state.assignmentUser?.last_name }}
                </div>
              </div>
              <AssignmentSubmissionResponses
                :assignment="assignment"
                :assignment-completion-data="assignmentCompletion.completion_data"
                :allow-edit="false"
              ></AssignmentSubmissionResponses>
            </div>
          </div>
          <div
            v-if="assignment.needs_expert_evaluation"
            class="order-first bg-gray-200 md:order-last md:w-1/2 md:overflow-y-auto"
          >
            <EvaluationContainer
              :assignment-completion="assignmentCompletion"
              :assignment-user="state.assignmentUser"
              :assignment="assignment"
              @close="close()"
            ></EvaluationContainer>
          </div>
        </div>
      </div>
      <div v-else>Could not load all data</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$nav-height: 64px;

.h-content {
  height: calc(100vh - $nav-height);
}
</style>