feat: thema's dropdown

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%;