From 251dd11fb5d15ffac5ce6a1c1cd12648c308027d Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Mon, 13 May 2024 18:28:51 +0200
Subject: [PATCH 1/2] projectspage theme and layout

---
 frontend/src/i18n/locales/en.ts     |  5 +--
 frontend/src/i18n/locales/nl.ts     |  5 +--
 frontend/src/views/ProjectsView.vue | 62 ++++++++++++++---------------
 3 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 00c67a1f..db589684 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -52,13 +52,12 @@ export default {
         needhelp_button: "Need help",
         group: "Group {number}",
         assignment: "Assignment:",
-        myProject: "My projects:",
+        myProject: "My projects",
         capacity_group: "Capacity: ",
         edit: "Edit project",
         submissions_list: "All submissions",
         not_found: "No projects found.",
-        archived: "Archived",
-        not_finished: "Not Finished",
+        finished: "Finished",
         not_found2: "Project not found",
         to_subject: "To subject",
     },
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 3e1143c4..38f4295d 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -52,13 +52,12 @@ export default {
         needhelp_button: "Hulp nodig",
         group: "Groep {number}",
         assignment: "Opdracht:",
-        myProject: "Mijn projecten:",
+        myProject: "Mijn projecten",
         capacity_group: "Capaciteit: ",
         edit: "Bewerk project",
         submissions_list: "Alle indieningen",
         not_found: "Geen projecten teruggevonden.",
-        archived: "Gearchiveerd",
-        not_finished: "Onafgewerkt",
+        finished: "Afgerond",
         not_found2: "Project niet teruggevonden",
         to_subject: "Naar vak",
     },
diff --git a/frontend/src/views/ProjectsView.vue b/frontend/src/views/ProjectsView.vue
index 849fdb91..cab48e4e 100644
--- a/frontend/src/views/ProjectsView.vue
+++ b/frontend/src/views/ProjectsView.vue
@@ -1,30 +1,25 @@
 <template>
     <div>
-        <v-container>
-            <h1 v-if="isLoading" class="welcome">{{ $t("default.loading.loading_page") }}</h1>
-            <h1 v-else-if="isError || noProjectsFound" class="welcome">
-                {{ $t("project.not_found") }}
-            </h1>
-            <div v-else class="projectInfo">
-                <v-row class="rowheader">
-                    <h1>{{ $t("project.myProject") }}</h1>
-                    <v-btn-toggle v-model="activeButton">
-                        <v-btn value="notFinished" class="leftbuttonspace">{{
-                            $t("project.not_finished")
-                        }}</v-btn>
-                        <v-btn value="archived" class="leftbuttonspace">{{
-                            $t("project.archived")
-                        }}</v-btn>
-                    </v-btn-toggle>
-                </v-row>
-                <ProjectMiniCard
-                    v-for="project in filteredProjects"
-                    :key="project.id"
-                    :project="project"
-                    class="project-card"
-                />
+        <h1 v-if="isLoading" class="welcome">{{ $t("default.loading.loading_page") }}</h1>
+        <h1 v-else-if="isError || noProjectsFound" class="welcome">
+            {{ $t("project.not_found") }}
+        </h1>
+        <div v-else class="projectInfo">
+            <div class="rowheader">
+                <h1>{{ $t("project.myProject") }}</h1>
+                <v-btn-toggle v-model="activeButton" class="button">
+                    <v-btn value="finished">{{
+                        $t("project.finished")
+                    }}</v-btn>
+                </v-btn-toggle>
             </div>
-        </v-container>
+            <ProjectMiniCard
+                v-for="project in filteredProjects"
+                :key="project.id"
+                :project="project"
+                class="project-card"
+            />
+        </div>
     </div>
 </template>
 
@@ -51,12 +46,10 @@ const filteredProjects = computed(() => {
         );
 
     switch (activeButton.value) {
-        case "archived":
+        case "finished":
             return sortedProjects.filter((project: Project) => new Date(project.deadline) < now);
-        case "notFinished":
-            return sortedProjects.filter((project: Project) => new Date(project.deadline) > now);
         default:
-            return sortedProjects;
+            return sortedProjects.filter((project: Project) => new Date(project.deadline) > now);
     }
 });
 </script>
@@ -68,13 +61,20 @@ const filteredProjects = computed(() => {
 
 .projectInfo {
     padding: 10px;
+    margin: 25px;
 }
 
 .rowheader {
-    padding: 10px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+
 }
 
-.leftbuttonspace {
-    margin-left: 10px;
+.button {
+    height: 30px;
+    margin-top: 10px;
+    margin-left: 75px;
+    border: 1px solid rgb(var(--v-theme-text))
 }
 </style>

From 2ff0cddb54daee4f4d1b0107456296dc02fb9157 Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Mon, 13 May 2024 21:59:43 +0200
Subject: [PATCH 2/2] frontend test

---
 frontend/src/views/ProjectsView.vue       | 11 ++---
 frontend/tests/views/ProjectsView.spec.ts | 49 +++++++++++++++++++++++
 2 files changed, 53 insertions(+), 7 deletions(-)
 create mode 100644 frontend/tests/views/ProjectsView.spec.ts

diff --git a/frontend/src/views/ProjectsView.vue b/frontend/src/views/ProjectsView.vue
index cab48e4e..2dd8102c 100644
--- a/frontend/src/views/ProjectsView.vue
+++ b/frontend/src/views/ProjectsView.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h1 v-if="isLoading" class="welcome">{{ $t("default.loading.loading_page") }}</h1>
+        <h1 v-if="isLoading">{{ $t("default.loading.loading_page") }}</h1>
         <h1 v-else-if="isError || noProjectsFound" class="welcome">
             {{ $t("project.not_found") }}
         </h1>
@@ -8,9 +8,7 @@
             <div class="rowheader">
                 <h1>{{ $t("project.myProject") }}</h1>
                 <v-btn-toggle v-model="activeButton" class="button">
-                    <v-btn value="finished">{{
-                        $t("project.finished")
-                    }}</v-btn>
+                    <v-btn value="finished">{{ $t("project.finished") }}</v-btn>
                 </v-btn-toggle>
             </div>
             <ProjectMiniCard
@@ -60,7 +58,7 @@ const filteredProjects = computed(() => {
 }
 
 .projectInfo {
-    padding: 10px;
+    padding: 15px;
     margin: 25px;
 }
 
@@ -68,13 +66,12 @@ const filteredProjects = computed(() => {
     display: flex;
     align-items: center;
     margin-bottom: 30px;
-
 }
 
 .button {
     height: 30px;
     margin-top: 10px;
     margin-left: 75px;
-    border: 1px solid rgb(var(--v-theme-text))
+    border: 1px solid rgb(var(--v-theme-text));
 }
 </style>
diff --git a/frontend/tests/views/ProjectsView.spec.ts b/frontend/tests/views/ProjectsView.spec.ts
new file mode 100644
index 00000000..e83196f3
--- /dev/null
+++ b/frontend/tests/views/ProjectsView.spec.ts
@@ -0,0 +1,49 @@
+import {mount} from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import ProjectsView from "@/views/ProjectsView.vue"
+import {ref} from "vue";
+
+const mockProjects = [
+    {id: 1}
+]
+
+const testProjectsQuery = {
+    data: ref(mockProjects),
+    isLoading: ref(true),
+    isError: ref(true),
+    setIsError(value){
+        this.isError.value = value;
+    },
+    setIsLoading(value){
+        this.isLoading.value = value;
+    }
+};
+
+vi.mock('@/queries/Project', () => ({
+    useProjectsQuery: vi.fn(() => testProjectsQuery),
+}));
+
+vi.mock("@/components/project/ProjectMiniCard.vue", () => ({
+    default: {
+        template: "<div class='projectMiniCard'></div>",
+    },
+}));
+
+describe("ProjectsView", () => {
+    const wrapper = mount(ProjectsView, {});
+    it("render if loading", () => {
+        expect(wrapper.text()).toContain("Aan het laden...")
+    });
+    it("render if error", async () => {
+        testProjectsQuery.setIsLoading(false)
+        await wrapper.vm.$nextTick();
+        expect(wrapper.text()).toContain("Geen projecten teruggevonden.")
+    });
+    it("render projects view", async () => {
+        testProjectsQuery.setIsError(false)
+        await wrapper.vm.$nextTick();
+        expect(wrapper.text()).toContain("Mijn projecten")
+        const Button = wrapper.findComponent({name: "VBtn"})
+        expect(Button.text()).toContain("Afgerond")
+    });
+});