404 not found + register to subject view: sytling + frontend tests

frontend/src/i18n/locales/en.ts

@@ -91,6 +91,9 @@ export default {
     },
     subject: {
         register: "Register to subject:",
+        yes: "Yes",
+        no: "No",
+        registered: "You are already registered to this course",
         academy_year: "Academic year",
         projects: "Projects",
         announcements: "Announcements",

frontend/src/i18n/locales/nl.ts

@@ -90,7 +90,10 @@ export default {
         },
     },
     subject: {
-        register: "Registreer bij vak:",
+        register: "Inschrijven voor vak:",
+        yes: "Ja",
+        no: "Nee",
+        registered: "Je bent al ingeschreven voor dit vak",
         academy_year: "Academiejaar",
         projects: "Projecten",
         announcements: "Meldingen",

frontend/src/views/NotFoundView.vue

@@ -1,9 +1,43 @@
 <template>
-    <div>
-        <h1>404 {{ $t("default.error.not-found") }}</h1>
+    <div class="notfound">
+        <img alt="404" class="image" :src="imageSrc" />
+        <h1>{{ $t("default.error.not-found") }}</h1>
     </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useThemeStore } from "@/stores/theme-store";
+import { storeToRefs } from "pinia";
+const { selectedTheme } = storeToRefs(useThemeStore());
+import { computed, ref, watch } from "vue";
 
-<style scoped></style>
+import blackThemeImg from "@/assets/404_black.png";
+import whiteThemeImg from "@/assets/404_white.png";
+
+const theme = ref("");
+
+const imageSrc = computed(() => {
+    return theme.value === "black" ? blackThemeImg : whiteThemeImg;
+});
+
+watch(
+    selectedTheme,
+    (newTheme) => {
+        theme.value = newTheme === "lightTheme" ? "black" : "white";
+    },
+    { immediate: true }
+);
+</script>
+
+<style scoped>
+.image {
+    height: 100px;
+}
+
+.notfound {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 100px;
+}
+</style>

frontend/src/views/SubjectRegisterView.vue

@@ -1,22 +1,32 @@
 <template>
-    <BackgroundContainer>
+    <div class="registerview">
         <v-alert v-if="isError" title="Error" color="error" :text="error!.message"></v-alert>
-        <v-skeleton-loader v-else :loading="isLoading" type="card" color="white">
-            <v-container align="center">
+        <v-skeleton-loader v-else :loading="isLoading" type="card">
+            <v-container align="center" class="container">
                 <h1>{{ $t("subject.register") }} {{ subject!.name }}</h1>
-                <v-row justify="center">
-                    <v-btn variant="text" class="register" @click="register"> Ok </v-btn>
-                    <v-btn variant="text" class="cancel" @click="cancel"> Cancel </v-btn>
+                <v-row v-if="!registered" justify="center" class="buttons">
+                    <v-btn variant="text" class="register" @click="register">
+                        {{ $t("subject.yes") }}
+                    </v-btn>
+                    <v-btn variant="text" class="cancel" @click="cancel">
+                        {{ $t("subject.no") }}
+                    </v-btn>
+                </v-row>
+                <v-row v-else class="registered" justify="center">
+                    <h2>{{ $t("subject.registered") }}.</h2>
                 </v-row>
             </v-container>
         </v-skeleton-loader>
-    </BackgroundContainer>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { toRefs } from "vue";
-import BackgroundContainer from "@/components/BackgroundContainer.vue";
-import { useRegisterToSubjectMutation, useSubjectUuidQuery } from "@/queries/Subject";
+import { computed, toRefs } from "vue";
+import {
+    useRegisterToSubjectMutation,
+    useSubjectsQuery,
+    useSubjectUuidQuery,
+} from "@/queries/Subject";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -27,18 +37,41 @@ const props = defineProps<{
 const { uuid } = toRefs(props);
 
 const { mutateAsync: registerMutation } = useRegisterToSubjectMutation();
+const { data: subjects } = useSubjectsQuery();
 const { data: subject, error, isLoading, isError } = useSubjectUuidQuery(uuid);
 
 const register = async () => {
     await registerMutation(uuid);
     router.push({ name: "subject", params: { subjectId: subject.value?.id } });
 };
 
+const registered = computed(() => {
+    if (!subjects.value) return false;
+    return subjects.value.as_student.some((sub) => {
+        return sub.id === subject.value.id;
+    });
+});
+
 const cancel = () => router.push({ name: "home" });
 </script>
 
 <style scoped lang="scss">
-.h1 {
-    margin-bottom: 30px;
+.registerview {
+    margin: 25px;
+}
+
+.buttons {
+    margin-top: 50px;
+}
+
+.container {
+    background-color: rgb(var(--v-theme-secondary));
+    border-radius: 3px;
+    color: rgb(var(--v-theme-text));
+}
+
+.registered {
+    margin-top: 25px;
+    margin-bottom: 10px;
 }
 </style>

frontend/tests/views/NotFoundView.spec.ts

@@ -0,0 +1,15 @@
+import { mount } from "@vue/test-utils";
+import {expect, describe, it} from "vitest";
+import NotFoundView from "../../src/views/NotFoundView.vue"
+import blackThemeImg from '@/assets/404_black.png';
+
+describe("NotFoundView", () => {
+    const wrapper = mount(NotFoundView, {})
+    it("render 404 view", () => {
+        expect(wrapper.text()).toContain("Pagina niet gevonden")
+        const image = (wrapper.vm as any).imageSrc
+        expect(image).toBe(blackThemeImg)
+        const theme = (wrapper.vm as any).theme
+        expect(theme).toBe("black")
+    });
+});

frontend/tests/views/SubjectRegisterView.spec.ts

@@ -0,0 +1,63 @@
+import { mount } from "@vue/test-utils";
+import {expect, describe, it, vi} from "vitest";
+import SubjectRegisterView from "../../src/views/SubjectRegisterView.vue"
+import {ref} from "vue";
+
+const mockRouter = {
+    push: vi.fn(),
+};
+
+vi.mock("vue-router", () => ({
+    useRouter: () => mockRouter,
+}));
+
+const testSubjectsUuidQuery = {
+    isLoading: ref(false),
+    isError: ref(true),
+    setError(value){
+        this.isError.value = value
+    },
+    error: ref({message: "test error message"}),
+    data: ref({name: "testsubject", id: 1}),
+    setData(id){
+        this.data.value.id = id
+    }
+}
+
+const testSubjectsQuery = {
+    data: ref({as_student: [
+            {id: 2}
+        ]})
+}
+
+vi.mock("@/queries/Subject", () => ({
+    useRegisterToSubjectMutation: vi.fn(() => vi.fn()),
+    useSubjectUuidQuery: vi.fn(() => testSubjectsUuidQuery),
+    useSubjectsQuery: vi.fn(() => testSubjectsQuery),
+}))
+
+describe("SubjectRegisterView", () => {
+    const wrapper = mount(SubjectRegisterView, {
+        props :{
+            uuid: "testuuid"
+        }
+    })
+
+    it("render error message", () => {
+        expect(wrapper.text()).toContain("test error message")
+    });
+    it("render register view", async () => {
+        testSubjectsUuidQuery.setError(false)
+        await wrapper.vm.$nextTick()
+        const registered = (wrapper.vm as any).registered
+        expect(registered).toBe(false)
+        expect(wrapper.text()).toContain("Inschrijven voor vak: testsubject")
+    });
+    it("render if already registered", async () => {
+        testSubjectsUuidQuery.setData(2)
+        await wrapper.vm.$nextTick()
+        const registered = (wrapper.vm as any).registered
+        expect(registered).toBe(true)
+        expect(wrapper.text()).toContain("Je bent al ingeschreven voor dit vak.")
+    })
+});