added UserDefined Module Naming

frontend/src/api/fetchCourse.ts

@@ -25,7 +25,7 @@ export async function fetchModulesByCourseAndSemester(
     })
     .then((modulesResponse) => {
       modulesResponse.forEach((module: string) =>
-        modules.push(new Module(module, course)),
+        modules.push(new Module(module, course, module)),
       );
     });
   return modules;
@@ -38,7 +38,9 @@ export async function fetchAllModules(): Promise<Module[]> {
       return response.json() as Promise<Module[]>;
     })
     .then((responseModules: Module[]) => {
-      modules = responseModules as Module[];
+      responseModules.forEach((module: Module) => {
+        modules.push(new Module(module.Name, module.Course, module.Name));
+      });
     });
 
   return modules;

frontend/src/components/AdditionalModules.vue

@@ -3,9 +3,8 @@ import { ref, Ref } from "vue";
 import { Module } from "../model/module.ts";
 import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
-import { createIndividualFeed } from "../api/createFeed.ts";
 import { MultiSelectAllChangeEvent } from "primevue/multiselect";
-import tokenStore from "../store/tokenStore.ts";
+
 import router from "../router";
 
 const fetchedModules = async () => {
@@ -23,14 +22,12 @@ fetchedModules().then(
     })),
 );
 
-async function finalStep() {
+async function nextStep() {
   selectedModules.value.forEach((module: Module) => {
     moduleStore().addModule(module);
   });
 
-  const token: string = await createIndividualFeed(moduleStore().modules);
-  tokenStore().setToken(token);
-  await router.push("/calendar-link");
+  await router.push("/rename-modules");
 }
 
 const display = (module: Module) => module.Name + " (" + module.Course + ")";
@@ -90,7 +87,7 @@ function selectChange() {
       </MultiSelect>
     </div>
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="finalStep()"> Create Calendar</Button>
+      <Button @click="nextStep()">Next Step</Button>
     </div>
   </div>
 </template>

frontend/src/components/RenameModules.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import moduleStore from "../store/moduleStore.ts";
+import { createIndividualFeed } from "../api/createFeed.ts";
+import router from "../router";
+import tokenStore from "../store/tokenStore.ts";
+import { ref } from "vue";
+
+const tableData = ref(moduleStore().modules.map((module) => {
+  return {
+    Course: module.Course,
+    Module: module,
+  }
+})
+);
+
+const columns = ref([
+  { field: 'Course', header: 'Course' },
+  { field: 'Module', header: 'Module' },
+]);
+
+async function finalStep() {
+  const token: string = await createIndividualFeed(moduleStore().modules);
+  tokenStore().setToken(token);
+  await router.push("/calendar-link");
+}
+</script>
+
+<template>
+  <div class="flex flex-column">
+    <div class="flex align-items-center justify-content-center h-4rem m-2">
+      <h3>
+        Rename your selected Modules to your liking.
+      </h3>
+    </div>
+    <div class="card flex align-items-center justify-content-center 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>
+  </DataTable>
+    </div>
+
+    <div class="flex align-items-center justify-content-center h-4rem m-2">
+      <Button @click="finalStep()">Next Step</Button>
+    </div>
+  </div>
+
+
+</template>
+
+<style scoped>
+
+</style>

frontend/src/main.ts

@@ -21,6 +21,8 @@ import ToastService from "primevue/toastservice";
 import Toast from "primevue/toast";
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -42,4 +44,6 @@ app.component("MultiSelect", MultiSelect);
 app.component("Toast", Toast);
 app.component("Accordion", Accordion);
 app.component("AccordionTab", AccordionTab);
+app.component("DataTable", DataTable);
+app.component("Column", Column);
 app.mount("#app");

frontend/src/model/module.ts

@@ -2,5 +2,6 @@ export class Module {
   constructor(
     public Name: string,
     public Course: string,
+    public UserDefinedName: string,
   ) {}
 }

frontend/src/router/index.ts

@@ -5,6 +5,7 @@ import AdditionalModules from "../components/AdditionalModules.vue";
 import CalendarLink from "../components/CalendarLink.vue";
 import Impress from "../components/Impress.vue";
 import PrivacyPolicy from "../components/PrivacyPolicy.vue";
+import RenameModules from "../components/RenameModules.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -39,6 +40,11 @@ const router = createRouter({
       name: "impress",
       component: Impress,
     },
+    {
+      path: "/rename-modules",
+      name: "rename-modules",
+      component: RenameModules,
+    },
     {
       path: "/:catchAll(.*)",
       redirect: "/",