feat:#28 rewrote frontend input for filter eventTypes

frontend/src/api/fetchEvents.ts

@@ -0,0 +1,33 @@
+//Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
+//Copyright (C) 2024 HTWKalender support@htwkalender.de
+
+//This program is free software: you can redistribute it and/or modify
+//it under the terms of the GNU Affero General Public License as published by
+//the Free Software Foundation, either version 3 of the License, or
+//(at your option) any later version.
+
+//This program is distributed in the hope that it will be useful,
+//but WITHOUT ANY WARRANTY; without even the implied warranty of
+//MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//GNU Affero General Public License for more details.
+
+//You should have received a copy of the GNU Affero General Public License
+//along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+// function to fetch course data from the API
+
+export async function fetchEventTypes(): Promise<string[]> {
+  const eventTypes: string[] = [];
+  await fetch("/api/events/types")
+    .then((response) => {
+      return response.json() as Promise<string[]>;
+    })
+    .then((responseModules: string[]) => {
+      responseModules.forEach((eventType: string) => {
+        eventTypes.push(
+          eventType,
+        );
+      });
+    });
+  return 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,
@@ -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>