Merge branch 'main' into 52-studium-generale

# Conflicts: # backend/service/fetch/v1/fetchSeminarEventService.go
2025-08-02 17:59:16 +02:00 · 2023-11-30 22:44:58 +01:00
parent cd663ac69d 24b9285992
commit 36e7cbc890
17 changed files with 353 additions and 177 deletions
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -1,4 +1,4 @@
-FROM golang:1.21.3-alpine
+FROM golang:1.21-alpine

 # Set the Current Working Directory inside the container
 WORKDIR /app
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -1,6 +1,6 @@
 module htwkalender

-go 1.21.3
+go 1.21

 require (
 	github.com/google/uuid v1.3.1
--- a/backend/service/fetch/v1/fetchSeminarEventService.go
+++ b/backend/service/fetch/v1/fetchSeminarEventService.go
@@ -64,18 +64,22 @@ func GetSeminarGroupsEventsFromHTML(seminarGroupsLabel []string) []model.Seminar
 	var seminarGroups []model.SeminarGroup
 	for _, seminarGroupLabel := range seminarGroupsLabel {

-		ssUrl := "https://stundenplan.htwk-leipzig.de/" + string("ss") + "/Berichte/Text-Listen;Studenten-Sets;name;" + seminarGroupLabel + "?template=sws_semgrp&weeks=1-65"
-		result, getError := fetch.GetHTML(ssUrl)
-		if getError == nil {
-			seminarGroup := parseSeminarGroup(result)
-			seminarGroups = append(seminarGroups, seminarGroup)
+		if (time.Now().Month() >= 3) && (time.Now().Month() <= 10) {
+			ssUrl := "https://stundenplan.htwk-leipzig.de/" + string("ss") + "/Berichte/Text-Listen;Studenten-Sets;name;" + seminarGroupLabel + "?template=sws_semgrp&weeks=1-65"
+			result, getError := fetch.GetHTML(ssUrl)
+			if getError == nil {
+				seminarGroup := parseSeminarGroup(result)
+				seminarGroups = append(seminarGroups, seminarGroup)
+			}
 		}

-		wsUrl := "https://stundenplan.htwk-leipzig.de/" + string("ws") + "/Berichte/Text-Listen;Studenten-Sets;name;" + seminarGroupLabel + "?template=sws_semgrp&weeks=1-65"
-		result, getError = fetch.GetHTML(wsUrl)
-		if getError == nil {
-			seminarGroup := parseSeminarGroup(result)
-			seminarGroups = append(seminarGroups, seminarGroup)
+		if (time.Now().Month() >= 9) || (time.Now().Month() <= 4) {
+			wsUrl := "https://stundenplan.htwk-leipzig.de/" + string("ws") + "/Berichte/Text-Listen;Studenten-Sets;name;" + seminarGroupLabel + "?template=sws_semgrp&weeks=1-65"
+			result, getError := fetch.GetHTML(wsUrl)
+			if getError == nil {
+				seminarGroup := parseSeminarGroup(result)
+				seminarGroups = append(seminarGroups, seminarGroup)
+			}
 		}
 	}
 	return seminarGroups
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,11 +1,24 @@
 <script lang="ts" setup>
 import MenuBar from "./components/MenuBar.vue";
-import { RouterView } from "vue-router";
+import {RouteRecordName, RouterView} from "vue-router";
+import CalendarPreview from "./components/CalendarPreview.vue";
+import moduleStore from "./store/moduleStore.ts";
+
+const disabledPages = ["room-finder", "faq", "imprint", "privacy-policy", "edit"];
+
+const store = moduleStore();
+
+const isDisabled = (routeName: RouteRecordName | null | undefined) => {
+  return !disabledPages.includes(routeName as string) && store.modules.size > 0
+};
+
 </script>

 <template>
  <MenuBar />
  <RouterView />
+  <!-- show CalendarPreview but only on specific router views -->
+  <CalendarPreview v-if="isDisabled($route.name)"/>
 </template>

 <style scoped></style>
--- a/frontend/src/components/CalendarPreview.vue
+++ b/frontend/src/components/CalendarPreview.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { Ref, computed, ref } from "vue";
+import moduleStore from "../store/moduleStore";
+import { useI18n } from "vue-i18n";
+
+const dialogVisible: Ref<boolean> = ref(false);
+const mobilePage = ref(true);
+const { t } = useI18n({ useScope: "global" });
+
+const store = moduleStore();
+const tableData = computed(() =>
+  store.getAllModules().map((module) => {
+    return {
+      Course: module.course,
+      Module: module.userDefinedName,
+    };
+  }),
+);
+
+const previewOn: Ref<boolean> = computed(() => {
+  return moduleStore().modules.size > 0;
+});
+
+const columns = computed(() => [
+  { field: "Course", header: t("calendarPreview.course") },
+  { field: "Module", header: t("calendarPreview.module") },
+]);
+
+const updateMobile = () => {
+  mobilePage.value = window.innerWidth <= 992;
+};
+
+updateMobile();
+
+window.addEventListener("resize", updateMobile);
+</script>
+
+<template>
+  <Dialog
+    id="calendar-dialog"
+    ref="calendar"
+    :visible="dialogVisible && previewOn"
+    :maximizable="!mobilePage"
+    :draggable="false"
+    :header="$t('calendarPreview.preview-long')"
+    class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
+    position="bottomright"
+    @update:visible="dialogVisible = $event"
+  >
+    <DataTable
+      :value="tableData"
+      edit-mode="cell"
+      table-class="editable-cells-table"
+      responsive-layout="scroll"
+    >
+      <Column
+        v-for="column in columns"
+        :key="column.field"
+        :field="column.field"
+        :header="column.header"
+        :row-editor="false"
+      >
+        <template #body="{ data, field }">
+          {{ data[field] }}
+        </template>
+      </Column>
+    </DataTable>
+  </Dialog>
+  <SpeedDial
+    v-if="previewOn && !dialogVisible"
+    :style="{ position: 'fixed', bottom: '2rem', right: '2rem' }"
+  >
+    <template #button>
+      <Button
+        icon="pi pi-calendar"
+        :label="$t('calendarPreview.preview')"
+        class="p-button-rounded p-button-primary"
+        @click="dialogVisible = true"
+      />
+    </template>
+  </SpeedDial>
+</template>
+
+<style scoped></style>
--- a/frontend/src/components/ModuleSelection.vue
+++ b/frontend/src/components/ModuleSelection.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { computed, ComputedRef, PropType, Ref, ref, watch } from "vue";
+import { computed, ComputedRef, PropType } from "vue";
 import { Module } from "../model/module.ts";
 import moduleStore from "../store/moduleStore";
 import router from "../router";

+const store = moduleStore();
 const props = defineProps({
  modules: {
    type: Array as PropType<Module[]>,
@@ -11,48 +12,31 @@ const props = defineProps({
  },
 });

-type ModuleWithSelection = { module: Module; selected: boolean };
+const modules : ComputedRef<Module[]> = computed(() => props.modules);

-// array of modules with boolean if selected with getter and setter
-const modulesWithSelection: Ref<ModuleWithSelection[]> = ref(
-  props.modules.map((propModule) => {
-    return {
-      module: propModule,
-      selected: moduleStore().modules.some((module: Module) =>
-        module.isEqual ? module.isEqual(propModule) : false,
-      ),
-    };
-  }),
-);
+store.modules.clear();

-const selectedModules: ComputedRef<Module[]> = computed(() =>
-  modulesWithSelection.value
-    .filter((module) => module.selected)
-    .map((module) => module.module),
-);
+const allSelected : ComputedRef<boolean> = 
+  computed(() => props.modules.every((module) => store.hasModule(module)));

-const currentModules = computed(() => props.modules);
-
-function selectAllModules(selection: boolean) {
+function toggleAllModules(){
+  if (allSelected.value) {
+    store.removeAllModules();
+  } else {
+    store.overwriteModules(props.modules);
+  }
  console.debug(props.modules);
-  modulesWithSelection.value.forEach((module) => {
-    module.selected = selection;
-  });
 }

-const allSelected: Ref<boolean> = ref(true);
-
-watch(currentModules, (newValue: Module[]) => {
-  modulesWithSelection.value = newValue.map((module) => {
-    return { module: module, selected: false };
-  });
-});
+function toggleModule(module: Module) {
+  if (store.hasModule(module)) {
+    store.removeModule(module);
+  } else {
+    store.addModule(module);
+  }
+}

 function nextStep() {
-  selectedModules.value.forEach((module: Module) => {
-    moduleStore().addModule(module);
-  });
-
  router.push("/additional-modules");
 }
 </script>
@@ -61,31 +45,29 @@ function nextStep() {
  <div class="flex flex-column card-container mx-8 mt-2">
    <div class="flex align-items-center justify-content-center mb-3">
      <Button
-        :disabled="selectedModules.length < 1"
+        :disabled="store.isEmpty()"
        class="col-4 justify-content-center"
        @click="nextStep()"
        >{{ $t("moduleSelection.nextStep") }}
      </Button>
    </div>
    <div class="flex align-items-center justify-content-center">
-      <DataView :value="modulesWithSelection" data-key="module">
+      <DataView :value="modules" data-key="uuid">
        <template #header>
          <div class="flex justify-content-between flex-wrap">
            <div class="flex align-items-center justify-content-center">
              <h3>
                {{ $t("moduleSelection.modules") }} -
-                {{ selectedModules.length }}
+                {{ store.countModules() }}
              </h3>
            </div>
            <div class="flex align-items-center justify-content-center">
-              <ToggleButton
-                v-model="allSelected"
-                class="w-12rem"
-                off-icon="pi pi-times"
-                :off-label="$t('moduleSelection.deselectAll')"
-                on-icon="pi pi-check"
-                :on-label="$t('moduleSelection.selectAll')"
-                @click="selectAllModules(!allSelected)"
+              {{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
+              <InputSwitch
+                class="mx-4"
+                :disabled="modules.length === 0"
+                :model-value="allSelected"
+                @update:model-value="toggleAllModules()"
              />
            </div>
          </div>
@@ -106,18 +88,19 @@ function nextStep() {
                <div
                  class="flex flex-column align-items-center justify-content-center sm:align-items-start gap-3"
                >
-                  <p class="text-lg">{{ slotProps.data.module.name }}</p>
+                  <p class="text-lg">{{ slotProps.data.name }}</p>
                </div>
                <div
                  class="flex sm:flex-column justify-content-center sm:align-items-end gap-3 sm:gap-2"
                >
                  <ToggleButton
-                    v-model="modulesWithSelection[slotProps.index].selected"
                    class="w-9rem"
                    off-icon="pi pi-times"
                    :off-label="$t('moduleSelection.unselected')"
                    on-icon="pi pi-check"
                    :on-label="$t('moduleSelection.selected')"
+                    :model-value="store.hasModule(slotProps.data)"
+                    @update:model-value="toggleModule(slotProps.data)"
                  />
                </div>
              </div>
--- a/frontend/src/components/ModuleTemplateDialog.vue
+++ b/frontend/src/components/ModuleTemplateDialog.vue
@@ -68,10 +68,4 @@ const placeholders = computed(() => [
  </Dialog>
 </template>

-<style scoped>
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
-</style>
+<style scoped></style>
--- a/frontend/src/components/RenameModules.vue
+++ b/frontend/src/components/RenameModules.vue
@@ -9,8 +9,9 @@ import { onlyWhitespace } from "../helpers/strings.ts";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({ useScope: "global" });

+const store = moduleStore();
 const tableData = ref(
-  moduleStore().modules.map((module) => {
+  store.getAllModules().map((module) => {
    return {
      Course: module.course,
      Module: module,
@@ -25,7 +26,7 @@ const columns = computed(() => [
 ]);

 async function finalStep() {
-  const token: string = await createIndividualFeed(moduleStore().modules);
+  const token: string = await createIndividualFeed(store.getAllModules());
  tokenStore().setToken(token);
  await router.push("/calendar-link");
 }
@@ -124,10 +125,4 @@ async function finalStep() {
  </div>
 </template>

-<style scoped>
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
-</style>
+<style scoped></style>
--- a/frontend/src/components/editCalendar/EditModules.vue
+++ b/frontend/src/components/editCalendar/EditModules.vue
@@ -11,8 +11,9 @@ import { onlyWhitespace } from "../../helpers/strings.ts";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({ useScope: "global" });

+const store = moduleStore();
 const tableData = computed(() =>
-  moduleStore().modules.map((module: Module) => {
+  store.getAllModules().map((module: Module) => {
    return {
      Course: module.course,
      Module: module,
@@ -45,7 +46,7 @@ fetchedModules().then(
 );

 async function finalStep() {
-  await saveIndividualFeed(tokenStore().token, moduleStore().modules);
+  await saveIndividualFeed(tokenStore().token, store.getAllModules());
  await router.push("/calendar-link");
 }
 </script>
@@ -159,10 +160,4 @@ async function finalStep() {
  </div>
 </template>

-<style scoped>
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
-</style>
+<style scoped></style>
--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@@ -38,7 +38,7 @@
    "semester": "Semester",
    "module": "Modul",
    "day": "Tag",
-    "start": "Begin",
+    "start": "Anfang",
    "end": "Ende",
    "room": "Raum",
    "type": "Art",
@@ -57,8 +57,17 @@
    "dropDown": "Wähle weitere Module aus",
    "module": "Modul",
    "modules": "Module",
-    "dropDownFooterSelected": "ausgewählt",
-    "nextStep": "Weiter"
+    "footerModulesSelected": "{count} Modul ausgewählt | {count} Module ausgewählt",
+    "nextStep": "Weiter",
+    "professor": "Dozent",
+    "course": "Seminargruppe",
+    "info": "Info",
+    "info-long": "Information",
+    "paginator": {
+      "from": "",
+      "to": " bis ", 
+      "of": " von insgesamt "
+    }
  },
  "renameModules": {
    "reminder": "Erinnerung",
@@ -90,6 +99,12 @@
    "toGoogleCalendar": "Google Kalender",
    "toMicrosoftCalendar": "Microsoft Kalender"
  },
+  "calendarPreview": {
+    "preview": "Vorschau",
+    "preview-long": "Kalendervorschau",
+    "module": "Modul",
+    "course": "Seminargruppe"
+  },
  "faqView": {
    "headline": "Fragen und Antworten",
    "firstQuestion": "Wie funktioniert das Kalender erstellen mit dem HTWKalender?",
--- a/frontend/src/i18n/translations/en.json
+++ b/frontend/src/i18n/translations/en.json
@@ -53,12 +53,21 @@
    "noCalendarFound": "no calendar found"
  },
  "additionalModules": {
-    "subTitle": "Select additional Modules that are not listed in the regular semester for your Course",
+    "subTitle": "Select additional modules that are not listed in the regular semester for your course",
    "dropDown": "Select additional modules",
    "module": "module",
    "modules": "modules",
-    "dropDownFooterSelected": "selected",
-    "nextStep": "next step"
+    "footerModulesSelected": "{count} module selected | {count} modules selected",
+    "nextStep": "next step",
+    "professor": "professor",
+    "course": "course",
+    "info": "info",
+    "info-long": "information",
+    "paginator": {
+      "from": "",
+      "to": " to ", 
+      "of": " of "
+    }
  },
  "renameModules": {
    "reminder": "reminder",
@@ -90,6 +99,12 @@
    "toGoogleCalendar": "to Google Calendar",
    "toMicrosoftCalendar": "to Microsoft Calendar"
  },
+  "calendarPreview": {
+    "preview": "preview",
+    "preview-long": "calendar preview",
+    "module": "module",
+    "course": "course"
+  },
  "faqView": {
    "headline": "faq",
    "firstQuestion": "How does calendar creation work with HTWKalender?",
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -16,6 +16,7 @@ import "primevue/resources/themes/viva-dark/theme.css";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.css";
 import router from "./router";
+import SpeedDial from "primevue/speeddial";
 import TabView from "primevue/tabview";
 import TabPanel from "primevue/tabpanel";
 import Tag from "primevue/tag";
@@ -30,6 +31,7 @@ import Column from "primevue/column";
 import DynamicDialog from "primevue/dynamicdialog";
 import DialogService from "primevue/dialogservice";
 import ProgressSpinner from "primevue/progressspinner";
+import Checkbox from "primevue/checkbox";
 import i18n from "./i18n";

 const app = createApp(App);
@@ -52,6 +54,7 @@ app.component("InputSwitch", InputSwitch);
 app.component("Card", Card);
 app.component("DataView", DataView);
 app.component("ToggleButton", ToggleButton);
+app.component("SpeedDial", SpeedDial);
 app.component("TabView", TabView);
 app.component("TabPanel", TabPanel);
 app.component("MultiSelect", MultiSelect);
@@ -63,4 +66,5 @@ app.component("DataTable", DataTable);
 app.component("Column", Column);
 app.component("DynamicDialog", DynamicDialog);
 app.component("ProgressSpinner", ProgressSpinner);
+app.component("Checkbox", Checkbox);
 app.mount("#app");
--- a/frontend/src/model/module.ts
+++ b/frontend/src/model/module.ts
@@ -12,7 +12,7 @@ export class Module {
    public events: Event[] = [],
  ) {}

-  isEqual(module: Module): Boolean {
+  isEqual(module: Module): boolean {
    return this.name === module.name && this.course === module.course;
  }
 }
--- a/frontend/src/store/moduleStore.ts
+++ b/frontend/src/store/moduleStore.ts
@@ -3,18 +3,42 @@ import { defineStore } from "pinia";

 const moduleStore = defineStore("moduleStore", {
  state: () => ({
-    modules: [] as Module[],
+    modules: new Map<string, Module>(),
  }),
  actions: {
    addModule(module: Module) {
-      this.modules.push(module);
+      this.modules.set(module.uuid, module);
    },
    removeModule(module: Module) {
-      this.modules.splice(this.modules.indexOf(module), 1);
+      this.modules.delete(module.uuid);
+    },
+    hasModule(module: Module): boolean {
+      return (
+        this.modules.has(module.uuid) &&
+        (this.modules.get(module.uuid)?.isEqual(module) ?? false)
+      );
    },
    removeAllModules() {
-      this.modules = [];
+      this.modules.clear();
    },
+    overwriteModules(modules: Module[]) {
+      this.modules.clear();
+      modules.forEach((module) => {
+        this.modules.set(module.uuid, module);
+      });
+    },
+    isEmpty(): boolean {
+      return this.modules.size === 0;
+    },
+    countModules(): number {
+      return this.modules.size;
+    },
+    getAllModules(): Module[] {
+      return Array.from(this.modules.values());
+    },
+    containsModule(module: Module): boolean {
+        return this.modules.has(module.uuid);
+    }
  },
 });

--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,3 +1,10 @@
 body {
  font-family: var(--font-family);
 }
+
+.small-button.p-button.p-button-icon-only,
+.small-button.p-button.p-button-icon-only.p-button-rounded {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
--- a/frontend/src/view/AdditionalModules.vue
+++ b/frontend/src/view/AdditionalModules.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, Ref } from "vue";
+import { defineAsyncComponent, ref, Ref} from "vue";
 import { Module } from "../model/module.ts";
 import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
-import { MultiSelectAllChangeEvent } from "primevue/multiselect";
+import { FilterMatchMode } from "primevue/api";
+import { DataTableRowSelectEvent, DataTableRowUnselectEvent } from "primevue/datatable";
+import { useDialog } from "primevue/usedialog";
 import router from "../router";
 import { fetchModule } from "../api/fetchModule.ts";
-import { useDialog } from "primevue/usedialog";
 import { useI18n } from "vue-i18n";

 const dialog = useDialog();
@@ -16,9 +17,26 @@ const fetchedModules = async () => {
  return await fetchAllModules();
 };

-const modules: Ref<Module[]> = ref([]);
+const store = moduleStore();
+if (store.isEmpty()) {
+  router.replace("/");
+}

-const selectedModules: Ref<Module[]> = ref([] as Module[]);
+const modules: Ref<Module[]> = ref([]);
+const filters = ref({
+  course: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+  name: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+  prof: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+});

 fetchedModules().then(
  (data) =>
@@ -28,10 +46,6 @@ fetchedModules().then(
 );

 async function nextStep() {
-  selectedModules.value.forEach((module: Module) => {
-    moduleStore().addModule(module);
-  });
-
  await router.push("/rename-modules");
 }

@@ -60,36 +74,14 @@ async function showInfo(module: Module) {
  });
 }

-const display = (module: Module) => module.name + " (" + module.course + ")";
-
-const selectAll = ref(false);
-
-const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
-  selectedModules.value = event.checked
-    ? modules.value.map((module: Module) => module)
-    : [];
-  selectAll.value = event.checked;
-};
-
-function selectChange() {
-  selectAll.value = selectedModules.value.length === modules.value.length;
+function selectModule(event: DataTableRowSelectEvent) {
+  store.addModule(event.data);
 }

-function itemsLabel(selectedModules: Module[]): string {
-  return (selectedModules ? selectedModules.length : 0) != 1
-    ? t("additionalModules.modules")
-    : t("additionalModules.module");
+function unselectModule(event: DataTableRowUnselectEvent) {
+  store.removeModule(event.data);
 }

-function itemsLabelWithNumber(selectedModules: Module[]): string {
-  return (
-    selectedModules.length.toString() +
-    " " +
-    itemsLabel(selectedModules) +
-    " " +
-    t("additionalModules.dropDownFooterSelected")
-  );
-}
 </script>

 <template>
@@ -100,56 +92,103 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
      </h3>
    </div>
    <div class="card flex align-items-center justify-content-center m-2">
-      <MultiSelect
-        v-model="selectedModules"
-        :max-selected-labels="1"
-        :option-label="display"
-        :options="modules"
-        :select-all="selectAll"
-        :virtual-scroller-options="{ itemSize: 70 }"
-        class="custom-multiselect"
-        filter
-        :placeholder="$t('additionalModules.dropDown')"
-        :auto-filter-focus="true"
-        :show-toggle-all="false"
-        :selected-items-label="itemsLabelWithNumber(selectedModules)"
-        @change="selectChange()"
-        @selectall-change="onSelectAllChange($event)"
+      <DynamicDialog />
+      <DataTable
+        v-model:filters="filters"
+        :selection="store.getAllModules()"
+        :value="modules"
+        data-key="uuid"
+        paginator
+        :rows="10"
+        :rows-per-page-options="[5, 10, 20, 50]"
+        paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
+        :current-page-report-template="
+          $t('additionalModules.paginator.from') +
+          '{first}' + 
+          $t('additionalModules.paginator.to') + 
+          '{last}' + 
+          $t('additionalModules.paginator.of') + 
+          '{totalRecords}'
+        "
+        filter-display="row"
+        :loading="!modules.length"
+        loading-icon="pi pi-spinner"
+        :show-gridlines="true"
+        :striped-rows="true"
+        :select-all="false"
+        class="w-10"
+        @row-select="selectModule"
+        @row-unselect="unselectModule"
      >
-        <template #option="slotProps">
-          <div class="flex justify-content-between w-full">
-            <div class="flex align-items-center justify-content-center">
-              <p class="text-1xl white-space-normal p-mb-0">
-                {{ display(slotProps.option) }}
-              </p>
-            </div>
-            <div class="flex align-items-center justify-content-center ml-2">
-              <Button
-                class="small-button"
-                icon="pi pi-info"
-                severity="secondary"
-                rounded
-                outlined
-                aria-label="Information"
-                @click.stop="showInfo(slotProps.option)"
-              ></Button>
-              <DynamicDialog />
-            </div>
-          </div>
-        </template>
+        <Column selection-mode="multiple">
+        </Column>
+
+        <Column
+          field="course"
+          :header="$t('additionalModules.course')"
+          :show-clear-button="false"
+          :show-filter-menu="false"
+        >
+          <template #filter="{ filterModel, filterCallback }">
+            <InputText
+              v-model="filterModel.value"
+              type="text"
+              class="p-column-filter max-w-10rem"
+              @input="filterCallback()"
+            />
+          </template>
+        </Column>
+        <Column
+          field="name"
+          :header="$t('additionalModules.module')"
+          :show-clear-button="false"
+          :show-filter-menu="false"
+        >
+          <template #filter="{ filterModel, filterCallback }">
+            <InputText
+              v-model="filterModel.value"
+              type="text"
+              class="p-column-filter"
+              @input="filterCallback()"
+            />
+          </template>
+        </Column>
+        <Column
+          field="prof"
+          :header="$t('additionalModules.professor')"
+          :show-clear-button="false"
+          :show-filter-menu="false"
+        >
+        </Column>
+        <Column 
+          :header="$t('additionalModules.info')"
+        >
+          <template #body="slotProps">
+            <Button
+              icon="pi pi-info"
+              severity="secondary"
+              rounded
+              outlined
+              :aria-label="$t('additionalModules.info-long')"
+              class="small-button"
+              @click.stop="showInfo(slotProps.data)"
+            ></Button>
+          </template>
+        </Column>
        <template #footer>
          <div class="py-2 px-3">
-            <b>{{ selectedModules ? selectedModules.length : 0 }}</b>
-            item{{
-              (selectedModules ? selectedModules.length : 0) > 1 ? "s" : ""
+            {{ 
+              t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 })
            }} 
-            selected.
          </div>
        </template>
-      </MultiSelect>
+      </DataTable>
    </div>
    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="nextStep()">{{
+      <Button 
+        :disabled="store.isEmpty()"
+        @click="nextStep()"
+      >{{
        $t("additionalModules.nextStep")
      }}</Button>
    </div>
@@ -170,4 +209,8 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
  height: 2rem;
  padding: 0;
 }
+
+:deep(.p-filter-column .p-checkbox .p-component) {
+  display: none !important;
+}
 </style>
--- a/frontend/src/view/EditCalendarView.vue
+++ b/frontend/src/view/EditCalendarView.vue
@@ -12,7 +12,7 @@ const { t } = useI18n({ useScope: "global" });
 const toast = useToast();

 const token: Ref<string> = ref("");
-const modules: Ref<Module[]> = ref(moduleStore().modules);
+const modules: Ref<Map<string, Module>> = ref(moduleStore().modules);

 function extractToken(token: string): string {
  const tokenRegex = /^[a-z0-9]{15}$/;
@@ -51,7 +51,7 @@ function loadCalendar(): void {
      data.forEach((module) => {
        moduleStore().addModule(module);
      });
-      modules.value = data;
+      modules.value = moduleStore().modules;
      router.push("/edit-additional-modules");
    } else {
      toast.add({