115 refactoring dynamic page

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 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')"
-    />
     <DataView 
       :value="modules"
       data-key="uuid"

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/view/CourseSelection.vue

@@ -8,6 +8,10 @@ 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 () => {
@@ -58,12 +62,18 @@ async function getModules() {
     :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')
+    }"
   >
-    <template #selection>
+    <template #selection="{ flexSpecs }">
       <Dropdown
         v-model="selectedCourse"
         :options="countries"
-        class="flex-1 m-0"
+        :class="flexSpecs"
         filter
         option-label="name"
         :placeholder="$t('courseSelection.courseDropDown')"
@@ -74,7 +84,7 @@ 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()"

frontend/src/view/DynamicPage.vue

@@ -2,10 +2,16 @@
 import { computed, useSlots } from 'vue';
 
 defineProps<{
-  hideContent: Boolean,
-  headline: String,
-  subTitle?: String,
-  icon?: String,
+  hideContent: boolean,
+  headline: string,
+  subTitle?: string,
+  icon?: string,
+  button?: {
+    label: string,
+    icon: string,
+    disabled: boolean,
+    onClick: () => void
+  }
 }>()
 
 const slots = useSlots()
@@ -43,9 +49,21 @@ const hasContent = computed(() => {
     >
       <slot 
         name="selection"
-        class="flex-1 m-0"
+        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="

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>