feat:#28 rewrote frontend input for filter eventTypes

frontend/src/components/AdditionalModuleTable.vue

@@ -30,6 +30,7 @@ import { useDialog } from "primevue/usedialog";
 import router from "../router";
 import { fetchModule } from "../api/fetchModule.ts";
 import { useI18n } from "vue-i18n";
+import { fetchEventTypes } from "../api/fetchEvents.ts";
 
 const dialog = useDialog();
 const { t } = useI18n({ useScope: "global" });
@@ -39,6 +40,9 @@ if (store.isEmpty()) {
   router.replace("/");
 }
 
+const eventTypes: Ref<string[]> = ref([]);
+
+
 const mobilePage = inject("mobilePage") as Ref<boolean>;
 const filters = ref({
   course: {
@@ -51,7 +55,7 @@ const filters = ref({
   },
   eventType: {
     value: null,
-    matchMode: FilterMatchMode.CONTAINS,
+    matchMode: FilterMatchMode.IN,
   },
   prof: {
     value: null,
@@ -63,7 +67,7 @@ const loadedModules: Ref<Module[]> = ref(new Array(10));
 
 const loadingData = ref(true);
 
-onMounted(() => {
+onMounted( () => {
   fetchAllModules()
     .then(
       (data) =>
@@ -74,6 +78,10 @@ onMounted(() => {
     .finally(() => {
       loadingData.value = false;
     });
+
+  fetchEventTypes().then((data) => {
+    eventTypes.value = data;
+  });
 });
 
 const ModuleInformation = defineAsyncComponent(
@@ -184,16 +192,20 @@ function unselectModule(event: DataTableRowUnselectEvent) {
       </Column>
       <Column
         field="eventType"
+        filter-field="eventType"
+        :filter-menu-style="{ width: '10rem' }"
+        style="min-width: 10rem"
         :header="$t('additionalModules.eventType')"
         :show-clear-button="false"
         :show-filter-menu="false"
       >
         <template #filter="{ filterModel, filterCallback }">
-          <InputText
+          <MultiSelect
             v-model="filterModel.value"
-            type="text"
+            :options="eventTypes"
             class="p-column-filter max-w-10rem"
-            @input="filterCallback()"
+            style="min-width: 10rem"
+            @change="filterCallback()"
           />
         </template>
         <template v-if="loadingData" #body>