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-04-01 15:09:28 +00:00
parent ed8b5c919d
commit ea5cf7abf9
26 changed files with 467 additions and 422 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,10 @@
<script setup lang="ts">
import ThemeCard from "@/components/ThemeCard.vue";
import {ref, watchEffect, computed, type Ref} from "vue";
import { ref, watchEffect, computed, type Ref } from "vue";
import { useI18n } from "vue-i18n";
import { AGE_TO_THEMES, THEMESITEMS } from "@/utils/constants.ts";
import { useThemeQuery } from "@/queries/themes.ts";
import type {Theme} from "@/data-objects/theme.ts";
import type { Theme } from "@/data-objects/theme.ts";
const props = defineProps({
selectedTheme: { type: String, required: true },
@ -17,7 +17,7 @@
const { data: allThemes, isLoading, error } = useThemeQuery(language);
const allCards: Ref<Theme[]> = ref([]);
const cards: Ref<Theme[]> = ref([]);
const cards: Ref<Theme[]> = ref([]);
watchEffect(() => {
const themes: Theme[] = allThemes.value ?? [];

12
frontend/src/components/LearningPathSearchField.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import {useI18n} from "vue-i18n";
import {useRoute, useRouter} from "vue-router";
import {computed, ref} from "vue";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
import { computed, ref } from "vue";
const route = useRoute();
const router = useRouter();
const { t } = useI18n();
@ -10,7 +10,7 @@
const query = computed({
get: () => route.query.query as string | null,
set: async (newValue) => router.push({path: SEARCH_PATH, query: {query: newValue}})
set: async (newValue) => router.push({ path: SEARCH_PATH, query: { query: newValue } }),
});
const queryInput = ref(query.value);
@ -31,6 +31,4 @@
></v-text-field>
</template>
<style scoped>
</style>
<style scoped></style>

24
frontend/src/components/LearningPathsGrid.vue
View file

@ -1,16 +1,17 @@
<script setup lang="ts">
import { convertBase64ToImageSrc } from "@/utils/base64ToImage.ts";
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
import { useI18n } from "vue-i18n";
import {convertBase64ToImageSrc} from "@/utils/base64ToImage.ts";
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
import {useI18n} from "vue-i18n";
const { t } = useI18n();
const props = defineProps<{learningPaths: LearningPath[]}>();
const { t } = useI18n();
const props = defineProps<{ learningPaths: LearningPath[] }>();
</script>
<template>
<div class="results-grid" v-if="props.learningPaths.length > 0">
<div
class="results-grid"
v-if="props.learningPaths.length > 0"
>
<v-card
class="learning-path-card"
link
@ -27,12 +28,15 @@ const props = defineProps<{learningPaths: LearningPath[]}>();
<v-card-title>{{ learningPath.title }}</v-card-title>
<v-card-subtitle>
<v-icon icon="mdi-human-male-boy"></v-icon>
<span>{{ learningPath.targetAges.min }} - {{ learningPath.targetAges.max }} {{ t('yearsAge') }}</span>
<span>{{ learningPath.targetAges.min }} - {{ learningPath.targetAges.max }} {{ t("yearsAge") }}</span>
</v-card-subtitle>
<v-card-text>{{ learningPath.description }}</v-card-text>
</v-card>
</div>
<div content="empty-state-container" v-else>
<div
content="empty-state-container"
v-else
>
<v-empty-state
icon="mdi-emoticon-sad-outline"
:title="t('noLearningPathsFound')"

32
frontend/src/components/UsingQueryResult.vue
View file

@ -1,24 +1,27 @@
<script setup lang="ts" generic="T">
import {computed} from "vue";
import {useI18n} from "vue-i18n";
import type {UseQueryReturnType} from "@tanstack/vue-query";
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import type { UseQueryReturnType } from "@tanstack/vue-query";
const props = defineProps<{
queryResult: UseQueryReturnType<T, Error>
}>()
queryResult: UseQueryReturnType<T, Error>;
}>();
const { isLoading, isError, isSuccess, data, error } = props.queryResult;
const { t } = useI18n();
const errorMessage = computed(() => {
const errorWithMessage = (error.value as {message: string}) || null;
return errorWithMessage?.message || JSON.stringify(errorWithMessage)
const errorWithMessage = (error.value as { message: string }) || null;
return errorWithMessage?.message || JSON.stringify(errorWithMessage);
});
</script>
<template>
<div class="loading-div" v-if="isLoading">
<div
class="loading-div"
v-if="isLoading"
>
<v-progress-circular indeterminate></v-progress-circular>
</div>
<div v-if="isError">
@ -28,12 +31,15 @@
:title="t('error_title')"
></v-empty-state>
</div>
<slot v-if="isSuccess && data" :data="data"></slot>
<slot
v-if="isSuccess && data"
:data="data"
></slot>
</template>
<style scoped>
.loading-div {
padding: 20px;
text-align: center;
}
.loading-div {
padding: 20px;
text-align: center;
}
</style>