added different pages for editing

frontend/src/components/editCalendar/EditAdditionalModules.vue

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import { defineAsyncComponent, ref, Ref } from "vue";
+import { Module } from "../../model/module";
+import { fetchAllModules } from "../../api/fetchCourse";
+import moduleStore from "../../store/moduleStore";
+import { MultiSelectAllChangeEvent } from "primevue/multiselect";
+import router from "../../router";
+import { fetchModule } from "../../api/fetchModule";
+import { useDialog } from "primevue/usedialog";
+const dialog = useDialog();
+
+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(moduleName : string) {
+
+  const module: Ref<Module> = ref(new Module("", "", "", "", "", []));
+  await fetchModule(moduleName).then((data) => {
+     module.value = data;
+  });
+  dialog.open(ModuleInformation, {
+    props: {
+      style: {
+        width: "50vw",
+      },
+      breakpoints: {
+        "960px": "75vw",
+        "640px": "90vw",
+      },
+      modal: true,
+    },
+    data: {
+      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)
+    : [];
+  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>
+        Select additional Modules that are not listed in the regular semester
+        for your Course
+      </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="Select additional modules"
+        @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
+                icon="pi pi-info"
+                severity="secondary"
+                rounded
+                outlined
+                aria-label="Information"
+                @click.stop="showInfo(slotProps.option.name)"
+              ></Button>
+              <DynamicDialog />
+            </div>
+          </div>
+        </template>
+        <template #footer>
+          <div class="py-2 px-3">
+            <b>{{ selectedModules ? selectedModules.length : 0 }}</b>
+            item{{
+              (selectedModules ? selectedModules.length : 0) > 1 ? "s" : ""
+            }}
+            selected.
+          </div>
+        </template>
+      </MultiSelect>
+    </div>
+    <div class="flex align-items-center justify-content-center h-4rem m-2">
+      <Button @click="nextStep()">Next Step</Button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.custom-multiselect) {
+  width: 50rem;
+}
+
+:deep(.custom-multiselect li) {
+  height: unset;
+}
+</style>