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

Merge dev into feat/deadline

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-05-12 22:06:54 +02:00
commit 41029a4b9d
12 changed files with 310 additions and 306 deletions
Download patch file Download diff file Expand all files Collapse all files

54
frontend/src/assets/common.css Normal file
View file

@ -0,0 +1,54 @@
.h1 {
color: #0e6942;
text-transform: uppercase;
font-weight: bolder;
font-size: 50px;
padding-left: 1%;
}
.empty-message {
text-align: center;
font-size: 18px;
}
.header {
font-weight: bold !important;
background-color: #0e6942;
color: white;
padding: 10px;
}
.table thead th:first-child {
border-top-left-radius: 10px;
}
.table thead th:last-child {
border-top-right-radius: 10px;
}
.table tbody tr:nth-child(odd) {
background-color: white;
}
.table tbody tr:nth-child(even) {
background-color: #f6faf2;
}
.table td,
.table th {
border-bottom: 1px solid #0e6942;
border-top: 1px solid #0e6942;
}
.table {
width: 90%;
padding-top: 10px;
border-collapse: collapse;
}
@media screen and (max-width: 850px) {
.h1 {
text-align: center;
padding-left: 0;
}
}

20
frontend/src/i18n/locale/de.json
View file

@ -21,6 +21,7 @@
"JoinClassExplanation": "Geben Sie den Code ein, den Ihnen die Lehrkraft mitgeteilt hat, um der Klasse beizutreten.", "JoinClassExplanation": "Geben Sie den Code ein, den Ihnen die Lehrkraft mitgeteilt hat, um der Klasse beizutreten.",
"invalidFormat": "Ungültiges Format", "invalidFormat": "Ungültiges Format",
"submitCode": "senden", "submitCode": "senden",
"submit": "senden",
"members": "Mitglieder", "members": "Mitglieder",
"themes": "Themen", "themes": "Themen",
"choose-theme": "Wählen Sie ein Thema", "choose-theme": "Wählen Sie ein Thema",
@ -68,10 +69,10 @@
"pick-class": "Wählen Sie eine klasse", "pick-class": "Wählen Sie eine klasse",
"choose-students": "Studenten auswählen", "choose-students": "Studenten auswählen",
"create-group": "Gruppe erstellen", "create-group": "Gruppe erstellen",
"class": "klasse", "class": "Klasse",
"delete": "löschen", "delete": "löschen",
"view-assignment": "Auftrag anzeigen", "view-assignment": "Auftrag anzeigen",
"code": "code", "code": "Code",
"invitations": "Einladungen", "invitations": "Einladungen",
"createClass": "Klasse erstellen", "createClass": "Klasse erstellen",
"createClassInstructions": "Geben Sie einen Namen für Ihre Klasse ein und klicken Sie auf „Erstellen“. Es erscheint ein Fenster mit einem Code, den Sie kopieren können. Geben Sie diesen Code an Ihre Schüler weiter und sie können Ihrer Klasse beitreten.", "createClassInstructions": "Geben Sie einen Namen für Ihre Klasse ein und klicken Sie auf „Erstellen“. Es erscheint ein Fenster mit einem Code, den Sie kopieren können. Geben Sie diesen Code an Ihre Schüler weiter und sie können Ihrer Klasse beitreten.",
@ -83,7 +84,7 @@
"onlyUse": "nur Buchstaben, Zahlen, Bindestriche (-) und Unterstriche (_) verwenden", "onlyUse": "nur Buchstaben, Zahlen, Bindestriche (-) und Unterstriche (_) verwenden",
"close": "schließen", "close": "schließen",
"copied": "kopiert!", "copied": "kopiert!",
"accept": "akzeptieren", "accept": "Akzeptieren",
"deny": "ablehnen", "deny": "ablehnen",
"sent": "sent", "sent": "sent",
"failed": "fehlgeschlagen", "failed": "fehlgeschlagen",
@ -110,7 +111,7 @@
"remove": "entfernen", "remove": "entfernen",
"students": "Studenten", "students": "Studenten",
"classJoinRequests": "Beitrittsanfragen", "classJoinRequests": "Beitrittsanfragen",
"reject": "ablehnen", "reject": "Ablehnen",
"areusure": "Sind Sie sicher?", "areusure": "Sind Sie sicher?",
"yes": "ja", "yes": "ja",
"teachers": "Lehrer", "teachers": "Lehrer",
@ -122,6 +123,17 @@
"assignmentIndicator": "AUFGABE", "assignmentIndicator": "AUFGABE",
"searchAllLearningPathsTitle": "Alle Lernpfade durchsuchen", "searchAllLearningPathsTitle": "Alle Lernpfade durchsuchen",
"searchAllLearningPathsDescription": "Nicht gefunden, was Sie gesucht haben? Klicken Sie hier, um unsere gesamte Lernpfad-Datenbank zu durchsuchen.", "searchAllLearningPathsDescription": "Nicht gefunden, was Sie gesucht haben? Klicken Sie hier, um unsere gesamte Lernpfad-Datenbank zu durchsuchen.",
"no-students-found": "Diese Klasse hat keine Schüler.",
"no-invitations-found": "Sie haben keine ausstehenden Einladungen.",
"no-join-requests-found": "Es gibt keine ausstehenden Beitrittsanfragen für diese Klasse.",
"no-classes-found": "Sie sind noch keinem Kurs beigetreten.",
"classCreated": "Klasse erstellt!",
"success": "Erfolg",
"submitted": "eingereicht",
"see-submission": "Einsendung anzeigen",
"view-submissions": "Einsendungen anzeigen",
"valid-username": "Bitte geben Sie einen gültigen Benutzernamen ein",
"creationFailed": "Erstellung fehlgeschlagen, bitte versuchen Sie es erneut"
"no-assignments": "Derzeit gibt es keine Zuweisungen.", "no-assignments": "Derzeit gibt es keine Zuweisungen.",
"deadline": "deadline" "deadline": "deadline"
} }

32
frontend/src/i18n/locale/en.json
View file

@ -33,6 +33,7 @@
"JoinClassExplanation": "Enter the code the teacher has given you to join the class.", "JoinClassExplanation": "Enter the code the teacher has given you to join the class.",
"invalidFormat": "Invalid format.", "invalidFormat": "Invalid format.",
"submitCode": "submit", "submitCode": "submit",
"submit": "submit",
"members": "Members", "members": "Members",
"themes": "Themes", "themes": "Themes",
"choose-theme": "Select a theme", "choose-theme": "Select a theme",
@ -68,21 +69,21 @@
"pick-class": "Pick a class", "pick-class": "Pick a class",
"choose-students": "Select students", "choose-students": "Select students",
"create-group": "Create group", "create-group": "Create group",
"class": "class", "class": "Class",
"delete": "delete", "delete": "delete",
"view-assignment": "View assignment", "view-assignment": "View assignment",
"code": "code", "code": "Code",
"invitations": "invitations", "invitations": "Invitations",
"createClass": "create class", "createClass": "Create class",
"classname": "classname", "classname": "classname",
"EnterNameOfClass": "Enter a classname.", "EnterNameOfClass": "Enter a classname.",
"create": "create", "create": "create",
"sender": "sender", "sender": "Sender",
"nameIsMandatory": "classname is mandatory", "nameIsMandatory": "classname is mandatory",
"onlyUse": "only use letters, numbers, dashes (-) and underscores (_)", "onlyUse": "only use letters, numbers, dashes (-) and underscores (_)",
"close": "close", "close": "close",
"copied": "copied!", "copied": "copied!",
"accept": "accept", "accept": "Accept",
"deny": "deny", "deny": "deny",
"createClassInstructions": "Enter a name for your class and click on create. A window will appear with a code that you can copy. Give this code to your students and they will be able to join.", "createClassInstructions": "Enter a name for your class and click on create. A window will appear with a code that you can copy. Give this code to your students and they will be able to join.",
"sent": "sent", "sent": "sent",
@ -108,12 +109,12 @@
"progress": "Progress", "progress": "Progress",
"created": "created", "created": "created",
"remove": "remove", "remove": "remove",
"students": "students", "students": "Students",
"classJoinRequests": "join requests", "classJoinRequests": "Join requests",
"reject": "reject", "reject": "Reject",
"areusure": "Are you sure?", "areusure": "Are you sure?",
"yes": "yes", "yes": "yes",
"teachers": "teachers", "teachers": "Teachers",
"accepted": "accepted", "accepted": "accepted",
"rejected": "rejected", "rejected": "rejected",
"enterUsername": "enter the username of the teacher you would like to invite", "enterUsername": "enter the username of the teacher you would like to invite",
@ -122,6 +123,17 @@
"assignmentIndicator": "ASSIGNMENT", "assignmentIndicator": "ASSIGNMENT",
"searchAllLearningPathsTitle": "Search all learning paths", "searchAllLearningPathsTitle": "Search all learning paths",
"searchAllLearningPathsDescription": "You didn't find what you were looking for? Click here to search our whole database of available learning paths.", "searchAllLearningPathsDescription": "You didn't find what you were looking for? Click here to search our whole database of available learning paths.",
"no-students-found": "This class has no students.",
"no-invitations-found": "You have no pending invitations.",
"no-join-requests-found": "There are no pending join requests for this class.",
"no-classes-found": "You are not yet part of a class.",
"classCreated": "class created!",
"success": "success",
"submitted": "submitted",
"see-submission": "view submission",
"view-submissions": "view submissions",
"valid-username": "please enter a valid username",
"creationFailed": "creation failed, please try again"
"no-assignments": "There are currently no assignments.", "no-assignments": "There are currently no assignments.",
"deadline": "deadline" "deadline": "deadline"
} }

33
frontend/src/i18n/locale/fr.json
View file

@ -33,6 +33,7 @@
"JoinClassExplanation": "Entrez le code que l'enseignant vous a donné pour rejoindre la classe.", "JoinClassExplanation": "Entrez le code que l'enseignant vous a donné pour rejoindre la classe.",
"invalidFormat": "Format non valide.", "invalidFormat": "Format non valide.",
"submitCode": "envoyer", "submitCode": "envoyer",
"submit": "envoyer",
"members": "Membres", "members": "Membres",
"themes": "Thèmes", "themes": "Thèmes",
"choose-theme": "Choisis un thème", "choose-theme": "Choisis un thème",
@ -68,22 +69,22 @@
"pick-class": "Choisissez une classe", "pick-class": "Choisissez une classe",
"choose-students": "Sélectionnez des élèves", "choose-students": "Sélectionnez des élèves",
"create-group": "Créer un groupe", "create-group": "Créer un groupe",
"class": "classe", "class": "Classe",
"delete": "supprimer", "delete": "supprimer",
"view-assignment": "Voir le travail", "view-assignment": "Voir le travail",
"code": "code", "code": "Code",
"invitations": "invitations", "invitations": "Invitations",
"createClass": "créer une classe", "createClass": "Créer une classe",
"createClassInstructions": "Entrez un nom pour votre classe et cliquez sur créer. Une fenêtre apparaît avec un code que vous pouvez copier. Donnez ce code à vos élèves et ils pourront rejoindre votre classe.", "createClassInstructions": "Entrez un nom pour votre classe et cliquez sur créer. Une fenêtre apparaît avec un code que vous pouvez copier. Donnez ce code à vos élèves et ils pourront rejoindre votre classe.",
"classname": "nom de classe", "classname": "nom de classe",
"EnterNameOfClass": "saisir un nom de classe.", "EnterNameOfClass": "saisir un nom de classe.",
"create": "créer", "create": "créer",
"sender": "expéditeur", "sender": "Expéditeur",
"nameIsMandatory": "le nom de classe est obligatoire", "nameIsMandatory": "le nom de classe est obligatoire",
"onlyUse": "n'utiliser que des lettres, des chiffres, des tirets (-) et des traits de soulignement (_)", "onlyUse": "n'utiliser que des lettres, des chiffres, des tirets (-) et des traits de soulignement (_)",
"close": "fermer", "close": "fermer",
"copied": "copié!", "copied": "copié!",
"accept": "accepter", "accept": "Accepter",
"deny": "refuser", "deny": "refuser",
"sent": "envoyé", "sent": "envoyé",
"failed": "échoué", "failed": "échoué",
@ -108,12 +109,13 @@
"submission": "Soumission", "submission": "Soumission",
"progress": "Progrès", "progress": "Progrès",
"remove": "supprimer", "remove": "supprimer",
"students": "étudiants", "students": "Étudiants",
"classJoinRequests": "demandes d'adhésion",
"reject": "rejeter", "classJoinRequests": "Demandes d'adhésion",
"reject": "Rejeter",
"areusure": "Êtes-vous sûr?", "areusure": "Êtes-vous sûr?",
"yes": "oui", "yes": "oui",
"teachers": "enseignants", "teachers": "Enseignants",
"accepted": "acceptée", "accepted": "acceptée",
"rejected": "rejetée", "rejected": "rejetée",
"enterUsername": "entrez le nom d'utilisateur de l'enseignant que vous souhaitez inviter", "enterUsername": "entrez le nom d'utilisateur de l'enseignant que vous souhaitez inviter",
@ -122,6 +124,17 @@
"assignmentIndicator": "DEVOIR", "assignmentIndicator": "DEVOIR",
"searchAllLearningPathsTitle": "Rechercher tous les parcours d'apprentissage", "searchAllLearningPathsTitle": "Rechercher tous les parcours d'apprentissage",
"searchAllLearningPathsDescription": "Vous n'avez pas trouvé ce que vous cherchiez ? Cliquez ici pour rechercher dans toute notre base de données de parcours d'apprentissage disponibles.", "searchAllLearningPathsDescription": "Vous n'avez pas trouvé ce que vous cherchiez ? Cliquez ici pour rechercher dans toute notre base de données de parcours d'apprentissage disponibles.",
"no-students-found": "Cette classe n'a pas d'élèves.",
"no-invitations-found": "Vous n'avez aucune invitation en attente.",
"no-join-requests-found": "Il n'y a aucune demande d'adhésion en attente pour cette classe.",
"no-classes-found": "Vous ne faites pas encore partie d'une classe.",
"classCreated": "Classe créée !",
"success": "succès",
"submitted": "soumis",
"see-submission": "voir la soumission",
"view-submissions": "voir les soumissions",
"valid-username": "veuillez entrer un nom d'utilisateur valide",
"creationFailed": "échec de la création, veuillez réessayer"
"no-assignments": "Il n'y a actuellement aucun travail.", "no-assignments": "Il n'y a actuellement aucun travail.",
"deadline": "délai" "deadline": "délai"
} }

32
frontend/src/i18n/locale/nl.json
View file

@ -33,6 +33,7 @@
"JoinClassExplanation": "Voer de code in die je van de docent hebt gekregen om lid te worden van de klas.", "JoinClassExplanation": "Voer de code in die je van de docent hebt gekregen om lid te worden van de klas.",
"invalidFormat": "Ongeldig formaat.", "invalidFormat": "Ongeldig formaat.",
"submitCode": "verzenden", "submitCode": "verzenden",
"submit": "verzenden",
"members": "Leden", "members": "Leden",
"themes": "Lesthema's", "themes": "Lesthema's",
"choose-theme": "Kies een thema", "choose-theme": "Kies een thema",
@ -68,22 +69,22 @@
"pick-class": "Kies een klas", "pick-class": "Kies een klas",
"choose-students": "Studenten selecteren", "choose-students": "Studenten selecteren",
"create-group": "Groep aanmaken", "create-group": "Groep aanmaken",
"class": "klas", "class": "Klas",
"delete": "verwijderen", "delete": "verwijderen",
"view-assignment": "Opdracht bekijken", "view-assignment": "Opdracht bekijken",
"code": "code", "code": "Code",
"invitations": "uitnodigingen", "invitations": "Uitnodigingen",
"createClass": "klas aanmaken", "createClass": "Klas aanmaken",
"createClassInstructions": "Voer een naam in voor je klas en klik op create. Er verschijnt een venster met een code die je kunt kopiëren. Geef deze code aan je leerlingen en ze kunnen deelnemen aan je klas.", "createClassInstructions": "Voer een naam in voor je klas en klik op create. Er verschijnt een venster met een code die je kunt kopiëren. Geef deze code aan je leerlingen en ze kunnen deelnemen aan je klas.",
"classname": "klasnaam", "classname": "klasnaam",
"EnterNameOfClass": "Geef een klasnaam op.", "EnterNameOfClass": "Geef een klasnaam op.",
"create": "aanmaken", "create": "aanmaken",
"sender": "afzender", "sender": "Afzender",
"nameIsMandatory": "klasnaam is verplicht", "nameIsMandatory": "klasnaam is verplicht",
"onlyUse": "gebruik enkel letters, cijfers, dashes (-) en underscores (_)", "onlyUse": "gebruik enkel letters, cijfers, dashes (-) en underscores (_)",
"close": "sluiten", "close": "sluiten",
"copied": "gekopieerd!", "copied": "gekopieerd!",
"accept": "accepteren", "accept": "Accepteren",
"deny": "weigeren", "deny": "weigeren",
"sent": "verzonden", "sent": "verzonden",
"failed": "mislukt", "failed": "mislukt",
@ -108,12 +109,12 @@
"submission": "Indiening", "submission": "Indiening",
"progress": "Vooruitgang", "progress": "Vooruitgang",
"remove": "verwijder", "remove": "verwijder",
"students": "studenten", "students": "Studenten",
"classJoinRequests": "deelname verzoeken", "classJoinRequests": "Deelname verzoeken",
"reject": "weiger", "reject": "Weiger",
"areusure": "Bent u zeker?", "areusure": "Bent u zeker?",
"yes": "ja", "yes": "ja",
"teachers": "leerkrachten", "teachers": "Leerkrachten",
"accepted": "geaccepteerd", "accepted": "geaccepteerd",
"rejected": "geweigerd", "rejected": "geweigerd",
"enterUsername": "vul de gebruikersnaam van de leerkracht die je wilt uitnodigen in", "enterUsername": "vul de gebruikersnaam van de leerkracht die je wilt uitnodigen in",
@ -122,6 +123,17 @@
"assignmentIndicator": "OPDRACHT", "assignmentIndicator": "OPDRACHT",
"searchAllLearningPathsTitle": "Alle leerpaden doorzoeken", "searchAllLearningPathsTitle": "Alle leerpaden doorzoeken",
"searchAllLearningPathsDescription": "Niet gevonden waar je naar op zoek was? Klik hier om onze volledige databank van beschikbare leerpaden te doorzoeken.", "searchAllLearningPathsDescription": "Niet gevonden waar je naar op zoek was? Klik hier om onze volledige databank van beschikbare leerpaden te doorzoeken.",
"no-students-found": "Deze klas heeft geen leerlingen.",
"no-invitations-found": "U heeft geen openstaande uitnodigingen.",
"no-join-requests-found": "Er zijn geen openstaande verzoeken om lid te worden van deze klas.",
"no-classes-found": "U maakt nog geen deel uit van een klas.",
"classCreated": "Klas aangemaakt!",
"success": "succes",
"submitted": "ingediend",
"see-submission": "inzending bekijken",
"view-submissions": "inzendingen bekijken",
"valid-username": "voer een geldige gebruikersnaam in",
"creationFailed": "aanmaak mislukt, probeer het opnieuw"
"no-assignments": "Er zijn momenteel geen opdrachten.", "no-assignments": "Er zijn momenteel geen opdrachten.",
"deadline": "deadline" "deadline": "deadline"
} }

2
frontend/src/views/HomePage.vue
View file

@ -28,7 +28,7 @@
alt="Dwengo logo" alt="Dwengo logo"
style="align-self: center" style="align-self: center"
/> />
<h1>{{ t("homeTitle") }}</h1> <h1 class="h1">{{ t("homeTitle") }}</h1>
<p class="info"> <p class="info">
{{ t("homeIntroduction1") }} {{ t("homeIntroduction1") }}
</p> </p>

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

@ -97,7 +97,7 @@
<template> <template>
<div class="main-container"> <div class="main-container">
<h1 class="title">{{ t("new-assignment") }}</h1> <h1 class="h1">{{ t("new-assignment") }}</h1>
<v-card class="form-card"> <v-card class="form-card">
<v-form <v-form
ref="form" ref="form"

11
frontend/src/views/assignments/UserAssignments.vue
View file

@ -9,6 +9,7 @@
import type { ClassDTO } from "@dwengo-1/common/interfaces/class"; import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
import { asyncComputed } from "@vueuse/core"; import { asyncComputed } from "@vueuse/core";
import { useDeleteAssignmentMutation } from "@/queries/assignments.ts"; import { useDeleteAssignmentMutation } from "@/queries/assignments.ts";
import "../../assets/common.css";
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const router = useRouter(); const router = useRouter();
@ -128,7 +129,7 @@
<template> <template>
<div class="assignments-container"> <div class="assignments-container">
<h1>{{ t("assignments") }}</h1> <h1 class="h1">{{ t("assignments") }}</h1>
<v-btn <v-btn
v-if="isTeacher" v-if="isTeacher"
@ -201,17 +202,9 @@
.assignments-container { .assignments-container {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 2% 4%;
box-sizing: border-box; box-sizing: border-box;
} }
h1 {
color: #0e6942;
text-transform: uppercase;
font-weight: bolder;
font-size: 50px;
}
.center-btn { .center-btn {
display: block; display: block;
margin: 0 auto 2rem auto; margin: 0 auto 2rem auto;

98
frontend/src/views/classes/SingleClass.vue
View file

@ -13,6 +13,7 @@
import { useCreateTeacherInvitationMutation } from "@/queries/teacher-invitations"; import { useCreateTeacherInvitationMutation } from "@/queries/teacher-invitations";
import type { TeacherInvitationData } from "@dwengo-1/common/interfaces/teacher-invitation"; import type { TeacherInvitationData } from "@dwengo-1/common/interfaces/teacher-invitation";
import { useDisplay } from "vuetify"; import { useDisplay } from "vuetify";
import "../../assets/common.css";
const { t } = useI18n(); const { t } = useI18n();
@ -112,7 +113,7 @@
function sentInvite(): void { function sentInvite(): void {
if (!usernameTeacher.value) { if (!usernameTeacher.value) {
showSnackbar(t("please enter a valid username"), "error"); showSnackbar(t("valid-username"), "error");
return; return;
} }
const data: TeacherInvitationData = { const data: TeacherInvitationData = {
@ -186,7 +187,7 @@
v-slot="classResponse: { data: ClassResponse }" v-slot="classResponse: { data: ClassResponse }"
> >
<div> <div>
<h1 class="title">{{ classResponse.data.class.displayName }}</h1> <h1 class="h1">{{ classResponse.data.class.displayName }}</h1>
<using-query-result <using-query-result
:query-result="getStudents" :query-result="getStudents"
v-slot="studentsResponse: { data: StudentsResponse }" v-slot="studentsResponse: { data: StudentsResponse }"
@ -211,16 +212,31 @@
<th class="header"></th> <th class="header"></th>
</tr> </tr>
</thead> </thead>
<tbody>
<tbody v-if="studentsResponse.data.students.length">
<tr <tr
v-for="s in studentsResponse.data.students as StudentDTO[]" v-for="s in studentsResponse.data.students as StudentDTO[]"
:key="s.id" :key="s.id"
> >
<td>{{ s.firstName + " " + s.lastName }}</td>
<td> <td>
{{ s.firstName + " " + s.lastName }} <v-btn @click="showPopup(s)">{{ t("remove") }}</v-btn>
</td> </td>
<td> </tr>
<v-btn @click="showPopup(s)"> {{ t("remove") }} </v-btn> </tbody>
<tbody v-else>
<tr>
<td
colspan="2"
class="empty-message"
>
<v-icon
icon="mdi-information-outline"
size="small"
>
</v-icon>
{{ t("no-students-found") }}
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -242,7 +258,7 @@
<th class="header">{{ t("accept") + "/" + t("reject") }}</th> <th class="header">{{ t("accept") + "/" + t("reject") }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody v-if="joinRequests.data.joinRequests.length">
<tr <tr
v-for="jr in joinRequests.data.joinRequests as ClassJoinRequestDTO[]" v-for="jr in joinRequests.data.joinRequests as ClassJoinRequestDTO[]"
:key="(jr.class, jr.requester, jr.status)" :key="(jr.class, jr.requester, jr.status)"
@ -287,6 +303,21 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody v-else>
<tr>
<td
colspan="2"
class="empty-message"
>
<v-icon
icon="mdi-information-outline"
size="small"
>
</v-icon>
{{ t("no-join-requests-found") }}
</td>
</tr>
</tbody>
</v-table> </v-table>
</v-col> </v-col>
</using-query-result> </using-query-result>
@ -356,49 +387,6 @@
</main> </main>
</template> </template>
<style scoped> <style scoped>
.header {
font-weight: bold !important;
background-color: #0e6942;
color: white;
padding: 10px;
}
table thead th:first-child {
border-top-left-radius: 10px;
}
.table thead th:last-child {
border-top-right-radius: 10px;
}
.table tbody tr:nth-child(odd) {
background-color: white;
}
.table tbody tr:nth-child(even) {
background-color: #f6faf2;
}
td,
th {
border-bottom: 1px solid #0e6942;
border-top: 1px solid #0e6942;
}
.table {
width: 90%;
padding-top: 10px;
border-collapse: collapse;
}
h1 {
color: #0e6942;
text-transform: uppercase;
font-weight: bolder;
padding-top: 2%;
font-size: 50px;
}
h2 { h2 {
color: #0e6942; color: #0e6942;
font-size: 30px; font-size: 30px;
@ -407,6 +395,7 @@
.join { .join {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 1%;
gap: 20px; gap: 20px;
margin-top: 50px; margin-top: 50px;
} }
@ -416,16 +405,7 @@
text-decoration: underline; text-decoration: underline;
} }
main {
margin-left: 30px;
}
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
h1 {
text-align: center;
padding-left: 0;
}
.join { .join {
text-align: center; text-align: center;
align-items: center; align-items: center;

73
frontend/src/views/classes/StudentClasses.vue
View file

@ -12,6 +12,7 @@
import { useClassStudentsQuery, useClassTeachersQuery } from "@/queries/classes"; import { useClassStudentsQuery, useClassTeachersQuery } from "@/queries/classes";
import type { StudentsResponse } from "@/controllers/students"; import type { StudentsResponse } from "@/controllers/students";
import type { TeachersResponse } from "@/controllers/teachers"; import type { TeachersResponse } from "@/controllers/teachers";
import "../../assets/common.css";
const { t } = useI18n(); const { t } = useI18n();
@ -135,7 +136,7 @@
></v-empty-state> ></v-empty-state>
</div> </div>
<div v-else> <div v-else>
<h1 class="title">{{ t("classes") }}</h1> <h1 class="h1">{{ t("classes") }}</h1>
<using-query-result <using-query-result
:query-result="classesQuery" :query-result="classesQuery"
v-slot="classResponse: { data: ClassesResponse }" v-slot="classResponse: { data: ClassesResponse }"
@ -161,7 +162,7 @@
<th class="header">{{ t("members") }}</th> <th class="header">{{ t("members") }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody v-if="classResponse.data.classes.length">
<tr <tr
v-for="c in classResponse.data.classes as ClassDTO[]" v-for="c in classResponse.data.classes as ClassDTO[]"
:key="c.id" :key="c.id"
@ -181,6 +182,21 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody v-else>
<tr>
<td
colspan="3"
class="empty-message"
>
<v-icon
icon="mdi-information-outline"
size="small"
>
</v-icon>
{{ t("no-classes-found") }}
</td>
</tr>
</tbody>
</v-table> </v-table>
</v-col> </v-col>
</v-row> </v-row>
@ -271,49 +287,6 @@
</main> </main>
</template> </template>
<style scoped> <style scoped>
.header {
font-weight: bold !important;
background-color: #0e6942;
color: white;
padding: 10px;
}
table thead th:first-child {
border-top-left-radius: 10px;
}
.table thead th:last-child {
border-top-right-radius: 10px;
}
.table tbody tr:nth-child(odd) {
background-color: white;
}
.table tbody tr:nth-child(even) {
background-color: #f6faf2;
}
td,
th {
border-bottom: 1px solid #0e6942;
border-top: 1px solid #0e6942;
}
.table {
width: 90%;
padding-top: 10px;
border-collapse: collapse;
}
h1 {
color: #0e6942;
text-transform: uppercase;
font-weight: bolder;
padding-top: 2%;
font-size: 50px;
}
h2 { h2 {
color: #0e6942; color: #0e6942;
font-size: 30px; font-size: 30px;
@ -321,6 +294,7 @@
.join { .join {
display: flex; display: flex;
margin-left: 1%;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
margin-top: 50px; margin-top: 50px;
@ -331,16 +305,7 @@
text-decoration: underline; text-decoration: underline;
} }
main {
margin-left: 30px;
}
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
h1 {
text-align: center;
padding-left: 0;
}
.join { .join {
text-align: center; text-align: center;
align-items: center; align-items: center;

225
frontend/src/views/classes/TeacherClasses.vue
View file

@ -15,6 +15,7 @@
useTeacherInvitationsReceivedQuery, useTeacherInvitationsReceivedQuery,
} from "@/queries/teacher-invitations"; } from "@/queries/teacher-invitations";
import { useDisplay } from "vuetify"; import { useDisplay } from "vuetify";
import "../../assets/common.css";
const { t } = useI18n(); const { t } = useI18n();
@ -112,7 +113,7 @@
dialog.value = true; dialog.value = true;
} }
if (!className.value || className.value === "") { if (!className.value || className.value === "") {
showSnackbar(t("name is mandatory"), "error"); showSnackbar(t("nameIsMandatory"), "error");
} }
} }
@ -137,6 +138,13 @@
copied.value = true; copied.value = true;
} }
async function copyCode(selectedCode: string): Promise<void> {
code.value = selectedCode;
await copyToClipboard();
showSnackbar(t("copied"), "white");
copied.value = false;
}
// Custom breakpoints // Custom breakpoints
const customBreakpoints = { const customBreakpoints = {
xs: 0, xs: 0,
@ -183,7 +191,7 @@
></v-empty-state> ></v-empty-state>
</div> </div>
<div v-else> <div v-else>
<h1 class="title">{{ t("classes") }}</h1> <h1 class="h1">{{ t("classes") }}</h1>
<using-query-result <using-query-result
:query-result="classesQuery" :query-result="classesQuery"
v-slot="classesResponse: { data: ClassesResponse }" v-slot="classesResponse: { data: ClassesResponse }"
@ -212,7 +220,7 @@
<th class="header">{{ t("members") }}</th> <th class="header">{{ t("members") }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody v-if="classesResponse.data.classes.length">
<tr <tr
v-for="c in classesResponse.data.classes as ClassDTO[]" v-for="c in classesResponse.data.classes as ClassDTO[]"
:key="c.id" :key="c.id"
@ -227,7 +235,14 @@
</v-btn> </v-btn>
</td> </td>
<td> <td>
<span v-if="!isMdAndDown">{{ c.id }}</span> <v-btn
v-if="!isMdAndDown"
variant="text"
append-icon="mdi-content-copy"
@click="copyCode(c.id)"
>
{{ c.id }}
</v-btn>
<span <span
v-else v-else
style="cursor: pointer" style="cursor: pointer"
@ -239,6 +254,21 @@
<td>{{ c.students.length }}</td> <td>{{ c.students.length }}</td>
</tr> </tr>
</tbody> </tbody>
<tbody v-else>
<tr>
<td
colspan="3"
class="empty-message"
>
<v-icon
icon="mdi-information-outline"
size="small"
>
</v-icon>
{{ t("no-classes-found") }}
</td>
</tr>
</tbody>
</v-table> </v-table>
</v-col> </v-col>
<v-col <v-col
@ -318,7 +348,7 @@
</v-container> </v-container>
</using-query-result> </using-query-result>
<h1 class="title"> <h1 class="h1">
{{ t("invitations") }} {{ t("invitations") }}
</h1> </h1>
<v-container <v-container
@ -342,61 +372,80 @@
:query-result="allClassesQuery" :query-result="allClassesQuery"
v-slot="classesResponse: { data: ClassesResponse }" v-slot="classesResponse: { data: ClassesResponse }"
> >
<tr <template v-if="invitationsResponse.data.invitations.length">
v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]" <tr
:key="i.classId" v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
> :key="i.classId"
<td> >
{{ <td>
(classesResponse.data.classes as ClassDTO[]).filter( {{
(c) => c.id == i.classId, (classesResponse.data.classes as ClassDTO[]).filter(
)[0].displayName (c) => c.id == i.classId,
}} )[0].displayName
</td> }}
<td> </td>
{{ <td>
(i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName {{
}} (i.sender as TeacherDTO).firstName +
</td> " " +
<td class="text-right"> (i.sender as TeacherDTO).lastName
<span v-if="!isSmAndDown"> }}
<div> </td>
<v-btn <td class="text-right">
color="green" <span v-if="!isSmAndDown">
@click="handleInvitation(i, true)" <div>
class="mr-2" <v-btn
> color="green"
{{ t("accept") }} @click="handleInvitation(i, true)"
</v-btn> class="mr-2"
<v-btn >
color="red" {{ t("accept") }}
@click="handleInvitation(i, false)" </v-btn>
> <v-btn
{{ t("deny") }} color="red"
</v-btn> @click="handleInvitation(i, false)"
</div> >
</span> {{ t("deny") }}
<span v-else> </v-btn>
<div> </div>
<v-btn </span>
@click="handleInvitation(i, true)" <span v-else>
class="mr-2" <div>
icon="mdi-check-circle" <v-btn
color="green" @click="handleInvitation(i, true)"
variant="text" class="mr-2"
> icon="mdi-check-circle"
</v-btn> color="green"
<v-btn variant="text"
@click="handleInvitation(i, false)" >
class="mr-2" </v-btn>
icon="mdi-close-circle" <v-btn
color="red" @click="handleInvitation(i, false)"
variant="text" class="mr-2"
> icon="mdi-close-circle"
</v-btn></div color="red"
></span> variant="text"
</td> >
</tr> </v-btn></div
></span>
</td>
</tr>
</template>
<template v-else>
<tr>
<td
colspan="3"
class="empty-message"
>
<v-icon
icon="mdi-information-outline"
size="small"
>
</v-icon>
{{ t("no-invitations-found") }}
</td>
</tr>
</template>
</using-query-result> </using-query-result>
</using-query-result> </using-query-result>
</tbody> </tbody>
@ -449,49 +498,6 @@
</main> </main>
</template> </template>
<style scoped> <style scoped>
.header {
font-weight: bold !important;
background-color: #0e6942;
color: white;
padding: 10px;
}
table thead th:first-child {
border-top-left-radius: 10px;
}
.table thead th:last-child {
border-top-right-radius: 10px;
}
.table tbody tr:nth-child(odd) {
background-color: white;
}
.table tbody tr:nth-child(even) {
background-color: #f6faf2;
}
td,
th {
border-bottom: 1px solid #0e6942;
border-top: 1px solid #0e6942;
}
.table {
width: 90%;
padding-top: 10px;
border-collapse: collapse;
}
h1 {
color: #0e6942;
text-transform: uppercase;
font-weight: bolder;
padding-top: 2%;
font-size: 50px;
}
h2 { h2 {
color: #0e6942; color: #0e6942;
font-size: 30px; font-size: 30px;
@ -509,16 +515,7 @@
text-decoration: underline; text-decoration: underline;
} }
main {
margin-left: 30px;
}
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
h1 {
text-align: center;
padding-left: 0;
}
.join { .join {
text-align: center; text-align: center;
align-items: center; align-items: center;
@ -541,10 +538,6 @@
flex-direction: column !important; flex-direction: column !important;
} }
.table {
width: 100%;
}
.responsive-col { .responsive-col {
max-width: 100% !important; max-width: 100% !important;
flex-basis: 100% !important; flex-basis: 100% !important;

34
frontend/src/views/homepage/UserHomePage.vue
View file

@ -3,6 +3,7 @@
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { THEMESITEMS, AGE_TO_THEMES } from "@/utils/constants.ts"; import { THEMESITEMS, AGE_TO_THEMES } from "@/utils/constants.ts";
import BrowseThemes from "@/components/BrowseThemes.vue"; import BrowseThemes from "@/components/BrowseThemes.vue";
import "../../assets/common.css";
const { t, locale } = useI18n(); const { t, locale } = useI18n();
@ -46,7 +47,7 @@
<template> <template>
<div class="main-container"> <div class="main-container">
<h1 class="title">{{ t("themes") }}</h1> <h1 class="h1">{{ t("themes") }}</h1>
<v-container class="dropdowns"> <v-container class="dropdowns">
<v-select <v-select
class="v-select" class="v-select"
@ -77,31 +78,6 @@
</template> </template>
<style scoped> <style scoped>
.main-container {
min-height: 100vh;
min-width: 100vw;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.title {
max-width: 50rem;
margin-left: 1rem;
margin-top: 1rem;
text-align: center;
display: flex;
justify-content: center;
}
h1 {
color: #0e6942;
text-transform: uppercase;
font-weight: bolder;
font-size: 50px;
}
.dropdowns { .dropdowns {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -114,12 +90,6 @@
min-width: 100px; min-width: 100px;
} }
@media (max-width: 768px) {
.main-container {
padding: 1rem;
}
}
@media (max-width: 700px) { @media (max-width: 700px) {
.dropdowns { .dropdowns {
flex-direction: column; flex-direction: column;