added UserDefined Module Naming

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>