feat: thema's filteren op categorie en leeftijd werkt

frontend/src/components/BrowseThemes.vue

@@ -2,10 +2,19 @@
     import ThemeCard from "@/components/ThemeCard.vue";
     import { ref, onMounted, watch } from "vue";
     import { useI18n } from "vue-i18n";
-    import {THEMESITEMS} from "@/utils/constants.ts";
+    import {AGE_TO_THEMES, THEMESITEMS} from "@/utils/constants.ts";
 
     // Receive the selectedTheme from the parent component
-    const props = defineProps<{ selectedTheme: string }>();
+    const props = defineProps({
+        selectedTheme: {
+            type: String,
+            required: true
+        },
+        selectedAge: {
+            type: String,
+            required: true
+        }
+    });
 
     const {locale} = useI18n();
 
@@ -38,8 +47,17 @@
 
     // Watch for selectedTheme change and filter themes
     watch(() => props.selectedTheme, (newTheme) => {
-        if (newTheme && newTheme !== "all") {
+        if (newTheme) {
-            cards.value = allCards.value.filter(theme => THEMESITEMS[newTheme].includes(theme.key));
+            cards.value = allCards.value.filter(theme => THEMESITEMS[newTheme].includes(theme.key) && AGE_TO_THEMES[props.selectedAge]?.includes(theme.key));
+        } else {
+            cards.value = allCards.value;
+        }
+    });
+
+    // Watch for selectedAge change and filter themes
+    watch(() => props.selectedAge, (newAge) => {
+        if (newAge) {
+            cards.value = allCards.value.filter(theme => THEMESITEMS[props.selectedTheme].includes(theme.key) && AGE_TO_THEMES[newAge]?.includes(theme.key));
         } else {
             cards.value = allCards.value;
         }

frontend/src/utils/constants.ts

@@ -16,12 +16,22 @@ export const THEMESITEMS: Record<string, string[]> = {
     "algorithms": ["math_with_python", "python_programming", "stem", "algorithms", "basics_ai"],
 };
 
-
 export const AGEITEMS = [
-    "all",
+    "all", "primary-school", "lower-secondary", "upper-secondary", "high-school", "older"
-    "primary-school",
-    "lower-secondary",
-    "upper-secondary",
-    "high-school",
-    "older",
 ];
+
+export const AGE_TO_THEMES: Record<string, string[]> = {
+    "all": THEMES_KEYS,
+    "primary-school": ["wegostem", "computational_thinking", "physical_computing"],
+    "lower-secondary": ["socialrobot", "art", "wegostem", "computational_thinking", "physical_computing"],
+    "upper-secondary": ["kiks", "art", "socialrobot", "agriculture",
+        "computational_thinking", "math_with_python", "python_programming",
+        "stem", "care", "chatbot", "algorithms", "basics_ai"],
+    "high-school": [
+        "kiks", "art", "agriculture", "computational_thinking", "math_with_python", "python_programming",
+        "stem", "care", "chatbot", "algorithms", "basics_ai"
+    ],
+    "older": [
+        "kiks", "computational_thinking", "algorithms", "basics_ai"
+    ]
+};

frontend/src/views/homepage/UserHomePage.vue

@@ -1,19 +1,49 @@
 <script setup lang="ts">
-    import { ref, watch } from "vue";
+import {ref, watch} from "vue";
-    import { useI18n } from "vue-i18n";
+    import {useI18n} from "vue-i18n";
-    import { THEMESITEMS, AGEITEMS } from "@/utils/constants.ts";
+    import {THEMESITEMS, AGE_TO_THEMES} from "@/utils/constants.ts";
     import BrowseThemes from "@/components/BrowseThemes.vue";
 
-    const { t, locale } = useI18n();
+    const {t, locale} = useI18n();
 
-    const selectedThemeKey = ref<string | null>(null);
+    const selectedThemeKey = ref<string>('all');
-    const selectedAgeKey = ref<string | null>(null);
+    const selectedAgeKey = ref<string>('all');
+
+    const allThemes = ref(Object.keys(THEMESITEMS));
+    const availableThemes = ref([...allThemes.value]);
+
+    const allAges = ref(Object.keys(AGE_TO_THEMES));
+    const availableAges = ref([...allAges.value]);
 
     // Reset selection when language changes
     watch(locale, () => {
-        selectedThemeKey.value = null;
+        selectedThemeKey.value = 'all';
-        selectedAgeKey.value = null;
+        selectedAgeKey.value = 'all';
     });
+
+
+    watch(selectedThemeKey, () => {
+        if (selectedThemeKey.value === "all") {
+            availableAges.value = [...allAges.value]; // Reset to all ages
+        } else {
+            const themes = THEMESITEMS[selectedThemeKey.value];
+            availableAges.value = allAges.value.filter(age =>
+                AGE_TO_THEMES[age]?.some(theme => themes.includes(theme))
+            );
+        }
+    });
+
+    watch(selectedAgeKey, () => {
+        if (selectedAgeKey.value === "all") {
+            availableThemes.value = [...allThemes.value]; // Reset to all themes
+        } else {
+            const themes = AGE_TO_THEMES[selectedAgeKey.value];
+            availableThemes.value = allThemes.value.filter(theme =>
+                THEMESITEMS[theme]?.some(theme => themes.includes(theme))
+            );
+        }
+    });
+
 </script>
 
 <template>
@@ -22,7 +52,7 @@
         <v-container class="dropdowns">
             <v-select class="v-select"
                       :label="t('choose-theme')"
-                      :items="Object.keys(THEMESITEMS).map(theme => ({ title: t(`theme-options.${theme}`), value: theme }))"
+                      :items="availableThemes.map(theme => ({ title: t(`theme-options.${theme}`), value: theme }))"
                       v-model="selectedThemeKey"
                       item-title="title"
                       item-value="value"
@@ -33,7 +63,7 @@
             <v-select
                 class="v-select"
                 :label="t('choose-age')"
-                :items="AGEITEMS.map(age => ({ key: age, label: t(`age-options.${age}`), value: age }))"
+                :items="availableAges.map(age => ({ key: age, label: t(`age-options.${age}`), value: age }))"
                 v-model="selectedAgeKey"
                 item-title="label"
                 item-value="key"
@@ -41,55 +71,56 @@
             ></v-select>
         </v-container>
 
-        <BrowseThemes :selectedTheme="selectedThemeKey ?? ''" />
+        <BrowseThemes :selectedTheme="selectedThemeKey ?? ''" :selectedAge="selectedAgeKey ?? ''"/>
+        />
     </div>
 </template>
 
 <style scoped>
+.main-container {
+    min-height: 100vh;
+    min-width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+.title {
+    max-width: 50rem;
+    margin-left: 1rem;
+    margin-top: 1rem;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+}
+
+
+.dropdowns {
+    display: flex;
+    justify-content: space-between;
+    gap: 5rem;
+    width: 80%;
+}
+
+.v-select {
+    flex: 1;
+    min-width: 100px;
+}
+
+
+@media (max-width: 768px) {
     .main-container {
-        min-height: 100vh;
+        padding: 1rem;
-        min-width: 100vw;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-start;
     }
+}
 
-    .title {
+@media (max-width: 700px) {
-        max-width: 50rem;
-        margin-left: 1rem;
-        margin-top: 1rem;
-        text-align: center;
-        display: flex;
-        justify-content: center;
-    }
-
-
     .dropdowns {
-        display: flex;
+        flex-direction: column;
-        justify-content: space-between;
+        gap: 1rem;
-        gap: 5rem;
         width: 80%;
     }
-
+}
-    .v-select {
-        flex: 1;
-        min-width: 100px;
-    }
-
-
-    @media (max-width: 768px) {
-        .main-container {
-            padding: 1rem;
-        }
-    }
-
-    @media (max-width: 700px) {
-        .dropdowns {
-            flex-direction: column;
-            gap: 1rem;
-            width: 80%;
-        }
-    }
 
 </style>