Merge branch 'main' into 24-improve-animations-page-design-and-theme-2

# Conflicts:
#	frontend/src/view/DynamicPage.vue

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 }">