added different pages for editing

frontend/src/components/AdditionalModules.vue

@@ -38,7 +38,6 @@ const ModuleInformation = defineAsyncComponent(
   () => import("./ModuleInformation.vue"),
 );
 
-//TODO add missing module prop informations for ModuleInformation.vue
 async function showInfo(moduleName : string) {
 
   const module: Ref<Module> = ref(new Module("", "", "", "", "", []));

frontend/src/components/ModuleSelection.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, PropType, Ref, ref, watch } from "vue";
+import { computed, ComputedRef, PropType, Ref, ref, watch } from "vue";
 import { Module } from "../model/module.ts";
 import moduleStore from "../store/moduleStore";
 import router from "../router";
@@ -11,24 +11,27 @@ const props = defineProps({
   },
 });
 
+type ModuleWithSelection = { module: Module; selected: boolean };
+
 // array of modules with boolean if selected with getter and setter
-const modulesWithSelection: Ref<{ module: Module; selected: boolean }[]> = ref(
-  props.modules.map((module) => {
-    return { module: module, selected: false };
+const modulesWithSelection: Ref<ModuleWithSelection[]> = ref(
+  props.modules.map((propModule) => {
+    return { module: propModule, selected: moduleStore().modules.some((module: Module) =>
+        module.isEqual ? module.isEqual(propModule) : false,
+      ), };
   }),
 );
 
-//watch for changes in modules prop and update modulesWithSelection
-
-function selectedModules(): Module[] {
-  return modulesWithSelection.value
+const selectedModules: ComputedRef<Module[]> = computed(() =>
+  modulesWithSelection.value
     .filter((module) => module.selected)
-    .map((module) => module.module);
-}
+    .map((module) => module.module),
+);
 
 const currentModules = computed(() => props.modules);
 
 function selectAllModules(selection: boolean) {
+  console.debug(props.modules);
   modulesWithSelection.value.forEach((module) => {
     module.selected = selection;
   });
@@ -36,10 +39,6 @@ function selectAllModules(selection: boolean) {
 
 const allSelected: Ref<boolean> = ref(true);
 
-computed(() => {
-  return modulesWithSelection.value.every((module) => module.selected);
-});
-
 watch(currentModules, (newValue: Module[]) => {
   modulesWithSelection.value = newValue.map((module) => {
     return { module: module, selected: false };
@@ -47,33 +46,30 @@ watch(currentModules, (newValue: Module[]) => {
 });
 
 function nextStep() {
-  console.log("next step");
-  selectedModules().forEach((module) => {
+  selectedModules.value.forEach((module: Module) => {
     moduleStore().addModule(module);
   });
 
-  console.debug(moduleStore().modules);
-
   router.push("/additional-modules");
 }
 </script>
 
 <template>
-  <div class="flex flex-column card-container">
+  <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="selectedModules.length < 1"
         class="col-4 justify-content-center"
         @click="nextStep()"
         >Next Step
       </Button>
     </div>
     <div class="flex align-items-center justify-content-center">
-      <DataView :value="modulesWithSelection" data-key="name">
+      <DataView :value="modulesWithSelection" data-key="module">
         <template #header>
           <div class="flex justify-content-between flex-wrap">
             <div class="flex align-items-center justify-content-center">
-              <h3>Modules - {{ selectedModules().length }}</h3>
+              <h3>Modules - {{ selectedModules.length }}</h3>
             </div>
             <div class="flex align-items-center justify-content-center">
               <ToggleButton
@@ -96,20 +92,18 @@ function nextStep() {
         <template #list="slotProps">
           <div class="col-12">
             <div
-              class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"
+              class="flex flex-column xl:flex-row xl:align-items-start p-2 gap-4"
             >
               <div
-                class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"
+                class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 gap-4"
               >
                 <div
-                  class="flex flex-column align-items-center sm:align-items-start gap-3"
+                  class="flex flex-column align-items-center justify-content-center sm:align-items-start gap-3"
                 >
-                  <div class="text-2xl">
-                    {{ slotProps.data.module.name }}
-                  </div>
+                  <p class="text-lg">{{ slotProps.data.module.name }}</p>
                 </div>
                 <div
-                  class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"
+                  class="flex sm:flex-column justify-content-center sm:align-items-end gap-3 sm:gap-2"
                 >
                   <ToggleButton
                     v-model="modulesWithSelection[slotProps.index].selected"
@@ -135,4 +129,4 @@ function nextStep() {
     width: 50rem;
   }
 }
-</style>
+</style>

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>

frontend/src/components/editCalendar/EditModules.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import {
+  computed,
+  Ref,
+  ref,
+} from "vue";
+import { Module } from "../../model/module";
+import moduleStore from "../../store/moduleStore";
+import { fetchAllModules } from "../../api/fetchCourse";
+import { createIndividualFeed, saveIndividualFeed } from "../../api/createFeed.ts";
+import tokenStore from "../../store/tokenStore.ts";
+import router from "../../router";
+
+const tableData = computed(() =>
+  moduleStore().modules.map((module: Module) => {
+    return {
+      Course: module.course,
+      Module: module,
+    };
+  }),
+);
+
+const columns = ref([
+  { field: "Course", header: "Course" },
+  { field: "Module", header: "Module" },
+]);
+
+const fetchedModules = async () => {
+  return await fetchAllModules();
+};
+
+function deleteAllModules() {
+  moduleStore().removeAllModules();
+}
+
+function deleteModule(module: Module) {
+  console.debug(module);
+  moduleStore().removeModule(module);
+}
+
+const modules: Ref<Module[]> = ref([]);
+
+fetchedModules().then(
+  (data) =>
+    (modules.value = data.map((module: Module) => {
+      return module;
+    })),
+);
+
+async function finalStep() {
+  await saveIndividualFeed(tokenStore().token, moduleStore().modules);
+  await router.push("/calendar-link");
+}
+</script>
+
+<template>
+  <div class="flex flex-column card-container mx-8 mt-2">
+    <div class="flex align-items-center justify-content-center border-round m-2">
+      <DataTable
+        :value="tableData"
+        editMode="cell"
+        tableClass="editable-cells-table"
+        responsiveLayout="scroll"
+      >
+        <Column
+          v-for="col of columns"
+          :key="col.field"
+          :field="col.field"
+          :header="col.header"
+        >
+          <template #body="{ data, field }">
+            <div>
+              {{field === "Module" ? data[field].userDefinedName : data[field]}}
+            </div>
+          </template>
+          <template #editor="{ data, field }">
+            <template v-if="field !== 'Module'">
+              <div>{{ data[field] }}</div>
+            </template>
+            <template v-else>
+              <InputText
+                class="w-full"
+                v-model="data[field].userDefinedName"
+                autofocus
+              />
+            </template>
+          </template>
+        </Column>
+        <Column>
+          <template #body="{ data }">
+            <Button
+              @click="deleteModule(data['Module'])"
+              icon="pi pi-trash"
+              severity="danger"
+              outlined
+              rounded
+              aria-label="Cancel"
+            />
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+    <div class="flex align-items-center justify-content-center border-round m-2">
+      <Button label="Save Calendar" @click="finalStep()" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@media screen and (min-width: 962px) {
+  .empty-message {
+    width: 50rem;
+  }
+}
+</style>

frontend/src/components/editCalendar/loadCalender.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-
-import { ref, Ref } from "vue";
-import moduleStore from "../../store/moduleStore";
-import { getCalender } from "../../api/loadCalendar";
-
-const token: Ref<string> = ref("");
-
-
-function loadCalendar() {
-  moduleStore().removeAllModules();
-
-  getCalender(token.value).then((data) => {
-    console.log(data);
-    data.forEach((module) => {
-      moduleStore().addModule(module);
-    });
-  });
-}
-</script>
-
-<template>
-  <div class="flex flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem border-round">
-      <p class="text-2xl">Please enter your existing calendar token</p>
-    </div>
-    <div class="flex align-items-center justify-content-center border-round m-2">
-      <InputText type="text" v-model="token" />
-    </div>
-    <div class="flex align-items-center justify-content-center border-round m-2">
-      <Button label="Load Calendar" @click="loadCalendar" />
-  </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>