Submissions teacher testen

frontend/src/components/project/ProjectInfo.vue

@@ -28,11 +28,6 @@
                 </v-card-title>
                 <div v-html="renderQuillContent(project.description)"></div>
             </v-card-item>
-            <v-card-actions>
-                <v-btn v-if="isTeacher" :to="`/project/${project.id}/submissions`">
-                    {{ $t("project.submissions_list_teacher") }}
-                </v-btn>
-            </v-card-actions>
         </v-card>
         <SubmitInfo class="submitInfo" v-if="group" :project="project" :group="group" />
     </v-container>
@@ -57,7 +52,7 @@
 
 const { project, group, instructors, subject, user } = toRefs(props);
 
 const isTeacher = computed(
     () =>
         user.value.is_teacher ||
         user.value.is_admin ||

frontend/src/components/submission/SubmissionTeacherCard.vue

@@ -3,11 +3,9 @@
         <v-card-title>
             {{ $t("project.group", { number: submission.group_id }) }}
         </v-card-title>
-
         <SubmissionCard class="ma-3" :submission="submission" :deadline="deadline" />
-
         <v-card-actions>
-            <v-btn :to="`/groups/${submission.group_id}`">
+            <v-btn :to="`/groups/${submission.group_id}`" class="button">
                 {{ $t("project.submissions_list") }}
             </v-btn>
         </v-card-actions>
@@ -32,6 +30,12 @@ const { submission } = toRefs(props);
 }
 
 .parent-card {
+    background-color: rgb(var(--v-theme-background));
+    padding: 10px;
+    width: 100%;
+}
+
+.button {
     background-color: rgb(var(--v-theme-secondary));
 }
 </style>

frontend/src/i18n/locales/en.ts

@@ -60,7 +60,7 @@ export default {
         myProject: "My projects",
         capacity_group: "Capacity: ",
         edit: "Edit project",
-        submissions_list: "All submissions",
+        submissions_list: "All submissions from this group",
         submissions_list_teacher: "All submissions for this project",
         submissions_zip: "Download all submissions",
         not_found: "No projects found.",

frontend/src/i18n/locales/nl.ts

@@ -60,7 +60,7 @@ export default {
         myProject: "Mijn projecten",
         capacity_group: "Capaciteit: ",
         edit: "Bewerk project",
-        submissions_list: "Alle indieningen",
+        submissions_list: "Alle indieningen van deze groep",
         submissions_list_teacher: "Alle indieningen voor dit project",
         submissions_zip: "Download alle indieningen",
         not_found: "Geen projecten teruggevonden.",

frontend/src/router/index.ts

@@ -106,12 +106,6 @@ const router = createRouter({
             component: () => import("../views/SubjectRegisterView.vue"),
             props: (route) => ({ uuid: String(route.params.uuid) }),
         },
-        {
-            path: "/submissions/:submissionId(\\d+)",
-            name: "submission",
-            component: () => import("../views/SubmissionView.vue"),
-            props: (route) => ({ submissionId: Number(route.params.submissionId) }),
-        },
         {
             path: "/settings",
             name: "settings",

frontend/src/views/ProjectView.vue

@@ -14,6 +14,14 @@
                         :subject="subject!"
                         :user="user!"
                     />
+                    <v-btn
+                        v-if="isTeacher"
+                        :to="`/project/${project.id}/submissions`"
+                        class="allsubmissions"
+                        variant="flat"
+                    >
+                        {{ $t("project.submissions_list_teacher") }}
+                    </v-btn>
                 </v-col>
                 <v-col cols="2" class="button-container">
                     <ProjectSideBar
@@ -87,11 +95,24 @@ const isDataError = computed(
         isSubjectError.value ||
         isUserError.value
 );
+
+const isTeacher = computed(
+    () =>
+        user.value.is_teacher ||
+        user.value.is_admin ||
+        instructors.value?.some((element) => element.uid == user.value.uid)
+);
 </script>
 
 <style scoped>
 .button-container {
     margin-top: 20px;
     min-width: 170px;
 }
+
+.allsubmissions {
+    margin: 15px;
+    background-color: rgb(var(--v-theme-primary));
+    color: rgb(var(--v-theme-navtext));
+}
 </style>

frontend/src/views/SubmissionsTeacherView.vue

@@ -1,30 +1,44 @@
 <template>
     <v-container>
         <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
-        <v-skeleton-loader v-else :loading="projectLoading || submissionsLoading" type="card">
-            <v-col class="mx-auto">
-                <h1>{{ $t("submission.submissions_title", { project: project.name }) }}</h1>
-
-                <v-btn class="primary-button" @click="downloadAll" prepend-icon="mdi-download">
-                    {{ $t("project.submissions_zip") }}
-                </v-btn>
-
-                <v-alert v-if="submissions.length == 0" icon="$warning" color="warning">
-                    {{ $t("submission.no_submissions") }}</v-alert
+        <v-row v-else>
+            <v-col class="col-sm-12 col-md-6 col-lg-8">
+                <v-skeleton-loader
+                    :loading="projectLoading || submissionsLoading"
+                    type="card"
+                    class="card"
                 >
-                <v-alert v-else icon="$info" color="info" closable>
-                    {{ $t("submission.teacher_submissions_info") }}</v-alert
-                >
-
-                <SubmissionTeacherCard
-                    class="ma-3"
-                    v-for="submission in submissions"
-                    :key="submission"
-                    :submission="submission"
-                    :deadline="project.deadline"
-                />
+                    <v-card-title class="title">{{
+                        $t("submission.submissions_title", { project: project.name })
+                    }}</v-card-title>
+                    <v-card-subtitle v-if="submissions.length == 0" class="subtitle">{{
+                        $t("submission.no_submissions")
+                    }}</v-card-subtitle>
+                    <div v-else>
+                        <v-card-subtitle class="subtitle">{{
+                            $t("submission.teacher_submissions_info")
+                        }}</v-card-subtitle>
+                        <v-btn
+                            class="primary-button"
+                            @click="downloadAll"
+                            prepend-icon="mdi-download"
+                        >
+                            {{ $t("project.submissions_zip") }}
+                        </v-btn>
+                    </div>
+                    <SubmissionTeacherCard
+                        class="ma-3"
+                        v-for="submission in submissions"
+                        :key="submission"
+                        :submission="submission"
+                        :deadline="project.deadline"
+                    />
+                </v-skeleton-loader>
             </v-col>
-        </v-skeleton-loader>
+            <v-col cols="2" class="backbutton">
+                <BackButton title="project.to_project" :destination="`/project/${projectId}`" />
+            </v-col>
+        </v-row>
     </v-container>
 </template>
 
@@ -33,6 +47,7 @@ import { useProjectQuery } from "@/queries/Project";
 import { useProjectSubmissionsQuery } from "@/queries/Submission";
 import { toRefs } from "vue";
 import SubmissionTeacherCard from "@/components/submission/SubmissionTeacherCard.vue";
+import BackButton from "@/components/buttons/BackButton.vue";
 import { download_file } from "@/utils";
 
 const props = defineProps<{
@@ -61,4 +76,23 @@ const downloadAll = () => {
     background-color: rgb(var(--v-theme-primary));
     color: rgb(var(--v-theme-navtext));
 }
+
+.card {
+    background-color: rgb(var(--v-theme-secondary));
+    margin-top: 25px;
+    padding: 15px;
+}
+
+.title,
+.subtitle {
+    width: 100%;
+}
+
+.backbutton {
+    margin-top: 30px;
+}
+
+.primary-button {
+    margin: 15px;
+}
 </style>

frontend/tests/components/project/ProjectInfo.spec.ts

@@ -1,10 +1,30 @@
 import {mount} from "@vue/test-utils";
 import {expect, describe, it, vi} from "vitest";
 import ProjectInfo from "@/components/project/ProjectInfo.vue"
+import {ref} from "vue";
+
+const mockRouter = {
+    push: vi.fn(),
+};
+
+vi.mock("vue-router", () => ({
+    useRouter: () => mockRouter,
+}));
+
+const testAuthStore = {
+    isLoggedIn: ref(true),
+    setLoggedIn(value) {
+        this.isLoggedIn.value = value;
+    },
+};
+
+vi.mock("@/stores/auth-store", () => ({
+    useAuthStore: vi.fn(() => testAuthStore),
+}));
 
 const mockProject = {
     name: "projectname",
-    deadline: new Date(),
+    deadline: new Date(2024, 5, 31),
     id: 1,
     description: "this is a testassignment",
     capacity: 2
@@ -14,9 +34,8 @@ const mockInstructors = [
     {uid: "1", given_name: "instructor 1", surname: "Doe", is_admin: false, is_teacher: false}
 ]
 
-const mockUser = [
-    {uid: "2", given_name: "user 2", surname: "Doe 2", is_admin: false, is_teacher: false}
-]
+const mockUser = {uid: "2", given_name: "user 2", surname: "Doe 2", is_admin: false, is_teacher: false}
+
 
 const mockSubject = {
     name: "subjectname"

frontend/tests/views/ProjectView.spec.ts

@@ -11,7 +11,8 @@ const testProjectQuery = {
     },
     setIsLoading(value){
         this.isLoading.value = value;
-    }
+    },
+    data: ref({id: 1})
 };
 
 vi.mock('@/queries/Project', () => ({
@@ -52,10 +53,15 @@ const testSubjectInstructorsQuery = {
     },
     setIsLoading(value){
         this.isLoading.value = value;
-    }
+    },
+    data: ref([{uid: "instructor"}])
 };
 
 const testCurrentUserQuery = {
+    data: ref({id: 1, is_teacher: false, is_admin: false, uid: "student"}),
+    setTeacher(value){
+        this.data.value.is_teacher = value
+    },
     isLoading: ref(true),
     isError: ref(true),
     setIsError(value){
@@ -66,7 +72,6 @@ const testCurrentUserQuery = {
     }
 };
 
-
 vi.mock('@/queries/User', () => ({
     useCurrentUserQuery: vi.fn(() => testCurrentUserQuery),
 }));
@@ -136,4 +141,9 @@ describe("ProjectView", async () => {
         expect(wrapper.findComponent('.projectInfoComponent').exists()).toBeTruthy()
         expect(wrapper.findComponent('.projectSideBar').exists()).toBeTruthy()
     })
+    it("render if teacher", async () => {
+        testCurrentUserQuery.setTeacher(true)
+        await wrapper.vm.$nextTick()
+        expect(wrapper.text()).toContain("Alle indieningen voor dit project")
+    })
 });

frontend/tests/views/SubmissionsTeacherView.spec.ts

@@ -0,0 +1,60 @@
+import { mount } from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import SubmissionsTeacherView from "../../src/views/SubmissionsTeacherView.vue"
+import {ref} from "vue";
+
+const testProjectSubmissionsQuery = {
+    data: ref([{id: 1}]),
+    isLoading: ref(false),
+    isError: ref(true),
+    error: ref({message: "error message"}),
+    setError(value){
+        this.isError.value = value
+    },
+    setData(value){
+        this.data.value = value
+    }
+}
+
+vi.mock("@/queries/Submission", () => ({
+    useProjectSubmissionsQuery: vi.fn(() => testProjectSubmissionsQuery),
+}))
+
+const testProjectQuery = {
+    data: ref({id: 1, name: "testproject", deadline: new Date(2025, 5, 31)}),
+    isLoading: ref(false)
+}
+
+vi.mock("@/queries/Project", () => ({
+    useProjectQuery: vi.fn(() => testProjectQuery)
+}))
+
+
+describe("SubmissionsTeacherView", () => {
+    const wrapper = mount(SubmissionsTeacherView, {
+        props: {
+            projectId: 1
+        },
+        global: {
+            stubs: ['SubmissionTeacherCard', 'BackButton']
+        }
+    })
+    it("render if error", async () => {
+        expect(wrapper.text()).toContain("error message")
+        testProjectSubmissionsQuery.setError(false)
+        await wrapper.vm.$nextTick()
+    });
+    it("render if submissions", async () => {
+        const text = wrapper.text()
+        expect(text).toContain("Indieningen voor project testproject")
+        expect(text).toContain("Deze pagina bevat een lijst van de laatste indiening van elke groep voor dit project.")
+        expect(text).toContain("Download alle indieningen")
+        expect(wrapper.findComponent({name: "SubmissionTeacherCard"}).exists()).toBeTruthy()
+        expect(wrapper.findComponent({name: "BackButton"}).exists()).toBeTruthy()
+        testProjectSubmissionsQuery.setData([])
+        await wrapper.vm.$nextTick()
+    });
+    it("render if no submissions", () => {
+        expect(wrapper.text()).toContain("Nog geen indieningen")
+    });
+})