tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
Archived
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;
}

24
frontend/src/utils/constants.ts
View file

@ -16,12 +16,22 @@ export const THEMESITEMS: Record<string, string[]> = {
"algorithms": ["math_with_python", "python_programming", "stem", "algorithms", "basics_ai"],
};
export const AGEITEMS = [
"all",
"primary-school",
"lower-secondary",
"upper-secondary",
"high-school",
"older",
"all", "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"
]
};

47
frontend/src/views/homepage/UserHomePage.vue
View file

@ -1,19 +1,49 @@
<script setup lang="ts">
import {ref, watch} from "vue";
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 selectedThemeKey = ref<string | null>(null);
const selectedAgeKey = ref<string | null>(null);
const selectedThemeKey = ref<string>('all');
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;
selectedAgeKey.value = null;
selectedThemeKey.value = 'all';
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,7 +71,8 @@
></v-select>
</v-container>
<BrowseThemes :selectedTheme="selectedThemeKey ?? ''" />
<BrowseThemes :selectedTheme="selectedThemeKey ?? ''" :selectedAge="selectedAgeKey ?? ''"/>
/>
</div>
</template>