Merge branch 'main' into 15-calendar-preview

# Conflicts:
#	frontend/src/App.vue
#	frontend/src/view/AdditionalModules.vue

frontend/src/components/RenameModules.vue

@@ -3,8 +3,11 @@ 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";
+import { computed, ref } from "vue";
 import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
+import { onlyWhitespace } from "../helpers/strings.ts";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
 
 const store = moduleStore();
 const tableData = ref(
@@ -16,10 +19,10 @@ const tableData = ref(
   }),
 );
 
-const columns = ref([
-  { field: "Course", header: "Course" },
-  { field: "Module", header: "Module" },
-  { field: "Reminder", header: "Reminder" },
+const columns = computed(() => [
+  { field: "Course", header: t("moduleInformation.course") },
+  { field: "Module", header: t("moduleInformation.module") },
+  { field: "Reminder", header: t("renameModules.reminder") },
 ]);
 
 async function finalStep() {
@@ -32,7 +35,7 @@ async function finalStep() {
 <template>
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h3>Configure your selected Modules to your liking.</h3>
+      <h3>{{ $t("renameModules.subTitle") }}</h3>
       <ModuleTemplateDialog />
     </div>
     <div class="card flex align-items-center justify-content-center m-2">
@@ -44,7 +47,7 @@ async function finalStep() {
       >
         <template #header>
           <div class="flex align-items-center justify-content-end">
-            Enable all notifications:
+            {{ $t("renameModules.enableAllNotifications") }}
             <InputSwitch
               class="mx-4"
               :model-value="
@@ -69,7 +72,11 @@ async function finalStep() {
           <!-- Text Body -->
           <template #body="{ data, field }">
             <template v-if="field === 'Module'">
-              {{ data[field].userDefinedName }}
+              {{
+                onlyWhitespace(data[field].userDefinedName)
+                  ? data[field].name
+                  : data[field].userDefinedName
+              }}
             </template>
             <template v-else-if="field === 'Reminder'">
               <Button
@@ -95,10 +102,6 @@ async function finalStep() {
               />
             </template>
             <template v-else-if="field === 'Reminder'">
-              <!--<InputSwitch 
-                v-model="data.Module.reminder" 
-                class="align-self-center"
-              />-->
               <Button
                 :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
                 :severity="data.Module.reminder ? 'warning' : 'secondary'"
@@ -117,7 +120,7 @@ async function finalStep() {
     </div>
 
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="finalStep()">Next Step</Button>
+      <Button @click="finalStep()">{{ $t("renameModules.nextStep") }}</Button>
     </div>
   </div>
 </template>