tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

style: fix linting issues met Prettier

Browse source
This commit is contained in:
Lint Action 2025-05-17 18:47:26 +00:00
parent 5b00066106
commit 323d66bbcb
12 changed files with 908 additions and 898 deletions
Download patch file Download diff file Expand all files Collapse all files

4
backend/src/controllers/assignments.ts
View file

@ -39,9 +39,9 @@ export async function getAllAssignmentsHandler(req: Request, res: Response): Pro
export async function createAssignmentHandler(req: Request, res: Response): Promise<void> { export async function createAssignmentHandler(req: Request, res: Response): Promise<void> {
const classid = req.params.classid; const classid = req.params.classid;
const description = req.body.description || ""; const description = req.body.description || '';
const language = req.body.language || FALLBACK_LANG; const language = req.body.language || FALLBACK_LANG;
const learningPath = req.body.learningPath || ""; const learningPath = req.body.learningPath || '';
const title = req.body.title; const title = req.body.title;
requireFields({ title }); requireFields({ title });

2
backend/src/data/assignments/assignment-repository.ts
View file

@ -20,7 +20,7 @@ export class AssignmentRepository extends DwengoEntityRepository<Assignment> {
}, },
}, },
}, },
populate: ['groups', 'groups.members'] populate: ['groups', 'groups.members'],
}); });
} }
public async findAllAssignmentsInClass(within: Class): Promise<Assignment[]> { public async findAllAssignmentsInClass(within: Class): Promise<Assignment[]> {

1
backend/src/routes/teachers.ts
View file

@ -31,7 +31,6 @@ router.get('/:username/students', preventImpersonation, getTeacherStudentHandler
router.get(`/:username/assignments`, getTeacherAssignmentsHandler); router.get(`/:username/assignments`, getTeacherAssignmentsHandler);
router.get('/:username/joinRequests/:classId', onlyAllowTeacherOfClass, getStudentJoinRequestHandler); router.get('/:username/joinRequests/:classId', onlyAllowTeacherOfClass, getStudentJoinRequestHandler);
router.put('/:username/joinRequests/:classId/:studentUsername', onlyAllowTeacherOfClass, updateStudentJoinRequestHandler); router.put('/:username/joinRequests/:classId/:studentUsername', onlyAllowTeacherOfClass, updateStudentJoinRequestHandler);

10
backend/src/services/assignments.ts
View file

@ -103,20 +103,22 @@ export async function putAssignment(classid: string, id: number, assignmentData:
if (assignmentData.groups) { if (assignmentData.groups) {
const hasDuplicates = (arr: string[]) => new Set(arr).size !== arr.length; const hasDuplicates = (arr: string[]) => new Set(arr).size !== arr.length;
if (hasDuplicates(assignmentData.groups.flat() as string[])) { if (hasDuplicates(assignmentData.groups.flat() as string[])) {
throw new BadRequestException("Student can only be in one group"); throw new BadRequestException('Student can only be in one group');
} }
const studentLists = await Promise.all((assignmentData.groups as string[][]).map(async group => await fetchStudents(group))); const studentLists = await Promise.all((assignmentData.groups as string[][]).map(async (group) => await fetchStudents(group)));
const groupRepository = getGroupRepository(); const groupRepository = getGroupRepository();
await groupRepository.deleteAllByAssignment(assignment); await groupRepository.deleteAllByAssignment(assignment);
await Promise.all(studentLists.map(async students => { await Promise.all(
studentLists.map(async (students) => {
const newGroup = groupRepository.create({ const newGroup = groupRepository.create({
assignment: assignment, assignment: assignment,
members: students, members: students,
}); });
await groupRepository.save(newGroup); await groupRepository.save(newGroup);
})); })
);
delete assignmentData.groups; delete assignmentData.groups;
} }

7
backend/src/services/teachers.ts
View file

@ -1,9 +1,4 @@
import { import { getAssignmentRepository, getClassJoinRequestRepository, getClassRepository, getTeacherRepository } from '../data/repositories.js';
getAssignmentRepository,
getClassJoinRequestRepository,
getClassRepository,
getTeacherRepository,
} from '../data/repositories.js';
import { mapToClassDTO } from '../interfaces/class.js'; import { mapToClassDTO } from '../interfaces/class.js';
import { mapToTeacher, mapToTeacherDTO } from '../interfaces/teacher.js'; import { mapToTeacher, mapToTeacherDTO } from '../interfaces/teacher.js';
import { Teacher } from '../entities/users/teacher.entity.js'; import { Teacher } from '../entities/users/teacher.entity.js';

4
frontend/src/components/GroupSubmissionStatus.vue
View file

@ -3,7 +3,7 @@
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import UsingQueryResult from "@/components/UsingQueryResult.vue";
import { useAssignmentSubmissionsQuery } from "@/queries/assignments.ts"; import { useAssignmentSubmissionsQuery } from "@/queries/assignments.ts";
import type { SubmissionsResponse } from "@/controllers/submissions.ts"; import type { SubmissionsResponse } from "@/controllers/submissions.ts";
import {watch} from "vue"; import { watch } from "vue";
const props = defineProps<{ const props = defineProps<{
group: object; group: object;
@ -29,7 +29,7 @@
emit("update:hasSubmission", data.submissions.length > 0); emit("update:hasSubmission", data.submissions.length > 0);
} }
}, },
{ immediate: true } { immediate: true },
); );
</script> </script>

4
frontend/src/components/assignments/DeadlineSelector.vue
View file

@ -6,8 +6,7 @@
const datetime = ref(""); const datetime = ref("");
datetime.value = props.deadline ? new Date(props.deadline).toISOString().slice(0, 16) : "" datetime.value = props.deadline ? new Date(props.deadline).toISOString().slice(0, 16) : "";
// Watch the datetime value and emit the update // Watch the datetime value and emit the update
watch(datetime, (val) => { watch(datetime, (val) => {
@ -21,7 +20,6 @@
const deadlineRules = [ const deadlineRules = [
(value: string): string | boolean => { (value: string): string | boolean => {
const selectedDateTime = new Date(value); const selectedDateTime = new Date(value);
const now = new Date(); const now = new Date();

344
frontend/src/components/assignments/GroupSelector.vue
View file

@ -1,38 +1,38 @@
<script setup lang="ts"> <script setup lang="ts">
import {computed, ref, watch} from "vue"; import { computed, ref, watch } from "vue";
import {useI18n} from "vue-i18n"; import { useI18n } from "vue-i18n";
import {useClassStudentsQuery} from "@/queries/classes"; import { useClassStudentsQuery } from "@/queries/classes";
const props = defineProps<{ const props = defineProps<{
classId: string | undefined; classId: string | undefined;
groups: object[]; groups: object[];
}>(); }>();
const emit = defineEmits(["close", "groupsUpdated", "done"]); const emit = defineEmits(["close", "groupsUpdated", "done"]);
const {t} = useI18n(); const { t } = useI18n();
interface StudentItem { interface StudentItem {
username: string; username: string;
fullName: string; fullName: string;
} }
const {data: studentsData} = useClassStudentsQuery(() => props.classId, true); const { data: studentsData } = useClassStudentsQuery(() => props.classId, true);
// Dialog states for group editing // Dialog states for group editing
const activeDialog = ref<"random" | "dragdrop" | null>(null); const activeDialog = ref<"random" | "dragdrop" | null>(null);
// Drag state for the drag and drop // Drag state for the drag and drop
const draggedItem = ref<{ groupIndex: number, studentIndex: number } | null>(null); const draggedItem = ref<{ groupIndex: number; studentIndex: number } | null>(null);
const currentGroups = ref<StudentItem[][]>([]); const currentGroups = ref<StudentItem[][]>([]);
const unassignedStudents = ref<StudentItem[]>([]); const unassignedStudents = ref<StudentItem[]>([]);
const allStudents = ref<StudentItem[]>([]); const allStudents = ref<StudentItem[]>([]);
// Random groups state // Random groups state
const groupSize = ref(1); const groupSize = ref(1);
const randomGroupsPreview = ref<StudentItem[][]>([]); const randomGroupsPreview = ref<StudentItem[][]>([]);
// Initialize data // Initialize data
watch( watch(
() => [studentsData.value, props.groups], () => [studentsData.value, props.groups],
([studentsVal, existingGroups]) => { ([studentsVal, existingGroups]) => {
if (!studentsVal) return; if (!studentsVal) return;
@ -46,10 +46,10 @@ watch(
// Initialize groups if they exist // Initialize groups if they exist
if (existingGroups && existingGroups.length > 0) { if (existingGroups && existingGroups.length > 0) {
currentGroups.value = existingGroups.map((group) => currentGroups.value = existingGroups.map((group) =>
group.members.map(member => ({ group.members.map((member) => ({
username: member.username, username: member.username,
fullName: `${member.firstName} ${member.lastName}` fullName: `${member.firstName} ${member.lastName}`,
})) })),
); );
const assignedUsernames = new Set( const assignedUsernames = new Set(
existingGroups.flatMap((g) => g.members.map((m: StudentItem) => m.username)), existingGroups.flatMap((g) => g.members.map((m: StudentItem) => m.username)),
@ -62,11 +62,11 @@ watch(
randomGroupsPreview.value = [...currentGroups.value]; randomGroupsPreview.value = [...currentGroups.value];
}, },
{immediate: true}, { immediate: true },
); );
/** Random groups functions */ /** Random groups functions */
function generateRandomGroups(): void { function generateRandomGroups(): void {
if (groupSize.value < 1) return; if (groupSize.value < 1) return;
// Shuffle students // Shuffle students
@ -87,9 +87,9 @@ function generateRandomGroups(): void {
}); });
randomGroupsPreview.value = newGroups; randomGroupsPreview.value = newGroups;
} }
function saveRandomGroups(): void { function saveRandomGroups(): void {
if (randomGroupsPreview.value.length === 0) { if (randomGroupsPreview.value.length === 0) {
alert(t("please-generate-groups-first")); alert(t("please-generate-groups-first"));
return; return;
@ -102,22 +102,22 @@ function saveRandomGroups(): void {
activeDialog.value = null; activeDialog.value = null;
emit("done"); emit("done");
emit("close"); emit("close");
} }
function addNewGroup() { function addNewGroup() {
currentGroups.value.push([]); currentGroups.value.push([]);
} }
function removeGroup(index: number) { function removeGroup(index: number) {
// Move students back to unassigned // Move students back to unassigned
unassignedStudents.value.push(...currentGroups.value[index]); unassignedStudents.value.push(...currentGroups.value[index]);
currentGroups.value.splice(index, 1); currentGroups.value.splice(index, 1);
} }
/** Drag and drop functions */ /** Drag and drop functions */
// Touch state interface // Touch state interface
interface TouchState { interface TouchState {
isDragging: boolean; isDragging: boolean;
startX: number; startX: number;
startY: number; startY: number;
@ -127,9 +127,9 @@ interface TouchState {
clone: HTMLElement | null; clone: HTMLElement | null;
originalRect: DOMRect | null; originalRect: DOMRect | null;
hasMoved: boolean; hasMoved: boolean;
} }
const touchState = ref<TouchState>({ const touchState = ref<TouchState>({
isDragging: false, isDragging: false,
startX: 0, startX: 0,
startY: 0, startY: 0,
@ -138,16 +138,16 @@ const touchState = ref<TouchState>({
element: null, element: null,
clone: null, clone: null,
originalRect: null, originalRect: null,
hasMoved: false hasMoved: false,
}); });
function handleTouchStart(event: TouchEvent, groupIndex: number, studentIndex: number): void { function handleTouchStart(event: TouchEvent, groupIndex: number, studentIndex: number): void {
if (event.touches.length > 1) return; if (event.touches.length > 1) return;
const touch = event.touches[0]; const touch = event.touches[0];
const target = event.target as HTMLElement; const target = event.target as HTMLElement;
// Target the chip directly instead of the draggable container // Target the chip directly instead of the draggable container
const chip = target.closest('.v-chip') as HTMLElement; const chip = target.closest(".v-chip") as HTMLElement;
if (!chip) return; if (!chip) return;
@ -163,40 +163,40 @@ function handleTouchStart(event: TouchEvent, groupIndex: number, studentIndex: n
element: chip, element: chip,
clone: null, clone: null,
originalRect: rect, originalRect: rect,
hasMoved: false hasMoved: false,
}; };
// Clone only the chip // Clone only the chip
const clone = chip.cloneNode(true) as HTMLElement; const clone = chip.cloneNode(true) as HTMLElement;
clone.classList.add('drag-clone'); clone.classList.add("drag-clone");
clone.style.position = 'fixed'; clone.style.position = "fixed";
clone.style.zIndex = '10000'; clone.style.zIndex = "10000";
clone.style.opacity = '0.9'; clone.style.opacity = "0.9";
clone.style.pointerEvents = 'none'; clone.style.pointerEvents = "none";
clone.style.width = `${rect.width}px`; clone.style.width = `${rect.width}px`;
clone.style.height = `${rect.height}px`; clone.style.height = `${rect.height}px`;
clone.style.left = `${rect.left}px`; clone.style.left = `${rect.left}px`;
clone.style.top = `${rect.top}px`; clone.style.top = `${rect.top}px`;
clone.style.transform = 'scale(1.05)'; clone.style.transform = "scale(1.05)";
clone.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)'; clone.style.boxShadow = "0 4px 8px rgba(0,0,0,0.3)";
clone.style.transition = 'transform 0.1s'; clone.style.transition = "transform 0.1s";
// Ensure the clone has the same chip styling // Ensure the clone has the same chip styling
clone.style.backgroundColor = getComputedStyle(chip).backgroundColor; clone.style.backgroundColor = getComputedStyle(chip).backgroundColor;
clone.style.color = getComputedStyle(chip).color; clone.style.color = getComputedStyle(chip).color;
clone.style.borderRadius = getComputedStyle(chip).borderRadius; clone.style.borderRadius = getComputedStyle(chip).borderRadius;
clone.style.padding = getComputedStyle(chip).padding; clone.style.padding = getComputedStyle(chip).padding;
clone.style.margin = '0'; // Remove any margin clone.style.margin = "0"; // Remove any margin
document.body.appendChild(clone); document.body.appendChild(clone);
touchState.value.clone = clone; touchState.value.clone = clone;
chip.style.visibility = 'hidden'; chip.style.visibility = "hidden";
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
} }
function handleTouchMove(event: TouchEvent): void { function handleTouchMove(event: TouchEvent): void {
if (!touchState.value.isDragging || !touchState.value.clone || event.touches.length > 1) return; if (!touchState.value.isDragging || !touchState.value.clone || event.touches.length > 1) return;
const touch = event.touches[0]; const touch = event.touches[0];
@ -212,34 +212,28 @@ function handleTouchMove(event: TouchEvent): void {
clone.style.left = `${touch.clientX - clone.offsetWidth / 2}px`; clone.style.left = `${touch.clientX - clone.offsetWidth / 2}px`;
clone.style.top = `${touch.clientY - clone.offsetHeight / 2}px`; clone.style.top = `${touch.clientY - clone.offsetHeight / 2}px`;
document.querySelectorAll('.group-box').forEach(el => { document.querySelectorAll(".group-box").forEach((el) => {
el.classList.remove('highlight'); el.classList.remove("highlight");
}); });
const elements = document.elementsFromPoint(touch.clientX, touch.clientY); const elements = document.elementsFromPoint(touch.clientX, touch.clientY);
const dropTarget = elements.find(el => el.classList.contains('group-box')); const dropTarget = elements.find((el) => el.classList.contains("group-box"));
if (dropTarget) { if (dropTarget) {
dropTarget.classList.add('highlight'); dropTarget.classList.add("highlight");
} }
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
} }
function handleTouchEnd(event: TouchEvent): void { function handleTouchEnd(event: TouchEvent): void {
if (!touchState.value.isDragging) return; if (!touchState.value.isDragging) return;
const { const { currentGroupIndex, currentStudentIndex, clone, element, hasMoved } = touchState.value;
currentGroupIndex,
currentStudentIndex,
clone,
element,
hasMoved
} = touchState.value;
document.querySelectorAll('.group-box').forEach(el => { document.querySelectorAll(".group-box").forEach((el) => {
el.classList.remove('highlight'); el.classList.remove("highlight");
}); });
if (clone?.parentNode) { if (clone?.parentNode) {
@ -247,25 +241,23 @@ function handleTouchEnd(event: TouchEvent): void {
} }
if (element) { if (element) {
element.style.visibility = 'visible'; element.style.visibility = "visible";
} }
if (hasMoved && event.changedTouches.length > 0) { if (hasMoved && event.changedTouches.length > 0) {
const touch = event.changedTouches[0]; const touch = event.changedTouches[0];
const elements = document.elementsFromPoint(touch.clientX, touch.clientY); const elements = document.elementsFromPoint(touch.clientX, touch.clientY);
const dropTarget = elements.find(el => el.classList.contains('group-box')); const dropTarget = elements.find((el) => el.classList.contains("group-box"));
if (dropTarget) { if (dropTarget) {
const groupBoxes = document.querySelectorAll('.group-box'); const groupBoxes = document.querySelectorAll(".group-box");
const targetGroupIndex = Array.from(groupBoxes).indexOf(dropTarget); const targetGroupIndex = Array.from(groupBoxes).indexOf(dropTarget);
if (targetGroupIndex !== currentGroupIndex) { if (targetGroupIndex !== currentGroupIndex) {
const sourceArray = currentGroupIndex === -1 const sourceArray =
? unassignedStudents.value currentGroupIndex === -1 ? unassignedStudents.value : currentGroups.value[currentGroupIndex];
: currentGroups.value[currentGroupIndex]; const targetArray =
const targetArray = targetGroupIndex === -1 targetGroupIndex === -1 ? unassignedStudents.value : currentGroups.value[targetGroupIndex];
? unassignedStudents.value
: currentGroups.value[targetGroupIndex];
if (sourceArray && targetArray) { if (sourceArray && targetArray) {
const [movedStudent] = sourceArray.splice(currentStudentIndex, 1); const [movedStudent] = sourceArray.splice(currentStudentIndex, 1);
@ -284,39 +276,35 @@ function handleTouchEnd(event: TouchEvent): void {
element: null, element: null,
clone: null, clone: null,
originalRect: null, originalRect: null,
hasMoved: false hasMoved: false,
}; };
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
}
function handleDragStart(event: DragEvent, groupIndex: number, studentIndex: number): void {
draggedItem.value = {groupIndex, studentIndex};
if (event.dataTransfer) {
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/plain', '');
} }
}
function handleDragOver(e: DragEvent, _: number): void { function handleDragStart(event: DragEvent, groupIndex: number, studentIndex: number): void {
draggedItem.value = { groupIndex, studentIndex };
if (event.dataTransfer) {
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("text/plain", "");
}
}
function handleDragOver(e: DragEvent, _: number): void {
e.preventDefault(); e.preventDefault();
if (e.dataTransfer) { if (e.dataTransfer) {
e.dataTransfer.dropEffect = "move"; e.dataTransfer.dropEffect = "move";
} }
} }
function handleDrop(e: DragEvent, targetGroupIndex: number, targetStudentIndex?: number): void { function handleDrop(e: DragEvent, targetGroupIndex: number, targetStudentIndex?: number): void {
e.preventDefault(); e.preventDefault();
if (!draggedItem.value) return; if (!draggedItem.value) return;
const {groupIndex: sourceGroupIndex, studentIndex: sourceStudentIndex} = draggedItem.value; const { groupIndex: sourceGroupIndex, studentIndex: sourceStudentIndex } = draggedItem.value;
const sourceArray = sourceGroupIndex === -1 const sourceArray = sourceGroupIndex === -1 ? unassignedStudents.value : currentGroups.value[sourceGroupIndex];
? unassignedStudents.value const targetArray = targetGroupIndex === -1 ? unassignedStudents.value : currentGroups.value[targetGroupIndex];
: currentGroups.value[sourceGroupIndex];
const targetArray = targetGroupIndex === -1
? unassignedStudents.value
: currentGroups.value[targetGroupIndex];
const [movedStudent] = sourceArray.splice(sourceStudentIndex, 1); const [movedStudent] = sourceArray.splice(sourceStudentIndex, 1);
if (targetStudentIndex !== undefined) { if (targetStudentIndex !== undefined) {
@ -326,9 +314,9 @@ function handleDrop(e: DragEvent, targetGroupIndex: number, targetStudentIndex?:
} }
draggedItem.value = null; draggedItem.value = null;
} }
function saveDragDrop(): void { function saveDragDrop(): void {
if (unassignedStudents.value.length > 0) { if (unassignedStudents.value.length > 0) {
alert(t("please-assign-all-students")); alert(t("please-assign-all-students"));
return; return;
@ -341,23 +329,26 @@ function saveDragDrop(): void {
activeDialog.value = null; activeDialog.value = null;
emit("done"); emit("done");
emit("close"); emit("close");
} }
const showGroupsPreview = computed(() => { const showGroupsPreview = computed(() => {
return currentGroups.value.length > 0 || unassignedStudents.value.length > 0; return currentGroups.value.length > 0 || unassignedStudents.value.length > 0;
}); });
function removeStudent(groupIndex: number, student: StudentItem): void { function removeStudent(groupIndex: number, student: StudentItem): void {
const group = currentGroups.value[groupIndex]; const group = currentGroups.value[groupIndex];
currentGroups.value[groupIndex] = group.filter((s) => s.username !== student.username); currentGroups.value[groupIndex] = group.filter((s) => s.username !== student.username);
unassignedStudents.value.push(student); unassignedStudents.value.push(student);
} }
</script> </script>
<template> <template>
<v-card class="pa-4 minimal-card"> <v-card class="pa-4 minimal-card">
<!-- Current groups and unassigned students Preview --> <!-- Current groups and unassigned students Preview -->
<div v-if="showGroupsPreview" class="mb-6"> <div
v-if="showGroupsPreview"
class="mb-6"
>
<h3 class="mb-2">{{ t("current-groups") }}</h3> <h3 class="mb-2">{{ t("current-groups") }}</h3>
<div> <div>
<div class="d-flex flex-wrap"> <div class="d-flex flex-wrap">
@ -366,11 +357,23 @@ function removeStudent(groupIndex: number, student: StudentItem): void {
</div> </div>
</div> </div>
<v-row justify="center" class="mb-4"> <v-row
<v-btn color="primary" @click="activeDialog = 'random'" prepend-icon="mdi-shuffle"> justify="center"
class="mb-4"
>
<v-btn
color="primary"
@click="activeDialog = 'random'"
prepend-icon="mdi-shuffle"
>
{{ t("random-grouping") }} {{ t("random-grouping") }}
</v-btn> </v-btn>
<v-btn color="secondary" class="ml-4" @click="activeDialog = 'dragdrop'" prepend-icon="mdi-drag"> <v-btn
color="secondary"
class="ml-4"
@click="activeDialog = 'dragdrop'"
prepend-icon="mdi-drag"
>
{{ t("drag-and-drop") }} {{ t("drag-and-drop") }}
</v-btn> </v-btn>
</v-row> </v-row>
@ -436,8 +439,12 @@ function removeStudent(groupIndex: number, student: StudentItem): void {
</v-card-text> </v-card-text>
<v-card-actions class="dialog-actions"> <v-card-actions class="dialog-actions">
<v-spacer/> <v-spacer />
<v-btn text @click="activeDialog = null">{{ t("cancel") }}</v-btn> <v-btn
text
@click="activeDialog = null"
>{{ t("cancel") }}</v-btn
>
<v-btn <v-btn
color="success" color="success"
@click="saveRandomGroups" @click="saveRandomGroups"
@ -456,16 +463,27 @@ function removeStudent(groupIndex: number, student: StudentItem): void {
max-width="900" max-width="900"
> >
<v-card class="custom-dialog"> <v-card class="custom-dialog">
<v-card-title class=" dialog-title d-flex justify-space-between align-center"> <v-card-title class="dialog-title d-flex justify-space-between align-center">
<div>{{ t("drag-and-drop") }}</div> <div>{{ t("drag-and-drop") }}</div>
<v-btn color="primary" small @click="addNewGroup">+</v-btn> <v-btn
color="primary"
small
@click="addNewGroup"
>+</v-btn
>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-row> <v-row>
<!-- Groups Column --> <!-- Groups Column -->
<v-col cols="12" md="8"> <v-col
<div v-if="currentGroups.length === 0" class="text-center py-4"> cols="12"
md="8"
>
<div
v-if="currentGroups.length === 0"
class="text-center py-4"
>
<v-alert type="info">{{ t("no-groups-yet") }}</v-alert> <v-alert type="info">{{ t("no-groups-yet") }}</v-alert>
</div> </div>
@ -479,7 +497,12 @@ function removeStudent(groupIndex: number, student: StudentItem): void {
> >
<div class="d-flex justify-space-between align-center mb-2"> <div class="d-flex justify-space-between align-center mb-2">
<strong>{{ t("group") }} {{ groupIndex + 1 }}</strong> <strong>{{ t("group") }} {{ groupIndex + 1 }}</strong>
<v-btn icon small color="error" @click="removeGroup(groupIndex)"> <v-btn
icon
small
color="error"
@click="removeGroup(groupIndex)"
>
<v-icon>mdi-delete</v-icon> <v-icon>mdi-delete</v-icon>
</v-btn> </v-btn>
</div> </div>
@ -497,7 +520,10 @@ function removeStudent(groupIndex: number, student: StudentItem): void {
@dragover.prevent="handleDragOver($event, groupIndex)" @dragover.prevent="handleDragOver($event, groupIndex)"
@drop="handleDrop($event, groupIndex, studentIndex)" @drop="handleDrop($event, groupIndex, studentIndex)"
> >
<v-chip close @click:close="removeStudent(groupIndex, student)"> <v-chip
close
@click:close="removeStudent(groupIndex, student)"
>
{{ student.fullName }} {{ student.fullName }}
</v-chip> </v-chip>
</div> </div>
@ -539,8 +565,12 @@ function removeStudent(groupIndex: number, student: StudentItem): void {
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer/> <v-spacer />
<v-btn text @click="activeDialog = null">{{ t("cancel") }}</v-btn> <v-btn
text
@click="activeDialog = null"
>{{ t("cancel") }}</v-btn
>
<v-btn <v-btn
color="primary" color="primary"
@click="saveDragDrop" @click="saveDragDrop"
@ -555,26 +585,26 @@ function removeStudent(groupIndex: number, student: StudentItem): void {
</template> </template>
<style scoped> <style scoped>
.group-box { .group-box {
min-height: 100px; min-height: 100px;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
background-color: #fafafa; background-color: #fafafa;
border-radius: 4px; border-radius: 4px;
transition: all 0.2s; transition: all 0.2s;
} }
.group-box.highlight { .group-box.highlight {
background-color: #e3f2fd; background-color: #e3f2fd;
border: 2px dashed #2196f3; border: 2px dashed #2196f3;
} }
.v-expansion-panel-text { .v-expansion-panel-text {
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
} }
.drag-clone { .drag-clone {
z-index: 10000; z-index: 10000;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
@ -586,70 +616,70 @@ function removeStudent(groupIndex: number, student: StudentItem): void {
justify-content: center; justify-content: center;
border-radius: 16px; border-radius: 16px;
background-color: inherit; background-color: inherit;
} }
.draggable-item { .draggable-item {
display: inline-block; display: inline-block;
} }
.draggable-item .v-chip[style*="hidden"] { .draggable-item .v-chip[style*="hidden"] {
visibility: hidden; visibility: hidden;
display: inline-block; display: inline-block;
} }
.custom-dialog { .custom-dialog {
border-radius: 16px; border-radius: 16px;
padding: 24px; padding: 24px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
} }
.dialog-title { .dialog-title {
color: #00796b; /* teal-like green */ color: #00796b; /* teal-like green */
font-weight: bold; font-weight: bold;
font-size: 1.25rem; font-size: 1.25rem;
margin-bottom: 16px; margin-bottom: 16px;
} }
.dialog-actions { .dialog-actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 12px; gap: 12px;
margin-top: 24px; margin-top: 24px;
} }
.v-btn.custom-green { .v-btn.custom-green {
background-color: #43a047; background-color: #43a047;
color: white; color: white;
} }
.v-btn.custom-green:hover { .v-btn.custom-green:hover {
background-color: #388e3c background-color: #388e3c;
} }
.v-btn.custom-blue { .v-btn.custom-blue {
background-color: #1e88e5; background-color: #1e88e5;
color: white; color: white;
} }
.v-btn.custom-blue:hover { .v-btn.custom-blue:hover {
background-color: #1565c0 ; background-color: #1565c0;
} }
.v-btn.cancel-button { .v-btn.cancel-button {
background-color: #e0f2f1; background-color: #e0f2f1;
color: #00695c; color: #00695c;
} }
.minimal-card { .minimal-card {
box-shadow: none; /* remove card shadow */ box-shadow: none; /* remove card shadow */
border: none; /* remove border */ border: none; /* remove border */
background-color: transparent; /* make background transparent */ background-color: transparent; /* make background transparent */
padding: 0; /* reduce padding */ padding: 0; /* reduce padding */
margin-bottom: 1rem; /* keep some spacing below */ margin-bottom: 1rem; /* keep some spacing below */
} }
/* Optionally, keep some padding only around buttons */ /* Optionally, keep some padding only around buttons */
.minimal-card > .v-row { .minimal-card > .v-row {
padding: 1rem 0; /* give vertical padding around buttons */ padding: 1rem 0; /* give vertical padding around buttons */
} }
</style> </style>

3
frontend/src/utils/assignment-rules.ts
View file

@ -1,11 +1,9 @@
/** /**
* Validation rule for the assignment title. * Validation rule for the assignment title.
* *
* Ensures that the title is not empty. * Ensures that the title is not empty.
*/ */
/** /**
* Validation rule for the classes selection. * Validation rule for the classes selection.
* *
@ -17,4 +15,3 @@
* *
* Ensures that a valid deadline is selected and is in the future. * Ensures that a valid deadline is selected and is in the future.
*/ */

126
frontend/src/views/assignments/CreateAssignment.vue
View file

@ -1,69 +1,67 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { computed, onMounted, ref, watch } from "vue"; import { computed, onMounted, ref, watch } from "vue";
import auth from "@/services/auth/auth-service.ts"; import auth from "@/services/auth/auth-service.ts";
import { useTeacherClassesQuery } from "@/queries/teachers.ts"; import { useTeacherClassesQuery } from "@/queries/teachers.ts";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { useGetAllLearningPaths } from "@/queries/learning-paths.ts"; import { useGetAllLearningPaths } from "@/queries/learning-paths.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import UsingQueryResult from "@/components/UsingQueryResult.vue";
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts"; import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
import type { ClassesResponse } from "@/controllers/classes.ts"; import type { ClassesResponse } from "@/controllers/classes.ts";
import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment"; import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
import { useCreateAssignmentMutation } from "@/queries/assignments.ts"; import { useCreateAssignmentMutation } from "@/queries/assignments.ts";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const role = ref(auth.authState.activeRole); const role = ref(auth.authState.activeRole);
const username = ref<string>(""); const username = ref<string>("");
onMounted(async () => { onMounted(async () => {
if (role.value === "student") { if (role.value === "student") {
await router.push("/user"); await router.push("/user");
} }
const user = await auth.loadUser(); const user = await auth.loadUser();
username.value = user?.profile?.preferred_username ?? ""; username.value = user?.profile?.preferred_username ?? "";
}); });
const language = computed(() => locale.value); const language = computed(() => locale.value);
const form = ref(); const form = ref();
const learningPathsQueryResults = useGetAllLearningPaths(language); const learningPathsQueryResults = useGetAllLearningPaths(language);
const classesQueryResults = useTeacherClassesQuery(username, true); const classesQueryResults = useTeacherClassesQuery(username, true);
const selectedClass = ref(undefined); const selectedClass = ref(undefined);
const assignmentTitle = ref(""); const assignmentTitle = ref("");
const selectedLearningPath = ref<LearningPath | undefined>(undefined); const selectedLearningPath = ref<LearningPath | undefined>(undefined);
const lpIsSelected = ref(false); const lpIsSelected = ref(false);
watch(learningPathsQueryResults.data, (data) => { watch(learningPathsQueryResults.data, (data) => {
const hruidFromRoute = route.query.hruid?.toString(); const hruidFromRoute = route.query.hruid?.toString();
if (!hruidFromRoute || !data) return; if (!hruidFromRoute || !data) return;
// Verify if the hruid given in the url is valid before accepting it // Verify if the hruid given in the url is valid before accepting it
const matchedLP = data.find(lp => lp.hruid === hruidFromRoute); const matchedLP = data.find((lp) => lp.hruid === hruidFromRoute);
if (matchedLP) { if (matchedLP) {
selectedLearningPath.value = matchedLP; selectedLearningPath.value = matchedLP;
lpIsSelected.value = true; lpIsSelected.value = true;
} }
}); });
const { mutate, data, isSuccess } = useCreateAssignmentMutation(); const { mutate, data, isSuccess } = useCreateAssignmentMutation();
watch([isSuccess, data], async ([success, newData]) => { watch([isSuccess, data], async ([success, newData]) => {
if (success && newData?.assignment) { if (success && newData?.assignment) {
await router.push(`/assignment/${newData.assignment.within}/${newData.assignment.id}`); await router.push(`/assignment/${newData.assignment.within}/${newData.assignment.id}`);
} }
}); });
async function submitFormHandler(): Promise<void> { async function submitFormHandler(): Promise<void> {
const { valid } = await form.value.validate(); const { valid } = await form.value.validate();
if (!valid) return; if (!valid) return;
const lp = lpIsSelected.value const lp = lpIsSelected.value ? route.query.hruid?.toString() : selectedLearningPath.value?.hruid;
? route.query.hruid?.toString()
: selectedLearningPath.value?.hruid;
if (!lp) { if (!lp) {
return; return;
} }
@ -80,40 +78,37 @@ async function submitFormHandler(): Promise<void> {
}; };
mutate({ cid: assignmentDTO.within, data: assignmentDTO }); mutate({ cid: assignmentDTO.within, data: assignmentDTO });
} }
const learningPathRules = [ const learningPathRules = [
(value: LearningPath): string | boolean => { (value: LearningPath): string | boolean => {
if (lpIsSelected.value) return true;
if(lpIsSelected.value) return true;
if (!value) return t("lp-required"); if (!value) return t("lp-required");
const allLPs = learningPathsQueryResults.data.value ?? []; const allLPs = learningPathsQueryResults.data.value ?? [];
const valid = allLPs.some(lp => lp.hruid === value?.hruid); const valid = allLPs.some((lp) => lp.hruid === value?.hruid);
return valid || t("lp-invalid"); return valid || t("lp-invalid");
} },
]; ];
const assignmentTitleRules = [ const assignmentTitleRules = [
(value: string): string | boolean => { (value: string): string | boolean => {
if (value?.length >= 1) { if (value?.length >= 1) {
return true; return true;
} // Title must not be empty } // Title must not be empty
return t("title-required"); return t("title-required");
}, },
]; ];
const classRules = [ const classRules = [
(value: string): string | boolean => { (value: string): string | boolean => {
if (value) { if (value) {
return true; return true;
} }
return t("class-required"); return t("class-required");
}, },
]; ];
</script> </script>
<template> <template>
@ -156,7 +151,6 @@ const classRules = [
:disabled="lpIsSelected" :disabled="lpIsSelected"
return-object return-object
/> />
</using-query-result> </using-query-result>
<!-- Klas keuze --> <!-- Klas keuze -->
@ -212,59 +206,59 @@ const classRules = [
</template> </template>
<style scoped> <style scoped>
.main-container { .main-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: start; justify-content: start;
padding-top: 32px; padding-top: 32px;
text-align: center; text-align: center;
} }
.form-card { .form-card {
width: 100%; width: 100%;
max-width: 720px; max-width: 720px;
border-radius: 16px; border-radius: 16px;
} }
.form-container { .form-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
width: 100%; width: 100%;
} }
.step-container { .step-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.form-card { .form-card {
width: 85%; width: 85%;
padding: 1%; padding: 1%;
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
h1 { h1 {
font-size: 32px; font-size: 32px;
text-align: center; text-align: center;
margin-left: 0; margin-left: 0;
} }
} }
@media (max-width: 400px) { @media (max-width: 400px) {
h1 { h1 {
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
margin-left: 0; margin-left: 0;
} }
} }
.v-card { .v-card {
border: 2px solid #0e6942; border: 2px solid #0e6942;
border-radius: 12px; border-radius: 12px;
} }
</style> </style>

4
frontend/src/views/assignments/StudentAssignment.vue
View file

@ -6,11 +6,11 @@
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import UsingQueryResult from "@/components/UsingQueryResult.vue";
import type { AssignmentResponse } from "@/controllers/assignments.ts"; import type { AssignmentResponse } from "@/controllers/assignments.ts";
import { asyncComputed } from "@vueuse/core"; import { asyncComputed } from "@vueuse/core";
import {useStudentGroupsQuery, useStudentsByUsernamesQuery} from "@/queries/students.ts"; import { useStudentGroupsQuery, useStudentsByUsernamesQuery } from "@/queries/students.ts";
import { useGetLearningPathQuery } from "@/queries/learning-paths.ts"; import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
import type { Language } from "@/data-objects/language.ts"; import type { Language } from "@/data-objects/language.ts";
import { calculateProgress } from "@/utils/assignment-utils.ts"; import { calculateProgress } from "@/utils/assignment-utils.ts";
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts"; import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
const props = defineProps<{ const props = defineProps<{
classId: string; classId: string;

215
frontend/src/views/assignments/TeacherAssignment.vue
View file

@ -1,53 +1,53 @@
<script setup lang="ts"> <script setup lang="ts">
import {computed, ref, watch, watchEffect} from "vue"; import { computed, ref, watch, watchEffect } from "vue";
import {useI18n} from "vue-i18n"; import { useI18n } from "vue-i18n";
import { import {
useAssignmentQuery, useAssignmentQuery,
useDeleteAssignmentMutation, useDeleteAssignmentMutation,
useUpdateAssignmentMutation, useUpdateAssignmentMutation,
} from "@/queries/assignments.ts"; } from "@/queries/assignments.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import UsingQueryResult from "@/components/UsingQueryResult.vue";
import {useGroupsQuery} from "@/queries/groups.ts"; import { useGroupsQuery } from "@/queries/groups.ts";
import {useGetLearningPathQuery} from "@/queries/learning-paths.ts"; import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
import type {Language} from "@/data-objects/language.ts"; import type { Language } from "@/data-objects/language.ts";
import type {AssignmentResponse} from "@/controllers/assignments.ts"; import type { AssignmentResponse } from "@/controllers/assignments.ts";
import type {GroupDTO, GroupDTOId} from "@dwengo-1/common/interfaces/group"; import type { GroupDTO, GroupDTOId } from "@dwengo-1/common/interfaces/group";
import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue"; import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue";
import GroupProgressRow from "@/components/GroupProgressRow.vue"; import GroupProgressRow from "@/components/GroupProgressRow.vue";
import type {AssignmentDTO} from "@dwengo-1/common/dist/interfaces/assignment.ts"; import type { AssignmentDTO } from "@dwengo-1/common/dist/interfaces/assignment.ts";
import GroupSelector from "@/components/assignments/GroupSelector.vue"; import GroupSelector from "@/components/assignments/GroupSelector.vue";
import DeadlineSelector from "@/components/assignments/DeadlineSelector.vue"; import DeadlineSelector from "@/components/assignments/DeadlineSelector.vue";
const props = defineProps<{ const props = defineProps<{
classId: string; classId: string;
assignmentId: number; assignmentId: number;
}>(); }>();
const isEditing = ref(false); const isEditing = ref(false);
const {t} = useI18n(); const { t } = useI18n();
const lang = ref(); const lang = ref();
const groups = ref<GroupDTO[] | GroupDTOId[]>([]); const groups = ref<GroupDTO[] | GroupDTOId[]>([]);
const learningPath = ref(); const learningPath = ref();
const form = ref(); const form = ref();
const editingLearningPath = ref(learningPath); const editingLearningPath = ref(learningPath);
const description = ref(""); const description = ref("");
const deadline = ref<Date | null>(null); const deadline = ref<Date | null>(null);
const editGroups = ref(false); const editGroups = ref(false);
const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId); const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
// Get learning path object // Get learning path object
const lpQueryResult = useGetLearningPathQuery( const lpQueryResult = useGetLearningPathQuery(
computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""), computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
computed(() => assignmentQueryResult.data.value?.assignment?.language as Language), computed(() => assignmentQueryResult.data.value?.assignment?.language as Language),
); );
// Get all the groups withing the assignment // Get all the groups withing the assignment
const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true); const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
groups.value = groupsQueryResult.data.value?.groups ?? []; groups.value = groupsQueryResult.data.value?.groups ?? [];
watchEffect(() => { watchEffect(() => {
const assignment = assignmentQueryResult.data.value?.assignment; const assignment = assignmentQueryResult.data.value?.assignment;
if (assignment) { if (assignment) {
learningPath.value = assignment.learningPath; learningPath.value = assignment.learningPath;
@ -58,12 +58,11 @@ watchEffect(() => {
editingLearningPath.value = lpQueryResult.data.value; editingLearningPath.value = lpQueryResult.data.value;
} }
} }
}); });
const hasSubmissions = ref<boolean>(false); const hasSubmissions = ref<boolean>(false);
const allGroups = computed(() => {
const allGroups = computed(() => {
const groups = groupsQueryResult.data.value?.groups; const groups = groupsQueryResult.data.value?.groups;
if (!groups) return []; if (!groups) return [];
@ -76,57 +75,56 @@ const allGroups = computed(() => {
groupNo: index + 1, // New group number that will be used groupNo: index + 1, // New group number that will be used
name: `${t("group")} ${index + 1}`, name: `${t("group")} ${index + 1}`,
members: group.members, members: group.members,
originalGroupNo: group.groupNumber originalGroupNo: group.groupNumber,
})); }));
}); });
const dialog = ref(false); const dialog = ref(false);
const selectedGroup = ref({}); const selectedGroup = ref({});
function openGroupDetails(group: object): void { function openGroupDetails(group: object): void {
selectedGroup.value = group; selectedGroup.value = group;
dialog.value = true; dialog.value = true;
} }
async function deleteAssignment(num: number, clsId: string): Promise<void> {
async function deleteAssignment(num: number, clsId: string): Promise<void> { const { mutate } = useDeleteAssignmentMutation();
const {mutate} = useDeleteAssignmentMutation();
mutate( mutate(
{cid: clsId, an: num}, { cid: clsId, an: num },
{ {
onSuccess: () => { onSuccess: () => {
window.location.href = "/user/assignment"; window.location.href = "/user/assignment";
}, },
}, },
); );
} }
function goToLearningPathLink(): string | undefined { function goToLearningPathLink(): string | undefined {
const assignment = assignmentQueryResult.data.value?.assignment; const assignment = assignmentQueryResult.data.value?.assignment;
const lp = lpQueryResult.data.value; const lp = lpQueryResult.data.value;
if (!assignment || !lp) return undefined; if (!assignment || !lp) return undefined;
return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`; return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`;
} }
function goToGroupSubmissionLink(groupNo: number): string | undefined { function goToGroupSubmissionLink(groupNo: number): string | undefined {
const lp = lpQueryResult.data.value; const lp = lpQueryResult.data.value;
if (!lp) return undefined; if (!lp) return undefined;
return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`; return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`;
} }
const {mutate, data, isSuccess} = useUpdateAssignmentMutation(); const { mutate, data, isSuccess } = useUpdateAssignmentMutation();
watch([isSuccess, data], async ([success, newData]) => { watch([isSuccess, data], async ([success, newData]) => {
if (success && newData?.assignment) { if (success && newData?.assignment) {
await assignmentQueryResult.refetch(); await assignmentQueryResult.refetch();
} }
}); });
async function saveChanges(): Promise<void> { async function saveChanges(): Promise<void> {
const {valid} = await form.value.validate(); const { valid } = await form.value.validate();
if (!valid) return; if (!valid) return;
isEditing.value = false; isEditing.value = false;
@ -141,9 +139,9 @@ async function saveChanges(): Promise<void> {
an: assignmentQueryResult.data.value?.assignment.id, an: assignmentQueryResult.data.value?.assignment.id,
data: assignmentDTO, data: assignmentDTO,
}); });
} }
async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> { async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
const assignmentDTO: AssignmentDTO = { const assignmentDTO: AssignmentDTO = {
groups: updatedGroups, groups: updatedGroups,
}; };
@ -152,8 +150,7 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
an: assignmentQueryResult.data.value?.assignment.id, an: assignmentQueryResult.data.value?.assignment.id,
data: assignmentDTO, data: assignmentDTO,
}); });
} }
</script> </script>
<template> <template>
@ -275,9 +272,7 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
</using-query-result> </using-query-result>
</v-card-subtitle> </v-card-subtitle>
<v-card-text v-if="isEditing"> <v-card-text v-if="isEditing">
<deadline-selector <deadline-selector v-model:deadline="deadline" />
v-model:deadline="deadline"
/>
</v-card-text> </v-card-text>
<v-card-text <v-card-text
v-if="!isEditing" v-if="!isEditing"
@ -374,9 +369,7 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
:key="g.originalGroupNo" :key="g.originalGroupNo"
> >
<td> <td>
<v-btn <v-btn variant="text">
variant="text"
>
{{ g.name }} {{ g.name }}
</v-btn> </v-btn>
</td> </td>
@ -398,8 +391,9 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
:class-id="classId" :class-id="classId"
:language="lang" :language="lang"
:go-to-group-submission-link="goToGroupSubmissionLink" :go-to-group-submission-link="goToGroupSubmissionLink"
@update:hasSubmission="(hasSubmission) => hasSubmissions = hasSubmission" @update:hasSubmission="
(hasSubmission) => (hasSubmissions = hasSubmission)
"
/> />
</td> </td>
@ -438,102 +432,104 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn text @click="editGroups = false"> <v-btn
text
@click="editGroups = false"
>
{{ t("cancel") }} {{ t("cancel") }}
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</v-container> </v-container>
</using-query-result> </using-query-result>
</div> </div>
</template> </template>
<style scoped> <style scoped>
@import "@/assets/assignment.css"; @import "@/assets/assignment.css";
.table-scroll { .table-scroll {
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.header { .header {
font-weight: bold !important; font-weight: bold !important;
background-color: #0e6942; background-color: #0e6942;
color: white; color: white;
padding: 10px; padding: 10px;
} }
table thead th:first-child { table thead th:first-child {
border-top-left-radius: 10px; border-top-left-radius: 10px;
} }
.table thead th:last-child { .table thead th:last-child {
border-top-right-radius: 10px; border-top-right-radius: 10px;
} }
.table tbody tr:nth-child(odd) { .table tbody tr:nth-child(odd) {
background-color: white; background-color: white;
} }
.table tbody tr:nth-child(even) { .table tbody tr:nth-child(even) {
background-color: #f6faf2; background-color: #f6faf2;
} }
td, td,
th { th {
border-bottom: 1px solid #0e6942; border-bottom: 1px solid #0e6942;
border-top: 1px solid #0e6942; border-top: 1px solid #0e6942;
} }
.table { .table {
width: 90%; width: 90%;
padding-top: 10px; padding-top: 10px;
border-collapse: collapse; border-collapse: collapse;
} }
h1 { h1 {
color: #0e6942; color: #0e6942;
text-transform: uppercase; text-transform: uppercase;
font-weight: bolder; font-weight: bolder;
padding-top: 2%; padding-top: 2%;
font-size: 50px; font-size: 50px;
} }
h2 { h2 {
color: #0e6942; color: #0e6942;
font-size: 30px; font-size: 30px;
} }
.join { .join {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
margin-top: 50px; margin-top: 50px;
} }
.link { .link {
color: #0b75bb; color: #0b75bb;
text-decoration: underline; text-decoration: underline;
} }
main { main {
margin-left: 30px; margin-left: 30px;
} }
.table-container { .table-container {
width: 100%; width: 100%;
overflow-x: visible; overflow-x: visible;
} }
.table { .table {
width: 100%; width: 100%;
min-width: auto; min-width: auto;
table-layout: auto; table-layout: auto;
} }
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
h1 { h1 {
text-align: center; text-align: center;
padding-left: 0; padding-left: 0;
@ -575,11 +571,10 @@ main {
max-width: 100% !important; max-width: 100% !important;
flex-basis: 100% !important; flex-basis: 100% !important;
} }
} }
.group-members-dialog { .group-members-dialog {
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
} }
</style> </style>