tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

feat: thema's filteren op categorie en leeftijd werkt

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-03-20 23:28:21 +01:00
parent d4e0dc2703
commit 54a2cf0800
3 changed files with 120 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/components/BrowseThemes.vue
View file

@ -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") {
cards.value = allCards.value.filter(theme => THEMESITEMS[newTheme].includes(theme.key));
if (newTheme) {
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;
}