Merge pull request #119 from HTWK-Leipzig/115-additional-modules-table

115 additional modules table

frontend/src/components/AdditionalModuleTable.vue

@@ -0,0 +1,200 @@
+<script lang="ts" setup>
+import { defineAsyncComponent, inject, ref, Ref} from "vue";
+import { Module } from "../model/module.ts";
+import { fetchAllModules } from "../api/fetchCourse.ts";
+import moduleStore from "../store/moduleStore.ts";
+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 { useI18n } from "vue-i18n";
+
+const dialog = useDialog();
+const { t } = useI18n({ useScope: "global" });
+
+const fetchedModules = async () => {
+  return await fetchAllModules();
+};
+
+const store = moduleStore();
+if (store.isEmpty()) {
+  router.replace("/");
+}
+
+const mobilePage = inject("mobilePage") as Ref<boolean>;
+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) =>
+    (modules.value = data.map((module: Module) => {
+      return module;
+    })),
+);
+
+const ModuleInformation = defineAsyncComponent(
+  () => import("./ModuleInformation.vue"),
+);
+
+async function showInfo(module: Module) {
+  await fetchModule(module).then((data) => {
+    module = data;
+  });
+  dialog.open(ModuleInformation, {
+    class: "w-full m-0",
+    props: {
+        style: {
+          width: "80vw",
+        },
+        breakpoints: {
+          "992px": "100vw",
+          "640px": "100vw",
+        },
+        modal: true,
+      },
+    data: {
+      module: module,
+    },
+  });
+}
+
+function selectModule(event: DataTableRowSelectEvent) {
+  store.addModule(event.data);
+}
+
+function unselectModule(event: DataTableRowUnselectEvent) {
+  store.removeModule(event.data);
+}
+
+</script>
+
+<template>
+  <div class="m-2 lg:w-10 w-full">
+    <DynamicDialog />
+    <DataTable
+      id="dt-responsive-table"
+      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"
+      :size="mobilePage ? 'small' : 'large'"
+      @row-select="selectModule"
+      @row-unselect="unselectModule"
+    >
+      <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">
+          {{ 
+            t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 })
+          }} 
+        </div>
+      </template>
+    </DataTable>
+  </div>
+</template>
+
+<style scoped>
+:deep(.custom-multiselect) {
+  width: 50rem;
+}
+
+:deep(.custom-multiselect li) {
+  height: unset;
+}
+
+.small-button.p-button {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
+
+:deep(.p-filter-column .p-checkbox .p-component) {
+  display: none !important;
+}
+</style>

frontend/src/components/ModuleSelection.vue

@@ -2,7 +2,6 @@
 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({
@@ -40,21 +39,10 @@ function toggleModule(module: Module) {
     store.addModule(module);
   }
 }
-
-function nextStep() {
-  router.push("/additional-modules");
-}
 </script>
 
 <template>
-  <div class="flex flex-column mx-8 mt-2 w-full">
-    <Button
-      :disabled="store.isEmpty()"
-      class="col-12 md:col-4 mb-3 align-self-end"
-      @click="nextStep()"
-      icon="pi pi-arrow-right"
-      :label="$t('moduleSelection.nextStep')"
-    />
+  <div class="flex flex-column w-full">
     <DataView 
       :value="modules"
       data-key="uuid"

frontend/src/components/editCalendar/EditAdditionalModules.vue

@@ -1,152 +0,0 @@
-<script lang="ts" setup>
-import { defineAsyncComponent, ref, Ref } from "vue";
-import { Module } from "../../model/module.ts";
-import { fetchAllModules } from "../../api/fetchCourse.ts";
-import moduleStore from "../../store/moduleStore";
-import { MultiSelectAllChangeEvent } from "primevue/multiselect";
-import router from "../../router";
-import { fetchModule } from "../../api/fetchModule.ts";
-import { useDialog } from "primevue/usedialog";
-import { useI18n } from "vue-i18n";
-
-const dialog = useDialog();
-const { t } = useI18n({ useScope: "global" });
-
-const fetchedModules = async () => {
-  return await fetchAllModules();
-};
-
-const modules: Ref<Module[]> = ref([]);
-
-const selectedModules: Ref<Module[]> = ref([] as Module[]);
-
-fetchedModules().then(
-  (data) =>
-    (modules.value = data.map((module: Module) => {
-      return module;
-    })),
-);
-
-async function nextStep() {
-  selectedModules.value.forEach((module: Module) => {
-    moduleStore().addModule(module);
-  });
-
-  await router.push("/edit-calendar");
-}
-
-const ModuleInformation = defineAsyncComponent(
-  () => import("../ModuleInformation.vue"),
-);
-
-async function showInfo(module: Module) {
-  await fetchModule(module).then((data: Module) => {
-    dialog.open(ModuleInformation, {
-      props: {
-        style: {
-          width: "50vw",
-        },
-        breakpoints: {
-          "960px": "75vw",
-          "640px": "90vw",
-        },
-        modal: true,
-      },
-      data: {
-        module: data,
-      },
-    });
-  });
-}
-
-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)
-    : [];
-  selectAll.value = event.checked;
-};
-
-function selectChange() {
-  selectAll.value = selectedModules.value.length === modules.value.length;
-}
-</script>
-
-<template>
-  <div class="flex flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h3>
-        {{ $t("additionalModules.subTitle") }}
-      </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="$t('additionalModules.footerModulesSelected', { count: selectedModules.length ?? 0 })"
-        @change="selectChange()"
-        @selectall-change="onSelectAllChange($event)"
-      >
-        <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>
-        <template #footer>
-          <div class="py-2 px-3">
-            {{ t('additionalModules.footerModulesSelected', { count: selectedModules.length ?? 0 }) }}
-          </div>
-        </template>
-      </MultiSelect>
-    </div>
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="nextStep()">{{
-        $t("additionalModules.nextStep")
-      }}</Button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-:deep(.custom-multiselect) {
-  width: 50rem;
-}
-
-:deep(.custom-multiselect li) {
-  height: unset;
-}
-
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
-</style>

frontend/src/i18n/translations/de.json

@@ -13,6 +13,7 @@
     "winterSemester": "Wintersemester",
     "summerSemester": "Sommersemester",
     "subTitle": "Bitte wähle eine Gruppe und das Semester aus.",
+    "nextStep": "Weiter",
     "courseDropDown": "Gruppe",
     "noCoursesAvailable": "Keine Gruppen verfügbar",
     "semesterDropDown": "Semester"
@@ -26,7 +27,6 @@
     "occupied": "belegt"
   },
   "moduleSelection": {
-    "nextStep": "Weiter",
     "selectAll": "Alle anwählen",
     "deselectAll": "Alle abwählen",
     "selected": "angewählt",

frontend/src/i18n/translations/en.json

@@ -13,6 +13,7 @@
     "winterSemester": "winter semester",
     "summerSemester": "summer semester",
     "subTitle": "please select a course and semester",
+    "nextStep": "next step",
     "courseDropDown": "please select a course",
     "noCoursesAvailable": "no courses listed",
     "semesterDropDown": "please select a semester"
@@ -26,7 +27,6 @@
     "occupied": "occupied"
   },
   "moduleSelection": {
-    "nextStep": "next step",
     "selectAll": "select all",
     "deselectAll": "deselect all",
     "selected": "selected",

frontend/src/router/index.ts

@@ -8,8 +8,8 @@ const PrivacyPolicy = () => import("../view/PrivacyPolicy.vue");
 const RenameModules = () => import("../components/RenameModules.vue");
 const RoomFinder = () => import("../view/RoomFinder.vue");
 const EditCalendarView = () => import("../view/EditCalendarView.vue");
-const EditAdditionalModules = () => import("../components/editCalendar/EditAdditionalModules.vue");
-const EditModules = () => import("../components/editCalendar/EditModules.vue");
+const EditAdditionalModules = () => import("../view/editCalendar/EditAdditionalModules.vue");
+const EditModules = () => import("../view/editCalendar/EditModules.vue");
 const CourseSelection = () => import("../view/CourseSelection.vue");
 
 import i18n from "../i18n";

frontend/src/view/AdditionalModules.vue

@@ -1,89 +1,16 @@
 <script lang="ts" setup>
-import { defineAsyncComponent, inject, ref, Ref} from "vue";
-import { Module } from "../model/module.ts";
-import { fetchAllModules } from "../api/fetchCourse.ts";
-import moduleStore from "../store/moduleStore.ts";
-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 { useI18n } from "vue-i18n";
-
-const dialog = useDialog();
-const { t } = useI18n({ useScope: "global" });
-
-const fetchedModules = async () => {
-  return await fetchAllModules();
-};
+import { defineAsyncComponent } from 'vue';
+import moduleStore from '../store/moduleStore';
+import router from '../router';
 
 const store = moduleStore();
-if (store.isEmpty()) {
-  router.replace("/");
-}
-
-const mobilePage = inject("mobilePage") as Ref<boolean>;
-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) =>
-    (modules.value = data.map((module: Module) => {
-      return module;
-    })),
+const AdditionalModuleTable = defineAsyncComponent(
+  () => import("../components/AdditionalModuleTable.vue"),
 );
 
 async function nextStep() {
   await router.push("/rename-modules");
 }
-
-const ModuleInformation = defineAsyncComponent(
-  () => import("../components/ModuleInformation.vue"),
-);
-
-async function showInfo(module: Module) {
-  await fetchModule(module).then((data) => {
-    module = data;
-  });
-  dialog.open(ModuleInformation, {
-    class: "w-full m-0",
-    props: {
-        style: {
-          width: "80vw",
-        },
-        breakpoints: {
-          "992px": "100vw",
-          "640px": "100vw",
-        },
-        modal: true,
-      },
-    data: {
-      module: module,
-    },
-  });
-}
-
-function selectModule(event: DataTableRowSelectEvent) {
-  store.addModule(event.data);
-}
-
-function unselectModule(event: DataTableRowUnselectEvent) {
-  store.removeModule(event.data);
-}
-
 </script>
 
 <template>
@@ -93,100 +20,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         {{ $t("additionalModules.subTitle") }}
       </h3>
     </div>
-    <div class="m-2 lg:w-10 w-full">
-      <DynamicDialog />
-      <DataTable
-        id="dt-responsive-table"
-        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"
-        :size="mobilePage ? 'small' : 'large'"
-        @row-select="selectModule"
-        @row-unselect="unselectModule"
-      >
-        <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">
-            {{ 
-              t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 })
-            }} 
-          </div>
-        </template>
-      </DataTable>
-    </div>
+    <AdditionalModuleTable />
     <div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10">
       <Button 
         :disabled="store.isEmpty()"
@@ -198,23 +32,3 @@ function unselectModule(event: DataTableRowUnselectEvent) {
     </div>
   </div>
 </template>
-
-<style scoped>
-:deep(.custom-multiselect) {
-  width: 50rem;
-}
-
-:deep(.custom-multiselect li) {
-  height: unset;
-}
-
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
-
-:deep(.p-filter-column .p-checkbox .p-component) {
-  display: none !important;
-}
-</style>

frontend/src/view/CourseSelection.vue

@@ -4,9 +4,14 @@ import {
   fetchCourse,
   fetchModulesByCourseAndSemester,
 } from "../api/fetchCourse";
+import DynamicPage from "./DynamicPage.vue";
 import ModuleSelection from "../components/ModuleSelection.vue";
 import { Module } from "../model/module.ts";
 import { useI18n } from "vue-i18n";
+import moduleStore from "../store/moduleStore";
+import router from "../router";
+
+const store = moduleStore();
 const { t } = useI18n({ useScope: "global" });
 
 const courses = async () => {
@@ -52,31 +57,23 @@ async function getModules() {
 </script>
 
 <template>
-  <div 
-    class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
-    :class="{'md:mt-8': selectedCourse.name === ''}"
+  <DynamicPage
+    :hideContent="selectedCourse.name === ''"
+    :headline="$t('courseSelection.headline')"
+    :subTitle="$t('courseSelection.subTitle')"
+    icon="pi pi-calendar"
+    :button="{
+      label: $t('courseSelection.nextStep'),
+      icon: 'pi pi-arrow-right',
+      disabled: store.isEmpty(),
+      onClick: () => router.push('/additional-modules')
+    }"
   >
-    <div class="flex align-items-center justify-content-center gap-2 mx-2">
-      <h3 class="text-4xl">
-        {{ $t("courseSelection.headline") }}
-      </h3>
-      <i
-        class="pi pi-calendar"
-        style="font-size: 2rem"
-      ></i>
-    </div>
-    <div
-      class="flex justify-content-center"
-    >
-      <h5 class="text-2xl m-2">{{ $t("courseSelection.subTitle") }}</h5>
-    </div>
-    <div
-      class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8"
-    >
+    <template #selection="{ flexSpecs }">
       <Dropdown
         v-model="selectedCourse"
         :options="countries"
-        class="flex-1 m-0"
+        :class="flexSpecs"
         filter
         option-label="name"
         :placeholder="$t('courseSelection.courseDropDown')"
@@ -87,16 +84,17 @@ async function getModules() {
       <Dropdown
         v-model="selectedSemester"
         :options="semesters"
-        class="flex-1 m-0"
+        :class="flexSpecs"
         option-label="name"
         :placeholder="$t('courseSelection.semesterDropDown')"
         @change="getModules()"
       ></Dropdown>
-    </div>
-    <ModuleSelection
-      :modules="modules"
-      :selected-course="selectedCourse.name"
-      class="lg:w-8"
-    />
-  </div>
+    </template>
+    <template #content>
+      <ModuleSelection
+        :modules="modules"
+        :selected-course="selectedCourse.name"
+      />
+    </template>
+  </DynamicPage>
 </template>

frontend/src/view/DynamicPage.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue';
+
+defineProps<{
+  hideContent: boolean,
+  headline: string,
+  subTitle?: string,
+  icon?: string,
+  button?: {
+    label: string,
+    icon: string,
+    disabled: boolean,
+    onClick: () => void
+  }
+}>()
+
+const slots = useSlots()
+const hasSlot = (name:string) => {
+    return !!slots[name];
+  }
+const hasContent = computed(() => {
+    return hasSlot('content')
+  })
+</script>
+
+<template>
+  <div 
+    class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
+    :class="{'md:mt-8': hideContent}"
+  >
+    <div class="flex align-items-center justify-content-center gap-2 mx-2">
+      <h3 class="text-4xl">
+        {{ headline }}
+      </h3>
+      <i
+        v-if="icon"
+        :class="icon"
+        style="font-size: 2rem"
+      ></i>
+    </div>
+    <div
+      v-if="subTitle"
+      class="flex justify-content-center"
+    >
+      <h5 class="text-2xl m-2">{{ subTitle }}</h5>
+    </div>
+    <div
+      class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8"
+    >
+      <slot 
+        name="selection"
+        flexSpecs="flex-1 m-0"
+      ></slot>
+    </div>
+    <div
+      v-if="button"
+      class="flex flex-wrap m-0 mb-3 gap-2 w-full lg:w-8 align-items-center justify-content-end"
+    >
+      <Button
+        :disabled="button.disabled"
+        class="col-12 md:col-4"
+        @click="button.onClick()"
+        :icon="button.icon"
+        :label="button.label"
+      />
+    </div>
+    <div 
+      v-if="hasContent"
+      :class="
+        [hideContent? 
+          ['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden'] : 
+          ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
+        ,
+        'w-full', 'lg:w-8']"
+      >
+      <slot
+        name="content"
+      ></slot>
+    </div>
+  </div>
+</template>

frontend/src/view/EditCalendarView.vue

@@ -7,6 +7,7 @@ import router from "../router";
 import tokenStore from "../store/tokenStore";
 import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
+import DynamicPage from "./DynamicPage.vue";
 const { t } = useI18n({ useScope: "global" });
 
 const toast = useToast();
@@ -14,10 +15,14 @@ const toast = useToast();
 const token: Ref<string> = ref("");
 const modules: Ref<Map<string, Module>> = ref(moduleStore().modules);
 
-function extractToken(token: string): string {
-  const tokenRegex = /^[a-z0-9]{15}$/;
-  const tokenUriRegex = /[?&]token=([a-z0-9]{15})(?:&|$)/;
+const tokenRegex = /^[a-z0-9]{15}$/;
+const tokenUriRegex = /[?&]token=([a-z0-9]{15})(?:&|$)/;
 
+const isToken = (token: string): boolean => {
+  return tokenRegex.test(token) || tokenUriRegex.test(token);
+};
+
+function extractToken(token: string): string {
   if (tokenRegex.test(token)) {
     return token;
   }
@@ -66,43 +71,28 @@ function loadCalendar(): void {
 </script>
 
 <template>
-  <div class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out md:mt-8 mb-7">
-    <div class="flex align-items-center justify-content-center gap-2 mx-2">
-      <h3 class="text-4xl">
-        {{ $t("editCalendarView.headline") }}
-      </h3>
-      <i
-        class="pi pi-pencil"
-        style="font-size: 2rem"
-      ></i>
-    </div>
-    <div
-      class="flex justify-content-center"
-    >
-      <p class="text-2xl m-2">{{ $t("editCalendarView.subTitle") }}</p>
-    </div>
-    <div
-      class="flex align-items-center justify-content-center m-4 w-full lg:w-8"
-    >
+  <DynamicPage
+    hideContent
+    :headline="$t('editCalendarView.headline')"
+    :subTitle="$t('editCalendarView.subTitle')"
+    icon="pi pi-pencil"
+    :button="{
+      label: $t('editCalendarView.loadCalendar'),
+      icon: 'pi pi-arrow-down',
+      disabled: !isToken(token),
+      onClick: loadCalendar
+    }"
+  >
+    <template #selection="{ flexSpecs }">
       <InputText
         v-model="token"
         type="text"
-        class="w-full"
+        :class="flexSpecs"
         autofocus
         @keyup.enter="loadCalendar"
       />
-    </div>
-    <div
-      class="flex align-items-center justify-content-end m-2 w-full lg:w-8"
-    >
-      <Button
-        :label="$t('editCalendarView.loadCalendar')"
-        icon="pi pi-arrow-down"
-        class="col-12 md:col-4 mb-3 align-self-end"
-        @click="loadCalendar"
-      />
-    </div>
-  </div>
+    </template>
+  </DynamicPage>
 </template>
 
 <style scoped></style>

frontend/src/view/RoomFinder.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { Ref, ref } from "vue";
 import { fetchRoom } from "../api/fetchRoom.ts";
+import DynamicPage from "./DynamicPage.vue";
 import RoomOccupation from "../components/RoomOccupation.vue";
 
 const rooms = async () => {
@@ -19,27 +20,13 @@ rooms().then(
 </script>
 
 <template>
-  <div 
-    class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
-    :class="{'md:mt-8': selectedRoom.name === ''}"
+  <DynamicPage
+    :hideContent="selectedRoom.name === ''"
+    :headline="$t('roomFinderPage.headline')"
+    :subTitle="$t('roomFinderPage.detail')"
+    icon="pi pi-search"
   >
-    <div class="flex align-items-center justify-content-center gap-2 mx-2">
-      <h3 class="text-4xl">
-        {{ $t("roomFinderPage.headline") }}
-      </h3>
-      <i
-        class="pi pi-search"
-        style="font-size: 2rem"
-      ></i>
-    </div>
-    <div
-      class="flex justify-content-center"
-    >
-      <h5 class="text-2xl m-2">{{ $t("roomFinderPage.detail") }}</h5>
-    </div>
-    <div
-      class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8"
-    >
+    <template #selection>
       <Dropdown
         v-model="selectedRoom"
         :options="roomsList"
@@ -50,18 +37,11 @@ rooms().then(
         :empty-message="$t('roomFinderPage.noRoomsAvailable')"
         :auto-filter-focus="true"
       />
-    </div>
-    <div 
-      :class="
-        [selectedRoom.name === ''? 
-          ['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden'] : 
-          ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
-        ,
-        'w-full', 'lg:w-8']"
-      >
+    </template>
+    <template #content>
       <RoomOccupation
         :room="selectedRoom.name"
       />
-    </div>
-  </div>
+    </template>
+  </DynamicPage>
 </template>

frontend/src/view/editCalendar/EditAdditionalModules.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { defineAsyncComponent } from "vue";
+import moduleStore from "../../store/moduleStore";
+import router from "../../router";
+
+const store = moduleStore();
+const AdditionalModuleTable = defineAsyncComponent(
+  () => import("../../components/AdditionalModuleTable.vue"),
+);
+
+async function nextStep() {
+  await router.push("/edit-calendar");
+}
+</script>
+
+<template>
+  <div class="flex flex-column align-items-center w-full mb-7">
+    <div class="flex align-items-center justify-content-center m-2">
+      <h3>
+        {{ $t("additionalModules.subTitle") }}
+      </h3>
+    </div>
+    <AdditionalModuleTable />
+    <div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10">
+      <Button
+        :disabled="store.isEmpty()"
+        @click="nextStep()"
+        class="col-12 md:col-4 mb-3 align-self-end"
+        icon="pi pi-arrow-right"
+        :label="$t('additionalModules.nextStep')"
+      />
+    </div>
+  </div>
+</template>

frontend/src/view/editCalendar/EditModules.vue

@@ -6,7 +6,7 @@ import { fetchAllModules } from "../../api/fetchCourse.ts";
 import {deleteIndividualFeed, saveIndividualFeed} from "../../api/createFeed.ts";
 import tokenStore from "../../store/tokenStore";
 import router from "../../router";
-import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
+import ModuleTemplateDialog from "../../components/ModuleTemplateDialog.vue";
 import { onlyWhitespace } from "../../helpers/strings.ts";
 import { useI18n } from "vue-i18n";
 import { useToast } from "primevue/usetoast";