Merge branch '25-bug-edit-calendar-router-view' into 'main'

Resolve "bug: edit calendar router view"

Closes #25

See merge request ekresse/htwkalender!10

frontend/src/App.vue

@@ -33,9 +33,11 @@ window.addEventListener("resize", updateMobile);
 
 <template>
   <MenuBar />
-  <RouterView v-slot="{ Component }">
+  <RouterView v-slot="{ Component, route }">
     <transition name="scale" mode="out-in">
-      <component :is="Component" class="origin-near-top"/>
+      <div :key="route.name ?? ''">
+        <component :is="Component" class="origin-near-top" />
+      </div>
     </transition>
   </RouterView>
   <!-- show CalendarPreview but only on specific router views -->

frontend/src/api/createFeed.ts

@@ -19,6 +19,23 @@ export async function createIndividualFeed(modules: Module[]): Promise<string> {
   return token;
 }
 
+interface FeedResponse {
+  modules: FeedModule[];
+  collectionId: string;
+  collectionName: string;
+  id: string;
+  retrieved: string;
+  updated: string;
+}
+
+interface FeedModule {
+  course: string;
+  name: string;
+  reminder: boolean;
+  userDefinedName: string;
+  uuid: string;
+}
+
 export async function saveIndividualFeed(
   token: string,
   modules: Module[],
@@ -30,11 +47,14 @@ export async function saveIndividualFeed(
     },
     body: '{"modules":' + JSON.stringify(modules) + "}",
   })
-    .then((response) => {
-      return response.json();
+    .then(async (response) => {
+      // parse response.json to FeedResponse
+      const feedResponse: FeedResponse = await response.json();
+      return feedResponse;
     })
-    .then((response) => {
-      token = response;
+    .then((response: FeedResponse) => {
+      console.debug("response", response);
+      token = response.id;
     });
   return token;
 }

frontend/src/components/RenameModules.vue

@@ -3,21 +3,28 @@ import moduleStore from "../store/moduleStore.ts";
 import { createIndividualFeed } from "../api/createFeed.ts";
 import router from "../router";
 import tokenStore from "../store/tokenStore.ts";
-import { Ref, computed, inject, ref } from "vue";
+import { Ref, computed, inject, ref, onMounted } from "vue";
 import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
 import { onlyWhitespace } from "../helpers/strings.ts";
 import { useI18n } from "vue-i18n";
+import { Module } from "@/model/module.ts";
 const { t } = useI18n({ useScope: "global" });
 
 const store = moduleStore();
-const tableData = ref(
-  store.getAllModules().map((module) => {
-    return {
-      Course: module.course,
-      Module: module,
-    };
-  }),
+const tableData: Ref<{ Course: string; Module: Module }[]> = ref([
+  { Course: "", Module: {} as Module },
+]);
+
+onMounted(
+  () =>
+    (tableData.value = store.getAllModules().map((module) => {
+      return {
+        Course: module.course,
+        Module: module,
+      };
+    })),
 );
+
 const mobilePage = inject("mobilePage") as Ref<boolean>;
 
 const columns = computed(() => [
@@ -70,11 +77,11 @@ async function finalStep() {
             </div>
           </template>
           <Column
-            v-for="col of columns"
-            :key="col.field"
-            :field="col.field"
-            :header="col.header"
-            :class="col.field === 'Reminder' ? 'text-center' : ''"
+            v-for="(item, index) in columns"
+            :key="index"
+            :field="item.field"
+            :header="item.header"
+            :class="item.field === 'Reminder' ? 'text-center' : ''"
           >
             <!-- Text Body -->
             <template #body="{ data, field }">

frontend/src/view/DynamicPage.vue

@@ -24,11 +24,10 @@ const hasContent = computed(() => {
 </script>
 
 <template>
-  <div 
-    class="flex flex-column align-items-center mt-0"
-  >
-    <div class="flex align-items-center justify-content-center gap-2 mx-2 transition-rolldown"
-      :class="{'md:mt-8': hideContent}"
+  <div class="flex flex-column align-items-center mt-0">
+    <div
+      class="flex align-items-center justify-content-center gap-2 mx-2 transition-rolldown"
+      :class="{ 'md:mt-8': hideContent }"
     >
       <h3 class="text-4xl">
         {{ headline }}
@@ -74,7 +73,7 @@ const hasContent = computed(() => {
 </template>
 
 <style scoped>
-  .transition-rolldown {
-    transition: margin-top 0.5s ease-in-out;
-  }
+.transition-rolldown {
+  transition: margin-top 0.5s ease-in-out;
+}
 </style>

frontend/src/view/editCalendar/EditModules.vue

@@ -1,16 +1,13 @@
 <script lang="ts" setup>
 import { computed, inject, Ref, ref } from "vue";
-import { Module } from "../../model/module.ts";
+import { Module } from "@/model/module.ts";
 import moduleStore from "../../store/moduleStore";
-import { fetchAllModules } from "../../api/fetchCourse.ts";
-import {
-  deleteIndividualFeed,
-  saveIndividualFeed,
-} from "../../api/createFeed.ts";
+import { fetchAllModules } from "@/api/fetchCourse.ts";
+import { deleteIndividualFeed, saveIndividualFeed } from "@/api/createFeed.ts";
 import tokenStore from "../../store/tokenStore";
-import router from "../../router";
+import router from "@/router";
 import ModuleTemplateDialog from "../../components/ModuleTemplateDialog.vue";
-import { onlyWhitespace } from "../../helpers/strings.ts";
+import { onlyWhitespace } from "@/helpers/strings.ts";
 import { useI18n } from "vue-i18n";
 import { useToast } from "primevue/usetoast";
 const { t } = useI18n({ useScope: "global" });
@@ -18,6 +15,13 @@ const { t } = useI18n({ useScope: "global" });
 const toast = useToast();
 const visible = ref(false);
 
+defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+
 const store = moduleStore();
 
 const tableData = computed(() =>