added different pages for editing

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>