style: fix linting issues met Prettier

frontend/src/components/BrowseThemes.vue

@@ -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>

frontend/src/components/MenuBar.old.vue

@@ -22,7 +22,7 @@
         { name: "English", code: "en" },
         { name: "Nederlands", code: "nl" },
         { name: "Français", code: "fr" },
-        { name: "Deutsch", code: "de" }
+        { name: "Deutsch", code: "de" },
     ]);
 
     // Logic to change the language of the website to the selected language

frontend/src/components/MenuBar.vue

@@ -22,7 +22,7 @@
         { name: "English", code: "en" },
         { name: "Nederlands", code: "nl" },
         { name: "Français", code: "fr" },
-        { name: "Deutsch", code: "de" }
+        { name: "Deutsch", code: "de" },
     ]);
 
     // Logic to change the language of the website to the selected language
@@ -43,8 +43,14 @@
 </script>
 
 <template>
-    <v-app-bar class="app-bar" app>
-        <v-app-bar-nav-icon class="menu_collapsed" @click="drawer = !drawer" />
+    <v-app-bar
+        class="app-bar"
+        app
+    >
+        <v-app-bar-nav-icon
+            class="menu_collapsed"
+            @click="drawer = !drawer"
+        />
         <router-link
             to="/user"
             class="dwengo_home"
@@ -55,9 +61,7 @@
                     alt="Dwengo logo"
                     :src="dwengoLogo"
                 />
-                <p
-                    class="caption"
-                >
+                <p class="caption">
                     {{ t(`${role}`) }}
                 </p>
             </div>
@@ -156,7 +160,7 @@
             size="large"
             color="#0e6942"
             class="user-button"
-        >{{ initials }}</v-avatar
+            >{{ initials }}</v-avatar
         >
     </v-app-bar>
     <v-navigation-drawer

frontend/src/components/ThemeCard.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
+    import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+    const { t } = useI18n();
 
-defineProps<{
-    path: string;
-    title: string;
-    description: string;
-    image: string;
-}>();
+    defineProps<{
+        path: string;
+        title: string;
+        description: string;
+        image: string;
+    }>();
 </script>
 
 <template>
@@ -31,7 +31,10 @@ defineProps<{
         </v-card-title>
         <v-card-text class="description flex-grow-1">{{ description }}</v-card-text>
         <v-card-actions>
-            <v-btn :to="`theme/${path}`" variant="text">
+            <v-btn
+                :to="`theme/${path}`"
+                variant="text"
+            >
                 {{ t("read-more") }}
             </v-btn>
         </v-card-actions>
@@ -39,36 +42,36 @@ defineProps<{
 </template>
 
 <style scoped>
-.theme-card {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 1rem;
-    cursor: pointer;
-}
+    .theme-card {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 1rem;
+        cursor: pointer;
+    }
 
-.theme-card:hover {
-    background-color: rgba(0, 0, 0, 0.03);
-}
+    .theme-card:hover {
+        background-color: rgba(0, 0, 0, 0.03);
+    }
 
-.title-container {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    text-align: left;
-    justify-content: flex-start;
-}
+    .title-container {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        text-align: left;
+        justify-content: flex-start;
+    }
 
-.title-image {
-    flex-shrink: 0;
-    border-radius: 5px;
-    margin-left: 0;
-}
+    .title-image {
+        flex-shrink: 0;
+        border-radius: 5px;
+        margin-left: 0;
+    }
 
-.title {
-    flex-grow: 1;
-    white-space: normal;
-    overflow-wrap: break-word;
-    word-break: break-word;
-}
+    .title {
+        flex-grow: 1;
+        white-space: normal;
+        overflow-wrap: break-word;
+        word-break: break-word;
+    }
 </style>