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

style: fix linting issues met Prettier

Browse source
This commit is contained in:
Lint Action 2025-03-25 14:53:54 +00:00
parent e3559d54a3
commit 468338d2a4
11 changed files with 209 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,47 +1,56 @@
<script setup lang="ts">
import ThemeCard from "@/components/ThemeCard.vue";
import { ref, watchEffect, computed } from "vue";
import { useI18n } from "vue-i18n";
import { AGE_TO_THEMES, THEMESITEMS } from "@/utils/constants.ts";
import { useThemeQuery } from "@/queries/themes.ts";
import ThemeCard from "@/components/ThemeCard.vue";
import { ref, watchEffect, computed } from "vue";
import { useI18n } from "vue-i18n";
import { AGE_TO_THEMES, THEMESITEMS } from "@/utils/constants.ts";
import { useThemeQuery } from "@/queries/themes.ts";
const props = defineProps({
selectedTheme: { type: String, required: true },
selectedAge: { type: String, required: true }
});
const props = defineProps({
selectedTheme: { type: String, required: true },
selectedAge: { type: String, required: true },
});
const { locale } = useI18n();
const language = computed(() => locale.value);
const { locale } = useI18n();
const language = computed(() => locale.value);
const { data: allThemes, isLoading, error } = useThemeQuery(language);
const { data: allThemes, isLoading, error } = useThemeQuery(language);
const allCards = ref([]);
const cards = ref([]);
const allCards = ref([]);
const cards = ref([]);
watchEffect(() => {
const themes = allThemes.value ?? [];
allCards.value = themes;
watchEffect(() => {
const themes = allThemes.value ?? [];
allCards.value = themes;
if (props.selectedTheme) {
cards.value = themes.filter((theme) =>
THEMESITEMS[props.selectedTheme]?.includes(theme.key) &&
AGE_TO_THEMES[props.selectedAge]?.includes(theme.key)
);
} else {
cards.value = themes;
}
});
if (props.selectedTheme) {
cards.value = themes.filter(
(theme) =>
THEMESITEMS[props.selectedTheme]?.includes(theme.key) &&
AGE_TO_THEMES[props.selectedAge]?.includes(theme.key),
);
} else {
cards.value = themes;
}
});
</script>
<template>
<v-container>
<div v-if="isLoading" class="text-center py-10">
<v-progress-circular indeterminate color="primary" />
<div
v-if="isLoading"
class="text-center py-10"
>
<v-progress-circular
indeterminate
color="primary"
/>
<p>Loading...</p>
</div>
<div v-else-if="error" class="text-center py-10 text-error">
<div
v-else-if="error"
class="text-center py-10 text-error"
>
<v-icon large>mdi-alert-circle</v-icon>
<p>Error loading: {{ error.message }}</p>
</div>