From 3e35231b2130d4e0819377923ed368568906912c Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 16:07:43 +0200
Subject: [PATCH 01/39] added router to create SubjectsView.vue

---
 frontend/src/router/index.ts                    |  6 +++++-
 .../src/views/subject/CreateSubjectView.vue     | 17 +++++++++++++++++
 frontend/src/views/subject/SubjectsView.vue     |  2 +-
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/views/subject/CreateSubjectView.vue

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 60bc0e7e..6680770f 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -74,7 +74,11 @@ const router = createRouter({
             path: "/subjects",
             name: "subjects",
             component: () => import("../views/subject/SubjectsView.vue"),
-            children: [],
+        },
+        {
+            path: "/subjects/create",
+            name: "create-subject",
+            component: () => import("../views/subject/CreateSubjectView.vue"),
         },
         {
             path: "/subjects/:subjectId(\\d+)",
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
new file mode 100644
index 00000000..12065005
--- /dev/null
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <v-form>
+
+
+        </v-form>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index a5aec499..680672fa 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -38,7 +38,7 @@
             </v-col>
             <v-col v-if="isAdmin || isTeacher" cols="2">
                 <div class="action-btn-container">
-                    <router-link to="">
+                    <router-link :to="{ name: 'create-subject'}">
                         <v-btn prepend-icon="mdi-plus-circle">
                             {{ $t("subjects.create_subject") }}
                         </v-btn>

From ac97ec722bfe9fc34d1c3b01d1d1b2059291816c Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 17:10:40 +0200
Subject: [PATCH 02/39] added first form elements

---
 .../src/views/subject/CreateSubjectView.vue   | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 12065005..6bcd99af 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -1,6 +1,30 @@
 <template>
     <div>
         <v-form>
+            <v-responsive
+                class="mx-auto"
+                max-width="50vw"
+            >
+                <v-text-field
+                    v-model="project_title"
+                    :rules="[rules.required]"
+                    label="Title"
+                    required
+                    variant="solo-inverted"
+                    placeholder="Enter Title"
+                    hint="Enter your password to access this website"
+                    clearable
+                    hide-details="auto"
+                ></v-text-field>
+            </v-responsive>
+
+            <v-select
+                v-model="activeAcademicYear"
+                :items="academicYearItems"
+                :item-title="item => `20${item}-20${item + 1}`"
+                label="Academic Year"
+                required
+            ></v-select>
 
 
         </v-form>
@@ -10,6 +34,19 @@
 
 <script setup lang="ts">
 
+
+import {ref, computed} from "vue";
+import useAcademicYear from "@/composables/useAcademicYear";
+
+const project_title = ref("");
+
+const rules = {
+    required: (value: string) => !!value || "Field is required.",
+};
+
+const activeAcademicYear = ref<number>(useAcademicYear())
+const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
+
 </script>
 
 <style scoped>

From a563492d1447b27f9f5217578c8e600ec915f541 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 18:16:33 +0200
Subject: [PATCH 03/39] added submit button

---
 .../src/views/subject/CreateSubjectView.vue   | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 6bcd99af..17242a19 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-form>
+        <v-form @submit.prevent="handleSubmit">
             <v-responsive
                 class="mx-auto"
                 max-width="50vw"
@@ -15,6 +15,7 @@
                     hint="Enter your password to access this website"
                     clearable
                     hide-details="auto"
+                    @keydown.enter.prevent
                 ></v-text-field>
             </v-responsive>
 
@@ -22,10 +23,17 @@
                 v-model="activeAcademicYear"
                 :items="academicYearItems"
                 :item-title="item => `20${item}-20${item + 1}`"
+                :item-value="item => item"
                 label="Academic Year"
                 required
             ></v-select>
 
+            <v-btn
+                color="primary"
+                type="submit"
+            >
+                Submit
+            </v-btn>
 
         </v-form>
     </div>
@@ -35,17 +43,21 @@
 <script setup lang="ts">
 
 
-import {ref, computed} from "vue";
+import {ref} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 
 const project_title = ref("");
+const activeAcademicYear = ref<number>(useAcademicYear());
 
+const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
 const rules = {
     required: (value: string) => !!value || "Field is required.",
 };
 
-const activeAcademicYear = ref<number>(useAcademicYear())
-const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
+const handleSubmit = (e: Event) => {
+    console.log(project_title.value);
+    console.log(activeAcademicYear.value);
+};
 
 </script>
 

From c9171ed5ff72855270c03f5714837e2a0b7c165e Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 19:07:33 +0200
Subject: [PATCH 04/39] create subject via frontend works

---
 frontend/src/models/Subject.ts                |  6 +++
 frontend/src/queries/Subject.ts               | 29 +++++++++++++-
 frontend/src/services/subject.ts              | 12 ++++++
 .../src/views/subject/CreateSubjectView.vue   | 40 +++++++++++++++----
 4 files changed, 78 insertions(+), 9 deletions(-)

diff --git a/frontend/src/models/Subject.ts b/frontend/src/models/Subject.ts
index 9a391ec4..e965ed4c 100644
--- a/frontend/src/models/Subject.ts
+++ b/frontend/src/models/Subject.ts
@@ -26,3 +26,9 @@ export interface SubjectDetails {
     subjectData: Subject;
     role: SubjectRole;
 }
+
+export default interface SubjectForm {
+    name: string;
+    email: string;
+    academic_year: number;
+}
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index 8ea2f5f0..ff49d20f 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -9,13 +9,14 @@ import {
     getSubjectStudents,
     getSubjectByUuid,
     registerToSubject,
-    getSubjectUuid,
+    getSubjectUuid, createSubject,
 } from "@/services/subject";
 import { getSubjectProjects } from "@/services/project";
 import type User from "@/models/User";
 import type Subject from "@/models/Subject";
 import type { UserSubjectList } from "@/models/Subject";
 import type Project from "@/models/Project";
+import type SubjectForm from "@/models/Subject";
 
 function SUBJECT_QUERY_KEY(subjectId: number | string): (string | number)[] {
     return ["subject", subjectId];
@@ -41,6 +42,10 @@ function SUBJECT_UUID_QUERY_KEY(subjectId: number): (string | number)[] {
     return ["subject", "uuid", subjectId];
 }
 
+function CREATE_SUBJECT_QUERY_KEY(): string[] {
+    return ["create", "subject"];
+}
+
 /**
  * Query composable for fetching a subject by id
  */
@@ -148,3 +153,25 @@ export function useRegisterToSubjectMutation(): UseMutationReturnType<
         },
     });
 }
+
+/**
+ * Mutation composable for creating a subject
+ */
+export function useCreateSubjectMutation(): UseMutationReturnType<
+    number,
+    Error,
+    SubjectForm,
+    void
+> {
+    const queryClient = useQueryClient();
+    return useMutation<number, Error, SubjectForm, void>({
+        mutationFn: createSubject,
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: CREATE_SUBJECT_QUERY_KEY() });
+        },
+        onError: (error) => {
+            console.error("Subject creation failed", error);
+            alert("Could not create subject. Please try again.");
+        },
+    });
+}
diff --git a/frontend/src/services/subject.ts b/frontend/src/services/subject.ts
index 328c8e79..30bfe7b2 100644
--- a/frontend/src/services/subject.ts
+++ b/frontend/src/services/subject.ts
@@ -2,6 +2,7 @@ import type User from "@/models/User";
 import type Subject from "@/models/Subject";
 import type { UserSubjectList } from "@/models/Subject";
 import { authorized_fetch } from "@/services";
+import type SubjectForm from "@/models/Subject";
 
 /**
  * Fetches the subject with the given ID.
@@ -53,3 +54,14 @@ export async function getSubjectUuid(subjectId: number): Promise<string> {
     const result = await authorized_fetch(`/api/subjects/${subjectId}/uuid`, { method: "GET" });
     return result.subject_uuid;
 }
+
+/**
+ * Creates a new project.
+ */
+export async function createSubject(projectData: SubjectForm): Promise<number> {
+    const response = await authorized_fetch<Subject>(`/api/subjects/`, {
+        method: "POST",
+        body: JSON.stringify(projectData),
+    });
+    return response.id;
+}
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 17242a19..912b484b 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -1,13 +1,16 @@
 <template>
     <div>
-        <v-form @submit.prevent="handleSubmit">
+        <v-form
+            ref="form"
+            @submit.prevent="handleSubmit"
+        >
             <v-responsive
                 class="mx-auto"
                 max-width="50vw"
             >
                 <v-text-field
-                    v-model="project_title"
-                    :rules="[rules.required]"
+                    v-model="project_name"
+                    :rules="[rules.required, rules.length]"
                     label="Title"
                     required
                     variant="solo-inverted"
@@ -45,20 +48,41 @@
 
 import {ref} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
+import {useCreateSubjectMutation} from "@/queries/Subject";
+import type SubjectForm from "@/models/Subject";
 
-const project_title = ref("");
+const form = ref(null);
+const project_name = ref("");
 const activeAcademicYear = ref<number>(useAcademicYear());
 
+const createSubjectMutation = useCreateSubjectMutation();
+
+
 const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
 const rules = {
     required: (value: string) => !!value || "Field is required.",
+    length: (value: string) => value.length > 2 || "Title must be at least 3 characters long.",
 };
 
-const handleSubmit = (e: Event) => {
-    console.log(project_title.value);
-    console.log(activeAcademicYear.value);
-};
+async function handleSubmit() {
+    const {valid} = await form.value.validate();
+    if (!valid) {
+        return;
+    }
+
+    const projectName = project_name.value.trim();
+    const subjectData: SubjectForm = {
+        name: projectName.charAt(0).toUpperCase() + projectName.slice(1),
+        academic_year: activeAcademicYear.value,
+    };
 
+    try {
+        const createdSubjectId = await createSubjectMutation.mutateAsync(subjectData);
+        console.log("Created subject with id:", createdSubjectId);
+    } catch (error) {
+        console.error("Error during project or group creation:", error);
+    }
+}
 </script>
 
 <style scoped>

From ce713aa76b0860269c54625a1acf90ea8f0508ed Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 21:00:39 +0200
Subject: [PATCH 05/39] implemented search

---
 .../createSubjectView/UserSearchList.vue      | 72 +++++++++++++++++++
 .../src/views/subject/CreateSubjectView.vue   |  3 +
 2 files changed, 75 insertions(+)
 create mode 100644 frontend/src/components/subject/createSubjectView/UserSearchList.vue

diff --git a/frontend/src/components/subject/createSubjectView/UserSearchList.vue b/frontend/src/components/subject/createSubjectView/UserSearchList.vue
new file mode 100644
index 00000000..242a8fe9
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/UserSearchList.vue
@@ -0,0 +1,72 @@
+<template>
+    <v-card title="Instructors" flat>
+        <v-card-text>
+            <v-text-field
+                :loading="searchLoading"
+                v-model="search"
+                label="Search"
+                placeholder="Search for instructors"
+                prepend-inner-icon="mdi-magnify"
+                clearable
+                single-line
+                hide-details
+                @click:prepend-inner="onSearchIconClicked"
+            ></v-text-field>
+        </v-card-text>
+
+        <div v-show="searchLoaded">
+            <p v-if="shownUsers.length === 0">No results found</p>
+            <v-list v-else>
+                <v-list-item
+                    v-for="(user, index) in shownUsers"
+                    :key="index"
+                >
+                    <v-list-item-title>
+                        {{ user.given_name }} {{ user.surname }}
+                    </v-list-item-title>
+                </v-list-item>
+            </v-list>
+        </div>
+
+
+    </v-card>
+</template>
+
+<script setup lang="ts">
+
+import {useUsersQuery} from "@/queries/User";
+import {computed, ref} from "vue";
+import type User from "@/models/User";
+
+const {data: users, isLoading, isError} = useUsersQuery();
+
+const search = ref("");
+const searchLoading = ref(false);
+const searchLoaded = ref(false);
+const shownUsers = ref([]);
+
+const filteredUsers = computed(() => {
+    if (!search.value) {
+        return [];
+    }
+    return [...(users.value || [])].filter((user: User) => {
+        const fullName = `${user?.given_name} ${user.surname}`;
+        return fullName.toLowerCase().includes(search.value.toLowerCase());
+    }).slice(0, 5);
+});
+
+const onSearchIconClicked = () => {
+    searchLoading.value = true;
+    setTimeout(() => {
+        searchLoaded.value = true;
+        searchLoading.value = false;
+        shownUsers.value = filteredUsers.value;
+    }, 1000);
+};
+
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 912b484b..bbe31cff 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -39,6 +39,8 @@
             </v-btn>
 
         </v-form>
+
+        <UserSearchList></UserSearchList>
     </div>
 </template>
 
@@ -50,6 +52,7 @@ import {ref} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 import {useCreateSubjectMutation} from "@/queries/Subject";
 import type SubjectForm from "@/models/Subject";
+import UserSearchList from "@/components/subject/createSubjectView/UserSearchList.vue";
 
 const form = ref(null);
 const project_name = ref("");

From b62cde62714b47ea01d49be0fb1da0801e3277dc Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 21:51:43 +0200
Subject: [PATCH 06/39] add users to instructors

---
 .../createSubjectView/UserSearchList.vue      | 28 ++++++++++++++++++-
 .../src/views/subject/CreateSubjectView.vue   | 12 +++++++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/UserSearchList.vue b/frontend/src/components/subject/createSubjectView/UserSearchList.vue
index 242a8fe9..35388986 100644
--- a/frontend/src/components/subject/createSubjectView/UserSearchList.vue
+++ b/frontend/src/components/subject/createSubjectView/UserSearchList.vue
@@ -11,6 +11,7 @@
                 single-line
                 hide-details
                 @click:prepend-inner="onSearchIconClicked"
+                @keydown.enter="onSearchIconClicked"
             ></v-text-field>
         </v-card-text>
 
@@ -24,6 +25,13 @@
                     <v-list-item-title>
                         {{ user.given_name }} {{ user.surname }}
                     </v-list-item-title>
+                    <v-btn
+                        @click="onAddInstructorButtonClicked(user)"
+                        color="primary"
+                        :disabled="userIsInstructor(user)"
+                    >
+                        Add
+                    </v-btn>
                 </v-list-item>
             </v-list>
         </div>
@@ -35,9 +43,15 @@
 <script setup lang="ts">
 
 import {useUsersQuery} from "@/queries/User";
-import {computed, ref} from "vue";
+import {computed, ref, toRefs} from "vue";
 import type User from "@/models/User";
 
+const props = defineProps<{
+    instructors: User[];
+}>();
+
+const { instructors } = toRefs(props);
+
 const {data: users, isLoading, isError} = useUsersQuery();
 
 const search = ref("");
@@ -55,6 +69,10 @@ const filteredUsers = computed(() => {
     }).slice(0, 5);
 });
 
+const emit = defineEmits<{
+    (e: "add-instructor", user: User): void;
+}>();
+
 const onSearchIconClicked = () => {
     searchLoading.value = true;
     setTimeout(() => {
@@ -64,6 +82,14 @@ const onSearchIconClicked = () => {
     }, 1000);
 };
 
+const onAddInstructorButtonClicked = (user: User) => {
+    emit("add-instructor", user);
+};
+
+const userIsInstructor = (user: User) => {
+    return instructors.value.some((instructor: User) => instructor.id === user.id);
+};
+
 
 </script>
 
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index bbe31cff..f882ad0c 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -40,7 +40,10 @@
 
         </v-form>
 
-        <UserSearchList></UserSearchList>
+        <UserSearchList
+            :instructors="instructors"
+            @add-instructor="addInstructor"
+        ></UserSearchList>
     </div>
 </template>
 
@@ -53,10 +56,12 @@ import useAcademicYear from "@/composables/useAcademicYear";
 import {useCreateSubjectMutation} from "@/queries/Subject";
 import type SubjectForm from "@/models/Subject";
 import UserSearchList from "@/components/subject/createSubjectView/UserSearchList.vue";
+import type User from "@/models/User";
 
 const form = ref(null);
 const project_name = ref("");
 const activeAcademicYear = ref<number>(useAcademicYear());
+const instructors = ref<User[]>([]);
 
 const createSubjectMutation = useCreateSubjectMutation();
 
@@ -67,6 +72,11 @@ const rules = {
     length: (value: string) => value.length > 2 || "Title must be at least 3 characters long.",
 };
 
+const addInstructor = (user: User) => {
+    instructors.value.push(user);
+    console.log(instructors.value);
+};
+
 async function handleSubmit() {
     const {valid} = await form.value.validate();
     if (!valid) {

From 3cc9c312ca469e32e78b2dd8e9f9626f222e86fd Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 23:10:49 +0200
Subject: [PATCH 07/39] assign and delete users from instructors

---
 .../createSubjectView/UserSearchList.vue      | 11 +++--
 .../src/views/subject/CreateSubjectView.vue   | 45 ++++++++++++++++++-
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/UserSearchList.vue b/frontend/src/components/subject/createSubjectView/UserSearchList.vue
index 35388986..51ec6e47 100644
--- a/frontend/src/components/subject/createSubjectView/UserSearchList.vue
+++ b/frontend/src/components/subject/createSubjectView/UserSearchList.vue
@@ -48,9 +48,10 @@ import type User from "@/models/User";
 
 const props = defineProps<{
     instructors: User[];
+    currentUser: User;
 }>();
 
-const { instructors } = toRefs(props);
+const {instructors, currentUser} = toRefs(props);
 
 const {data: users, isLoading, isError} = useUsersQuery();
 
@@ -64,8 +65,10 @@ const filteredUsers = computed(() => {
         return [];
     }
     return [...(users.value || [])].filter((user: User) => {
-        const fullName = `${user?.given_name} ${user.surname}`;
-        return fullName.toLowerCase().includes(search.value.toLowerCase());
+        return (
+            user?.uid !== currentUser.value?.uid &&
+            `${user?.given_name} ${user.surname}`.toLowerCase().includes(search.value.toLowerCase())
+        );
     }).slice(0, 5);
 });
 
@@ -87,7 +90,7 @@ const onAddInstructorButtonClicked = (user: User) => {
 };
 
 const userIsInstructor = (user: User) => {
-    return instructors.value.some((instructor: User) => instructor.id === user.id);
+    return instructors.value.some((instructor: User) => instructor?.uid === user?.uid);
 };
 
 
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index f882ad0c..6c71ba88 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -1,4 +1,8 @@
 <template>
+    <div v-if="isError" class="v-container">
+        <p>{{ $t("default.something-went-wrong") }}</p>
+    </div>
+
     <div>
         <v-form
             ref="form"
@@ -31,6 +35,26 @@
                 required
             ></v-select>
 
+            <v-checkbox
+                label="Assign myself as instructor"
+                v-model="currentUserAsInstructor"
+            ></v-checkbox>
+
+            <v-chip-group
+                column
+            >
+                <v-chip
+                    v-for="instructor in shownInstructors"
+                    :key="instructor!.uid"
+                    closable
+                    @click:close="onInstructorChipClose(instructor)"
+
+                >
+                    {{ instructor.given_name[0] }}. {{ instructor.surname }}
+                </v-chip>
+
+            </v-chip-group>
+
             <v-btn
                 color="primary"
                 type="submit"
@@ -42,6 +66,7 @@
 
         <UserSearchList
             :instructors="instructors"
+            :current-user="currentUser"
             @add-instructor="addInstructor"
         ></UserSearchList>
     </div>
@@ -51,18 +76,21 @@
 <script setup lang="ts">
 
 
-import {ref} from "vue";
+import {computed, ref} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 import {useCreateSubjectMutation} from "@/queries/Subject";
 import type SubjectForm from "@/models/Subject";
 import UserSearchList from "@/components/subject/createSubjectView/UserSearchList.vue";
 import type User from "@/models/User";
+import {useCurrentUserQuery} from "@/queries/User";
 
 const form = ref(null);
 const project_name = ref("");
 const activeAcademicYear = ref<number>(useAcademicYear());
 const instructors = ref<User[]>([]);
+const currentUserAsInstructor = ref(true);
 
+const {data: currentUser, isLoading, isError} = useCurrentUserQuery();
 const createSubjectMutation = useCreateSubjectMutation();
 
 
@@ -72,11 +100,26 @@ const rules = {
     length: (value: string) => value.length > 2 || "Title must be at least 3 characters long.",
 };
 
+const shownInstructors = computed(() => {
+    if (currentUserAsInstructor.value) {
+        return [currentUser.value, ...instructors.value];
+    }
+    return instructors.value;
+})
+
 const addInstructor = (user: User) => {
     instructors.value.push(user);
     console.log(instructors.value);
 };
 
+const onInstructorChipClose = (instructor: User) => {
+    if (currentUser.value?.uid === instructor?.uid) {
+        currentUserAsInstructor.value = false;
+    } else {
+        instructors.value.splice(instructors.value.indexOf(instructor), 1);
+    }
+};
+
 async function handleSubmit() {
     const {valid} = await form.value.validate();
     if (!valid) {

From 2fac13487f35002cfe98d72a868685299f9163d7 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sat, 18 May 2024 23:48:47 +0200
Subject: [PATCH 08/39] sort instructors

---
 .../src/views/subject/CreateSubjectView.vue   | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 6c71ba88..288e6819 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -40,20 +40,22 @@
                 v-model="currentUserAsInstructor"
             ></v-checkbox>
 
-            <v-chip-group
-                column
-            >
-                <v-chip
-                    v-for="instructor in shownInstructors"
-                    :key="instructor!.uid"
-                    closable
-                    @click:close="onInstructorChipClose(instructor)"
+            <v-chip
+                v-for="instructor in shownInstructors"
+                :key="instructor!.uid"
+                closable
+                variant="elevated"
+                :color="instructor!.is_teacher ? `primary` : `green` "
+                @click:close="onInstructorChipClose(instructor)"
 
-                >
-                    {{ instructor.given_name[0] }}. {{ instructor.surname }}
-                </v-chip>
+            >
+                <v-icon
+                    :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school` "
+                    start
+                ></v-icon>
+                {{ instructor.given_name[0] }}. {{ instructor.surname }}
+            </v-chip>
 
-            </v-chip-group>
 
             <v-btn
                 color="primary"
@@ -109,7 +111,15 @@ const shownInstructors = computed(() => {
 
 const addInstructor = (user: User) => {
     instructors.value.push(user);
-    console.log(instructors.value);
+    instructors.value.sort((a, b) => {
+        if (a?.is_teacher && !b?.is_teacher) {
+            return -1;
+        } else if (!a?.is_teacher && b?.is_teacher) {
+            return 1;
+        } else {
+            return a?.surname.localeCompare(b?.surname);
+        }
+    });
 };
 
 const onInstructorChipClose = (instructor: User) => {

From 5da86fb83c7656b2036e6c19a2abe7d004d60ab8 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 01:13:22 +0200
Subject: [PATCH 09/39] begin styling create subject page

---
 .../CreateSubjectHeaderCard.vue               | 93 +++++++++++++++++++
 .../CreateSubjectHeaderContainer.vue          | 28 ++++++
 .../createSubjectView/UserSearchList.vue      |  6 +-
 .../SubjectsHeaderImage.vue                   |  0
 .../subjectsview/SubjectsHeaderContainer.vue  |  2 +-
 .../src/views/subject/CreateSubjectView.vue   | 16 ++++
 6 files changed, 143 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/subject/createSubjectView/CreateSubjectHeaderCard.vue
 create mode 100644 frontend/src/components/subject/createSubjectView/CreateSubjectHeaderContainer.vue
 rename frontend/src/components/subject/{subjectsview => extra}/SubjectsHeaderImage.vue (100%)

diff --git a/frontend/src/components/subject/createSubjectView/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/CreateSubjectHeaderCard.vue
new file mode 100644
index 00000000..49e56259
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/CreateSubjectHeaderCard.vue
@@ -0,0 +1,93 @@
+<template>
+    <v-card variant="text" class="title-card" width="100%" max-height="35vh">
+        <v-card-title class="title">
+            New Subject
+        </v-card-title>
+
+        <v-card-text>
+            <v-form
+                ref="form"
+            >
+                <v-text-field
+                    v-model="project_name"
+                    :rules="[rules.required, rules.length]"
+                    label="Title"
+                    required
+                    variant="outlined"
+                    placeholder="Enter Title"
+                    hint="Enter your password to access this website"
+                    clearable
+                    hide-details="auto"
+                    @keydown.enter.prevent
+                    class="form-elem"
+                ></v-text-field>
+
+                <v-row>
+                    <v-col>
+                        <v-select
+                            v-model="activeAcademicYear"
+                            variant="outlined"
+                            :items="academicYearItems"
+                            :item-title="item => `20${item}-20${item + 1}`"
+                            :item-value="item => item"
+                            label="Academic Year"
+                            required
+                            class="form-elem-academic"
+                        ></v-select>
+                    </v-col>
+                    <v-col>
+                        <v-checkbox
+                            label="Assign myself as instructor"
+                            v-model="currentUserAsInstructor"
+                        ></v-checkbox>
+                    </v-col>
+                </v-row>
+            </v-form>
+        </v-card-text>
+
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+import useAcademicYear from "@/composables/useAcademicYear";
+
+const form = ref(null);
+const project_name = ref("");
+const currentUserAsInstructor = ref(true);
+const activeAcademicYear = ref<number>(useAcademicYear());
+
+const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
+const rules = {
+    required: (value: string) => !!value || "Field is required.",
+    length: (value: string) => value.length > 2 || "Title must be at least 3 characters long.",
+};
+
+</script>
+
+<style scoped>
+
+.title-card {
+    background-color: white;
+    padding: 20px;
+}
+
+.form-elem {
+    margin-bottom: 2vh;
+}
+
+.form-elem-academic {
+    margin-bottom: 2vh;
+    max-width: 20vw;
+}
+
+.title {
+    font-size: 32px;
+    letter-spacing: -0.5px;
+    text-transform: capitalize;
+    font-weight: bold;
+    margin-bottom: 12px;
+    font-family: "Poppins", sans-serif;
+}
+
+</style>
diff --git a/frontend/src/components/subject/createSubjectView/CreateSubjectHeaderContainer.vue b/frontend/src/components/subject/createSubjectView/CreateSubjectHeaderContainer.vue
new file mode 100644
index 00000000..4f756c66
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/CreateSubjectHeaderContainer.vue
@@ -0,0 +1,28 @@
+<template>
+    <v-row>
+        <v-col cols="4">
+            <SubjectsHeaderImage :imagePath="imagePath"></SubjectsHeaderImage>
+        </v-col>
+        <v-col cols="8">
+            <CreateSubjectHeaderCard>
+
+            </CreateSubjectHeaderCard>
+        </v-col>
+    </v-row>
+</template>
+
+
+
+<script setup lang="ts">
+
+import SubjectsHeaderImage from "@/components/subject/extra/SubjectsHeaderImage.vue";
+import CreateSubjectHeaderCard from "@/components/subject/createSubjectView/CreateSubjectHeaderCard.vue";
+
+defineProps<{
+    imagePath: string;
+}>();
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/subject/createSubjectView/UserSearchList.vue b/frontend/src/components/subject/createSubjectView/UserSearchList.vue
index 51ec6e47..d967bad9 100644
--- a/frontend/src/components/subject/createSubjectView/UserSearchList.vue
+++ b/frontend/src/components/subject/createSubjectView/UserSearchList.vue
@@ -64,7 +64,11 @@ const filteredUsers = computed(() => {
     if (!search.value) {
         return [];
     }
-    return [...(users.value || [])].filter((user: User) => {
+    return [...(users.value || [])]
+        .sort((a: User, b: User) => {
+            return a.surname.localeCompare(b.surname);
+        })
+        .filter((user: User) => {
         return (
             user?.uid !== currentUser.value?.uid &&
             `${user?.given_name} ${user.surname}`.toLowerCase().includes(search.value.toLowerCase())
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue b/frontend/src/components/subject/extra/SubjectsHeaderImage.vue
similarity index 100%
rename from frontend/src/components/subject/subjectsview/SubjectsHeaderImage.vue
rename to frontend/src/components/subject/extra/SubjectsHeaderImage.vue
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
index 6aa0eb17..91a078cc 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="ts">
 import SubjectsHeaderCard from "@/components/subject/subjectsview/SubjectsHeaderCard.vue";
-import SubjectsHeaderImage from "@/components/subject/subjectsview/SubjectsHeaderImage.vue";
+import SubjectsHeaderImage from "@/components/subject/extra/SubjectsHeaderImage.vue";
 import type { SubjectDetails, SubjectFilter } from "@/models/Subject";
 
 defineProps<{
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 288e6819..4ef25a50 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -3,6 +3,19 @@
         <p>{{ $t("default.something-went-wrong") }}</p>
     </div>
 
+    <v-skeleton-loader :loading="isLoading" type="card">
+        <v-row>
+            <v-col cols="12">
+                <background-container>
+                    <CreateSubjectHeaderContainer
+                        :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
+                    >
+                    </CreateSubjectHeaderContainer>
+                </background-container>
+            </v-col>
+        </v-row>
+
+    </v-skeleton-loader>
     <div>
         <v-form
             ref="form"
@@ -85,6 +98,9 @@ import type SubjectForm from "@/models/Subject";
 import UserSearchList from "@/components/subject/createSubjectView/UserSearchList.vue";
 import type User from "@/models/User";
 import {useCurrentUserQuery} from "@/queries/User";
+import BackgroundContainer from "@/components/BackgroundContainer.vue";
+import CreateSubjectHeaderCard from "@/components/subject/createSubjectView/CreateSubjectHeaderCard.vue";
+import CreateSubjectHeaderContainer from "@/components/subject/createSubjectView/CreateSubjectHeaderContainer.vue";
 
 const form = ref(null);
 const project_name = ref("");

From e7d45c91da87261540db59044ff51460ce94d43a Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 02:22:56 +0200
Subject: [PATCH 10/39] more styling

---
 .../body/CreateSubjectBody.vue                | 28 ++++++++
 .../body/SubjectInstructorsCard.vue           | 54 ++++++++++++++
 .../createSubjectView/body/UserSearchCard.vue | 38 ++++++++++
 .../{ => body}/UserSearchList.vue             | 72 +++++++++----------
 .../{ => header}/CreateSubjectHeaderCard.vue  |  1 +
 .../CreateSubjectHeaderContainer.vue          |  6 +-
 .../header/CreateSubjectHeaderImage.vue       | 15 ++++
 .../subjectsview/{ => body}/SubjectCard.vue   |  0
 .../{ => header}/SubjectsHeaderCard.vue       |  0
 .../{ => header}/SubjectsHeaderContainer.vue  |  4 +-
 .../header}/SubjectsHeaderImage.vue           |  0
 .../src/views/subject/CreateSubjectView.vue   | 12 ++--
 frontend/src/views/subject/SubjectsView.vue   |  4 +-
 13 files changed, 185 insertions(+), 49 deletions(-)
 create mode 100644 frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
 create mode 100644 frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
 create mode 100644 frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
 rename frontend/src/components/subject/createSubjectView/{ => body}/UserSearchList.vue (54%)
 rename frontend/src/components/subject/createSubjectView/{ => header}/CreateSubjectHeaderCard.vue (98%)
 rename frontend/src/components/subject/createSubjectView/{ => header}/CreateSubjectHeaderContainer.vue (60%)
 create mode 100644 frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue
 rename frontend/src/components/subject/subjectsview/{ => body}/SubjectCard.vue (100%)
 rename frontend/src/components/subject/subjectsview/{ => header}/SubjectsHeaderCard.vue (100%)
 rename frontend/src/components/subject/subjectsview/{ => header}/SubjectsHeaderContainer.vue (88%)
 rename frontend/src/components/subject/{extra => subjectsview/header}/SubjectsHeaderImage.vue (100%)

diff --git a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
new file mode 100644
index 00000000..c0d3e656
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
@@ -0,0 +1,28 @@
+<template>
+    <v-row>
+        <v-col cols="4">
+            <SubjectInstructorsCard
+                :instructors="instructors"
+            ></SubjectInstructorsCard>
+        </v-col>
+        <v-col cols="8">
+            <UserSearchCard></UserSearchCard>
+        </v-col>
+
+    </v-row>
+</template>
+
+<script setup lang="ts">
+import SubjectInstructorsCard from "@/components/subject/createSubjectView/body/SubjectInstructorsCard.vue";
+import type User from "@/models/User";
+import UserSearchCard from "@/components/subject/createSubjectView/body/UserSearchCard.vue";
+
+defineProps<{
+    instructors: User[];
+}>();
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
new file mode 100644
index 00000000..3d787c6d
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
@@ -0,0 +1,54 @@
+<template>
+    <v-card variant="text" width="100%" class="title-card">
+        <v-card-title class="card-title">
+            Subject instructors
+        </v-card-title>
+        <v-card-text>
+            <v-chip
+                v-for="instructor in instructors"
+                :key="instructor!.uid"
+                closable
+                variant="elevated"
+                :color="instructor!.is_teacher ? `primary` : `green` "
+            >
+                <v-icon
+                    :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school` "
+                    start
+                ></v-icon>
+                {{ instructor.given_name[0] }}. {{ instructor.surname }}
+            </v-chip>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+
+import type User from "@/models/User";
+
+defineProps<{
+    instructors: User[];
+}>();
+
+</script>
+
+
+
+<style scoped>
+
+.title-card {
+    background-color: white;
+    padding: 20px;
+}
+
+.card-title {
+    font-size: 24px;
+    text-transform: capitalize;
+    display: block;
+    line-height: 1.2;
+    font-weight: 500;
+    color: black;
+}
+
+
+
+</style>
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
new file mode 100644
index 00000000..7df2f4d5
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
@@ -0,0 +1,38 @@
+<template>
+    <v-card variant="text" class="title-card" width="100%">
+        <v-card-title class="card-title">
+            Add instructors to subject
+        </v-card-title>
+        <v-card-text>
+            <UserSearchList current-user="" instructors="">
+
+            </UserSearchList>
+        </v-card-text>
+    </v-card>
+</template>
+
+
+<script setup lang="ts">
+
+import UserSearchList from "@/components/subject/createSubjectView/body/UserSearchList.vue";
+</script>
+
+
+
+<style scoped>
+
+.title-card {
+    background-color: white;
+    padding: 20px;
+}
+
+.card-title {
+    font-size: 24px;
+    text-transform: capitalize;
+    display: block;
+    line-height: 1.2;
+    font-weight: 500;
+    color: black;
+}
+
+</style>
diff --git a/frontend/src/components/subject/createSubjectView/UserSearchList.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
similarity index 54%
rename from frontend/src/components/subject/createSubjectView/UserSearchList.vue
rename to frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
index d967bad9..9337e0aa 100644
--- a/frontend/src/components/subject/createSubjectView/UserSearchList.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
@@ -1,43 +1,39 @@
 <template>
-    <v-card title="Instructors" flat>
-        <v-card-text>
-            <v-text-field
-                :loading="searchLoading"
-                v-model="search"
-                label="Search"
-                placeholder="Search for instructors"
-                prepend-inner-icon="mdi-magnify"
-                clearable
-                single-line
-                hide-details
-                @click:prepend-inner="onSearchIconClicked"
-                @keydown.enter="onSearchIconClicked"
-            ></v-text-field>
-        </v-card-text>
-
-        <div v-show="searchLoaded">
-            <p v-if="shownUsers.length === 0">No results found</p>
-            <v-list v-else>
-                <v-list-item
-                    v-for="(user, index) in shownUsers"
-                    :key="index"
+        <v-text-field
+            :loading="searchLoading"
+            v-model="search"
+            label="Search"
+            placeholder="Search for instructors"
+            prepend-inner-icon="mdi-magnify"
+            clearable
+            single-line
+            hide-details
+            variant="outlined"
+            @click:prepend-inner="onSearchIconClicked"
+            @keydown.enter="onSearchIconClicked"
+        ></v-text-field>
+
+    <div v-show="searchLoaded">
+        <p v-if="shownUsers.length === 0">No results found</p>
+        <v-list v-else>
+            <v-list-item
+                v-for="(user, index) in shownUsers"
+                :key="index"
+            >
+                <v-list-item-title>
+                    {{ user.given_name }} {{ user.surname }}
+                </v-list-item-title>
+                <v-btn
+                    @click="onAddInstructorButtonClicked(user)"
+                    color="primary"
+                    :disabled="userIsInstructor(user)"
                 >
-                    <v-list-item-title>
-                        {{ user.given_name }} {{ user.surname }}
-                    </v-list-item-title>
-                    <v-btn
-                        @click="onAddInstructorButtonClicked(user)"
-                        color="primary"
-                        :disabled="userIsInstructor(user)"
-                    >
-                        Add
-                    </v-btn>
-                </v-list-item>
-            </v-list>
-        </div>
-
-
-    </v-card>
+                    Add
+                </v-btn>
+            </v-list-item>
+        </v-list>
+    </div>
+
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/components/subject/createSubjectView/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
similarity index 98%
rename from frontend/src/components/subject/createSubjectView/CreateSubjectHeaderCard.vue
rename to frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index 49e56259..c3e296e1 100644
--- a/frontend/src/components/subject/createSubjectView/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -39,6 +39,7 @@
                         <v-checkbox
                             label="Assign myself as instructor"
                             v-model="currentUserAsInstructor"
+                            color="primary"
                         ></v-checkbox>
                     </v-col>
                 </v-row>
diff --git a/frontend/src/components/subject/createSubjectView/CreateSubjectHeaderContainer.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
similarity index 60%
rename from frontend/src/components/subject/createSubjectView/CreateSubjectHeaderContainer.vue
rename to frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
index 4f756c66..3546efd4 100644
--- a/frontend/src/components/subject/createSubjectView/CreateSubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
@@ -1,7 +1,7 @@
 <template>
     <v-row>
         <v-col cols="4">
-            <SubjectsHeaderImage :imagePath="imagePath"></SubjectsHeaderImage>
+            <CreateSubjectHeaderImage :imagePath="imagePath"></CreateSubjectHeaderImage>
         </v-col>
         <v-col cols="8">
             <CreateSubjectHeaderCard>
@@ -15,8 +15,8 @@
 
 <script setup lang="ts">
 
-import SubjectsHeaderImage from "@/components/subject/extra/SubjectsHeaderImage.vue";
-import CreateSubjectHeaderCard from "@/components/subject/createSubjectView/CreateSubjectHeaderCard.vue";
+import CreateSubjectHeaderCard from "@/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue";
+import CreateSubjectHeaderImage from "@/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue";
 
 defineProps<{
     imagePath: string;
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue
new file mode 100644
index 00000000..9274cb44
--- /dev/null
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue
@@ -0,0 +1,15 @@
+<template>
+    <v-img aspect-ratio="16/9" cover :src="imagePath" class="header-img"> </v-img>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    imagePath: string;
+}>();
+</script>
+
+<style scoped>
+.header-img {
+    height: 35vh;
+}
+</style>
diff --git a/frontend/src/components/subject/subjectsview/SubjectCard.vue b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
similarity index 100%
rename from frontend/src/components/subject/subjectsview/SubjectCard.vue
rename to frontend/src/components/subject/subjectsview/body/SubjectCard.vue
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
similarity index 100%
rename from frontend/src/components/subject/subjectsview/SubjectsHeaderCard.vue
rename to frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
diff --git a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue
similarity index 88%
rename from frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
rename to frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue
index 91a078cc..14fe97fb 100644
--- a/frontend/src/components/subject/subjectsview/SubjectsHeaderContainer.vue
+++ b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue
@@ -17,8 +17,8 @@
 </template>
 
 <script setup lang="ts">
-import SubjectsHeaderCard from "@/components/subject/subjectsview/SubjectsHeaderCard.vue";
-import SubjectsHeaderImage from "@/components/subject/extra/SubjectsHeaderImage.vue";
+import SubjectsHeaderCard from "@/components/subject/subjectsview/header/SubjectsHeaderCard.vue";
+import SubjectsHeaderImage from "@/components/subject/subjectsview/header/SubjectsHeaderImage.vue";
 import type { SubjectDetails, SubjectFilter } from "@/models/Subject";
 
 defineProps<{
diff --git a/frontend/src/components/subject/extra/SubjectsHeaderImage.vue b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderImage.vue
similarity index 100%
rename from frontend/src/components/subject/extra/SubjectsHeaderImage.vue
rename to frontend/src/components/subject/subjectsview/header/SubjectsHeaderImage.vue
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 4ef25a50..db997764 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -6,15 +6,19 @@
     <v-skeleton-loader :loading="isLoading" type="card">
         <v-row>
             <v-col cols="12">
+
                 <background-container>
                     <CreateSubjectHeaderContainer
                         :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
                     >
                     </CreateSubjectHeaderContainer>
+                    <CreateSubjectBody
+                        :instructors="shownInstructors"
+                    >
+                    </CreateSubjectBody>
                 </background-container>
             </v-col>
         </v-row>
-
     </v-skeleton-loader>
     <div>
         <v-form
@@ -95,12 +99,12 @@ import {computed, ref} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 import {useCreateSubjectMutation} from "@/queries/Subject";
 import type SubjectForm from "@/models/Subject";
-import UserSearchList from "@/components/subject/createSubjectView/UserSearchList.vue";
+import UserSearchList from "@/components/subject/createSubjectView/body/UserSearchList.vue";
 import type User from "@/models/User";
 import {useCurrentUserQuery} from "@/queries/User";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
-import CreateSubjectHeaderCard from "@/components/subject/createSubjectView/CreateSubjectHeaderCard.vue";
-import CreateSubjectHeaderContainer from "@/components/subject/createSubjectView/CreateSubjectHeaderContainer.vue";
+import CreateSubjectHeaderContainer from "@/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue";
+import CreateSubjectBody from "@/components/subject/createSubjectView/body/CreateSubjectBody.vue";
 
 const form = ref(null);
 const project_name = ref("");
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 680672fa..b1d4678b 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -52,8 +52,8 @@
 <script setup lang="ts">
 import { useSubjectsQuery } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
-import SubjectsHeaderContainer from "@/components/subject/subjectsview/SubjectsHeaderContainer.vue";
-import SubjectCard from "@/components/subject/subjectsview/SubjectCard.vue";
+import SubjectsHeaderContainer from "@/components/subject/subjectsview/header/SubjectsHeaderContainer.vue";
+import SubjectCard from "@/components/subject/subjectsview/body/SubjectCard.vue";
 import { computed, ref } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 import useIsTeacher from "@/composables/useIsTeacher";

From 90c94284d9bb35527ece3258ac8914442f22732f Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 02:39:20 +0200
Subject: [PATCH 11/39] adding instsructors

---
 .../body/CreateSubjectBody.vue                | 15 ++++++++++-
 .../createSubjectView/body/UserSearchCard.vue | 25 ++++++++++++++++---
 .../src/views/subject/CreateSubjectView.vue   |  2 ++
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
index c0d3e656..1b519e19 100644
--- a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
+++ b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
@@ -6,7 +6,11 @@
             ></SubjectInstructorsCard>
         </v-col>
         <v-col cols="8">
-            <UserSearchCard></UserSearchCard>
+            <UserSearchCard
+                :current-user="currentUser"
+                :instructors="instructors"
+                @add-instructor="addInstructor"
+            ></UserSearchCard>
         </v-col>
 
     </v-row>
@@ -18,9 +22,18 @@ import type User from "@/models/User";
 import UserSearchCard from "@/components/subject/createSubjectView/body/UserSearchCard.vue";
 
 defineProps<{
+    currentUser: User;
     instructors: User[];
 }>();
 
+const emit = defineEmits<{
+    (e: "add-instructor", user: User): void;
+}>();
+
+const addInstructor = (user: User) => {
+    emit("add-instructor", user);
+};
+
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
index 7df2f4d5..9e41bfd5 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
@@ -1,11 +1,14 @@
 <template>
     <v-card variant="text" class="title-card" width="100%">
         <v-card-title class="card-title">
-            Add instructors to subject
+            Search for instructors
         </v-card-title>
         <v-card-text>
-            <UserSearchList current-user="" instructors="">
-
+            <UserSearchList
+                :current-user="currentUser"
+                :instructors="instructors"
+                @add-instructor="addInstructor"
+            >
             </UserSearchList>
         </v-card-text>
     </v-card>
@@ -13,8 +16,22 @@
 
 
 <script setup lang="ts">
-
 import UserSearchList from "@/components/subject/createSubjectView/body/UserSearchList.vue";
+import type User from "@/models/User";
+
+defineProps<{
+    currentUser: User;
+    instructors: User[];
+}>();
+
+const emit = defineEmits<{
+    (e: "add-instructor", user: User): void;
+}>();
+
+const addInstructor = (user: User) => {
+    emit("add-instructor", user);
+};
+
 </script>
 
 
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index db997764..6ee95736 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -13,7 +13,9 @@
                     >
                     </CreateSubjectHeaderContainer>
                     <CreateSubjectBody
+                        :current-user="currentUser"
                         :instructors="shownInstructors"
+                        @add-instructor="addInstructor"
                     >
                     </CreateSubjectBody>
                 </background-container>

From c25c746b1c3fffd7819c4ef71df1d04bb13a97c6 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 02:48:18 +0200
Subject: [PATCH 12/39] remove instructors

---
 .../subject/createSubjectView/body/CreateSubjectBody.vue | 7 +++----
 .../createSubjectView/body/SubjectInstructorsCard.vue    | 9 +++++++++
 .../subject/createSubjectView/body/UserSearchCard.vue    | 5 +----
 .../subject/createSubjectView/body/UserSearchList.vue    | 2 +-
 frontend/src/views/subject/CreateSubjectView.vue         | 1 +
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
index 1b519e19..1c507130 100644
--- a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
+++ b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
@@ -3,13 +3,14 @@
         <v-col cols="4">
             <SubjectInstructorsCard
                 :instructors="instructors"
+                @remove-instructor="$emit('remove-instructor', $event)"
             ></SubjectInstructorsCard>
         </v-col>
         <v-col cols="8">
             <UserSearchCard
                 :current-user="currentUser"
                 :instructors="instructors"
-                @add-instructor="addInstructor"
+                @add-instructor="$emit('add-instructor', $event)"
             ></UserSearchCard>
         </v-col>
 
@@ -28,11 +29,9 @@ defineProps<{
 
 const emit = defineEmits<{
     (e: "add-instructor", user: User): void;
+    (e: "remove-instructor", user: User): void;
 }>();
 
-const addInstructor = (user: User) => {
-    emit("add-instructor", user);
-};
 
 </script>
 
diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
index 3d787c6d..8ba1468b 100644
--- a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
@@ -10,6 +10,7 @@
                 closable
                 variant="elevated"
                 :color="instructor!.is_teacher ? `primary` : `green` "
+                @click:close="onInstructorChipClose(instructor)"
             >
                 <v-icon
                     :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school` "
@@ -29,6 +30,14 @@ defineProps<{
     instructors: User[];
 }>();
 
+const emit = defineEmits<{
+    (e: "remove-instructor", user: User): void;
+}>();
+
+const onInstructorChipClose = (instructor: User) => {
+    emit("remove-instructor", instructor);
+};
+
 </script>
 
 
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
index 9e41bfd5..732969d4 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
@@ -7,7 +7,7 @@
             <UserSearchList
                 :current-user="currentUser"
                 :instructors="instructors"
-                @add-instructor="addInstructor"
+                @add-instructor="$emit('add-instructor', $event)"
             >
             </UserSearchList>
         </v-card-text>
@@ -28,9 +28,6 @@ const emit = defineEmits<{
     (e: "add-instructor", user: User): void;
 }>();
 
-const addInstructor = (user: User) => {
-    emit("add-instructor", user);
-};
 
 </script>
 
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
index 9337e0aa..d7f62013 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
@@ -24,7 +24,7 @@
                     {{ user.given_name }} {{ user.surname }}
                 </v-list-item-title>
                 <v-btn
-                    @click="onAddInstructorButtonClicked(user)"
+                    @click="$emit('add-instructor', user)"
                     color="primary"
                     :disabled="userIsInstructor(user)"
                 >
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 6ee95736..87af2695 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -16,6 +16,7 @@
                         :current-user="currentUser"
                         :instructors="shownInstructors"
                         @add-instructor="addInstructor"
+                        @remove-instructor="onInstructorChipClose"
                     >
                     </CreateSubjectBody>
                 </background-container>

From 8344ed6ae1c5027c2466859226c7809e3ef367d2 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 04:10:50 +0200
Subject: [PATCH 13/39] assign yourself button works

---
 .../header/CreateSubjectHeaderCard.vue        | 30 +++++++++++++++++--
 .../header/CreateSubjectHeaderContainer.vue   | 13 ++++++--
 .../src/views/subject/CreateSubjectView.vue   |  2 ++
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index c3e296e1..6ba453a9 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -38,7 +38,7 @@
                     <v-col>
                         <v-checkbox
                             label="Assign myself as instructor"
-                            v-model="currentUserAsInstructor"
+                            v-model="checkbox"
                             color="primary"
                         ></v-checkbox>
                     </v-col>
@@ -50,12 +50,23 @@
 </template>
 
 <script setup lang="ts">
-import {ref} from "vue";
+import {computed, ref, toRef, toRefs, watch} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 
+const props = defineProps<{
+    currentUserAsInstructor: boolean;
+}>();
+
+const {currentUserAsInstructor} = toRefs(props);
+
+const checkbox = ref(currentUserAsInstructor.value);
+
+watch(currentUserAsInstructor, (newValue) => {
+    checkbox.value = newValue;
+});
+
 const form = ref(null);
 const project_name = ref("");
-const currentUserAsInstructor = ref(true);
 const activeAcademicYear = ref<number>(useAcademicYear());
 
 const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
@@ -64,6 +75,19 @@ const rules = {
     length: (value: string) => value.length > 2 || "Title must be at least 3 characters long.",
 };
 
+
+const emit = defineEmits<{
+    (e: "set-current-user-as-instructor", value: boolean): void;
+    (e: "update:currentUserAsInstructor", value: boolean): void;
+}>();
+
+
+watch(checkbox, (newValue) => {
+    emit("update:currentUserAsInstructor", newValue);
+});
+
+
+
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
index 3546efd4..cd1a65d5 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
@@ -4,8 +4,10 @@
             <CreateSubjectHeaderImage :imagePath="imagePath"></CreateSubjectHeaderImage>
         </v-col>
         <v-col cols="8">
-            <CreateSubjectHeaderCard>
-
+            <CreateSubjectHeaderCard
+                :current-user-as-instructor="currentUserAsInstructor"
+                @update:current-user-as-instructor="$emit('update:currentUserAsInstructor', $event)"
+            >
             </CreateSubjectHeaderCard>
         </v-col>
     </v-row>
@@ -20,7 +22,14 @@ import CreateSubjectHeaderImage from "@/components/subject/createSubjectView/hea
 
 defineProps<{
     imagePath: string;
+    currentUserAsInstructor: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: "set-current-user-as-instructor", value: boolean): void;
+    (e: "update:currentUserAsInstructor", value: boolean): void;
 }>();
+
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 87af2695..b9affd05 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -10,6 +10,8 @@
                 <background-container>
                     <CreateSubjectHeaderContainer
                         :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
+                        :current-user-as-instructor="currentUserAsInstructor"
+                        @update:current-user-as-instructor="currentUserAsInstructor = $event"
                     >
                     </CreateSubjectHeaderContainer>
                     <CreateSubjectBody

From cdfd01ac751ba250496c85cd58cc3da6dcaf9159 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 04:47:12 +0200
Subject: [PATCH 14/39] emit cleanup

---
 .../body/SubjectInstructorsCard.vue           |  6 +-
 .../header/CreateSubjectHeaderCard.vue        |  5 +-
 .../header/CreateSubjectHeaderContainer.vue   |  5 +-
 .../src/views/subject/CreateSubjectView.vue   | 84 +------------------
 4 files changed, 7 insertions(+), 93 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
index 8ba1468b..8dbf5af0 100644
--- a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
@@ -10,7 +10,7 @@
                 closable
                 variant="elevated"
                 :color="instructor!.is_teacher ? `primary` : `green` "
-                @click:close="onInstructorChipClose(instructor)"
+                @click:close="$emit('remove-instructor', instructor)"
             >
                 <v-icon
                     :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school` "
@@ -34,10 +34,6 @@ const emit = defineEmits<{
     (e: "remove-instructor", user: User): void;
 }>();
 
-const onInstructorChipClose = (instructor: User) => {
-    emit("remove-instructor", instructor);
-};
-
 </script>
 
 
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index 6ba453a9..a0e68601 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -77,13 +77,12 @@ const rules = {
 
 
 const emit = defineEmits<{
-    (e: "set-current-user-as-instructor", value: boolean): void;
-    (e: "update:currentUserAsInstructor", value: boolean): void;
+    (e: "update:current-user-as-instructor", value: boolean): void;
 }>();
 
 
 watch(checkbox, (newValue) => {
-    emit("update:currentUserAsInstructor", newValue);
+    emit("update:current-user-as-instructor", newValue);
 });
 
 
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
index cd1a65d5..e379166a 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
@@ -6,7 +6,7 @@
         <v-col cols="8">
             <CreateSubjectHeaderCard
                 :current-user-as-instructor="currentUserAsInstructor"
-                @update:current-user-as-instructor="$emit('update:currentUserAsInstructor', $event)"
+                @update:current-user-as-instructor="$emit('update:current-user-as-instructor', $event)"
             >
             </CreateSubjectHeaderCard>
         </v-col>
@@ -26,8 +26,7 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: "set-current-user-as-instructor", value: boolean): void;
-    (e: "update:currentUserAsInstructor", value: boolean): void;
+    (e: "update:current-user-as-instructor", value: boolean): void;
 }>();
 
 </script>
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index b9affd05..ba283b39 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -6,7 +6,6 @@
     <v-skeleton-loader :loading="isLoading" type="card">
         <v-row>
             <v-col cols="12">
-
                 <background-container>
                     <CreateSubjectHeaderContainer
                         :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
@@ -18,93 +17,21 @@
                         :current-user="currentUser"
                         :instructors="shownInstructors"
                         @add-instructor="addInstructor"
-                        @remove-instructor="onInstructorChipClose"
+                        @remove-instructor="removeInstructor"
                     >
                     </CreateSubjectBody>
                 </background-container>
             </v-col>
         </v-row>
     </v-skeleton-loader>
-    <div>
-        <v-form
-            ref="form"
-            @submit.prevent="handleSubmit"
-        >
-            <v-responsive
-                class="mx-auto"
-                max-width="50vw"
-            >
-                <v-text-field
-                    v-model="project_name"
-                    :rules="[rules.required, rules.length]"
-                    label="Title"
-                    required
-                    variant="solo-inverted"
-                    placeholder="Enter Title"
-                    hint="Enter your password to access this website"
-                    clearable
-                    hide-details="auto"
-                    @keydown.enter.prevent
-                ></v-text-field>
-            </v-responsive>
-
-            <v-select
-                v-model="activeAcademicYear"
-                :items="academicYearItems"
-                :item-title="item => `20${item}-20${item + 1}`"
-                :item-value="item => item"
-                label="Academic Year"
-                required
-            ></v-select>
-
-            <v-checkbox
-                label="Assign myself as instructor"
-                v-model="currentUserAsInstructor"
-            ></v-checkbox>
-
-            <v-chip
-                v-for="instructor in shownInstructors"
-                :key="instructor!.uid"
-                closable
-                variant="elevated"
-                :color="instructor!.is_teacher ? `primary` : `green` "
-                @click:close="onInstructorChipClose(instructor)"
-
-            >
-                <v-icon
-                    :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school` "
-                    start
-                ></v-icon>
-                {{ instructor.given_name[0] }}. {{ instructor.surname }}
-            </v-chip>
-
-
-            <v-btn
-                color="primary"
-                type="submit"
-            >
-                Submit
-            </v-btn>
-
-        </v-form>
-
-        <UserSearchList
-            :instructors="instructors"
-            :current-user="currentUser"
-            @add-instructor="addInstructor"
-        ></UserSearchList>
-    </div>
 </template>
 
 
 <script setup lang="ts">
-
-
 import {computed, ref} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 import {useCreateSubjectMutation} from "@/queries/Subject";
 import type SubjectForm from "@/models/Subject";
-import UserSearchList from "@/components/subject/createSubjectView/body/UserSearchList.vue";
 import type User from "@/models/User";
 import {useCurrentUserQuery} from "@/queries/User";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
@@ -120,13 +47,6 @@ const currentUserAsInstructor = ref(true);
 const {data: currentUser, isLoading, isError} = useCurrentUserQuery();
 const createSubjectMutation = useCreateSubjectMutation();
 
-
-const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
-const rules = {
-    required: (value: string) => !!value || "Field is required.",
-    length: (value: string) => value.length > 2 || "Title must be at least 3 characters long.",
-};
-
 const shownInstructors = computed(() => {
     if (currentUserAsInstructor.value) {
         return [currentUser.value, ...instructors.value];
@@ -147,7 +67,7 @@ const addInstructor = (user: User) => {
     });
 };
 
-const onInstructorChipClose = (instructor: User) => {
+const removeInstructor = (instructor: User) => {
     if (currentUser.value?.uid === instructor?.uid) {
         currentUserAsInstructor.value = false;
     } else {

From 3affccc29c462ddcbb7842e4b6f9491396f7af1c Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 06:32:07 +0200
Subject: [PATCH 15/39] emitted events fixed

---
 .../header/CreateSubjectHeaderCard.vue        | 19 ++++++--
 .../header/CreateSubjectHeaderContainer.vue   |  4 ++
 frontend/src/queries/Subject.ts               | 48 +++++++++++++++----
 frontend/src/services/subject.ts              | 21 +++++---
 .../src/views/subject/CreateSubjectView.vue   | 42 ++++++++++++----
 5 files changed, 106 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index a0e68601..2c3fa602 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -9,7 +9,7 @@
                 ref="form"
             >
                 <v-text-field
-                    v-model="project_name"
+                    v-model="subjectName"
                     :rules="[rules.required, rules.length]"
                     label="Title"
                     required
@@ -50,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, toRef, toRefs, watch} from "vue";
+import {ref, toRefs, watch} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
 
 const props = defineProps<{
@@ -66,7 +66,7 @@ watch(currentUserAsInstructor, (newValue) => {
 });
 
 const form = ref(null);
-const project_name = ref("");
+const subjectName = ref("");
 const activeAcademicYear = ref<number>(useAcademicYear());
 
 const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
@@ -78,15 +78,28 @@ const rules = {
 
 const emit = defineEmits<{
     (e: "update:current-user-as-instructor", value: boolean): void;
+    (e: "update:subject-name", value: string): void;
+    (e: "update:active-academic-year", value: number): void;
 }>();
 
 
+watch(subjectName, (newValue) => {
+    emit("update:subject-name", newValue);
+});
+
+watch(activeAcademicYear, (newValue) => {
+    emit("update:active-academic-year", newValue);
+});
+
 watch(checkbox, (newValue) => {
+    console.log(newValue);
     emit("update:current-user-as-instructor", newValue);
 });
 
 
 
+
+
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
index e379166a..e027f0f0 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
@@ -6,6 +6,8 @@
         <v-col cols="8">
             <CreateSubjectHeaderCard
                 :current-user-as-instructor="currentUserAsInstructor"
+                @update:subject-name="$emit('update:subject-name', $event)"
+                @update:active-academic-year="$emit('update:active-academic-year', $event)"
                 @update:current-user-as-instructor="$emit('update:current-user-as-instructor', $event)"
             >
             </CreateSubjectHeaderCard>
@@ -27,6 +29,8 @@ defineProps<{
 
 const emit = defineEmits<{
     (e: "update:current-user-as-instructor", value: boolean): void;
+    (e: "update:subject-name", value: string): void;
+    (e: "update:active-academic-year", value: number): void;
 }>();
 
 </script>
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index ff49d20f..b263efef 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -1,7 +1,7 @@
-import { computed, toValue } from "vue";
-import type { MaybeRefOrGetter } from "vue";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
-import type { UseQueryReturnType, UseMutationReturnType } from "@tanstack/vue-query";
+import {computed, toValue} from "vue";
+import type {MaybeRefOrGetter} from "vue";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/vue-query";
+import type {UseQueryReturnType, UseMutationReturnType} from "@tanstack/vue-query";
 import {
     getSubject,
     getSubjectInstructors,
@@ -9,12 +9,12 @@ import {
     getSubjectStudents,
     getSubjectByUuid,
     registerToSubject,
-    getSubjectUuid, createSubject,
+    getSubjectUuid, createSubject, createSubjectInstructor,
 } from "@/services/subject";
-import { getSubjectProjects } from "@/services/project";
+import {getSubjectProjects} from "@/services/project";
 import type User from "@/models/User";
 import type Subject from "@/models/Subject";
-import type { UserSubjectList } from "@/models/Subject";
+import type {UserSubjectList} from "@/models/Subject";
 import type Project from "@/models/Project";
 import type SubjectForm from "@/models/Subject";
 
@@ -46,6 +46,10 @@ function CREATE_SUBJECT_QUERY_KEY(): string[] {
     return ["create", "subject"];
 }
 
+function CREATE_SUBJECT_INSTRUCTOR_QUERY_KEY(subjectId: number): (string | number)[] {
+    return ["create", "subject", "instructor", subjectId];
+}
+
 /**
  * Query composable for fetching a subject by id
  */
@@ -145,7 +149,7 @@ export function useRegisterToSubjectMutation(): UseMutationReturnType<
     return useMutation({
         mutationFn: async (uuid) => await registerToSubject(toValue(uuid)),
         onSettled: () => {
-            queryClient.invalidateQueries({ queryKey: SUBJECTS_QUERY_KEY() });
+            queryClient.invalidateQueries({queryKey: SUBJECTS_QUERY_KEY()});
         },
         onError: (error) => {
             console.error(error);
@@ -167,7 +171,7 @@ export function useCreateSubjectMutation(): UseMutationReturnType<
     return useMutation<number, Error, SubjectForm, void>({
         mutationFn: createSubject,
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: CREATE_SUBJECT_QUERY_KEY() });
+            queryClient.invalidateQueries({queryKey: CREATE_SUBJECT_QUERY_KEY()});
         },
         onError: (error) => {
             console.error("Subject creation failed", error);
@@ -175,3 +179,29 @@ export function useCreateSubjectMutation(): UseMutationReturnType<
         },
     });
 }
+
+/**
+ * Mutation composable for creating subject instructor
+ */
+
+export function useCreateSubjectInstructorMutation(
+    subjectId: MaybeRefOrGetter<number | undefined>
+): UseMutationReturnType<
+    void,
+    Error,
+    { user_id: string },
+    void
+> {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: ({user_id}) => createSubjectInstructor(toValue(subjectId)!, {user_id}),
+        onSuccess: () => {
+            queryClient.invalidateQueries({queryKey: CREATE_SUBJECT_INSTRUCTOR_QUERY_KEY(toValue(subjectId)!)});
+        },
+        onError: (error) => {
+            console.error("Subject instructor creation failed", error);
+            alert("Could not create subject instructor. Please try again.");
+        },
+    });
+}
+
diff --git a/frontend/src/services/subject.ts b/frontend/src/services/subject.ts
index 30bfe7b2..709abf66 100644
--- a/frontend/src/services/subject.ts
+++ b/frontend/src/services/subject.ts
@@ -1,21 +1,21 @@
 import type User from "@/models/User";
 import type Subject from "@/models/Subject";
-import type { UserSubjectList } from "@/models/Subject";
-import { authorized_fetch } from "@/services";
+import type {UserSubjectList} from "@/models/Subject";
+import {authorized_fetch} from "@/services";
 import type SubjectForm from "@/models/Subject";
 
 /**
  * Fetches the subject with the given ID.
  */
 export async function getSubject(subjectId: number): Promise<Subject> {
-    return authorized_fetch(`/api/subjects/${subjectId}`, { method: "GET" });
+    return authorized_fetch(`/api/subjects/${subjectId}`, {method: "GET"});
 }
 
 /**
  * Fetches the subject with the given UUID.
  */
 export async function getSubjectByUuid(subjectUuid: string): Promise<Subject> {
-    return authorized_fetch(`/api/subjects/uuid/${subjectUuid}`, { method: "GET" });
+    return authorized_fetch(`/api/subjects/uuid/${subjectUuid}`, {method: "GET"});
 }
 
 /**
@@ -31,14 +31,14 @@ export async function getSubjects(): Promise<UserSubjectList> {
  * Fetches all instructors of the subject with the given ID.
  */
 export async function getSubjectInstructors(subjectId: number): Promise<User[]> {
-    return authorized_fetch(`/api/subjects/${subjectId}/instructors`, { method: "GET" });
+    return authorized_fetch(`/api/subjects/${subjectId}/instructors`, {method: "GET"});
 }
 
 /**
  * Fetches all students of the subject with the given ID.
  */
 export async function getSubjectStudents(subjectId: number): Promise<User[]> {
-    return authorized_fetch(`/api/subjects/${subjectId}/students`, { method: "GET" });
+    return authorized_fetch(`/api/subjects/${subjectId}/students`, {method: "GET"});
 }
 
 /**
@@ -51,7 +51,7 @@ export async function registerToSubject(subjectUuid: string): Promise<Subject> {
 }
 
 export async function getSubjectUuid(subjectId: number): Promise<string> {
-    const result = await authorized_fetch(`/api/subjects/${subjectId}/uuid`, { method: "GET" });
+    const result = await authorized_fetch(`/api/subjects/${subjectId}/uuid`, {method: "GET"});
     return result.subject_uuid;
 }
 
@@ -65,3 +65,10 @@ export async function createSubject(projectData: SubjectForm): Promise<number> {
     });
     return response.id;
 }
+
+export async function createSubjectInstructor(subjectId: number, uidData: { user_id: string }): Promise<void> {
+    return authorized_fetch(`/api/subjects/${subjectId}/instructors`, {
+        method: "POST",
+        body: JSON.stringify(uidData),
+    });
+}
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index ba283b39..b0676a87 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -10,6 +10,8 @@
                     <CreateSubjectHeaderContainer
                         :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
                         :current-user-as-instructor="currentUserAsInstructor"
+                        @update:subject-name="subjectName = $event"
+                        @update:active-academic-year="activeAcademicYear = $event"
                         @update:current-user-as-instructor="currentUserAsInstructor = $event"
                     >
                     </CreateSubjectHeaderContainer>
@@ -20,6 +22,14 @@
                         @remove-instructor="removeInstructor"
                     >
                     </CreateSubjectBody>
+                    <v-btn
+                        class="submit-button"
+                        @click="handleSubmit"
+                        color="primary"
+                        type="submit"
+                    >
+                        Create
+                    </v-btn>
                 </background-container>
             </v-col>
         </v-row>
@@ -30,7 +40,7 @@
 <script setup lang="ts">
 import {computed, ref} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
-import {useCreateSubjectMutation} from "@/queries/Subject";
+import {useCreateSubjectInstructorMutation, useCreateSubjectMutation} from "@/queries/Subject";
 import type SubjectForm from "@/models/Subject";
 import type User from "@/models/User";
 import {useCurrentUserQuery} from "@/queries/User";
@@ -39,13 +49,15 @@ import CreateSubjectHeaderContainer from "@/components/subject/createSubjectView
 import CreateSubjectBody from "@/components/subject/createSubjectView/body/CreateSubjectBody.vue";
 
 const form = ref(null);
-const project_name = ref("");
+const subjectName = ref("");
 const activeAcademicYear = ref<number>(useAcademicYear());
 const instructors = ref<User[]>([]);
 const currentUserAsInstructor = ref(true);
+const subjectId = ref<number | undefined>(undefined);
 
 const {data: currentUser, isLoading, isError} = useCurrentUserQuery();
 const createSubjectMutation = useCreateSubjectMutation();
+const createSubjectInstructorMutation = useCreateSubjectInstructorMutation(computed(() => subjectId.value));
 
 const shownInstructors = computed(() => {
     if (currentUserAsInstructor.value) {
@@ -76,23 +88,35 @@ const removeInstructor = (instructor: User) => {
 };
 
 async function handleSubmit() {
-    const {valid} = await form.value.validate();
-    if (!valid) {
-        return;
-    }
 
-    const projectName = project_name.value.trim();
+    const name = subjectName.value.trim();
     const subjectData: SubjectForm = {
-        name: projectName.charAt(0).toUpperCase() + projectName.slice(1),
+        name: name.charAt(0).toUpperCase() + name.slice(1),
         academic_year: activeAcademicYear.value,
     };
 
+    const instructorIds = shownInstructors.value.map((instructor) => ({
+        user_id: instructor.uid
+    }));
+
+    console.log("Subject data:", subjectData);
+    console.log("Instructor ids:", instructorIds);
+
+    /*
     try {
         const createdSubjectId = await createSubjectMutation.mutateAsync(subjectData);
+        subjectId.value = createdSubjectId;
         console.log("Created subject with id:", createdSubjectId);
+
+        for (const instructor of instructorIds) {
+            await createSubjectInstructorMutation.mutateAsync(instructor);
+            console.log("Added instructor with id:", instructor.user_id);
+        }
     } catch (error) {
-        console.error("Error during project or group creation:", error);
+        console.error("Error during subject creation:", error);
     }
+
+     */
 }
 </script>
 

From 9cd62a8d6d0a97bff43b817981ea5524b9631dab Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 06:54:27 +0200
Subject: [PATCH 16/39] add instructors to db

---
 frontend/src/queries/Subject.ts                  |  4 ++--
 frontend/src/services/subject.ts                 |  5 ++---
 frontend/src/views/subject/CreateSubjectView.vue | 11 ++++-------
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index b263efef..e0bec753 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -189,12 +189,12 @@ export function useCreateSubjectInstructorMutation(
 ): UseMutationReturnType<
     void,
     Error,
-    { user_id: string },
+    string,
     void
 > {
     const queryClient = useQueryClient();
     return useMutation({
-        mutationFn: ({user_id}) => createSubjectInstructor(toValue(subjectId)!, {user_id}),
+        mutationFn: (user_id) => createSubjectInstructor(toValue(subjectId)!, user_id),
         onSuccess: () => {
             queryClient.invalidateQueries({queryKey: CREATE_SUBJECT_INSTRUCTOR_QUERY_KEY(toValue(subjectId)!)});
         },
diff --git a/frontend/src/services/subject.ts b/frontend/src/services/subject.ts
index 709abf66..ebc70936 100644
--- a/frontend/src/services/subject.ts
+++ b/frontend/src/services/subject.ts
@@ -66,9 +66,8 @@ export async function createSubject(projectData: SubjectForm): Promise<number> {
     return response.id;
 }
 
-export async function createSubjectInstructor(subjectId: number, uidData: { user_id: string }): Promise<void> {
-    return authorized_fetch(`/api/subjects/${subjectId}/instructors`, {
+export async function createSubjectInstructor(subjectId: number, uid: string): Promise<void> {
+    return authorized_fetch(`/api/subjects/${subjectId}/instructors?user_id=${uid}`, {
         method: "POST",
-        body: JSON.stringify(uidData),
     });
 }
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index b0676a87..dc9a4034 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -45,7 +45,8 @@ import type SubjectForm from "@/models/Subject";
 import type User from "@/models/User";
 import {useCurrentUserQuery} from "@/queries/User";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
-import CreateSubjectHeaderContainer from "@/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue";
+import CreateSubjectHeaderContainer
+    from "@/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue";
 import CreateSubjectBody from "@/components/subject/createSubjectView/body/CreateSubjectBody.vue";
 
 const form = ref(null);
@@ -95,14 +96,11 @@ async function handleSubmit() {
         academic_year: activeAcademicYear.value,
     };
 
-    const instructorIds = shownInstructors.value.map((instructor) => ({
-        user_id: instructor.uid
-    }));
+    const instructorIds = shownInstructors.value.map((instructor) => instructor.uid);
 
     console.log("Subject data:", subjectData);
     console.log("Instructor ids:", instructorIds);
 
-    /*
     try {
         const createdSubjectId = await createSubjectMutation.mutateAsync(subjectData);
         subjectId.value = createdSubjectId;
@@ -110,13 +108,12 @@ async function handleSubmit() {
 
         for (const instructor of instructorIds) {
             await createSubjectInstructorMutation.mutateAsync(instructor);
-            console.log("Added instructor with id:", instructor.user_id);
+            console.log("Added instructor with id:", instructor.uid);
         }
     } catch (error) {
         console.error("Error during subject creation:", error);
     }
 
-     */
 }
 </script>
 

From 6c45374312540e4dac4d1b84f01d6b80964be827 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 07:50:40 +0200
Subject: [PATCH 17/39] form validation

---
 .../header/CreateSubjectHeaderCard.vue        |  3 +-
 .../header/CreateSubjectHeaderContainer.vue   |  2 +
 .../src/views/subject/CreateSubjectView.vue   | 54 +++++++++++++++----
 3 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index 2c3fa602..3ae90b19 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -19,6 +19,7 @@
                     clearable
                     hide-details="auto"
                     @keydown.enter.prevent
+                    :error="isFormError"
                     class="form-elem"
                 ></v-text-field>
 
@@ -55,6 +56,7 @@ import useAcademicYear from "@/composables/useAcademicYear";
 
 const props = defineProps<{
     currentUserAsInstructor: boolean;
+    isFormError: boolean;
 }>();
 
 const {currentUserAsInstructor} = toRefs(props);
@@ -92,7 +94,6 @@ watch(activeAcademicYear, (newValue) => {
 });
 
 watch(checkbox, (newValue) => {
-    console.log(newValue);
     emit("update:current-user-as-instructor", newValue);
 });
 
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
index e027f0f0..f53b3c17 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
@@ -6,6 +6,7 @@
         <v-col cols="8">
             <CreateSubjectHeaderCard
                 :current-user-as-instructor="currentUserAsInstructor"
+                :is-form-error="isFormError"
                 @update:subject-name="$emit('update:subject-name', $event)"
                 @update:active-academic-year="$emit('update:active-academic-year', $event)"
                 @update:current-user-as-instructor="$emit('update:current-user-as-instructor', $event)"
@@ -25,6 +26,7 @@ import CreateSubjectHeaderImage from "@/components/subject/createSubjectView/hea
 defineProps<{
     imagePath: string;
     currentUserAsInstructor: boolean;
+    isFormError: boolean;
 }>();
 
 const emit = defineEmits<{
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index dc9a4034..a527251c 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -3,14 +3,24 @@
         <p>{{ $t("default.something-went-wrong") }}</p>
     </div>
 
-    <v-skeleton-loader :loading="isLoading" type="card">
+    <v-skeleton-loader v-else :loading="isLoading" type="card">
+        <v-snackbar
+            v-model="snackbar"
+            :timeout="3500"
+            color="error"
+            top
+        >
+            There needs to be at least one teacher amongst the instructors for the subject.
+        </v-snackbar>
+
         <v-row>
             <v-col cols="12">
                 <background-container>
                     <CreateSubjectHeaderContainer
                         :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
                         :current-user-as-instructor="currentUserAsInstructor"
-                        @update:subject-name="subjectName = $event"
+                        :is-form-error="isFormError"
+                        @update:subject-name="onSubjectNameUpdated"
                         @update:active-academic-year="activeAcademicYear = $event"
                         @update:current-user-as-instructor="currentUserAsInstructor = $event"
                     >
@@ -49,7 +59,8 @@ import CreateSubjectHeaderContainer
     from "@/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue";
 import CreateSubjectBody from "@/components/subject/createSubjectView/body/CreateSubjectBody.vue";
 
-const form = ref(null);
+const snackbar = ref(false);
+const isFormError = ref(false);
 const subjectName = ref("");
 const activeAcademicYear = ref<number>(useAcademicYear());
 const instructors = ref<User[]>([]);
@@ -88,8 +99,37 @@ const removeInstructor = (instructor: User) => {
     }
 };
 
+const onSubjectNameUpdated = (name: string) => {
+    subjectName.value = name;
+    isFormError.value = false;
+};
+
+const validateSubjectName = () => {
+    if (!subjectName.value || subjectName.value.trim().length < 3) {
+        return false;
+    }
+    return true;
+};
+
+const validateInstructors = () => {
+    return (
+        shownInstructors.value.length > 0 &&
+        shownInstructors.value.some((instructor) => instructor.is_teacher)
+    );
+};
+
 async function handleSubmit() {
 
+    if (!validateSubjectName()) {
+        isFormError.value = true;
+        return;
+    }
+
+    if (!validateInstructors()) {
+        snackbar.value = true;
+        return;
+    }
+
     const name = subjectName.value.trim();
     const subjectData: SubjectForm = {
         name: name.charAt(0).toUpperCase() + name.slice(1),
@@ -98,17 +138,11 @@ async function handleSubmit() {
 
     const instructorIds = shownInstructors.value.map((instructor) => instructor.uid);
 
-    console.log("Subject data:", subjectData);
-    console.log("Instructor ids:", instructorIds);
 
     try {
-        const createdSubjectId = await createSubjectMutation.mutateAsync(subjectData);
-        subjectId.value = createdSubjectId;
-        console.log("Created subject with id:", createdSubjectId);
-
+        subjectId.value = await createSubjectMutation.mutateAsync(subjectData);
         for (const instructor of instructorIds) {
             await createSubjectInstructorMutation.mutateAsync(instructor);
-            console.log("Added instructor with id:", instructor.uid);
         }
     } catch (error) {
         console.error("Error during subject creation:", error);

From 4e30a39d2a5e92cbcb3a9f504a0480c76baef8e1 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 08:26:54 +0200
Subject: [PATCH 18/39] implemented dialog

---
 .../body/CreateSubjectBody.vue                |  7 +-
 .../body/SubjectInstructorsCard.vue           |  2 +-
 .../createSubjectView/body/UserSearchCard.vue |  2 +-
 .../header/CreateSubjectHeaderCard.vue        |  2 +-
 .../src/views/subject/CreateSubjectView.vue   | 88 ++++++++++++++++---
 5 files changed, 84 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
index 1c507130..d6d17fb4 100644
--- a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
+++ b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-row>
+    <v-row class="body">
         <v-col cols="4">
             <SubjectInstructorsCard
                 :instructors="instructors"
@@ -13,7 +13,6 @@
                 @add-instructor="$emit('add-instructor', $event)"
             ></UserSearchCard>
         </v-col>
-
     </v-row>
 </template>
 
@@ -37,4 +36,8 @@ const emit = defineEmits<{
 
 <style scoped>
 
+.body {
+    height: 53vh;
+}
+
 </style>
diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
index 8dbf5af0..a355634a 100644
--- a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-card variant="text" width="100%" class="title-card">
+    <v-card variant="text" width="100%" class="title-card" height="100%">
         <v-card-title class="card-title">
             Subject instructors
         </v-card-title>
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
index 732969d4..73b4d5a8 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-card variant="text" class="title-card" width="100%">
+    <v-card variant="text" class="title-card" width="100%" height="100%">
         <v-card-title class="card-title">
             Search for instructors
         </v-card-title>
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index 3ae90b19..791d6547 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-card variant="text" class="title-card" width="100%" max-height="35vh">
+    <v-card variant="text" class="title-card" width="100%" height="35vh">
         <v-card-title class="title">
             New Subject
         </v-card-title>
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index a527251c..d0bcb266 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -13,8 +13,45 @@
             There needs to be at least one teacher amongst the instructors for the subject.
         </v-snackbar>
 
+        <v-dialog
+            v-model="dialog"
+            max-width="290"
+            persistent
+        >
+            <v-card>
+                <v-card-title class="headline">
+                    Cancel subject creation?
+                </v-card-title>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn
+                        color="blue darken-1"
+                        @click="dialog = false"
+                    >
+                        No
+                    </v-btn>
+                    <v-btn
+                        color="blue darken-1"
+                        @click="router.push({name: 'subjects'})"
+                    >
+                        Yes
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+
         <v-row>
-            <v-col cols="12">
+            <v-col cols="1">
+                <v-btn
+                    variant="elevated"
+                    class="back-button"
+                    size="large"
+                    @click="dialog = true"
+                >
+                    <v-icon>mdi-arrow-left</v-icon>
+                </v-btn>
+            </v-col>
+            <v-col cols="11">
                 <background-container>
                     <CreateSubjectHeaderContainer
                         :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
@@ -32,14 +69,27 @@
                         @remove-instructor="removeInstructor"
                     >
                     </CreateSubjectBody>
-                    <v-btn
-                        class="submit-button"
-                        @click="handleSubmit"
-                        color="primary"
-                        type="submit"
+
+                    <div
+                        class="confirm-btn-container"
                     >
-                        Create
-                    </v-btn>
+                        <v-btn
+                            class="ma-2"
+                            color="grey"
+                            @click="dialog = true"
+                        >
+                            Cancel
+                        </v-btn>
+                        <v-btn
+                            class="ma-2"
+                            @click="handleSubmit"
+                            color="primary"
+                            type="submit"
+                        >
+                            Confirm
+                        </v-btn>
+                    </div>
+
                 </background-container>
             </v-col>
         </v-row>
@@ -58,8 +108,10 @@ import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import CreateSubjectHeaderContainer
     from "@/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue";
 import CreateSubjectBody from "@/components/subject/createSubjectView/body/CreateSubjectBody.vue";
+import {useRouter} from "vue-router";
 
 const snackbar = ref(false);
+const dialog = ref(false);
 const isFormError = ref(false);
 const subjectName = ref("");
 const activeAcademicYear = ref<number>(useAcademicYear());
@@ -71,6 +123,8 @@ const {data: currentUser, isLoading, isError} = useCurrentUserQuery();
 const createSubjectMutation = useCreateSubjectMutation();
 const createSubjectInstructorMutation = useCreateSubjectInstructorMutation(computed(() => subjectId.value));
 
+const router = useRouter();
+
 const shownInstructors = computed(() => {
     if (currentUserAsInstructor.value) {
         return [currentUser.value, ...instructors.value];
@@ -105,10 +159,8 @@ const onSubjectNameUpdated = (name: string) => {
 };
 
 const validateSubjectName = () => {
-    if (!subjectName.value || subjectName.value.trim().length < 3) {
-        return false;
-    }
-    return true;
+    return !(!subjectName.value || subjectName.value.trim().length < 3);
+
 };
 
 const validateInstructors = () => {
@@ -153,4 +205,16 @@ async function handleSubmit() {
 
 <style scoped>
 
+.confirm-btn-container {
+    display: flex;
+    position: absolute;
+    right: 5vw;
+    bottom: 4vw;
+    margin-top: 2vh;
+}
+
+.back-button {
+    margin: 30px;
+}
+
 </style>

From 9e9c729c1efd3f9b02d03439283f57bbd521868d Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 09:43:14 +0200
Subject: [PATCH 19/39] added i18n

---
 .../body/SubjectInstructorsCard.vue           |  2 +-
 .../createSubjectView/body/UserSearchCard.vue |  2 +-
 .../createSubjectView/body/UserSearchList.vue |  6 +-
 .../header/CreateSubjectHeaderCard.vue        | 87 +++++++++----------
 frontend/src/i18n/locales/en.ts               | 21 +++++
 frontend/src/i18n/locales/nl.ts               | 21 +++++
 .../src/views/subject/CreateSubjectView.vue   | 12 +--
 7 files changed, 96 insertions(+), 55 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
index a355634a..1e203d1d 100644
--- a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
@@ -1,7 +1,7 @@
 <template>
     <v-card variant="text" width="100%" class="title-card" height="100%">
         <v-card-title class="card-title">
-            Subject instructors
+            {{ $t("create_subject.subject_instructors") }}
         </v-card-title>
         <v-card-text>
             <v-chip
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
index 73b4d5a8..7c3f24ea 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
@@ -1,7 +1,7 @@
 <template>
     <v-card variant="text" class="title-card" width="100%" height="100%">
         <v-card-title class="card-title">
-            Search for instructors
+            {{ $t(create_subject.search_for_instructors) }}
         </v-card-title>
         <v-card-text>
             <UserSearchList
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
index d7f62013..8bca2a88 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
@@ -2,8 +2,8 @@
         <v-text-field
             :loading="searchLoading"
             v-model="search"
-            label="Search"
-            placeholder="Search for instructors"
+            :label="$t('default.search')"
+            :placeholder="$t('create_subject.search_for_instructors')"
             prepend-inner-icon="mdi-magnify"
             clearable
             single-line
@@ -28,7 +28,7 @@
                     color="primary"
                     :disabled="userIsInstructor(user)"
                 >
-                    Add
+                    {{ $t('default.add') }}
                 </v-btn>
             </v-list-item>
         </v-list>
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index 791d6547..499c14a3 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -1,50 +1,47 @@
 <template>
     <v-card variant="text" class="title-card" width="100%" height="35vh">
         <v-card-title class="title">
-            New Subject
+            {{ $t("create_subject.new_subject")}}
         </v-card-title>
 
         <v-card-text>
-            <v-form
-                ref="form"
-            >
-                <v-text-field
-                    v-model="subjectName"
-                    :rules="[rules.required, rules.length]"
-                    label="Title"
-                    required
-                    variant="outlined"
-                    placeholder="Enter Title"
-                    hint="Enter your password to access this website"
-                    clearable
-                    hide-details="auto"
-                    @keydown.enter.prevent
-                    :error="isFormError"
-                    class="form-elem"
-                ></v-text-field>
-
-                <v-row>
-                    <v-col>
-                        <v-select
-                            v-model="activeAcademicYear"
-                            variant="outlined"
-                            :items="academicYearItems"
-                            :item-title="item => `20${item}-20${item + 1}`"
-                            :item-value="item => item"
-                            label="Academic Year"
-                            required
-                            class="form-elem-academic"
-                        ></v-select>
-                    </v-col>
-                    <v-col>
-                        <v-checkbox
-                            label="Assign myself as instructor"
-                            v-model="checkbox"
-                            color="primary"
-                        ></v-checkbox>
-                    </v-col>
-                </v-row>
-            </v-form>
+
+            <v-text-field
+                v-model="subjectName"
+                :rules="[rules.required, rules.length]"
+                :label="$t('create_subject.title')"
+                required
+                variant="outlined"
+                :placeholder="$t('create_subject.enter_title')"
+                :hint="$t('create_subject.enter_title_hint')"
+                clearable
+                hide-details="auto"
+                @keydown.enter.prevent
+                :error="isFormError"
+                class="form-elem"
+            ></v-text-field>
+
+            <v-row>
+                <v-col>
+                    <v-select
+                        v-model="activeAcademicYear"
+                        variant="outlined"
+                        :items="academicYearItems"
+                        :item-title="item => `20${item}-20${item + 1}`"
+                        :item-value="item => item"
+                        label="Academic Year"
+                        required
+                        class="form-elem-academic"
+                    ></v-select>
+                </v-col>
+                <v-col>
+                    <v-checkbox
+                        :label="$t('create_subject.assign_self')"
+                        v-model="checkbox"
+                        color="primary"
+                    ></v-checkbox>
+                </v-col>
+            </v-row>
         </v-card-text>
 
     </v-card>
@@ -53,6 +50,9 @@
 <script setup lang="ts">
 import {ref, toRefs, watch} from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
+import {useI18n} from "vue-i18n";
+
+const { t } = useI18n();
 
 const props = defineProps<{
     currentUserAsInstructor: boolean;
@@ -67,14 +67,13 @@ watch(currentUserAsInstructor, (newValue) => {
     checkbox.value = newValue;
 });
 
-const form = ref(null);
 const subjectName = ref("");
 const activeAcademicYear = ref<number>(useAcademicYear());
 
 const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
 const rules = {
-    required: (value: string) => !!value || "Field is required.",
-    length: (value: string) => value.length > 2 || "Title must be at least 3 characters long.",
+    required: (value: string) => !!value || t("create_subject.field_required"),
+    length: (value: string) => value.length > 2 || t("create_subject.field_length"),
 };
 
 
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 002e98c3..c3e309c4 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -9,6 +9,12 @@ export default {
         },
         no: "no",
         to: "to ",
+        no_capital: "No",
+        yes_capital: "Yes",
+        cancel: "Cancel",
+        confirm: "Confirm",
+        search: "Search",
+        add: "Add",
     },
     logo: "ghent-university-logo-white.png",
     logout: "logout",
@@ -123,6 +129,21 @@ export default {
         student_subjects: "Show student subjects",
         no_subjects: "No subjects found.",
     },
+
+    create_subject: {
+        error_snackbar: "There needs to be at least one teacher amongst the subject instructors.",
+        cancel_dialog: "Cancel subject creation?",
+        new_subject: "New subject",
+        title: "Title",
+        enter_title: "Enter title",
+        enter_title_hint: "Enter a valid title for the new subject",
+        assign_self: "Assign myself as instructor",
+        field_required: "This field is required",
+        field_length: "Title must be at least 3 characters long",
+        subject_instructors: "Subject instructors",
+        search_for_instructors: "Search for instructors",
+    },
+
     group: {
         not_found: "Group not found",
         not_found2: "No groups found",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index fc9fdeca..2a672d08 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -9,6 +9,12 @@ export default {
         },
         no: "geen",
         to: "naar ",
+        no_capital: "Neen",
+        yes_capital: "Ja",
+        cancel: "Annuleren",
+        confirm: "Bevestigen",
+        search: "Zoeken",
+        add: "Toevoegen",
     },
     logo: "universiteit-gent-logo-white.png",
     logout: "uitloggen",
@@ -124,6 +130,21 @@ export default {
         student_subjects: "Toon student vakken",
         no_subjects: "Geen vakken gevonden.",
     },
+
+    create_subject: {
+        error_snackbar: "Er moet minstens één lesgever bij de geselecteerde vakverantwoordelijken aanwezig zijn.",
+        cancel_dialog: "Vak aanmaken annuleren?",
+        new_subject: "Nieuw vak",
+        title: "Titel",
+        enter_title: "Voer titel in",
+        enter_title_hint: "Voer een geldige titel in voor het nieuwe vak",
+        assign_self: "Wijs mezelf toe als lesgever",
+        field_required: "Dit veld is verplicht",
+        field_length: "Titel moet minstens 3 tekens lang zijn",
+        subject_instructors: "Vakverantwoordelijken",
+        search_for_instructors: "Zoek naar vakverantwoordelijken",
+    },
+
     group: {
         not_found: "Groep niet gevonden",
         not_found2: "Geen groepen teruggevonden",
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index d0bcb266..ec83f5b4 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -10,7 +10,7 @@
             color="error"
             top
         >
-            There needs to be at least one teacher amongst the instructors for the subject.
+            {{ $t("create_subject.error_snackbar") }}
         </v-snackbar>
 
         <v-dialog
@@ -20,7 +20,7 @@
         >
             <v-card>
                 <v-card-title class="headline">
-                    Cancel subject creation?
+                    {{ $t("create_subject.cancel_dialog") }}
                 </v-card-title>
                 <v-card-actions>
                     <v-spacer></v-spacer>
@@ -28,13 +28,13 @@
                         color="blue darken-1"
                         @click="dialog = false"
                     >
-                        No
+                        {{ $t("default.no_capital")}}
                     </v-btn>
                     <v-btn
                         color="blue darken-1"
                         @click="router.push({name: 'subjects'})"
                     >
-                        Yes
+                        {{ $t("default.yes_capital")}}
                     </v-btn>
                 </v-card-actions>
             </v-card>
@@ -78,7 +78,7 @@
                             color="grey"
                             @click="dialog = true"
                         >
-                            Cancel
+                            {{ $t("default.cancel")}}
                         </v-btn>
                         <v-btn
                             class="ma-2"
@@ -86,7 +86,7 @@
                             color="primary"
                             type="submit"
                         >
-                            Confirm
+                            {{ $t("default.confirm")}}
                         </v-btn>
                     </div>
 

From f2ce8e1c25ec006d0cb10c2618503f6b96e1f1af Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 09:56:27 +0200
Subject: [PATCH 20/39] i18n bug fixed

---
 .../subject/createSubjectView/body/SubjectInstructorsCard.vue | 3 +++
 .../subject/createSubjectView/body/UserSearchCard.vue         | 2 +-
 .../createSubjectView/header/CreateSubjectHeaderCard.vue      | 2 +-
 frontend/src/i18n/locales/nl.ts                               | 4 ++--
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
index 1e203d1d..878a5e6e 100644
--- a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
@@ -52,6 +52,9 @@ const emit = defineEmits<{
     line-height: 1.2;
     font-weight: 500;
     color: black;
+    word-wrap: break-word;
+    white-space: normal;
+    overflow: hidden;
 }
 
 
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
index 7c3f24ea..2e65085b 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
@@ -1,7 +1,7 @@
 <template>
     <v-card variant="text" class="title-card" width="100%" height="100%">
         <v-card-title class="card-title">
-            {{ $t(create_subject.search_for_instructors) }}
+            {{ $t('create_subject.search_for_instructors') }}
         </v-card-title>
         <v-card-text>
             <UserSearchList
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index 499c14a3..1165f065 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -29,7 +29,7 @@
                         :items="academicYearItems"
                         :item-title="item => `20${item}-20${item + 1}`"
                         :item-value="item => item"
-                        label="Academic Year"
+                        :label="$t('subject.academy_year')"
                         required
                         class="form-elem-academic"
                     ></v-select>
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 48a967d1..95f593f4 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -148,8 +148,8 @@ export default {
         assign_self: "Wijs mezelf toe als lesgever",
         field_required: "Dit veld is verplicht",
         field_length: "Titel moet minstens 3 tekens lang zijn",
-        subject_instructors: "Vakverantwoordelijken",
-        search_for_instructors: "Zoek naar vakverantwoordelijken",
+        subject_instructors: "Vak verantwoordelijken",
+        search_for_instructors: "Zoek naar vak verantwoordelijken",
     },
 
     group: {

From c84a23cc048ead6cf2dcad4c83c24605006893a8 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 10:10:40 +0200
Subject: [PATCH 21/39] styling details

---
 .../body/SubjectInstructorsCard.vue           |  1 +
 .../createSubjectView/body/UserSearchCard.vue |  4 +-
 .../createSubjectView/body/UserSearchList.vue | 47 ++++++++++++-------
 .../src/views/subject/CreateSubjectView.vue   |  2 +-
 4 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
index 878a5e6e..39fb40ea 100644
--- a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
@@ -11,6 +11,7 @@
                 variant="elevated"
                 :color="instructor!.is_teacher ? `primary` : `green` "
                 @click:close="$emit('remove-instructor', instructor)"
+                class="ma-1"
             >
                 <v-icon
                     :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school` "
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
index 2e65085b..4d5ff75d 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-card variant="text" class="title-card" width="100%" height="100%">
+    <v-card variant="text" class="title-card" width="100%" height="50vh">
         <v-card-title class="card-title">
             {{ $t('create_subject.search_for_instructors') }}
         </v-card-title>
@@ -49,4 +49,6 @@ const emit = defineEmits<{
     color: black;
 }
 
+
+
 </style>
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
index 8bca2a88..2d11d4d3 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
@@ -13,23 +13,31 @@
             @keydown.enter="onSearchIconClicked"
         ></v-text-field>
 
-    <div v-show="searchLoaded">
+    <div v-show="searchLoaded" class="scrollable-list">
         <p v-if="shownUsers.length === 0">No results found</p>
         <v-list v-else>
             <v-list-item
                 v-for="(user, index) in shownUsers"
                 :key="index"
             >
-                <v-list-item-title>
-                    {{ user.given_name }} {{ user.surname }}
-                </v-list-item-title>
-                <v-btn
-                    @click="$emit('add-instructor', user)"
-                    color="primary"
-                    :disabled="userIsInstructor(user)"
-                >
-                    {{ $t('default.add') }}
-                </v-btn>
+                <v-row>
+                    <v-col>
+                        <v-list-item-title>
+                            {{ user.given_name }} {{ user.surname }}
+                        </v-list-item-title>
+                    </v-col>
+                    <v-col>
+                        <v-btn
+                            @click="$emit('add-instructor', user)"
+                            color="primary"
+                            :disabled="userIsInstructor(user)"
+                        >
+                            {{ $t('default.add') }}
+                        </v-btn>
+                    </v-col>
+                </v-row>
+
+
             </v-list-item>
         </v-list>
     </div>
@@ -85,17 +93,24 @@ const onSearchIconClicked = () => {
     }, 1000);
 };
 
-const onAddInstructorButtonClicked = (user: User) => {
-    emit("add-instructor", user);
-};
-
 const userIsInstructor = (user: User) => {
     return instructors.value.some((instructor: User) => instructor?.uid === user?.uid);
 };
 
-
 </script>
 
 <style scoped>
 
+.scrollable-list {
+    overflow-y: auto;
+    max-height: 30vh;
+    scrollbar-width: none;
+}
+
+.scrollable-list::-webkit-scrollbar {
+    width: 0; /* For Chrome, Safari, and Opera */
+}
+
+
+
 </style>
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index ec83f5b4..54379915 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -208,7 +208,7 @@ async function handleSubmit() {
 .confirm-btn-container {
     display: flex;
     position: absolute;
-    right: 5vw;
+    right: 4vw;
     bottom: 4vw;
     margin-top: 2vh;
 }

From 643819f57839d9f8931b972a106210d60c06e17a Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 10:15:02 +0200
Subject: [PATCH 22/39] redirect after hitting confirm

---
 frontend/src/views/subject/CreateSubjectView.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 54379915..de8acfda 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -196,10 +196,11 @@ async function handleSubmit() {
         for (const instructor of instructorIds) {
             await createSubjectInstructorMutation.mutateAsync(instructor);
         }
+
+        await router.push({name: 'subject', params: {subjectId: subjectId.value}});
     } catch (error) {
         console.error("Error during subject creation:", error);
     }
-
 }
 </script>
 

From b23d72f68bada61653a513aa4acd3d65c7dc4031 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Sun, 19 May 2024 10:20:03 +0200
Subject: [PATCH 23/39] lint + format

---
 .../body/CreateSubjectBody.vue                |  6 +-
 .../body/SubjectInstructorsCard.vue           | 14 +---
 .../createSubjectView/body/UserSearchCard.vue | 13 +--
 .../createSubjectView/body/UserSearchList.vue | 65 +++++++--------
 .../header/CreateSubjectHeaderCard.vue        | 23 ++---
 .../header/CreateSubjectHeaderContainer.vue   | 14 ++--
 frontend/src/i18n/locales/nl.ts               |  3 +-
 frontend/src/queries/Subject.ts               | 32 ++++---
 frontend/src/services/subject.ts              | 14 ++--
 .../src/views/subject/CreateSubjectView.vue   | 83 +++++--------------
 frontend/src/views/subject/SubjectsView.vue   |  2 +-
 11 files changed, 93 insertions(+), 176 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
index d6d17fb4..a2790fa7 100644
--- a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
+++ b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
@@ -26,18 +26,14 @@ defineProps<{
     instructors: User[];
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     (e: "add-instructor", user: User): void;
     (e: "remove-instructor", user: User): void;
 }>();
-
-
 </script>
 
 <style scoped>
-
 .body {
     height: 53vh;
 }
-
 </style>
diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
index 39fb40ea..c597cd47 100644
--- a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
@@ -9,12 +9,12 @@
                 :key="instructor!.uid"
                 closable
                 variant="elevated"
-                :color="instructor!.is_teacher ? `primary` : `green` "
+                :color="instructor!.is_teacher ? `primary` : `green`"
                 @click:close="$emit('remove-instructor', instructor)"
                 class="ma-1"
             >
                 <v-icon
-                    :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school` "
+                    :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school`"
                     start
                 ></v-icon>
                 {{ instructor.given_name[0] }}. {{ instructor.surname }}
@@ -24,23 +24,18 @@
 </template>
 
 <script setup lang="ts">
-
 import type User from "@/models/User";
 
 defineProps<{
     instructors: User[];
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     (e: "remove-instructor", user: User): void;
 }>();
-
 </script>
 
-
-
 <style scoped>
-
 .title-card {
     background-color: white;
     padding: 20px;
@@ -57,7 +52,4 @@ const emit = defineEmits<{
     white-space: normal;
     overflow: hidden;
 }
-
-
-
 </style>
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
index 4d5ff75d..a7c1af0a 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
@@ -1,7 +1,7 @@
 <template>
     <v-card variant="text" class="title-card" width="100%" height="50vh">
         <v-card-title class="card-title">
-            {{ $t('create_subject.search_for_instructors') }}
+            {{ $t("create_subject.search_for_instructors") }}
         </v-card-title>
         <v-card-text>
             <UserSearchList
@@ -14,7 +14,6 @@
     </v-card>
 </template>
 
-
 <script setup lang="ts">
 import UserSearchList from "@/components/subject/createSubjectView/body/UserSearchList.vue";
 import type User from "@/models/User";
@@ -24,17 +23,12 @@ defineProps<{
     instructors: User[];
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     (e: "add-instructor", user: User): void;
 }>();
-
-
 </script>
 
-
-
 <style scoped>
-
 .title-card {
     background-color: white;
     padding: 20px;
@@ -48,7 +42,4 @@ const emit = defineEmits<{
     font-weight: 500;
     color: black;
 }
-
-
-
 </style>
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
index 2d11d4d3..7f3bdbd7 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
@@ -1,25 +1,22 @@
 <template>
-        <v-text-field
-            :loading="searchLoading"
-            v-model="search"
-            :label="$t('default.search')"
-            :placeholder="$t('create_subject.search_for_instructors')"
-            prepend-inner-icon="mdi-magnify"
-            clearable
-            single-line
-            hide-details
-            variant="outlined"
-            @click:prepend-inner="onSearchIconClicked"
-            @keydown.enter="onSearchIconClicked"
-        ></v-text-field>
+    <v-text-field
+        :loading="searchLoading"
+        v-model="search"
+        :label="$t('default.search')"
+        :placeholder="$t('create_subject.search_for_instructors')"
+        prepend-inner-icon="mdi-magnify"
+        clearable
+        single-line
+        hide-details
+        variant="outlined"
+        @click:prepend-inner="onSearchIconClicked"
+        @keydown.enter="onSearchIconClicked"
+    ></v-text-field>
 
     <div v-show="searchLoaded" class="scrollable-list">
         <p v-if="shownUsers.length === 0">No results found</p>
         <v-list v-else>
-            <v-list-item
-                v-for="(user, index) in shownUsers"
-                :key="index"
-            >
+            <v-list-item v-for="(user, index) in shownUsers" :key="index">
                 <v-row>
                     <v-col>
                         <v-list-item-title>
@@ -32,22 +29,18 @@
                             color="primary"
                             :disabled="userIsInstructor(user)"
                         >
-                            {{ $t('default.add') }}
+                            {{ $t("default.add") }}
                         </v-btn>
                     </v-col>
                 </v-row>
-
-
             </v-list-item>
         </v-list>
     </div>
-
 </template>
 
 <script setup lang="ts">
-
-import {useUsersQuery} from "@/queries/User";
-import {computed, ref, toRefs} from "vue";
+import { useUsersQuery } from "@/queries/User";
+import { computed, ref, toRefs } from "vue";
 import type User from "@/models/User";
 
 const props = defineProps<{
@@ -55,9 +48,9 @@ const props = defineProps<{
     currentUser: User;
 }>();
 
-const {instructors, currentUser} = toRefs(props);
+const { instructors, currentUser } = toRefs(props);
 
-const {data: users, isLoading, isError} = useUsersQuery();
+const { data: users } = useUsersQuery();
 
 const search = ref("");
 const searchLoading = ref(false);
@@ -73,14 +66,17 @@ const filteredUsers = computed(() => {
             return a.surname.localeCompare(b.surname);
         })
         .filter((user: User) => {
-        return (
-            user?.uid !== currentUser.value?.uid &&
-            `${user?.given_name} ${user.surname}`.toLowerCase().includes(search.value.toLowerCase())
-        );
-    }).slice(0, 5);
+            return (
+                user?.uid !== currentUser.value?.uid &&
+                `${user?.given_name} ${user.surname}`
+                    .toLowerCase()
+                    .includes(search.value.toLowerCase())
+            );
+        })
+        .slice(0, 5);
 });
 
-const emit = defineEmits<{
+defineEmits<{
     (e: "add-instructor", user: User): void;
 }>();
 
@@ -96,11 +92,9 @@ const onSearchIconClicked = () => {
 const userIsInstructor = (user: User) => {
     return instructors.value.some((instructor: User) => instructor?.uid === user?.uid);
 };
-
 </script>
 
 <style scoped>
-
 .scrollable-list {
     overflow-y: auto;
     max-height: 30vh;
@@ -110,7 +104,4 @@ const userIsInstructor = (user: User) => {
 .scrollable-list::-webkit-scrollbar {
     width: 0; /* For Chrome, Safari, and Opera */
 }
-
-
-
 </style>
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index 1165f065..cb58a3cf 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -1,11 +1,10 @@
 <template>
     <v-card variant="text" class="title-card" width="100%" height="35vh">
         <v-card-title class="title">
-            {{ $t("create_subject.new_subject")}}
+            {{ $t("create_subject.new_subject") }}
         </v-card-title>
 
         <v-card-text>
-
             <v-text-field
                 v-model="subjectName"
                 :rules="[rules.required, rules.length]"
@@ -27,8 +26,8 @@
                         v-model="activeAcademicYear"
                         variant="outlined"
                         :items="academicYearItems"
-                        :item-title="item => `20${item}-20${item + 1}`"
-                        :item-value="item => item"
+                        :item-title="(item) => `20${item}-20${item + 1}`"
+                        :item-value="(item) => item"
                         :label="$t('subject.academy_year')"
                         required
                         class="form-elem-academic"
@@ -43,14 +42,13 @@
                 </v-col>
             </v-row>
         </v-card-text>
-
     </v-card>
 </template>
 
 <script setup lang="ts">
-import {ref, toRefs, watch} from "vue";
+import { ref, toRefs, watch } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
-import {useI18n} from "vue-i18n";
+import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 
@@ -59,7 +57,7 @@ const props = defineProps<{
     isFormError: boolean;
 }>();
 
-const {currentUserAsInstructor} = toRefs(props);
+const { currentUserAsInstructor } = toRefs(props);
 
 const checkbox = ref(currentUserAsInstructor.value);
 
@@ -76,14 +74,12 @@ const rules = {
     length: (value: string) => value.length > 2 || t("create_subject.field_length"),
 };
 
-
 const emit = defineEmits<{
     (e: "update:current-user-as-instructor", value: boolean): void;
     (e: "update:subject-name", value: string): void;
     (e: "update:active-academic-year", value: number): void;
 }>();
 
-
 watch(subjectName, (newValue) => {
     emit("update:subject-name", newValue);
 });
@@ -95,15 +91,9 @@ watch(activeAcademicYear, (newValue) => {
 watch(checkbox, (newValue) => {
     emit("update:current-user-as-instructor", newValue);
 });
-
-
-
-
-
 </script>
 
 <style scoped>
-
 .title-card {
     background-color: white;
     padding: 20px;
@@ -126,5 +116,4 @@ watch(checkbox, (newValue) => {
     margin-bottom: 12px;
     font-family: "Poppins", sans-serif;
 }
-
 </style>
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
index f53b3c17..427e43ca 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
@@ -9,17 +9,16 @@
                 :is-form-error="isFormError"
                 @update:subject-name="$emit('update:subject-name', $event)"
                 @update:active-academic-year="$emit('update:active-academic-year', $event)"
-                @update:current-user-as-instructor="$emit('update:current-user-as-instructor', $event)"
+                @update:current-user-as-instructor="
+                    $emit('update:current-user-as-instructor', $event)
+                "
             >
             </CreateSubjectHeaderCard>
         </v-col>
     </v-row>
 </template>
 
-
-
 <script setup lang="ts">
-
 import CreateSubjectHeaderCard from "@/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue";
 import CreateSubjectHeaderImage from "@/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue";
 
@@ -29,14 +28,11 @@ defineProps<{
     isFormError: boolean;
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     (e: "update:current-user-as-instructor", value: boolean): void;
     (e: "update:subject-name", value: string): void;
     (e: "update:active-academic-year", value: number): void;
 }>();
-
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 95f593f4..966409fb 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -139,7 +139,8 @@ export default {
     },
 
     create_subject: {
-        error_snackbar: "Er moet minstens één lesgever bij de geselecteerde vakverantwoordelijken aanwezig zijn.",
+        error_snackbar:
+            "Er moet minstens één lesgever bij de geselecteerde vakverantwoordelijken aanwezig zijn.",
         cancel_dialog: "Vak aanmaken annuleren?",
         new_subject: "Nieuw vak",
         title: "Titel",
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index e0bec753..c7c9a3c4 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -1,7 +1,7 @@
-import {computed, toValue} from "vue";
-import type {MaybeRefOrGetter} from "vue";
-import {useMutation, useQuery, useQueryClient} from "@tanstack/vue-query";
-import type {UseQueryReturnType, UseMutationReturnType} from "@tanstack/vue-query";
+import { computed, toValue } from "vue";
+import type { MaybeRefOrGetter } from "vue";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
+import type { UseQueryReturnType, UseMutationReturnType } from "@tanstack/vue-query";
 import {
     getSubject,
     getSubjectInstructors,
@@ -9,12 +9,14 @@ import {
     getSubjectStudents,
     getSubjectByUuid,
     registerToSubject,
-    getSubjectUuid, createSubject, createSubjectInstructor,
+    getSubjectUuid,
+    createSubject,
+    createSubjectInstructor,
 } from "@/services/subject";
-import {getSubjectProjects} from "@/services/project";
+import { getSubjectProjects } from "@/services/project";
 import type User from "@/models/User";
 import type Subject from "@/models/Subject";
-import type {UserSubjectList} from "@/models/Subject";
+import type { UserSubjectList } from "@/models/Subject";
 import type Project from "@/models/Project";
 import type SubjectForm from "@/models/Subject";
 
@@ -149,7 +151,7 @@ export function useRegisterToSubjectMutation(): UseMutationReturnType<
     return useMutation({
         mutationFn: async (uuid) => await registerToSubject(toValue(uuid)),
         onSettled: () => {
-            queryClient.invalidateQueries({queryKey: SUBJECTS_QUERY_KEY()});
+            queryClient.invalidateQueries({ queryKey: SUBJECTS_QUERY_KEY() });
         },
         onError: (error) => {
             console.error(error);
@@ -171,7 +173,7 @@ export function useCreateSubjectMutation(): UseMutationReturnType<
     return useMutation<number, Error, SubjectForm, void>({
         mutationFn: createSubject,
         onSuccess: () => {
-            queryClient.invalidateQueries({queryKey: CREATE_SUBJECT_QUERY_KEY()});
+            queryClient.invalidateQueries({ queryKey: CREATE_SUBJECT_QUERY_KEY() });
         },
         onError: (error) => {
             console.error("Subject creation failed", error);
@@ -186,17 +188,14 @@ export function useCreateSubjectMutation(): UseMutationReturnType<
 
 export function useCreateSubjectInstructorMutation(
     subjectId: MaybeRefOrGetter<number | undefined>
-): UseMutationReturnType<
-    void,
-    Error,
-    string,
-    void
-> {
+): UseMutationReturnType<void, Error, string, void> {
     const queryClient = useQueryClient();
     return useMutation({
         mutationFn: (user_id) => createSubjectInstructor(toValue(subjectId)!, user_id),
         onSuccess: () => {
-            queryClient.invalidateQueries({queryKey: CREATE_SUBJECT_INSTRUCTOR_QUERY_KEY(toValue(subjectId)!)});
+            queryClient.invalidateQueries({
+                queryKey: CREATE_SUBJECT_INSTRUCTOR_QUERY_KEY(toValue(subjectId)!),
+            });
         },
         onError: (error) => {
             console.error("Subject instructor creation failed", error);
@@ -204,4 +203,3 @@ export function useCreateSubjectInstructorMutation(
         },
     });
 }
-
diff --git a/frontend/src/services/subject.ts b/frontend/src/services/subject.ts
index ebc70936..601b5864 100644
--- a/frontend/src/services/subject.ts
+++ b/frontend/src/services/subject.ts
@@ -1,21 +1,21 @@
 import type User from "@/models/User";
 import type Subject from "@/models/Subject";
-import type {UserSubjectList} from "@/models/Subject";
-import {authorized_fetch} from "@/services";
+import type { UserSubjectList } from "@/models/Subject";
+import { authorized_fetch } from "@/services";
 import type SubjectForm from "@/models/Subject";
 
 /**
  * Fetches the subject with the given ID.
  */
 export async function getSubject(subjectId: number): Promise<Subject> {
-    return authorized_fetch(`/api/subjects/${subjectId}`, {method: "GET"});
+    return authorized_fetch(`/api/subjects/${subjectId}`, { method: "GET" });
 }
 
 /**
  * Fetches the subject with the given UUID.
  */
 export async function getSubjectByUuid(subjectUuid: string): Promise<Subject> {
-    return authorized_fetch(`/api/subjects/uuid/${subjectUuid}`, {method: "GET"});
+    return authorized_fetch(`/api/subjects/uuid/${subjectUuid}`, { method: "GET" });
 }
 
 /**
@@ -31,14 +31,14 @@ export async function getSubjects(): Promise<UserSubjectList> {
  * Fetches all instructors of the subject with the given ID.
  */
 export async function getSubjectInstructors(subjectId: number): Promise<User[]> {
-    return authorized_fetch(`/api/subjects/${subjectId}/instructors`, {method: "GET"});
+    return authorized_fetch(`/api/subjects/${subjectId}/instructors`, { method: "GET" });
 }
 
 /**
  * Fetches all students of the subject with the given ID.
  */
 export async function getSubjectStudents(subjectId: number): Promise<User[]> {
-    return authorized_fetch(`/api/subjects/${subjectId}/students`, {method: "GET"});
+    return authorized_fetch(`/api/subjects/${subjectId}/students`, { method: "GET" });
 }
 
 /**
@@ -51,7 +51,7 @@ export async function registerToSubject(subjectUuid: string): Promise<Subject> {
 }
 
 export async function getSubjectUuid(subjectId: number): Promise<string> {
-    const result = await authorized_fetch(`/api/subjects/${subjectId}/uuid`, {method: "GET"});
+    const result = await authorized_fetch(`/api/subjects/${subjectId}/uuid`, { method: "GET" });
     return result.subject_uuid;
 }
 
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index de8acfda..a6fd35ea 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -4,37 +4,22 @@
     </div>
 
     <v-skeleton-loader v-else :loading="isLoading" type="card">
-        <v-snackbar
-            v-model="snackbar"
-            :timeout="3500"
-            color="error"
-            top
-        >
+        <v-snackbar v-model="snackbar" :timeout="3500" color="error" top>
             {{ $t("create_subject.error_snackbar") }}
         </v-snackbar>
 
-        <v-dialog
-            v-model="dialog"
-            max-width="290"
-            persistent
-        >
+        <v-dialog v-model="dialog" max-width="290" persistent>
             <v-card>
                 <v-card-title class="headline">
                     {{ $t("create_subject.cancel_dialog") }}
                 </v-card-title>
                 <v-card-actions>
                     <v-spacer></v-spacer>
-                    <v-btn
-                        color="blue darken-1"
-                        @click="dialog = false"
-                    >
-                        {{ $t("default.no_capital")}}
+                    <v-btn color="blue darken-1" @click="dialog = false">
+                        {{ $t("default.no_capital") }}
                     </v-btn>
-                    <v-btn
-                        color="blue darken-1"
-                        @click="router.push({name: 'subjects'})"
-                    >
-                        {{ $t("default.yes_capital")}}
+                    <v-btn color="blue darken-1" @click="router.push({ name: 'subjects' })">
+                        {{ $t("default.yes_capital") }}
                     </v-btn>
                 </v-card-actions>
             </v-card>
@@ -42,12 +27,7 @@
 
         <v-row>
             <v-col cols="1">
-                <v-btn
-                    variant="elevated"
-                    class="back-button"
-                    size="large"
-                    @click="dialog = true"
-                >
+                <v-btn variant="elevated" class="back-button" size="large" @click="dialog = true">
                     <v-icon>mdi-arrow-left</v-icon>
                 </v-btn>
             </v-col>
@@ -70,45 +50,31 @@
                     >
                     </CreateSubjectBody>
 
-                    <div
-                        class="confirm-btn-container"
-                    >
-                        <v-btn
-                            class="ma-2"
-                            color="grey"
-                            @click="dialog = true"
-                        >
-                            {{ $t("default.cancel")}}
+                    <div class="confirm-btn-container">
+                        <v-btn class="ma-2" color="grey" @click="dialog = true">
+                            {{ $t("default.cancel") }}
                         </v-btn>
-                        <v-btn
-                            class="ma-2"
-                            @click="handleSubmit"
-                            color="primary"
-                            type="submit"
-                        >
-                            {{ $t("default.confirm")}}
+                        <v-btn class="ma-2" @click="handleSubmit" color="primary" type="submit">
+                            {{ $t("default.confirm") }}
                         </v-btn>
                     </div>
-
                 </background-container>
             </v-col>
         </v-row>
     </v-skeleton-loader>
 </template>
 
-
 <script setup lang="ts">
-import {computed, ref} from "vue";
+import { computed, ref } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
-import {useCreateSubjectInstructorMutation, useCreateSubjectMutation} from "@/queries/Subject";
+import { useCreateSubjectInstructorMutation, useCreateSubjectMutation } from "@/queries/Subject";
 import type SubjectForm from "@/models/Subject";
 import type User from "@/models/User";
-import {useCurrentUserQuery} from "@/queries/User";
+import { useCurrentUserQuery } from "@/queries/User";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
-import CreateSubjectHeaderContainer
-    from "@/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue";
+import CreateSubjectHeaderContainer from "@/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue";
 import CreateSubjectBody from "@/components/subject/createSubjectView/body/CreateSubjectBody.vue";
-import {useRouter} from "vue-router";
+import { useRouter } from "vue-router";
 
 const snackbar = ref(false);
 const dialog = ref(false);
@@ -119,9 +85,11 @@ const instructors = ref<User[]>([]);
 const currentUserAsInstructor = ref(true);
 const subjectId = ref<number | undefined>(undefined);
 
-const {data: currentUser, isLoading, isError} = useCurrentUserQuery();
+const { data: currentUser, isLoading, isError } = useCurrentUserQuery();
 const createSubjectMutation = useCreateSubjectMutation();
-const createSubjectInstructorMutation = useCreateSubjectInstructorMutation(computed(() => subjectId.value));
+const createSubjectInstructorMutation = useCreateSubjectInstructorMutation(
+    computed(() => subjectId.value)
+);
 
 const router = useRouter();
 
@@ -130,7 +98,7 @@ const shownInstructors = computed(() => {
         return [currentUser.value, ...instructors.value];
     }
     return instructors.value;
-})
+});
 
 const addInstructor = (user: User) => {
     instructors.value.push(user);
@@ -160,7 +128,6 @@ const onSubjectNameUpdated = (name: string) => {
 
 const validateSubjectName = () => {
     return !(!subjectName.value || subjectName.value.trim().length < 3);
-
 };
 
 const validateInstructors = () => {
@@ -171,7 +138,6 @@ const validateInstructors = () => {
 };
 
 async function handleSubmit() {
-
     if (!validateSubjectName()) {
         isFormError.value = true;
         return;
@@ -190,14 +156,13 @@ async function handleSubmit() {
 
     const instructorIds = shownInstructors.value.map((instructor) => instructor.uid);
 
-
     try {
         subjectId.value = await createSubjectMutation.mutateAsync(subjectData);
         for (const instructor of instructorIds) {
             await createSubjectInstructorMutation.mutateAsync(instructor);
         }
 
-        await router.push({name: 'subject', params: {subjectId: subjectId.value}});
+        await router.push({ name: "subject", params: { subjectId: subjectId.value } });
     } catch (error) {
         console.error("Error during subject creation:", error);
     }
@@ -205,7 +170,6 @@ async function handleSubmit() {
 </script>
 
 <style scoped>
-
 .confirm-btn-container {
     display: flex;
     position: absolute;
@@ -217,5 +181,4 @@ async function handleSubmit() {
 .back-button {
     margin: 30px;
 }
-
 </style>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index b1d4678b..e15e46ee 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -38,7 +38,7 @@
             </v-col>
             <v-col v-if="isAdmin || isTeacher" cols="2">
                 <div class="action-btn-container">
-                    <router-link :to="{ name: 'create-subject'}">
+                    <router-link :to="{ name: 'create-subject' }">
                         <v-btn prepend-icon="mdi-plus-circle">
                             {{ $t("subjects.create_subject") }}
                         </v-btn>

From e27f86e6fced5ce8f2e790f157f2ae105f9a9fe4 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 20 May 2024 11:15:30 +0200
Subject: [PATCH 24/39] subjects overflow fix

---
 .../src/components/subject/extra/SubjectIcon.vue     |  1 +
 .../subject/subjectsview/body/SubjectCard.vue        |  2 +-
 .../subjectsview/header/SubjectsHeaderCard.vue       |  2 ++
 frontend/src/views/subject/SubjectsView.vue          | 12 +++++++++++-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/subject/extra/SubjectIcon.vue b/frontend/src/components/subject/extra/SubjectIcon.vue
index 8dcd8a83..e0ef2834 100644
--- a/frontend/src/components/subject/extra/SubjectIcon.vue
+++ b/frontend/src/components/subject/extra/SubjectIcon.vue
@@ -11,6 +11,7 @@ import { computed, toRefs } from "vue";
 const props = defineProps<{
     role: SubjectRole;
     size: string;
+    color: string;
 }>();
 
 const { role } = toRefs(props);
diff --git a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
index 8701fce1..cdfd26d6 100644
--- a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
@@ -1,6 +1,6 @@
 <template>
     <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
-        <v-card class="subject-card" height="16vh" color="#1D357EFF">
+        <v-card class="subject-card" height="12vh" color="primary">
             <SubjectIcon :role="role" size="xx-large" class="subject-icon"></SubjectIcon>
             <v-card-title class="subject-title">
                 {{ subject?.name }}
diff --git a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
index c70bb20e..b20278d9 100644
--- a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
@@ -28,11 +28,13 @@
                     class="subject-checkbox"
                     v-model="showInstructorSubjects"
                     :label="$t('subjects.instructor_subjects')"
+                    color="primary"
                 ></v-checkbox>
                 <v-checkbox
                     class="subject-checkbox"
                     v-model="showStudentSubjects"
                     :label="$t('subjects.student_subjects')"
+                    color="primary"
                 ></v-checkbox>
             </v-col>
         </v-row>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index e15e46ee..7fb962d0 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -17,7 +17,7 @@
                             ></SubjectsHeaderContainer>
                         </v-col>
                     </v-row>
-                    <v-row>
+                    <v-row class="body">
                         <div v-if="filteredSubjectsByAcademicYear.length === 0" class="no-results">
                             <h1>{{ $t("subjects.no_subjects") }}</h1>
                         </div>
@@ -137,4 +137,14 @@ const onAcademicYearChanged = (academicYear: number) => {
 .no-results {
     text-align: center;
 }
+
+.body {
+    max-height: 62vh;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
+.body::-webkit-scrollbar {
+    width: 0;
+}
 </style>

From 3e5815b1cea3937424f9ac43b8b1f42a818d6074 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 20 May 2024 11:32:31 +0200
Subject: [PATCH 25/39] subject title card scrollable

---
 frontend/src/components/subject/extra/SubjectIcon.vue |  1 -
 .../subject/subjectview/header/SubjectHeaderCard.vue  | 11 +++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/subject/extra/SubjectIcon.vue b/frontend/src/components/subject/extra/SubjectIcon.vue
index e0ef2834..8dcd8a83 100644
--- a/frontend/src/components/subject/extra/SubjectIcon.vue
+++ b/frontend/src/components/subject/extra/SubjectIcon.vue
@@ -11,7 +11,6 @@ import { computed, toRefs } from "vue";
 const props = defineProps<{
     role: SubjectRole;
     size: string;
-    color: string;
 }>();
 
 const { role } = toRefs(props);
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
index d054fb30..776fe6dd 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -1,7 +1,7 @@
 <template>
-    <v-card variant="text" class="title-card" height="165">
+    <v-card variant="text" class="title-card" height="165" max-width="50vw">
         <v-row>
-            <v-col :cols="isAdmin || (isInstructor && isTeacher) ? 10 : 12">
+            <v-col :cols="isAdmin || (isInstructor && isTeacher) ? 10 : 12" class="scrollable-col">
                 <v-card-title class="title">
                     {{ title }}
                 </v-card-title>
@@ -52,6 +52,12 @@ const { isTeacher } = useIsTeacher();
 .title-card {
     background-color: white;
     padding: 20px;
+    overflow: auto;
+    scrollbar-width: none;
+}
+
+.title-card::-webkit-scrollbar {
+    display: none;
 }
 
 .title {
@@ -61,6 +67,7 @@ const { isTeacher } = useIsTeacher();
     font-weight: bold;
     margin-bottom: 12px;
     font-family: "Poppins", sans-serif;
+    white-space: normal;
 }
 
 .instr-container {

From 041a594bdc49874e3f9b94548442153fc4aa9c18 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 20 May 2024 11:41:55 +0200
Subject: [PATCH 26/39] scrolling on overflow

---
 .../subject/subjectsview/body/SubjectCard.vue | 22 +++++++++++++---
 .../subjectview/header/SubjectHeaderCard.vue  | 26 ++++++++++---------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
index cdfd26d6..1ac20b9c 100644
--- a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
@@ -2,10 +2,14 @@
     <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
         <v-card class="subject-card" height="12vh" color="primary">
             <SubjectIcon :role="role" size="xx-large" class="subject-icon"></SubjectIcon>
-            <v-card-title class="subject-title">
-                {{ subject?.name }}
-                <v-icon class="">mdi-chevron-right</v-icon>
-            </v-card-title>
+
+                <v-card-title class="subject-title">
+                    <div class="scrollable">
+                        {{ subject?.name }}
+                        <v-icon class="">mdi-chevron-right</v-icon>
+                    </div>
+                </v-card-title>
+
         </v-card>
     </router-link>
 </template>
@@ -42,6 +46,16 @@ defineProps<{
     bottom: 0;
 }
 
+.scrollable {
+    max-width: 25vw;
+    overflow: auto;
+    scrollbar-width: none;
+}
+
+.scrollable::-webkit-scrollbar {
+    display: none;
+}
+
 .subject-icon {
     position: absolute;
     top: 10px;
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
index 776fe6dd..1676b6ff 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -1,9 +1,11 @@
 <template>
-    <v-card variant="text" class="title-card" height="165" max-width="50vw">
+    <v-card variant="text" class="title-card" height="165">
         <v-row>
-            <v-col :cols="isAdmin || (isInstructor && isTeacher) ? 10 : 12" class="scrollable-col">
+            <v-col :cols="isAdmin || (isInstructor && isTeacher) ? 11 : 12" class="scrollable-col">
                 <v-card-title class="title">
-                    {{ title }}
+                    <div class="scrollable">
+                        {{ title }}
+                    </div>
                 </v-card-title>
                 <v-card-text>
                     <HeaderSubtitleButton
@@ -22,7 +24,7 @@
                     </div>
                 </v-card-text>
             </v-col>
-            <v-col v-if="isAdmin || (isInstructor && isTeacher)" cols="2">
+            <v-col v-if="isAdmin || (isInstructor && isTeacher)" cols="1">
                 <router-link to="" class="link">
                     <v-icon size="large">mdi-square-edit-outline</v-icon>
                 </router-link>
@@ -52,22 +54,22 @@ const { isTeacher } = useIsTeacher();
 .title-card {
     background-color: white;
     padding: 20px;
-    overflow: auto;
-    scrollbar-width: none;
-}
-
-.title-card::-webkit-scrollbar {
-    display: none;
 }
 
-.title {
+.scrollable {
     font-size: 32px;
     letter-spacing: -0.5px;
     text-transform: capitalize;
     font-weight: bold;
     margin-bottom: 12px;
     font-family: "Poppins", sans-serif;
-    white-space: normal;
+    max-width: 49vw;
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+
+.scrollable::-webkit-scrollbar {
+    display: none;
 }
 
 .instr-container {

From 587d4788628e00f40800a8682b6fcc5238a6c5d4 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 20 May 2024 12:08:59 +0200
Subject: [PATCH 27/39] added v-chips and sorted instructors on subjectpage

---
 .../subject/extra/InstructorChip.vue          | 33 +++++++++++++
 .../subjectview/header/SubjectHeaderCard.vue  | 46 +++++++++++++------
 frontend/src/views/subject/SubjectView.vue    | 15 +++++-
 3 files changed, 78 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/subject/extra/InstructorChip.vue

diff --git a/frontend/src/components/subject/extra/InstructorChip.vue b/frontend/src/components/subject/extra/InstructorChip.vue
new file mode 100644
index 00000000..aa6cef60
--- /dev/null
+++ b/frontend/src/components/subject/extra/InstructorChip.vue
@@ -0,0 +1,33 @@
+<template>
+    <v-chip
+        v-for="instructor in instructors"
+        :key="instructor!.uid"
+        :closable="closable"
+        variant="elevated"
+        :color="instructor!.is_teacher ? `primary` : `green`"
+        @click:close="$emit('remove-instructor', instructor)"
+        class="ma-1"
+    >
+        <v-icon
+            :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school`"
+            start
+        ></v-icon>
+        {{ instructor.given_name[0] }}. {{ instructor.surname }}
+    </v-chip>
+</template>
+
+
+<script setup lang="ts">
+
+import type User from "@/models/User";
+
+defineProps<{
+    instructors: User[];
+    closable: boolean;
+}>();
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
index 1676b6ff..3840d730 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -8,20 +8,30 @@
                     </div>
                 </v-card-title>
                 <v-card-text>
-                    <HeaderSubtitleButton
-                        :title="`${$t('subject.academy_year')} 20${academicYear}-20${academicYear + 1}`"
-                        :clickable="false"
-                        :active="false"
-                    ></HeaderSubtitleButton>
-                    <div class="d-flex justify-start instr-container">
-                        <HeaderSubtitleButton
+                    <v-chip
+                        color="primary"
+                        variant="flat"
+                        label
+                    >
+                        {{`${$t('subject.academy_year')} 20${academicYear}-20${academicYear + 1}`}}
+                    </v-chip>
+                    <v-row class="instr-container">
+                        <v-chip
                             v-for="instructor in instructors"
-                            :key="instructor.uid"
-                            :title="`${instructor.given_name[0]}. ${instructor.surname}`"
-                            :clickable="false"
-                            :active="false"
-                        ></HeaderSubtitleButton>
-                    </div>
+                            :key="instructor!.uid"
+                            variant="outlined"
+                            :color="instructor!.is_teacher ? `primary` : `green`"
+                            class="ma-1 instr-chip"
+                            exact
+                        >
+                            <v-icon
+                                :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school`"
+                                start
+                            ></v-icon>
+                            {{ instructor.given_name[0] }}. {{ instructor.surname }}
+                        </v-chip>
+                    </v-row>
+
                 </v-card-text>
             </v-col>
             <v-col v-if="isAdmin || (isInstructor && isTeacher)" cols="1">
@@ -38,6 +48,7 @@ import type User from "@/models/User";
 import HeaderSubtitleButton from "@/components/buttons/HeaderSubtitleButton.vue";
 import useIsAdmin from "@/composables/useIsAdmin";
 import useIsTeacher from "@/composables/useIsTeacher";
+import InstructorChip from "@/components/subject/extra/InstructorChip.vue";
 
 defineProps<{
     title: string;
@@ -54,6 +65,12 @@ const { isTeacher } = useIsTeacher();
 .title-card {
     background-color: white;
     padding: 20px;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
+.title-card::-webkit-scrollbar {
+    display: none;
 }
 
 .scrollable {
@@ -73,8 +90,7 @@ const { isTeacher } = useIsTeacher();
 }
 
 .instr-container {
-    margin-top: 10px;
-    margin-bottom: 5px;
+    margin-top: 1vh;
 }
 
 .link {
diff --git a/frontend/src/views/subject/SubjectView.vue b/frontend/src/views/subject/SubjectView.vue
index 2e05df13..fb7cffeb 100644
--- a/frontend/src/views/subject/SubjectView.vue
+++ b/frontend/src/views/subject/SubjectView.vue
@@ -28,7 +28,7 @@
                             <SubjectHeaderContainer
                                 v-if="subject"
                                 :title="subject!.name"
-                                :instructors="instructors"
+                                :instructors="sortedInstructors"
                                 :academic-year="subject!.academic_year"
                                 :is-instructor="isInstructor"
                                 :is-student="isStudent"
@@ -133,6 +133,19 @@ const isInstructor = computed(() => {
 const isStudent = computed(() => {
     return [...(students.value || [])].some((student) => student?.uid === user.value?.uid);
 });
+
+const sortedInstructors = computed(() => {
+    return [...(instructors.value || [])].sort((a, b) => {
+        if (a?.is_teacher && !b?.is_teacher) {
+            return -1;
+        } else if (!a?.is_teacher && b?.is_teacher) {
+            return 1;
+        } else {
+            return a?.surname.localeCompare(b?.surname);
+        }
+    });
+});
+
 const { isAdmin } = useIsAdmin();
 const { isTeacher } = useIsTeacher();
 </script>

From ae718d5dc2676d048c95159ff7b3df0821341e7d Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 20 May 2024 12:11:41 +0200
Subject: [PATCH 28/39] format + linter

---
 .../subject/extra/InstructorChip.vue          |  7 +------
 .../subject/subjectsview/body/SubjectCard.vue | 13 ++++++-------
 .../subjectview/header/SubjectHeaderCard.vue  | 19 +++++++++----------
 3 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/subject/extra/InstructorChip.vue b/frontend/src/components/subject/extra/InstructorChip.vue
index aa6cef60..85d4b74e 100644
--- a/frontend/src/components/subject/extra/InstructorChip.vue
+++ b/frontend/src/components/subject/extra/InstructorChip.vue
@@ -16,18 +16,13 @@
     </v-chip>
 </template>
 
-
 <script setup lang="ts">
-
 import type User from "@/models/User";
 
 defineProps<{
     instructors: User[];
     closable: boolean;
 }>();
-
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
index 1ac20b9c..4b4bbe97 100644
--- a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
@@ -3,13 +3,12 @@
         <v-card class="subject-card" height="12vh" color="primary">
             <SubjectIcon :role="role" size="xx-large" class="subject-icon"></SubjectIcon>
 
-                <v-card-title class="subject-title">
-                    <div class="scrollable">
-                        {{ subject?.name }}
-                        <v-icon class="">mdi-chevron-right</v-icon>
-                    </div>
-                </v-card-title>
-
+            <v-card-title class="subject-title">
+                <div class="scrollable">
+                    {{ subject?.name }}
+                    <v-icon class="">mdi-chevron-right</v-icon>
+                </div>
+            </v-card-title>
         </v-card>
     </router-link>
 </template>
diff --git a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
index 3840d730..e216df2c 100644
--- a/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
+++ b/frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue
@@ -8,12 +8,10 @@
                     </div>
                 </v-card-title>
                 <v-card-text>
-                    <v-chip
-                        color="primary"
-                        variant="flat"
-                        label
-                    >
-                        {{`${$t('subject.academy_year')} 20${academicYear}-20${academicYear + 1}`}}
+                    <v-chip color="primary" variant="flat" label>
+                        {{
+                            `${$t("subject.academy_year")} 20${academicYear}-20${academicYear + 1}`
+                        }}
                     </v-chip>
                     <v-row class="instr-container">
                         <v-chip
@@ -25,13 +23,16 @@
                             exact
                         >
                             <v-icon
-                                :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school`"
+                                :icon="
+                                    instructor!.is_teacher
+                                        ? `mdi-account-tie-outline`
+                                        : `mdi-school`
+                                "
                                 start
                             ></v-icon>
                             {{ instructor.given_name[0] }}. {{ instructor.surname }}
                         </v-chip>
                     </v-row>
-
                 </v-card-text>
             </v-col>
             <v-col v-if="isAdmin || (isInstructor && isTeacher)" cols="1">
@@ -45,10 +46,8 @@
 
 <script setup lang="ts">
 import type User from "@/models/User";
-import HeaderSubtitleButton from "@/components/buttons/HeaderSubtitleButton.vue";
 import useIsAdmin from "@/composables/useIsAdmin";
 import useIsTeacher from "@/composables/useIsTeacher";
-import InstructorChip from "@/components/subject/extra/InstructorChip.vue";
 
 defineProps<{
     title: string;

From aa82fd64a48921347bc6a218702d99b8ff40b07a Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 20 May 2024 12:56:55 +0200
Subject: [PATCH 29/39] style rollback subjects voor marieke

---
 .../subject/extra/InstructorChip.vue          | 28 -------------------
 .../subject/subjectsview/body/SubjectCard.vue | 19 ++-----------
 .../header/SubjectsHeaderCard.vue             |  2 --
 frontend/src/views/subject/SubjectsView.vue   | 12 +-------
 4 files changed, 4 insertions(+), 57 deletions(-)
 delete mode 100644 frontend/src/components/subject/extra/InstructorChip.vue

diff --git a/frontend/src/components/subject/extra/InstructorChip.vue b/frontend/src/components/subject/extra/InstructorChip.vue
deleted file mode 100644
index 85d4b74e..00000000
--- a/frontend/src/components/subject/extra/InstructorChip.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-    <v-chip
-        v-for="instructor in instructors"
-        :key="instructor!.uid"
-        :closable="closable"
-        variant="elevated"
-        :color="instructor!.is_teacher ? `primary` : `green`"
-        @click:close="$emit('remove-instructor', instructor)"
-        class="ma-1"
-    >
-        <v-icon
-            :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school`"
-            start
-        ></v-icon>
-        {{ instructor.given_name[0] }}. {{ instructor.surname }}
-    </v-chip>
-</template>
-
-<script setup lang="ts">
-import type User from "@/models/User";
-
-defineProps<{
-    instructors: User[];
-    closable: boolean;
-}>();
-</script>
-
-<style scoped></style>
diff --git a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
index 4b4bbe97..60834f0b 100644
--- a/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
+++ b/frontend/src/components/subject/subjectsview/body/SubjectCard.vue
@@ -1,13 +1,10 @@
 <template>
     <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
-        <v-card class="subject-card" height="12vh" color="primary">
+        <v-card class="subject-card" height="16vh" color="primary">
             <SubjectIcon :role="role" size="xx-large" class="subject-icon"></SubjectIcon>
-
             <v-card-title class="subject-title">
-                <div class="scrollable">
-                    {{ subject?.name }}
-                    <v-icon class="">mdi-chevron-right</v-icon>
-                </div>
+                {{ subject?.name }}
+                <v-icon class="">mdi-chevron-right</v-icon>
             </v-card-title>
         </v-card>
     </router-link>
@@ -45,16 +42,6 @@ defineProps<{
     bottom: 0;
 }
 
-.scrollable {
-    max-width: 25vw;
-    overflow: auto;
-    scrollbar-width: none;
-}
-
-.scrollable::-webkit-scrollbar {
-    display: none;
-}
-
 .subject-icon {
     position: absolute;
     top: 10px;
diff --git a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
index b20278d9..c70bb20e 100644
--- a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
@@ -28,13 +28,11 @@
                     class="subject-checkbox"
                     v-model="showInstructorSubjects"
                     :label="$t('subjects.instructor_subjects')"
-                    color="primary"
                 ></v-checkbox>
                 <v-checkbox
                     class="subject-checkbox"
                     v-model="showStudentSubjects"
                     :label="$t('subjects.student_subjects')"
-                    color="primary"
                 ></v-checkbox>
             </v-col>
         </v-row>
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index 7fb962d0..e15e46ee 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -17,7 +17,7 @@
                             ></SubjectsHeaderContainer>
                         </v-col>
                     </v-row>
-                    <v-row class="body">
+                    <v-row>
                         <div v-if="filteredSubjectsByAcademicYear.length === 0" class="no-results">
                             <h1>{{ $t("subjects.no_subjects") }}</h1>
                         </div>
@@ -137,14 +137,4 @@ const onAcademicYearChanged = (academicYear: number) => {
 .no-results {
     text-align: center;
 }
-
-.body {
-    max-height: 62vh;
-    overflow-y: auto;
-    scrollbar-width: none;
-}
-
-.body::-webkit-scrollbar {
-    width: 0;
-}
 </style>

From 850b2c01f1c6a021a40f5f2306929bbaee96cb55 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 20 May 2024 12:59:04 +0200
Subject: [PATCH 30/39] linter format

---
 .../subject/subjectsview/header/SubjectsHeaderCard.vue   | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
index c70bb20e..bf05ca66 100644
--- a/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
+++ b/frontend/src/components/subject/subjectsview/header/SubjectsHeaderCard.vue
@@ -7,7 +7,7 @@
                 </v-card-title>
 
                 <v-card-text>
-                    <div class="chip_container">
+                    <div class="chip-container">
                         <v-chip-group mandatory v-model="activeAcademicYear" column>
                             <v-chip
                                 v-for="(academicYear, index) in academicYears"
@@ -103,15 +103,10 @@ watch(activeSubjectFilter, (newVal: SubjectFilter | undefined) => {
     font-family: "Poppins", sans-serif;
 }
 
-.chip_container {
+.chip-container {
     overflow-x: auto;
 }
 
-.checkbox container {
-    display: flex;
-    justify-content: flex-end;
-}
-
 .subject-checkbox {
     margin-top: -15px;
 }

From 1d15183cf4fe8b9624246c576c3594fb8f4c3c13 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 20 May 2024 15:07:35 +0200
Subject: [PATCH 31/39] deleted bg container on create page for better
 designing patch

---
 .../body/SubjectInstructorsCard.vue           |   2 +-
 .../createSubjectView/body/UserSearchCard.vue |   2 +-
 .../header/CreateSubjectHeaderCard.vue        |   2 +-
 .../src/views/subject/CreateSubjectView.vue   | 112 +++++++++---------
 4 files changed, 57 insertions(+), 61 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
index c597cd47..b4bdcf64 100644
--- a/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/SubjectInstructorsCard.vue
@@ -37,7 +37,7 @@ defineEmits<{
 
 <style scoped>
 .title-card {
-    background-color: white;
+    background-color: var(--color-secondary);
     padding: 20px;
 }
 
diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
index a7c1af0a..3a4bce23 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue
@@ -30,7 +30,7 @@ defineEmits<{
 
 <style scoped>
 .title-card {
-    background-color: white;
+    background-color: var(--color-secondary);
     padding: 20px;
 }
 
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index cb58a3cf..fd0ab982 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -95,7 +95,7 @@ watch(checkbox, (newValue) => {
 
 <style scoped>
 .title-card {
-    background-color: white;
+    background-color: var(--color-secondary);
     padding: 20px;
 }
 
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index a6fd35ea..6087f2fe 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -3,65 +3,62 @@
         <p>{{ $t("default.something-went-wrong") }}</p>
     </div>
 
-    <v-skeleton-loader v-else :loading="isLoading" type="card">
-        <v-snackbar v-model="snackbar" :timeout="3500" color="error" top>
-            {{ $t("create_subject.error_snackbar") }}
-        </v-snackbar>
-
-        <v-dialog v-model="dialog" max-width="290" persistent>
-            <v-card>
-                <v-card-title class="headline">
-                    {{ $t("create_subject.cancel_dialog") }}
-                </v-card-title>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn color="blue darken-1" @click="dialog = false">
-                        {{ $t("default.no_capital") }}
+    <v-row v-else>
+        <v-col cols="1">
+            <v-btn variant="elevated" class="back-button" size="large" @click="dialog = true">
+                <v-icon>mdi-arrow-left</v-icon>
+            </v-btn>
+        </v-col>
+        <v-col cols="11">
+            <v-skeleton-loader :loading="isLoading" type="card" class="ma-8">
+                <v-snackbar v-model="snackbar" :timeout="3500" color="error" top>
+                    {{ $t("create_subject.error_snackbar") }}
+                </v-snackbar>
+
+                <v-dialog v-model="dialog" max-width="290" persistent>
+                    <v-card>
+                        <v-card-title class="headline">
+                            {{ $t("create_subject.cancel_dialog") }}
+                        </v-card-title>
+                        <v-card-actions>
+                            <v-spacer></v-spacer>
+                            <v-btn color="blue darken-1" @click="dialog = false">
+                                {{ $t("default.no_capital") }}
+                            </v-btn>
+                            <v-btn color="blue darken-1" @click="router.push({ name: 'subjects' })">
+                                {{ $t("default.yes_capital") }}
+                            </v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
+                <CreateSubjectHeaderContainer
+                    :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
+                    :current-user-as-instructor="currentUserAsInstructor"
+                    :is-form-error="isFormError"
+                    @update:subject-name="onSubjectNameUpdated"
+                    @update:active-academic-year="activeAcademicYear = $event"
+                    @update:current-user-as-instructor="currentUserAsInstructor = $event"
+                >
+                </CreateSubjectHeaderContainer>
+                <CreateSubjectBody
+                    :current-user="currentUser"
+                    :instructors="shownInstructors"
+                    @add-instructor="addInstructor"
+                    @remove-instructor="removeInstructor"
+                >
+                </CreateSubjectBody>
+
+                <div class="confirm-btn-container">
+                    <v-btn class="ma-2" color="grey" @click="dialog = true">
+                        {{ $t("default.cancel") }}
                     </v-btn>
-                    <v-btn color="blue darken-1" @click="router.push({ name: 'subjects' })">
-                        {{ $t("default.yes_capital") }}
+                    <v-btn class="ma-2" @click="handleSubmit" color="primary" type="submit">
+                        {{ $t("default.confirm") }}
                     </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-
-        <v-row>
-            <v-col cols="1">
-                <v-btn variant="elevated" class="back-button" size="large" @click="dialog = true">
-                    <v-icon>mdi-arrow-left</v-icon>
-                </v-btn>
-            </v-col>
-            <v-col cols="11">
-                <background-container>
-                    <CreateSubjectHeaderContainer
-                        :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
-                        :current-user-as-instructor="currentUserAsInstructor"
-                        :is-form-error="isFormError"
-                        @update:subject-name="onSubjectNameUpdated"
-                        @update:active-academic-year="activeAcademicYear = $event"
-                        @update:current-user-as-instructor="currentUserAsInstructor = $event"
-                    >
-                    </CreateSubjectHeaderContainer>
-                    <CreateSubjectBody
-                        :current-user="currentUser"
-                        :instructors="shownInstructors"
-                        @add-instructor="addInstructor"
-                        @remove-instructor="removeInstructor"
-                    >
-                    </CreateSubjectBody>
-
-                    <div class="confirm-btn-container">
-                        <v-btn class="ma-2" color="grey" @click="dialog = true">
-                            {{ $t("default.cancel") }}
-                        </v-btn>
-                        <v-btn class="ma-2" @click="handleSubmit" color="primary" type="submit">
-                            {{ $t("default.confirm") }}
-                        </v-btn>
-                    </div>
-                </background-container>
-            </v-col>
-        </v-row>
-    </v-skeleton-loader>
+                </div>
+            </v-skeleton-loader>
+        </v-col>
+    </v-row>
 </template>
 
 <script setup lang="ts">
@@ -71,7 +68,6 @@ import { useCreateSubjectInstructorMutation, useCreateSubjectMutation } from "@/
 import type SubjectForm from "@/models/Subject";
 import type User from "@/models/User";
 import { useCurrentUserQuery } from "@/queries/User";
-import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import CreateSubjectHeaderContainer from "@/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue";
 import CreateSubjectBody from "@/components/subject/createSubjectView/body/CreateSubjectBody.vue";
 import { useRouter } from "vue-router";

From 76d4d50d2f84d1b6f5018b3c4da6a3c590c84bb9 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Mon, 20 May 2024 15:21:35 +0200
Subject: [PATCH 32/39] last changes on create subject

---
 .../body/CreateSubjectBody.vue                |  6 +--
 .../src/views/subject/CreateSubjectView.vue   | 41 +++++++++++--------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
index a2790fa7..16f3e330 100644
--- a/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
+++ b/frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue
@@ -32,8 +32,4 @@ defineEmits<{
 }>();
 </script>
 
-<style scoped>
-.body {
-    height: 53vh;
-}
-</style>
+<style scoped></style>
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 6087f2fe..60b8b177 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -31,22 +31,24 @@
                         </v-card-actions>
                     </v-card>
                 </v-dialog>
-                <CreateSubjectHeaderContainer
-                    :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
-                    :current-user-as-instructor="currentUserAsInstructor"
-                    :is-form-error="isFormError"
-                    @update:subject-name="onSubjectNameUpdated"
-                    @update:active-academic-year="activeAcademicYear = $event"
-                    @update:current-user-as-instructor="currentUserAsInstructor = $event"
-                >
-                </CreateSubjectHeaderContainer>
-                <CreateSubjectBody
-                    :current-user="currentUser"
-                    :instructors="shownInstructors"
-                    @add-instructor="addInstructor"
-                    @remove-instructor="removeInstructor"
-                >
-                </CreateSubjectBody>
+                <div class="flex-container">
+                    <CreateSubjectHeaderContainer
+                        :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
+                        :current-user-as-instructor="currentUserAsInstructor"
+                        :is-form-error="isFormError"
+                        @update:subject-name="onSubjectNameUpdated"
+                        @update:active-academic-year="activeAcademicYear = $event"
+                        @update:current-user-as-instructor="currentUserAsInstructor = $event"
+                    >
+                    </CreateSubjectHeaderContainer>
+                    <CreateSubjectBody
+                        :current-user="currentUser"
+                        :instructors="shownInstructors"
+                        @add-instructor="addInstructor"
+                        @remove-instructor="removeInstructor"
+                    >
+                    </CreateSubjectBody>
+                </div>
 
                 <div class="confirm-btn-container">
                     <v-btn class="ma-2" color="grey" @click="dialog = true">
@@ -177,4 +179,11 @@ async function handleSubmit() {
 .back-button {
     margin: 30px;
 }
+
+.flex-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+}
 </style>

From 5004b368cfd7531df48d5e272088d5ce2630323a Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 21 May 2024 06:27:38 +0200
Subject: [PATCH 33/39] email and email rules

---
 .../header/CreateSubjectHeaderCard.vue        | 25 +++++++++++++++----
 frontend/src/i18n/locales/en.ts               |  5 ++++
 frontend/src/i18n/locales/nl.ts               |  4 +++
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index fd0ab982..c359786f 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-card variant="text" class="title-card" width="100%" height="35vh">
+    <v-card variant="text" class="title-card" width="100%" height="45vh">
         <v-card-title class="title">
             {{ $t("create_subject.new_subject") }}
         </v-card-title>
@@ -12,7 +12,6 @@
                 required
                 variant="outlined"
                 :placeholder="$t('create_subject.enter_title')"
-                :hint="$t('create_subject.enter_title_hint')"
                 clearable
                 hide-details="auto"
                 @keydown.enter.prevent
@@ -38,9 +37,24 @@
                         :label="$t('create_subject.assign_self')"
                         v-model="checkbox"
                         color="primary"
+                        class="checkbox"
                     ></v-checkbox>
                 </v-col>
             </v-row>
+            <v-text-field
+                v-model="subjectMail"
+                type="email"
+                variant="outlined"
+                :rules="[rules.email]"
+                :label="$t('create_subject.email')"
+                clearable
+                :placeholder="$t('create_subject.enter_email')"
+                :hint="$t('create_subject.email_hint')"
+                hide-details="auto"
+                @keydown.enter.prevent
+                class="form-elem"
+            >
+            </v-text-field>
         </v-card-text>
     </v-card>
 </template>
@@ -66,12 +80,14 @@ watch(currentUserAsInstructor, (newValue) => {
 });
 
 const subjectName = ref("");
+const subjectMail = ref("");
 const activeAcademicYear = ref<number>(useAcademicYear());
 
 const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
 const rules = {
     required: (value: string) => !!value || t("create_subject.field_required"),
     length: (value: string) => value.length > 2 || t("create_subject.field_length"),
+    email: (value: string) => !value || /.+@.+\..+/.test(value) || t("create_subject.email_invalid"),
 };
 
 const emit = defineEmits<{
@@ -101,19 +117,18 @@ watch(checkbox, (newValue) => {
 
 .form-elem {
     margin-bottom: 2vh;
+    margin-top: -3vh;
 }
 
 .form-elem-academic {
-    margin-bottom: 2vh;
     max-width: 20vw;
 }
-
 .title {
     font-size: 32px;
     letter-spacing: -0.5px;
     text-transform: capitalize;
     font-weight: bold;
-    margin-bottom: 12px;
+    margin-bottom: 4vh;
     font-family: "Poppins", sans-serif;
 }
 </style>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 344a2e6e..bd41289d 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -149,6 +149,11 @@ export default {
         field_length: "Title must be at least 3 characters long",
         subject_instructors: "Subject instructors",
         search_for_instructors: "Search for instructors",
+        email: "Subject email",
+        enter_email: "Enter email",
+        email_hint: "Field is optional",
+        email_invalid: "Provided email is invalid",
+
     },
 
     group: {
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 966409fb..d7562635 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -151,6 +151,10 @@ export default {
         field_length: "Titel moet minstens 3 tekens lang zijn",
         subject_instructors: "Vak verantwoordelijken",
         search_for_instructors: "Zoek naar vak verantwoordelijken",
+        email: "Vak email",
+        enter_email: "Voer email in",
+        email_hint: "Veld is optioneel",
+        email_invalid: "Ingevoerde email is ongeldig",
     },
 
     group: {

From 63dcdfff1a337f5b15c21269bf4955779af2bdba Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 21 May 2024 06:28:46 +0200
Subject: [PATCH 34/39] added watcher

---
 .../createSubjectView/header/CreateSubjectHeaderCard.vue     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index c359786f..07d87398 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -94,6 +94,7 @@ const emit = defineEmits<{
     (e: "update:current-user-as-instructor", value: boolean): void;
     (e: "update:subject-name", value: string): void;
     (e: "update:active-academic-year", value: number): void;
+    (e: "update:subject-mail", value: string): void;
 }>();
 
 watch(subjectName, (newValue) => {
@@ -107,6 +108,10 @@ watch(activeAcademicYear, (newValue) => {
 watch(checkbox, (newValue) => {
     emit("update:current-user-as-instructor", newValue);
 });
+
+watch(subjectMail, (newValue) => {
+    emit("update:subject-mail", newValue);
+});
 </script>
 
 <style scoped>

From a436136c945403e154a525107a7a05778e277bc8 Mon Sep 17 00:00:00 2001
From: Bram Reyniers <bram.reyniers@ugent.be>
Date: Tue, 21 May 2024 10:18:30 +0200
Subject: [PATCH 35/39] update mutations for create subject

---
 frontend/src/queries/Subject.ts               | 48 +++++++++++--------
 .../src/views/subject/CreateSubjectView.vue   | 13 +++--
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index c7c9a3c4..70f330d3 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -44,14 +44,6 @@ function SUBJECT_UUID_QUERY_KEY(subjectId: number): (string | number)[] {
     return ["subject", "uuid", subjectId];
 }
 
-function CREATE_SUBJECT_QUERY_KEY(): string[] {
-    return ["create", "subject"];
-}
-
-function CREATE_SUBJECT_INSTRUCTOR_QUERY_KEY(subjectId: number): (string | number)[] {
-    return ["create", "subject", "instructor", subjectId];
-}
-
 /**
  * Query composable for fetching a subject by id
  */
@@ -153,8 +145,7 @@ export function useRegisterToSubjectMutation(): UseMutationReturnType<
         onSettled: () => {
             queryClient.invalidateQueries({ queryKey: SUBJECTS_QUERY_KEY() });
         },
-        onError: (error) => {
-            console.error(error);
+        onError: () => {
             alert("Failed to register to subject");
         },
     });
@@ -173,10 +164,9 @@ export function useCreateSubjectMutation(): UseMutationReturnType<
     return useMutation<number, Error, SubjectForm, void>({
         mutationFn: createSubject,
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: CREATE_SUBJECT_QUERY_KEY() });
+            queryClient.invalidateQueries({ queryKey: SUBJECTS_QUERY_KEY() });
         },
-        onError: (error) => {
-            console.error("Subject creation failed", error);
+        onError: () => {
             alert("Could not create subject. Please try again.");
         },
     });
@@ -186,19 +176,35 @@ export function useCreateSubjectMutation(): UseMutationReturnType<
  * Mutation composable for creating subject instructor
  */
 
-export function useCreateSubjectInstructorMutation(
-    subjectId: MaybeRefOrGetter<number | undefined>
-): UseMutationReturnType<void, Error, string, void> {
+export function useCreateSubjectInstructorMutation(): UseMutationReturnType<
+    void,
+    Error,
+    { user: User; subjectId: number },
+    { previousUsers: User[] }
+> {
     const queryClient = useQueryClient();
     return useMutation({
-        mutationFn: (user_id) => createSubjectInstructor(toValue(subjectId)!, user_id),
-        onSuccess: () => {
+        mutationFn: ({ user, subjectId }) => createSubjectInstructor(subjectId, user.uid),
+        onMutate: ({ subjectId, user }) => {
+            const previousUsers = queryClient.getQueryData<User[]>(
+                SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId)
+            );
+            queryClient.cancelQueries({ queryKey: SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId) });
+            const newUsers = previousUsers ? [...previousUsers] : [];
+            newUsers.push(user);
+            queryClient.setQueryData(SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId), newUsers);
+            return { previousUsers: previousUsers || [] };
+        },
+        onSuccess: (_, { subjectId }) => {
             queryClient.invalidateQueries({
-                queryKey: CREATE_SUBJECT_INSTRUCTOR_QUERY_KEY(toValue(subjectId)!),
+                queryKey: SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId),
             });
         },
-        onError: (error) => {
-            console.error("Subject instructor creation failed", error);
+        onError: (_, { subjectId }, ctx) => {
+            queryClient.setQueryData<User[]>(
+                SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId),
+                () => ctx!.previousUsers!
+            );
             alert("Could not create subject instructor. Please try again.");
         },
     });
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 60b8b177..24ba3e30 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -85,9 +85,7 @@ const subjectId = ref<number | undefined>(undefined);
 
 const { data: currentUser, isLoading, isError } = useCurrentUserQuery();
 const createSubjectMutation = useCreateSubjectMutation();
-const createSubjectInstructorMutation = useCreateSubjectInstructorMutation(
-    computed(() => subjectId.value)
-);
+const createSubjectInstructorMutation = useCreateSubjectInstructorMutation();
 
 const router = useRouter();
 
@@ -152,12 +150,13 @@ async function handleSubmit() {
         academic_year: activeAcademicYear.value,
     };
 
-    const instructorIds = shownInstructors.value.map((instructor) => instructor.uid);
-
     try {
         subjectId.value = await createSubjectMutation.mutateAsync(subjectData);
-        for (const instructor of instructorIds) {
-            await createSubjectInstructorMutation.mutateAsync(instructor);
+        for (let instructor of shownInstructors.value!) {
+            await createSubjectInstructorMutation.mutateAsync({
+                user: instructor!,
+                subjectId: subjectId.value!,
+            });
         }
 
         await router.push({ name: "subject", params: { subjectId: subjectId.value } });

From 3f8443ee349922dd25e45b41a9327639db2256c5 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 21 May 2024 06:35:25 +0200
Subject: [PATCH 36/39] added emits

---
 .../header/CreateSubjectHeaderContainer.vue   |  3 +++
 .../header/CreateSubjectHeaderImage.vue       |  2 +-
 .../src/views/subject/CreateSubjectView.vue   | 20 +++++++++++++++----
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
index 427e43ca..16679c73 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
@@ -9,6 +9,7 @@
                 :is-form-error="isFormError"
                 @update:subject-name="$emit('update:subject-name', $event)"
                 @update:active-academic-year="$emit('update:active-academic-year', $event)"
+                @update:subject-mail="$emit('update:subject-mail', $event)"
                 @update:current-user-as-instructor="
                     $emit('update:current-user-as-instructor', $event)
                 "
@@ -31,7 +32,9 @@ defineProps<{
 defineEmits<{
     (e: "update:current-user-as-instructor", value: boolean): void;
     (e: "update:subject-name", value: string): void;
+    (e: "update:subject-mail", value: string): void;
     (e: "update:active-academic-year", value: number): void;
+
 }>();
 </script>
 
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue
index 9274cb44..53f4dad8 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue
@@ -10,6 +10,6 @@ defineProps<{
 
 <style scoped>
 .header-img {
-    height: 35vh;
+    height: 45vh;
 }
 </style>
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 24ba3e30..1dfc6692 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -35,9 +35,10 @@
                     <CreateSubjectHeaderContainer
                         :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
                         :current-user-as-instructor="currentUserAsInstructor"
-                        :is-form-error="isFormError"
+                        :is-form-error="isSubjectNameError"
                         @update:subject-name="onSubjectNameUpdated"
                         @update:active-academic-year="activeAcademicYear = $event"
+                        @update:subject-mail="subjectMail = $event"
                         @update:current-user-as-instructor="currentUserAsInstructor = $event"
                     >
                     </CreateSubjectHeaderContainer>
@@ -76,8 +77,10 @@ import { useRouter } from "vue-router";
 
 const snackbar = ref(false);
 const dialog = ref(false);
-const isFormError = ref(false);
+const isSubjectNameError = ref(false);
+const isSubjectMailError = ref(false);
 const subjectName = ref("");
+const subjectMail = ref("");
 const activeAcademicYear = ref<number>(useAcademicYear());
 const instructors = ref<User[]>([]);
 const currentUserAsInstructor = ref(true);
@@ -119,13 +122,17 @@ const removeInstructor = (instructor: User) => {
 
 const onSubjectNameUpdated = (name: string) => {
     subjectName.value = name;
-    isFormError.value = false;
+    isSubjectNameError.value = false;
 };
 
 const validateSubjectName = () => {
     return !(!subjectName.value || subjectName.value.trim().length < 3);
 };
 
+const validateSubjectMail = () => {
+    return !subjectMail.value || /.+@.+\..+/.test(subjectMail.value);
+};
+
 const validateInstructors = () => {
     return (
         shownInstructors.value.length > 0 &&
@@ -135,7 +142,12 @@ const validateInstructors = () => {
 
 async function handleSubmit() {
     if (!validateSubjectName()) {
-        isFormError.value = true;
+        isSubjectNameError.value = true;
+        return;
+    }
+
+    if (!validateSubjectMail()) {
+        isSubjectMailError.value = true;
         return;
     }
 

From dcd64605a04add441b20e850fe9ee7e383b780a6 Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 21 May 2024 06:44:28 +0200
Subject: [PATCH 37/39] post mail fully functional

---
 .../header/CreateSubjectHeaderCard.vue                |  6 ++++--
 .../header/CreateSubjectHeaderContainer.vue           |  6 ++++--
 frontend/src/views/subject/CreateSubjectView.vue      | 11 +++++++++--
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index 07d87398..9ca54c42 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -15,7 +15,7 @@
                 clearable
                 hide-details="auto"
                 @keydown.enter.prevent
-                :error="isFormError"
+                :error="isSubjectNameError"
                 class="form-elem"
             ></v-text-field>
 
@@ -52,6 +52,7 @@
                 :hint="$t('create_subject.email_hint')"
                 hide-details="auto"
                 @keydown.enter.prevent
+                :error="isSubjectMailError"
                 class="form-elem"
             >
             </v-text-field>
@@ -68,7 +69,8 @@ const { t } = useI18n();
 
 const props = defineProps<{
     currentUserAsInstructor: boolean;
-    isFormError: boolean;
+    isSubjectNameError: boolean;
+    isSubjectMailError: boolean;
 }>();
 
 const { currentUserAsInstructor } = toRefs(props);
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
index 16679c73..f82878d1 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
@@ -6,7 +6,8 @@
         <v-col cols="8">
             <CreateSubjectHeaderCard
                 :current-user-as-instructor="currentUserAsInstructor"
-                :is-form-error="isFormError"
+                :is-subject-name-error="isSubjectNameError"
+                :is-subject-mail-error="isSubjectMailError"
                 @update:subject-name="$emit('update:subject-name', $event)"
                 @update:active-academic-year="$emit('update:active-academic-year', $event)"
                 @update:subject-mail="$emit('update:subject-mail', $event)"
@@ -26,7 +27,8 @@ import CreateSubjectHeaderImage from "@/components/subject/createSubjectView/hea
 defineProps<{
     imagePath: string;
     currentUserAsInstructor: boolean;
-    isFormError: boolean;
+    isSubjectNameError: boolean;
+    isSubjectMailError: boolean;
 }>();
 
 defineEmits<{
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 1dfc6692..67ca426c 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -35,10 +35,11 @@
                     <CreateSubjectHeaderContainer
                         :image-path="`https://www.ugent.be/img/dcom/faciliteiten/ufo-logo.png`"
                         :current-user-as-instructor="currentUserAsInstructor"
-                        :is-form-error="isSubjectNameError"
+                        :is-subject-name-error="isSubjectNameError"
+                        :is-subject-mail-error="isSubjectMailError"
                         @update:subject-name="onSubjectNameUpdated"
                         @update:active-academic-year="activeAcademicYear = $event"
-                        @update:subject-mail="subjectMail = $event"
+                        @update:subject-mail="onSubjectMailUpdated"
                         @update:current-user-as-instructor="currentUserAsInstructor = $event"
                     >
                     </CreateSubjectHeaderContainer>
@@ -125,6 +126,11 @@ const onSubjectNameUpdated = (name: string) => {
     isSubjectNameError.value = false;
 };
 
+const onSubjectMailUpdated = (mail: string) => {
+    subjectMail.value = mail;
+    isSubjectMailError.value = false;
+};
+
 const validateSubjectName = () => {
     return !(!subjectName.value || subjectName.value.trim().length < 3);
 };
@@ -159,6 +165,7 @@ async function handleSubmit() {
     const name = subjectName.value.trim();
     const subjectData: SubjectForm = {
         name: name.charAt(0).toUpperCase() + name.slice(1),
+        email: subjectMail.value,
         academic_year: activeAcademicYear.value,
     };
 

From 349ffd68e34e561d41f9e4f1798584cbd1cb75dc Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 21 May 2024 07:02:21 +0200
Subject: [PATCH 38/39] removed on search loaded

---
 .../subject/createSubjectView/body/UserSearchList.vue    | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
index 7f3bdbd7..0a75b6d7 100644
--- a/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
+++ b/frontend/src/components/subject/createSubjectView/body/UserSearchList.vue
@@ -13,7 +13,7 @@
         @keydown.enter="onSearchIconClicked"
     ></v-text-field>
 
-    <div v-show="searchLoaded" class="scrollable-list">
+    <div class="scrollable-list">
         <p v-if="shownUsers.length === 0">No results found</p>
         <v-list v-else>
             <v-list-item v-for="(user, index) in shownUsers" :key="index">
@@ -55,9 +55,8 @@ const { data: users } = useUsersQuery();
 const search = ref("");
 const searchLoading = ref(false);
 const searchLoaded = ref(false);
-const shownUsers = ref([]);
 
-const filteredUsers = computed(() => {
+const shownUsers = computed(() => {
     if (!search.value) {
         return [];
     }
@@ -72,8 +71,7 @@ const filteredUsers = computed(() => {
                     .toLowerCase()
                     .includes(search.value.toLowerCase())
             );
-        })
-        .slice(0, 5);
+        });
 });
 
 defineEmits<{
@@ -85,7 +83,6 @@ const onSearchIconClicked = () => {
     setTimeout(() => {
         searchLoaded.value = true;
         searchLoading.value = false;
-        shownUsers.value = filteredUsers.value;
     }, 1000);
 };
 

From 3768703e5093bb73de4447378b442ba0a49138ff Mon Sep 17 00:00:00 2001
From: mattiscauwel <mattiscauwel@gmail.com>
Date: Tue, 21 May 2024 07:02:58 +0200
Subject: [PATCH 39/39] format linter

---
 .../createSubjectView/header/CreateSubjectHeaderCard.vue       | 3 ++-
 .../createSubjectView/header/CreateSubjectHeaderContainer.vue  | 1 -
 frontend/src/i18n/locales/en.ts                                | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
index 9ca54c42..0e7a2676 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue
@@ -89,7 +89,8 @@ const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value +
 const rules = {
     required: (value: string) => !!value || t("create_subject.field_required"),
     length: (value: string) => value.length > 2 || t("create_subject.field_length"),
-    email: (value: string) => !value || /.+@.+\..+/.test(value) || t("create_subject.email_invalid"),
+    email: (value: string) =>
+        !value || /.+@.+\..+/.test(value) || t("create_subject.email_invalid"),
 };
 
 const emit = defineEmits<{
diff --git a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
index f82878d1..d149c68b 100644
--- a/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
+++ b/frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue
@@ -36,7 +36,6 @@ defineEmits<{
     (e: "update:subject-name", value: string): void;
     (e: "update:subject-mail", value: string): void;
     (e: "update:active-academic-year", value: number): void;
-
 }>();
 </script>
 
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index bd41289d..51a64844 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -153,7 +153,6 @@ export default {
         enter_email: "Enter email",
         email_hint: "Field is optional",
         email_invalid: "Provided email is invalid",
-
     },
 
     group: {