Merge pull request #260 from SELab-2/dev

FINAL RELEASE

frontend/src/components/subject/modify/body/SubjectInstructorsCard.vue

@@ -11,7 +11,7 @@
                 variant="elevated"
                 :color="instructor!.is_teacher ? `primary` : `green`"
                 @click:close="$emit('remove-instructor', instructor)"
-                class="ma-1"
+                class="ma-1 chip"
             >
                 <v-icon
                     :icon="instructor!.is_teacher ? `mdi-account-tie-outline` : `mdi-school`"
@@ -41,6 +41,10 @@ defineEmits<{
     padding: 20px;
 }
 
+.chip {
+    min-width: fit-content;
+}
+
 .card-title {
     font-size: 24px;
     text-transform: capitalize;

frontend/src/components/subject/modify/body/UserSearchCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-card variant="text" class="title-card" width="100%" height="50vh">
+    <v-card variant="text" class="title-card" width="100%" height="350px">
         <v-card-title class="card-title">
             {{ $t("create_subject.search_for_instructors") }}
         </v-card-title>

frontend/src/components/subject/modify/body/UserSearchList.vue

@@ -94,7 +94,7 @@ const userIsInstructor = (user: User) => {
 <style scoped>
 .scrollable-list {
     overflow-y: auto;
-    max-height: 30vh;
+    max-height: 200px;
     scrollbar-width: none;
 }
 

frontend/src/components/subject/modify/header/ModifySubjectHeaderCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-card variant="text" class="title-card" width="100%" height="45vh">
+    <v-card variant="text" class="title-card" width="100%" height="325">
         <v-card-title class="title">
             {{ title }}
         </v-card-title>
@@ -135,19 +135,17 @@ watch(subjectMail, (newValue) => {
 }
 
 .form-elem {
-    margin-bottom: 2vh;
-    margin-top: -3vh;
+    margin-bottom: 20px;
 }
 
 .form-elem-academic {
-    max-width: 20vw;
 }
 .title {
     font-size: 32px;
+    margin-bottom: 5px;
     letter-spacing: -0.5px;
     text-transform: capitalize;
     font-weight: bold;
-    margin-bottom: 4vh;
     font-family: "Poppins", sans-serif;
 }
 </style>

frontend/src/components/subject/modify/header/ModifySubjectHeaderImage.vue

@@ -10,6 +10,6 @@ defineProps<{
 
 <style scoped>
 .header-img {
-    height: 45vh;
+    height: 325px;
 }
 </style>

frontend/src/components/subject/subject/body/projects/SubjectProjectPage.vue

@@ -25,7 +25,7 @@
                 <h2 v-if="project.capacity > 1 && !isLoading && group !== null" class="group">
                     {{ $t("project.group", { number: group?.num }) }}
                 </h2>
-                <h2 v-else-if="!isError && project.capacity > 1" class="group">
+                <h2 v-else-if="!isError && project.capacity > 1 && !isTeacher" class="group">
                     {{ $t("project.no_group") }}
                 </h2>
                 <h2>{{ $t("subject.project.assignment") }}</h2>
@@ -72,9 +72,11 @@
 
 <script setup lang="ts">
 import type Project from "@/models/Project";
-import { ref, toRefs } from "vue";
+import { computed, ref, toRefs } from "vue";
 import { Quill } from "@vueup/vue-quill";
 import { useProjectGroupQuery } from "@/queries/Group";
+import { useCurrentUserQuery } from "@/queries/User";
+import { useSubjectInstructorsQuery } from "@/queries/Subject";
 
 const props = defineProps<{
     selectedTab: number;
@@ -91,8 +93,19 @@ const renderQuillContent = (content: string) => {
     quill.root.innerHTML = content;
     return quill.root.innerHTML;
 };
-
+const { data: user } = useCurrentUserQuery();
+const { data: instructors } = useSubjectInstructorsQuery(computed(() => project.value?.subject_id));
 const { data: group, isLoading, isError } = useProjectGroupQuery(project.value.id);
+
+const isTeacher = computed(() => {
+    if (!user.value || !instructors.value) {
+        return false;
+    }
+    return (
+        user.value.is_admin ||
+        instructors.value.some((instructor) => instructor.uid === user.value.uid)
+    );
+});
 </script>
 
 <style scoped>

frontend/src/components/submission/SubmitInfo.vue

@@ -19,7 +19,7 @@
                 {{ $t("submit.new_submission") }}
             </v-btn>
             <v-btn :to="`/submissions/${group?.id}`">
-                {{ $t("project.submissions_list") }}
+                {{ $t("project.submissions_all") }}
             </v-btn>
         </v-card-actions>
     </v-card>

frontend/src/i18n/locales/en.ts

@@ -69,6 +69,7 @@ export default {
         capacity_group: "Capacity: ",
         edit: "Edit project",
         submissions_list: "All submissions from this person/group",
+        submissions_all: "View submissions",
         submissions_list_teacher: "All submissions for this project",
         submissions_zip: "Download all submissions",
         not_found: "No projects found.",

frontend/src/i18n/locales/nl.ts

@@ -69,6 +69,7 @@ export default {
         capacity_group: "Capaciteit: ",
         edit: "Bewerk project",
         submissions_list: "Alle indieningen van deze persoon/groep",
+        submissions_all: "Indieningen bekijken",
         submissions_list_teacher: "Alle indieningen voor dit project",
         submissions_zip: "Download alle indieningen",
         not_found: "Geen projecten teruggevonden.",

frontend/src/views/ProjectsView.vue

@@ -73,4 +73,8 @@ const noProjectsFound = computed(() => filteredProjects.value.length === 0);
 .projects {
     margin: 15px;
 }
+
+.project-card {
+    margin-bottom: 10px;
+}
 </style>

frontend/src/views/subject/modify/CreateSubjectView.vue

@@ -199,6 +199,7 @@ async function handleSubmit() {
 
 .back-button {
     margin: 30px;
+    z-index: 10;
 }
 
 .flex-container {

frontend/src/views/subject/modify/PatchSubjectView.vue

@@ -5,7 +5,13 @@
 
     <v-row v-else>
         <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"
+                color="primary"
+            >
                 <v-icon>mdi-arrow-left</v-icon>
             </v-btn>
         </v-col>
@@ -63,7 +69,6 @@
                     >
                     </ModifySubjectBody>
                 </div>
-
                 <div class="confirm-btn-container">
                     <v-btn class="ma-2" color="grey" @click="dialog = true">
                         {{ $t("default.cancel") }}
@@ -293,15 +298,12 @@ async function handleSubmit() {
 
 <style scoped>
 .confirm-btn-container {
-    display: flex;
-    position: absolute;
-    right: 4vw;
-    bottom: 4vw;
-    margin-top: 2vh;
+    margin-top: 10px;
 }
 
 .back-button {
     margin: 30px;
+    z-index: 10;
 }
 
 .flex-container {

frontend/tests/components/submission/SubmitInfo.spec.ts

@@ -67,7 +67,7 @@ describe("SubmitInfo", async () => {
         expect(text).toContain("Laatste indiening:")
         expect(text).toContain("Indiening is: Accepted")
         expect(text).toContain("Nieuwe indiening")
-        expect(text).toContain("Alle indieningen")
+        expect(text).toContain("Indieningen bekijken")
     });
     it("render submit info without submission", () => {
         const wrapper = mount(SubmitInfo, {
@@ -85,6 +85,6 @@ describe("SubmitInfo", async () => {
         expect(text).toContain("Indieningszone")
         expect(text).toContain("Geen indieningen gevonden.")
         expect(text).toContain("Nieuwe indiening")
-        expect(text).toContain("Alle indieningen")
+        expect(text).toContain("Indieningen bekijken")
     })
 });