From 03a9e513a8e0a52fa4a638491107aad2efd7906f Mon Sep 17 00:00:00 2001
From: Joyelle Ndagijimana <njoyelle2@gmail.com>
Date: Wed, 19 Mar 2025 21:19:44 +0100
Subject: [PATCH] feat: theme card component aangemaakt

---
 frontend/src/components/BrowseThemes.vue     | 50 +++++++++++++++++++-
 frontend/src/components/ThemeCard.vue        | 27 +++++++++++
 frontend/src/i18n/locale/en.json             |  3 +-
 frontend/src/router/index.ts                 |  9 +++-
 frontend/src/utils/constants.ts              | 22 +++++++++
 frontend/src/views/SingleTheme.vue           | 11 +++++
 frontend/src/views/homepage/UserHomePage.vue | 41 +++++++++-------
 7 files changed, 143 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/ThemeCard.vue
 create mode 100644 frontend/src/utils/constants.ts
 create mode 100644 frontend/src/views/SingleTheme.vue

diff --git a/frontend/src/components/BrowseThemes.vue b/frontend/src/components/BrowseThemes.vue
index 9575da5f..3e63a2f9 100644
--- a/frontend/src/components/BrowseThemes.vue
+++ b/frontend/src/components/BrowseThemes.vue
@@ -1,9 +1,57 @@
 <script setup lang="ts">
     // This component contains a list with all themes and will be shown on a student's and teacher's homepage.
+    import ThemeCard from "@/components/ThemeCard.vue";
+    const cards = [
+        {
+            key: "1",
+            title: "Card 1",
+            description: "This is card 1",
+            image: "https://via.placeholder.com/150",
+        },
+        {
+            key: "2",
+            title: "Card 2",
+            description: "This is card 2",
+            image: "https://via.placeholder.com/150",
+        },
+        {
+            key: "3",
+            title: "Card 3",
+            description: "This is card 3",
+            image: "https://via.placeholder.com/150",
+        },
+        {
+            key: "4",
+            title: "Card 4",
+            description: "This is card 4",
+            image: "https://via.placeholder.com/150",
+        },
+    ];
+
+
+
 </script>
 
 <template>
-    <main></main>
+    <v-container>
+        <v-row>
+            <v-col
+                v-for="(card, index) in cards"
+                :key="index"
+                cols="12"
+                sm="6"
+                md="4"
+                lg="3"
+            >
+                <ThemeCard
+                    :path="card.key"
+                    :title="card.title"
+                    :description="card.description"
+                    :image="card.image"
+                />
+            </v-col>
+        </v-row>
+    </v-container>
 </template>
 
 <style scoped></style>
diff --git a/frontend/src/components/ThemeCard.vue b/frontend/src/components/ThemeCard.vue
new file mode 100644
index 00000000..f84a9c2f
--- /dev/null
+++ b/frontend/src/components/ThemeCard.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+    import { useI18n } from "vue-i18n";
+
+    const { t } = useI18n();
+
+    defineProps<{
+        path: string;
+        title: string;
+        description: string;
+        image: string;
+    }>();
+</script>
+
+<template>
+    <v-card :title="t(`${title}`)" :text="t(`${description}`)" variant="outlined">
+        <v-img v-if="image" :src="image" height="200px" cover></v-img>
+        <v-card-actions>
+            <v-btn :to="`theme/${path}`" variant="text">
+                {{ t("read-more") }}
+            </v-btn>
+
+        </v-card-actions>
+    </v-card>
+</template>
+
+<style scoped>
+</style>
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index 2f6555a4..18be114d 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -28,5 +28,6 @@
         "upper-secondary": "14-16 years old",
         "high-school": "16-18 years old",
         "older": "18 and older"
-    }
+    },
+    "read-more": "read-more"
 }
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 08618aac..0d1b5a0d 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -13,6 +13,7 @@ import UserClasses from "@/views/classes/UserClasses.vue";
 import UserAssignments from "@/views/classes/UserAssignments.vue";
 import authState from "@/services/auth/auth-service.ts";
 import UserHomePage from "@/views/homepage/UserHomePage.vue";
+import SingleTheme from "@/views/SingleTheme.vue";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -63,6 +64,12 @@ const router = createRouter({
             ],
         },
 
+        {
+            path: "/theme/:id",
+            name: "Theme",
+            component: SingleTheme,
+            meta: { requiresAuth: true },
+        },
         {
             path: "/assignment/create",
             name: "CreateAssigment",
@@ -112,7 +119,7 @@ router.beforeEach(async (to, from, next) => {
     // Verify if user is logged in before accessing certain routes
     if (to.meta.requiresAuth) {
         if (!authState.isLoggedIn.value) {
-            //next("/login");
+            //Next("/login");
             next();
         } else {
             next();
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
new file mode 100644
index 00000000..32ccb76f
--- /dev/null
+++ b/frontend/src/utils/constants.ts
@@ -0,0 +1,22 @@
+import { ref } from "vue";
+
+export const THEMESITEMS = ref([
+    "all-themes",
+    "culture",
+    "electricity-and-mechanics",
+    "nature-and-climate",
+    "agriculture",
+    "society",
+    "math",
+    "technology",
+    "algorithms",
+]);
+
+export const AGEITEMS = ref([
+    "all-ages",
+    "primary-school",
+    "lower-secondary",
+    "upper-secondary",
+    "high-school",
+    "older",
+]);
diff --git a/frontend/src/views/SingleTheme.vue b/frontend/src/views/SingleTheme.vue
new file mode 100644
index 00000000..85af7153
--- /dev/null
+++ b/frontend/src/views/SingleTheme.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/homepage/UserHomePage.vue b/frontend/src/views/homepage/UserHomePage.vue
index cfd4d7db..e90f0262 100644
--- a/frontend/src/views/homepage/UserHomePage.vue
+++ b/frontend/src/views/homepage/UserHomePage.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import {ref, watch} from "vue";
+    import {ref, watch} from "vue";
     import { useI18n } from "vue-i18n";
+    import {AGEITEMS, THEMESITEMS} from "@/utils/constants.ts";
+    import BrowseThemes from "@/components/BrowseThemes.vue";
 
     const { t, locale } = useI18n();
 
-    const themesItems = ref(["all-themes", "culture", "electricity-and-mechanics", "nature-and-climate", "agriculture", "society", "math", "technology", "algorithms"]);
-
-    const ageItems = ref(["all-ages",  "primary-school", "lower-secondary", "upper-secondary", "high-school", "older"]);
 
     const selectedTheme = ref(t('choose-theme'));
     const selectedAge = ref(t('choose-age'));
@@ -22,24 +21,22 @@ import {ref, watch} from "vue";
 
 <template>
     <div class="main-container">
-        <div class="header">
-            <h1>{{ t("themes") }}</h1>
-        </div>
-        <div class="dropdowns">
+        <h1 class="title">{{ t("themes") }}</h1>
+        <v-container class="dropdowns">
             <v-select class="v-select"
                 :label="t('choose-theme')"
-                      :items="themesItems.map(theme => t(`theme-options.${theme}`))"
+                      :items="THEMESITEMS.map(theme => t(`theme-options.${theme}`))"
                       v-model="selectedTheme"
                       variant="outlined"
             ></v-select>
             <v-select class="v-select"
                 :label="t('choose-age')"
-                      :items="ageItems.map(age => t(`age-options.${age}`))"
+                      :items="AGEITEMS.map(age => t(`age-options.${age}`))"
                       v-model="selectedAge"
                     variant="outlined"
             ></v-select>
-        </div>
-        <div class="content"></div>
+        </v-container>
+        <BrowseThemes/>
     </div>
 </template>
 
@@ -51,19 +48,22 @@ import {ref, watch} from "vue";
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
-        padding: 2rem;
     }
 
-    .header {
-        width: 60%;
+    .title {
         max-width: 50rem;
-        margin-bottom: 1rem;
+        margin-left: 1rem;
+        margin-top: 1rem;
+        text-align: center;
+        display: flex;
+        justify-content: center;
     }
 
+
     .dropdowns {
         display: flex;
         justify-content: space-between;
-        gap: 3rem;
+        gap: 5rem;
         width: 80%;
     }
 
@@ -79,5 +79,12 @@ import {ref, watch} from "vue";
         }
     }
 
+    @media (max-width: 700px) {
+        .dropdowns {
+            flex-direction: column;
+            gap: 1rem;
+            width: 80%;
+        }
+    }
 
 </style>