fix no projects found, more styling, filterbuttons

frontend/src/i18n/locales/en.ts

@@ -36,6 +36,9 @@ export default {
         group: "Group {number}",
         assignment: "Assignment:",
         myProject: "My projects:",
+        not_found: "No projects found.",
+        archived: "Archived",
+        not_finished: "Not Finished"
     },
     navigation: {
         home: "Home",

frontend/src/i18n/locales/nl.ts

@@ -36,6 +36,9 @@ export default {
         group: "Groep {number}",
         assignment: "Opdracht:",
         myProject: "Mijn projecten:",
+        not_found: "Geen projecten teruggevonden.",
+        archived: "Gearchiveerd",
+        not_finished: "Onafgewerkt",
     },
     navigation: {
         home: "Hoofdscherm",

frontend/src/views/ProjectsView.vue

@@ -1,26 +1,73 @@
 <template>
-    <h1 v-if="isLoading" class="welcome">{{ $t("default.loading.loading_page") }}</h1>
-    <h1 v-else-if="isError" class="welcome">No projects found!</h1>
-    <div v-else class="projectInfo">
-        <h1>{{ $t("project.myProject") }}</h1>
-        <ProjectMiniCard
-            v-for="project in projects"
-            :key="project.id"
-            :project="project"
-            class="project-card"
-        />
+    <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="archived" class="leftbuttonspace">{{ $t("project.archived") }}</v-btn>
+                        <v-btn value="notFinished" class="leftbuttonspace">{{ $t("project.not_finished") }}</v-btn>
+                    </v-btn-toggle>
+                </v-row>
+                <ProjectMiniCard
+                    v-for="project in filteredProjects"
+                    :key="project.id"
+                    :project="project"
+                    class="project-card"
+                />
+            </div>
+        </v-container>
     </div>
 </template>
 
 <script setup lang="ts">
 import { useProjectsQuery } from "@/queries/Project";
 import ProjectMiniCard from "@/components/project/ProjectMiniCard.vue";
+import {computed, ref, watch} from "vue";
+import Project from "@/models/Project";
 
 const { data: projects, isLoading, isError } = useProjectsQuery();
+const noProjectsFound = computed(() => projects.value.length === 0);
+
+const activeButton = ref(null);
+
+const filteredProjects = computed(() => {
+    if (!projects.value) return [];
+
+    const now = new Date();
+    switch (activeButton.value) {
+        case "archived":
+            return projects.value.slice().filter((project: Project) => {
+                return new Date(project.deadline) < now;
+            });
+        case "notFinished":
+            return projects.value.slice().filter((project: Project) => {
+                return new Date(project.deadline) > now;
+            });
+        default:
+            return projects.value;
+    }
+});
+
 </script>
 
 <style scoped>
 .project-card {
-    margin-top: 10px; /* Adjust as needed */
+    margin-top: 10px;
+}
+
+.projectInfo {
+     padding: 10px;
+ }
+
+.rowheader {
+    padding: 10px;
 }
+
+.leftbuttonspace {
+    margin-left: 10px;
+}
+
 </style>