301 lines
9.4 KiB
Vue
301 lines
9.4 KiB
Vue
<script setup lang="ts">
|
||
import { ref, computed, onMounted, watch } from "vue";
|
||
import { useI18n } from "vue-i18n";
|
||
import { useRouter } from "vue-router";
|
||
import authState from "@/services/auth/auth-service.ts";
|
||
import auth from "@/services/auth/auth-service.ts";
|
||
import { useTeacherAssignmentsQuery, useTeacherClassesQuery } from "@/queries/teachers.ts";
|
||
import { useStudentAssignmentsQuery, useStudentClassesQuery } from "@/queries/students.ts";
|
||
import { useDeleteAssignmentMutation } from "@/queries/assignments.ts";
|
||
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
||
import { asyncComputed } from "@vueuse/core";
|
||
|
||
const { t, locale } = useI18n();
|
||
const router = useRouter();
|
||
|
||
const role = ref(auth.authState.activeRole);
|
||
const username = ref<string | undefined>(undefined);
|
||
const isLoading = ref(false);
|
||
const isError = ref(false);
|
||
const errorMessage = ref<string>("");
|
||
|
||
// Load current user before rendering the page
|
||
onMounted(async () => {
|
||
isLoading.value = true;
|
||
try {
|
||
const userObject = await authState.loadUser();
|
||
username.value = userObject!.profile.preferred_username;
|
||
} catch (error) {
|
||
isError.value = true;
|
||
errorMessage.value = error instanceof Error ? error.message : String(error);
|
||
} finally {
|
||
isLoading.value = false;
|
||
}
|
||
});
|
||
|
||
const isTeacher = computed(() => role.value === "teacher");
|
||
const classesQueryResult = isTeacher.value
|
||
? useTeacherClassesQuery(username, true)
|
||
: useStudentClassesQuery(username, true);
|
||
|
||
const assignmentsQueryResult = isTeacher.value
|
||
? useTeacherAssignmentsQuery(username, true)
|
||
: useStudentAssignmentsQuery(username, true);
|
||
|
||
const allAssignments = asyncComputed(
|
||
async () => {
|
||
const assignments = assignmentsQueryResult.data.value?.assignments;
|
||
if (!assignments) return [];
|
||
|
||
const classes = classesQueryResult.data.value?.classes;
|
||
if (!classes) return [];
|
||
|
||
const result = assignments.map((a) => ({
|
||
id: a.id,
|
||
class: classes.find((cls) => cls?.id === a.within) ?? undefined,
|
||
title: a.title,
|
||
description: a.description,
|
||
learningPath: a.learningPath,
|
||
language: a.language,
|
||
deadline: a.deadline,
|
||
groups: a.groups,
|
||
}));
|
||
|
||
// Order the assignments by deadline
|
||
return result.flat().sort((a, b) => {
|
||
const now = Date.now();
|
||
const aTime = new Date(a.deadline).getTime();
|
||
const bTime = new Date(b.deadline).getTime();
|
||
|
||
const aIsPast = aTime < now;
|
||
const bIsPast = bTime < now;
|
||
|
||
if (aIsPast && !bIsPast) return 1;
|
||
if (!aIsPast && bIsPast) return -1;
|
||
|
||
return aTime - bTime;
|
||
});
|
||
},
|
||
[],
|
||
{ evaluating: true },
|
||
);
|
||
|
||
async function goToCreateAssignment(): Promise<void> {
|
||
await router.push("/assignment/create");
|
||
}
|
||
|
||
async function goToAssignmentDetails(id: number, clsId: string): Promise<void> {
|
||
await router.push(`/assignment/${clsId}/${id}`);
|
||
}
|
||
|
||
const { mutate, data, isSuccess } = useDeleteAssignmentMutation();
|
||
|
||
watch([isSuccess, data], async ([success, oldData]) => {
|
||
if (success && oldData?.assignment) {
|
||
window.location.reload();
|
||
}
|
||
});
|
||
|
||
async function goToDeleteAssignment(num: number, clsId: string): Promise<void> {
|
||
mutate({ cid: clsId, an: num });
|
||
}
|
||
|
||
function formatDate(date?: string | Date): string {
|
||
if (!date) return "–";
|
||
const d = new Date(date);
|
||
|
||
// Choose locale based on selected language
|
||
const currentLocale = locale.value;
|
||
|
||
return d.toLocaleDateString(currentLocale, {
|
||
weekday: "short",
|
||
day: "2-digit",
|
||
month: "long",
|
||
year: "numeric",
|
||
hour: "numeric",
|
||
minute: "2-digit",
|
||
});
|
||
}
|
||
|
||
function getDeadlineClass(deadline?: string | Date): string {
|
||
if (!deadline) return "";
|
||
|
||
const date = new Date(deadline);
|
||
const now = new Date();
|
||
const in24Hours = new Date(now.getTime() + 24 * 60 * 60 * 1000);
|
||
|
||
if (date.getTime() < now.getTime()) return "deadline-passed";
|
||
if (date.getTime() <= in24Hours.getTime()) return "deadline-in24hours";
|
||
return "deadline-upcoming";
|
||
}
|
||
|
||
onMounted(async () => {
|
||
const user = await auth.loadUser();
|
||
username.value = user?.profile?.preferred_username ?? "";
|
||
});
|
||
|
||
onMounted(async () => {
|
||
const user = await auth.loadUser();
|
||
username.value = user?.profile?.preferred_username ?? "";
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="assignments-container">
|
||
<h1 class="h1">{{ t("assignments") }}</h1>
|
||
|
||
<v-btn
|
||
v-if="isTeacher"
|
||
:style="{ backgroundColor: '#0E6942' }"
|
||
class="mb-4 center-btn"
|
||
@click="goToCreateAssignment"
|
||
>
|
||
{{ t("new-assignment") }}
|
||
</v-btn>
|
||
|
||
<using-query-result :query-result="assignmentsQueryResult">
|
||
<v-container>
|
||
<v-row>
|
||
<v-col
|
||
v-for="assignment in allAssignments"
|
||
:key="assignment.id"
|
||
cols="12"
|
||
>
|
||
<v-card class="assignment-card">
|
||
<div class="top-content">
|
||
<div class="assignment-title">{{ assignment.title }}</div>
|
||
<div class="assignment-class">
|
||
{{ t("class") }}:
|
||
<span class="class-name">
|
||
{{ assignment?.class?.displayName }}
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="assignment-deadline"
|
||
:class="getDeadlineClass(assignment.deadline)"
|
||
>
|
||
{{ t("deadline") }}:
|
||
<span>{{ formatDate(assignment.deadline) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spacer"></div>
|
||
|
||
<div class="button-row">
|
||
<v-btn
|
||
color="primary"
|
||
variant="text"
|
||
@click="goToAssignmentDetails(assignment.id, assignment?.class?.id)"
|
||
>
|
||
{{ t("view-assignment") }}
|
||
</v-btn>
|
||
<v-btn
|
||
v-if="isTeacher"
|
||
color="red"
|
||
variant="text"
|
||
@click="goToDeleteAssignment(assignment.id, assignment?.class?.id)"
|
||
>
|
||
{{ t("delete") }}
|
||
</v-btn>
|
||
</div>
|
||
</v-card>
|
||
</v-col>
|
||
</v-row>
|
||
<v-row v-if="allAssignments.length === 0">
|
||
<v-col cols="12">
|
||
<div class="no-assignments">
|
||
{{ t("no-assignments") }}
|
||
</div>
|
||
</v-col>
|
||
</v-row>
|
||
</v-container>
|
||
</using-query-result>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.assignments-container {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.center-btn {
|
||
display: block;
|
||
margin: 0 auto 2rem auto;
|
||
font-weight: 600;
|
||
background-color: #10ad61;
|
||
color: white;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
.center-btn:hover {
|
||
background-color: #0e6942;
|
||
}
|
||
|
||
.assignment-card {
|
||
padding: 1.25rem;
|
||
border-radius: 16px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
background-color: white;
|
||
transition:
|
||
transform 0.2s,
|
||
box-shadow 0.2s;
|
||
}
|
||
|
||
.assignment-card:hover {
|
||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.top-content {
|
||
margin-bottom: 1rem;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.assignment-title {
|
||
font-weight: 700;
|
||
font-size: 1.4rem;
|
||
color: #0e6942;
|
||
margin-bottom: 0.3rem;
|
||
}
|
||
|
||
.assignment-class,
|
||
.assignment-deadline {
|
||
font-size: 0.95rem;
|
||
color: #444;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
.class-name {
|
||
font-weight: 600;
|
||
color: #097180;
|
||
}
|
||
|
||
.assignment-deadline.deadline-passed {
|
||
color: #d32f2f;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.assignment-deadline.deadline-in24hours {
|
||
color: #f57c00;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.spacer {
|
||
flex: 1;
|
||
}
|
||
|
||
.button-row {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 0.75rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.no-assignments {
|
||
text-align: center;
|
||
font-size: 1.2rem;
|
||
color: #777;
|
||
padding: 3rem 0;
|
||
}
|
||
</style>
|