Merge branch 'dev' into groups

backend/src/project/schemas.py

@@ -21,10 +21,6 @@ class ProjectBase(BaseModel):
     capacity: int = Field(gt=0)
     requirements: List[Requirement] = []
 
-    @field_validator("description")
-    def validate_description(cls, value: str) -> str:
-        return escape(value, quote=False)
-
 
 class ProjectCreate(ProjectBase):
     pass
@@ -61,7 +57,3 @@ def validate_deadline(cls, value: datetime) -> datetime:
         if value is not None and value < datetime.now(value.tzinfo):
             raise ValueError("The deadline cannot be in the past")
         return value
-
-    @field_validator("description")
-    def validate_description(cls, value: str) -> str:
-        return escape(value, quote=False)

frontend/src/components/project/ProjectInfo.vue

@@ -1,49 +1,67 @@
 <template>
-    <BackgroundContainer>
-        <v-col class="scrollable-container">
-            <ProjectInfoCard :project="project"></ProjectInfoCard>
-            <div class="download-section">
-                <div class="half-width">
-                    <h2>Downloadable files</h2>
-                </div>
-                <div class="half-width">
-                    <SubmitInfo v-if="group" :project="project" :group="group" />
-                </div>
-            </div>
-        </v-col>
-    </BackgroundContainer>
+    <v-container>
+        <v-card color="white" class="infostyling">
+            <v-card-title>{{ project.name }}</v-card-title>
+            <v-card-item>
+                <v-chip label color="primary" class="ma-2" prepend-icon="mdi-calendar">
+                    {{ $d(project.deadline, "long") }}
+                </v-chip>
+                <v-chip label color="primary" class="ma-2" prepend-icon="mdi-school">
+                    {{ subject.name }}
+                </v-chip>
+                <v-chip label color="primary" class="ma-2" prepend-icon="mdi-account-group">
+                    {{ $t("project.capacity_group") + project.capacity }}
+                </v-chip>
+                <v-chip
+                    v-for="instructor in instructors"
+                    :key="instructor?.uid"
+                    label
+                    color="primary"
+                    class="ma-2"
+                    prepend-icon="mdi-account"
+                >
+                    {{ instructor?.given_name }}
+                </v-chip>
+            </v-card-item>
+            <v-card-item>
+                <v-card-title>
+                    {{ $t("project.assignment") }}
+                </v-card-title>
+                <div v-html="renderQuillContent(project.description)"></div>
+            </v-card-item>
+        </v-card>
+        <SubmitInfo class="submitInfo" v-if="group" :project="project" :group="group" />
+    </v-container>
 </template>
 
 <script setup lang="ts">
 import type Project from "@/models/Project";
 import type Group from "@/models/Group";
-import BackgroundContainer from "@/components/BackgroundContainer.vue";
-import ProjectInfoCard from "@/components/project/ProjectInfoCard.vue";
 import SubmitInfo from "@/components/project/submit/SubmitInfo.vue";
 import { toRefs } from "vue";
+import { Quill } from "@vueup/vue-quill";
+import type User from "@/models/User";
+import type Subject from "@/models/Subject";
 
 const props = defineProps<{
     project: Project;
     group: Group | null;
+    instructors: User[];
+    subject: Subject;
 }>();
 
-const { project, group } = toRefs(props);
+const { project, group, instructors, subject } = toRefs(props);
+
+const renderQuillContent = (content: string) => {
+    const quill = new Quill(document.createElement("div"));
+    quill.root.innerHTML = content;
+    return quill.root.innerHTML;
+};
 </script>
 
 <style scoped>
-.scrollable-container {
-    max-height: 100%;
-    overflow-y: auto;
-}
-
-.download-section {
-    margin-top: 20px; /* Adjust the margin-top value as needed */
-    display: flex;
-    width: 100%;
-}
-
-.half-width {
-    width: 50%;
-    box-sizing: border-box;
+.submitInfo {
+    padding: 10px;
+    margin-top: 20px;
 }
 </style>

frontend/src/components/project/ProjectSideBar.vue

@@ -0,0 +1,60 @@
+<template>
+    <router-link :to="`/subjects/${project!.subject_id}`">
+        <v-btn class="group-button" prepend-icon="mdi-arrow-left">
+            {{ $t("default.to") + subject!.name }}
+        </v-btn>
+    </router-link>
+    <router-link v-if="group && !isSoloProject && !isTeacher" :to="`/groups/${group!.id}`">
+        <v-btn class="group-button" prepend-icon="mdi-account-group">
+            {{ $t("project.group", { number: group!.id }) }}
+        </v-btn>
+    </router-link>
+    <router-link v-else-if="!isSoloProject && !isTeacher" :to="`/projects/${project!.id}/groups`">
+        <v-btn class="group-button" prepend-icon="mdi-account-group">
+            {{ $t("project.group_button") }}
+        </v-btn>
+    </router-link>
+    <NeedHelpButton v-if="!isTeacher" class="group-button" :email="subject!.email"></NeedHelpButton>
+    <router-link v-if="isTeacher" :to="`/projects/${project!.id}/edit`">
+        <v-btn class="group-button" prepend-icon="mdi-pencil">
+            {{ $t("project.edit") }}
+        </v-btn>
+    </router-link>
+</template>
+
+<script setup lang="ts">
+import type Project from "@/models/Project";
+import type Group from "@/models/Group";
+import type Subject from "@/models/Subject";
+import NeedHelpButton from "@/components/buttons/NeedHelpButton.vue";
+import { computed, toRefs } from "vue";
+import type User from "@/models/User";
+import { useUserQuery } from "@/queries/User";
+
+const props = defineProps<{
+    project: Project;
+    group: Group | null;
+    subject: Subject;
+    instructors: User[];
+}>();
+
+const { project, group, subject, instructors } = toRefs(props);
+
+const { data: user } = useUserQuery(null);
+
+const isTeacher = computed(() => {
+    if (!user.value || !instructors.value) {
+        return false;
+    }
+    return instructors.value.some((instructor) => instructor.uid === user.value.uid);
+});
+
+const isSoloProject = computed(() => project.value.capacity === 1);
+</script>
+
+<style scoped>
+.group-button {
+    margin-bottom: 5px;
+    min-width: auto;
+}
+</style>

frontend/src/components/submission/SubmissionCard.vue

@@ -69,6 +69,7 @@ import { Status, type Submission } from "@/models/Submission";
 import { useFilesQuery } from "@/queries/Submission";
 import { toRefs, computed } from "vue";
 import { download_file } from "@/utils.ts";
+import Project from "@/models/Project";
 
 const props = defineProps<{
     submission: Submission;

frontend/src/components/switcher/ThemeSwitcher.vue

@@ -1,31 +1,31 @@
 <template>
     <div class="container">
-        <v-icon class="moon" icon="mdi mdi-moon-waning-crescent"></v-icon>
         <v-switch
             class="switcher"
             color="white"
             v-model="switchValue"
             false-value="darkTheme"
+            false-icon="mdi-moon-waning-crescent"
             true-value="lightTheme"
+            true-icon="mdi-white-balance-sunny"
+            @update:model-value="(value) => onThemeChange(value!)"
         ></v-switch>
-        <v-icon class="sun" icon="mdi mdi-white-balance-sunny"></v-icon>
     </div>
 </template>
 
 <script setup lang="ts">
 import { useTheme } from "vuetify";
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import { useThemeStore } from "@/stores/theme-store";
-const theme = useTheme();
 const { storedTheme, setTheme } = useThemeStore();
 
 const switchValue = ref(storedTheme);
+const theme = useTheme();
 
-watch(switchValue, (newValue) => {
-    theme.global.name.value = newValue;
-    setTheme(newValue);
-    console.log(localStorage.getItem("theme"));
-});
+function onThemeChange(value: string) {
+    theme.global.name.value = value;
+    setTheme(value);
+}
 </script>
 
 <style scoped>

frontend/src/composables/useIsTeacher.ts

@@ -2,7 +2,7 @@ import { computed } from "vue";
 import { useUserQuery } from "@/queries/User";
 
 export default function useIsTeacher() {
-    const { data: user } = useUserQuery();
+    const { data: user } = useUserQuery(null);
     const isTeacher = computed(() => user.value?.is_teacher || false);
     return { isTeacher };
 }

frontend/src/i18n/locales/en.ts

@@ -7,6 +7,7 @@ export default {
             loading_page: "Loading...",
         },
         no: "no",
+        to: "to ",
     },
     logo: "ghent-university-logo-white.png",
     logout: "logout",
@@ -29,7 +30,7 @@ export default {
         submissions: "Submission zone",
         latest_submission: "Latest submission:",
         new_submission: "Submit new",
-        status_submission: "Submission was: {status}",
+        status_submission: "Submission is: {status}",
     },
     submission: {
         status: "Submission status:",
@@ -46,11 +47,13 @@ export default {
     project: {
         deadline: "Deadline",
         details_button: "Project details",
-        group_button: "Join Group",
+        group_button: "Join group",
         needhelp_button: "Need help",
         group: "Group {number}",
         assignment: "Assignment:",
         myProject: "My projects:",
+        capacity_group: "Capacity: ",
+        edit: "Edit project",
         submissions_list: "All submissions",
         not_found: "No projects found.",
         archived: "Archived",

frontend/src/i18n/locales/nl.ts

@@ -7,6 +7,7 @@ export default {
             loading_page: "Aan het laden...",
         },
         no: "geen",
+        to: "naar ",
     },
     logo: "universiteit-gent-logo-white.png",
     logout: "uitloggen",
@@ -26,10 +27,10 @@ export default {
         add_files_button: "Bestanden toevoegen",
         no_files_added: "Je hebt nog geen bestanden toegevoegd.",
         no_files_warning: "Voeg ten minste een bestand toe om een indiening te maken.",
-        submissions: "Indiening zone",
+        submissions: "Indieningszone",
         latest_submission: "Laatste indiening:",
         new_submission: "Nieuwe indiening",
-        status_submission: "Indiening was: {status}",
+        status_submission: "Indiening is: {status}",
     },
     submission: {
         status: "Indiening status: {status}",
@@ -46,11 +47,13 @@ export default {
     project: {
         deadline: "Deadline",
         details_button: "Naar project",
-        group_button: "Vind Groep",
+        group_button: "Vind groep",
         needhelp_button: "Hulp nodig",
         group: "Groep {number}",
         assignment: "Opdracht:",
         myProject: "Mijn projecten:",
+        capacity_group: "Capaciteit: ",
+        edit: "Bewerk project",
         submissions_list: "Alle indieningen",
         not_found: "Geen projecten teruggevonden.",
         archived: "Gearchiveerd",

frontend/src/models/Project.ts

@@ -6,7 +6,7 @@ export default interface Project {
     // selectedTeachers: string[]; // Assuming you store only teacher IDs
     subject_id: number;
     requirements: [];
-    description: String;
+    description: string;
     capacity: number;
 }
 

frontend/src/models/Subject.ts

@@ -1,6 +1,9 @@
 export default interface Subject {
     id: number;
     name: string;
+    academic_year: number;
+    uuid: string;
+    email: string;
 }
 
 export interface UserSubjectList {

frontend/src/queries/Subject.ts

@@ -11,7 +11,6 @@ import {
 import { type Ref, computed } from "vue";
 import type Subject from "@/models/Subject";
 import type User from "@/models/User";
-import type Subject from "@/models/Subject";
 import type Project from "@/models/Project";
 import type SubjectDetails from "@/models/SubjectDetails";
 

frontend/src/views/CreateProjectView.vue

@@ -120,7 +120,7 @@ const {
     isError: isSubjectsError,
     error: subjectsError,
 } = useMySubjectsQuery();
-const { data: instructorsData, isLoading, isError } = useSubjectInstructorsQuery(selectedSubject);
+const { data: instructorsData } = useSubjectInstructorsQuery(selectedSubject);
 const { data: studentsData } = useSubjectStudentsQuery(selectedSubject);
 
 const teachers = computed(