115 refactor AdditionalModuleTable and add when editing

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>