feat: thema's dropdown

frontend/src/components/MenuBar.vue

@@ -11,7 +11,7 @@
 
     const role = auth.authState.activeRole;
 
-    const name: string = auth.authState.user!.profile.name!;
+    const name: string = "";//auth.authState.user!.profile.name!;
     const initials: string = name
         .split(" ")
         .map((n) => n[0])

frontend/src/i18n/locale/de.json

@@ -39,5 +39,10 @@
         "high-school": "16-18 jahre alt",
         "older": "18 und älter"
     },
-    "read-more": "Mehr lesen"
+    "read-more": "Mehr lesen",
+    "new-assignment": "Neue Aufgabe",
+    "next": "nächste",
+    "previous": "vorherige",
+    "groups": "Gruppen",
+    "learning-path": "Lernpfad"
 }

frontend/src/i18n/locale/en.json

@@ -40,5 +40,9 @@
         "older": "18 and older"
     },
     "read-more": "Read more",
-    "new-assignment": "New Assignment"
+    "new-assignment": "New Assignment",
+    "next": "next",
+    "previous": "previous",
+    "groups": "Groups",
+    "learning-path": "Learning path"
 }

frontend/src/i18n/locale/fr.json

@@ -40,5 +40,9 @@
         "older": "18 et plus"
     },
     "read-more": "En savoir plus",
-    "new-assignment": "Nouveau travail"
+    "new-assignment": "Nouveau travail",
+    "next": "suivant",
+    "previous": "précédent",
+    "groups": "Groupes",
+    "learning-path": "Parcours d'apprentissage"
 }

frontend/src/i18n/locale/nl.json

@@ -39,5 +39,10 @@
         "high-school": "3e graad secundair",
         "older": "Hoger onderwijs"
     },
-    "read-more": "Lees meer"
+    "read-more": "Lees meer",
+    "new-assignment": "Nieuwe opdracht",
+    "next": "volgende",
+    "previous": "vorige",
+    "groups": "Groepen",
+    "learning-path": "Leerpad"
 }

frontend/src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from "vue-router";
+import {createRouter, createWebHistory} from "vue-router";
 import MenuBar from "@/components/MenuBar.vue";
 import SingleAssignment from "@/views/assignments/SingleAssignment.vue";
 import SingleClass from "@/views/classes/SingleClass.vue";
@@ -22,24 +22,24 @@ const router = createRouter({
             path: "/",
             name: "home",
             component: () => import("../views/HomePage.vue"),
-            meta: { requiresAuth: false },
+            meta: {requiresAuth: false},
         },
         {
             path: "/login",
             name: "LoginPage",
             component: () => import("../views/LoginPage.vue"),
-            meta: { requiresAuth: false },
+            meta: {requiresAuth: false},
         },
         {
             path: "/callback",
             component: CallbackPage,
-            meta: { requiresAuth: false },
+            meta: {requiresAuth: false},
         },
 
         {
             path: "/user",
             component: MenuBar,
-            meta: { requiresAuth: true },
+            meta: {requiresAuth: true},
             children: [
                 {
                     path: "",
@@ -68,49 +68,55 @@ const router = createRouter({
             path: "/theme/:id",
             name: "Theme",
             component: SingleTheme,
-            meta: { requiresAuth: true },
+            meta: {requiresAuth: true},
         },
         {
-            path: "/assignment/create",
-            name: "CreateAssigment",
-            component: CreateAssignment,
-            meta: { requiresAuth: true },
-        },
-        {
-            path: "/assignment/:id",
-            name: "SingleAssigment",
-            component: SingleAssignment,
-            meta: { requiresAuth: true },
+            path: "/assignment",
+            component: MenuBar,
+            meta: {requiresAuth: true},
+            children: [
+                {
+                    path: "create",
+                    name: "CreateAssigment",
+                    component: CreateAssignment,
+                },
+                {
+                    path: ":id",
+                    name: "SingleAssigment",
+                    component: SingleAssignment,
+                },
+            ]
         },
+
         {
             path: "/class/create",
             name: "CreateClass",
             component: CreateClass,
-            meta: { requiresAuth: true },
+            meta: {requiresAuth: true},
         },
         {
             path: "/class/:id",
             name: "SingleClass",
             component: SingleClass,
-            meta: { requiresAuth: true },
+            meta: {requiresAuth: true},
         },
         {
             path: "/discussion/create",
             name: "CreateDiscussion",
             component: CreateDiscussion,
-            meta: { requiresAuth: true },
+            meta: {requiresAuth: true},
         },
         {
             path: "/discussion/:id",
             name: "SingleDiscussion",
             component: SingleDiscussion,
-            meta: { requiresAuth: true },
+            meta: {requiresAuth: true},
         },
         {
             path: "/:catchAll(.*)",
             name: "NotFound",
             component: NotFound,
-            meta: { requiresAuth: false },
+            meta: {requiresAuth: false},
         },
     ],
 });

frontend/src/utils/constants.ts

@@ -16,10 +16,6 @@ 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"
-];
-
 export const AGE_TO_THEMES: Record<string, string[]> = {
     "all": THEMES_KEYS,
     "primary-school": ["wegostem", "computational_thinking", "physical_computing"],

frontend/src/views/assignments/CreateAssignment.vue

@@ -1,25 +1,43 @@
 <script setup lang="ts">
-    import { useI18n } from "vue-i18n";
-    import { ref } from "vue";
-    const { t } = useI18n();
+    import {useI18n} from "vue-i18n";
+    import {ref, shallowRef} from "vue";
+    import {THEMESITEMS} from "@/utils/constants.ts";
+
+    const {t} = useI18n();
 
     const step = ref(1);
 
+    // Use a list with all themes so learning-paths can be filtered by theme
+    const themeItems = ref(Object.keys(THEMESITEMS).slice(1));
+    const value = shallowRef([]);
 </script>
 
 <template>
     <div class="main-container">
         <h1 class="title">{{ t("new-assignment") }}</h1>
         <v-card class="form-card">
-            <v-stepper class="stepper-container" alt-labels :items="['Learning path', 'Classes', 'Groups']" v-model="step" show-actions>
+            <v-stepper class="stepper-container" alt-labels :items="[t('learning-path'), t('classes'), t('groups')]"
+                       v-model="step" show-actions>
                 <template v-slot:item.1>
-                    <v-card title="Step One" flat>
+                    <v-card title="Select a learning path" flat>
+                        <v-container class="step-container">
+                            <v-select
+                                v-model="value"
+                                :items="themeItems.map(theme => ({ title: t(`theme-options.${theme}`), value: theme }))"
+                                label="Filter by themes"
+                                chips
+                                multiple
+                                deletable-chips
+                                clearable
+                            ></v-select>
 
+
+                        </v-container>
                     </v-card>
                 </template>
 
                 <template>
-                    <v-card title="Step Two" flat>
+                    <v-card title="Select one or more classes" flat>
                         <v-container class="step-container">
                             <!-- Content for Step Two -->
                         </v-container>
@@ -63,6 +81,8 @@
 
 .stepper-container {
     width: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .step-container {
@@ -73,7 +93,7 @@
 }
 
 /* Responsive adjustments */
-@media (max-width: 600px) {
+@media (max-width: 650px) {
     .form-card {
         width: 95%;
         padding: 1%;