feat:#69 added translation for edit pages

frontend/src/components/editCalendar/EditAdditionalModules.vue

@@ -1,13 +1,16 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, Ref } from "vue";
-import { Module } from "../../model/module";
-import { fetchAllModules } from "../../api/fetchCourse";
+import { Module } from "@/model/module.ts";
+import { fetchAllModules } from "@/api/fetchCourse.ts";
 import moduleStore from "../../store/moduleStore";
 import { MultiSelectAllChangeEvent } from "primevue/multiselect";
 import router from "../../router";
-import { fetchModule } from "../../api/fetchModule";
+import { fetchModule } from "@/api/fetchModule.ts";
 import { useDialog } from "primevue/usedialog";
+import {useI18n} from "vue-i18n";
+
 const dialog = useDialog();
+const { t } = useI18n({ useScope: "global" });
 
 const fetchedModules = async () => {
   return await fetchAllModules();
@@ -70,14 +73,21 @@ const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
 function selectChange() {
   selectAll.value = selectedModules.value.length === modules.value.length;
 }
+
+function itemsLabel(selectedModules: Module[]): string {
+  return (selectedModules ? selectedModules.length : 0) != 1 ? t("additionalModules.modules") : t("additionalModules.module");
+}
+
+function itemsLabelWithNumber(selectedModules: Module[]): string {
+  return selectedModules.length.toString() + " " + itemsLabel(selectedModules) + " " + t("additionalModules.dropDownFooterSelected");
+}
 </script>
 
 <template>
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
       <h3>
-        Select additional Modules that are not listed in the regular semester
-        for your Course
+        {{ $t("additionalModules.subTitle") }}
       </h3>
     </div>
     <div class="card flex align-items-center justify-content-center m-2">
@@ -90,10 +100,12 @@ function selectChange() {
         :virtual-scroller-options="{ itemSize: 70 }"
         class="custom-multiselect"
         filter
-        placeholder="Select additional modules"
+        :placeholder="$t('additionalModules.dropDown')"
         :auto-filter-focus="true"
+        :show-toggle-all="false"
         @change="selectChange()"
         @selectall-change="onSelectAllChange($event)"
+        :selectedItemsLabel="itemsLabelWithNumber(selectedModules)"
       >
         <template #option="slotProps">
           <div class="flex justify-content-between w-full">
@@ -127,7 +139,7 @@ function selectChange() {
       </MultiSelect>
     </div>
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="nextStep()">Next Step</Button>
+      <Button @click="nextStep()">{{ $t("additionalModules.nextStep") }}</Button>
     </div>
   </div>
 </template>