15 localization with translation strings

frontend/src/components/CalendarPreview.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import { Ref, computed, ref } from "vue";
 import moduleStore from "../store/moduleStore";
+import { useI18n } from "vue-i18n";
 
 const dialogVisible: Ref<boolean> = ref(false);
 const mobilePage = ref(true);
+const { t } = useI18n({ useScope: "global" });
 
 const store = moduleStore();
 const tableData = computed(() =>
@@ -19,9 +21,9 @@ const previewOn: Ref<boolean> = computed(() => {
   return moduleStore().modules.size > 0;
 });
 
-const columns = ref([
+const columns = computed(() => [
-  { field: "Course", header: "Course" },
+  { field: "Course", header: t("calendarPreview.course") },
-  { field: "Module", header: "Module" },
+  { field: "Module", header: t("calendarPreview.module") },
 ]);
 
 const updateMobile = () => {
@@ -40,7 +42,7 @@ window.addEventListener("resize", updateMobile);
     :visible="dialogVisible && previewOn"
     :maximizable="!mobilePage"
     :draggable="false"
-    header="Kalendervorschau"
+    :header="$t('calendarPreview.preview-long')"
     class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
     position="bottomright"
     @update:visible="dialogVisible = $event"
@@ -71,7 +73,7 @@ window.addEventListener("resize", updateMobile);
     <template #button>
       <Button
         icon="pi pi-calendar"
-        label="Preview"
+        :label="$t('calendarPreview.preview')"
         class="p-button-rounded p-button-primary"
         @click="dialogVisible = true"
       />

frontend/src/i18n/translations/de.json

@@ -38,7 +38,7 @@
     "semester": "Semester",
     "module": "Modul",
     "day": "Tag",
-    "start": "Begin",
+    "start": "Anfang",
     "end": "Ende",
     "room": "Raum",
     "type": "Art",
@@ -57,8 +57,17 @@
     "dropDown": "Wähle weitere Module aus",
     "module": "Modul",
     "modules": "Module",
-    "dropDownFooterSelected": "ausgewählt",
+    "footerModulesSelected": "{count} Modul ausgewählt | {count} Module ausgewählt",
-    "nextStep": "Weiter"
+    "nextStep": "Weiter",
+    "professor": "Dozent",
+    "course": "Seminargruppe",
+    "info": "Info",
+    "info-long": "Information",
+    "paginator": {
+      "from": "",
+      "to": " bis ", 
+      "of": " von insgesamt "
+    }
   },
   "renameModules": {
     "reminder": "Erinnerung",
@@ -90,6 +99,12 @@
     "toGoogleCalendar": "Google Kalender",
     "toMicrosoftCalendar": "Microsoft Kalender"
   },
+  "calendarPreview": {
+    "preview": "Vorschau",
+    "preview-long": "Kalendervorschau",
+    "module": "Modul",
+    "course": "Seminargruppe"
+  },
   "faqView": {
     "headline": "Fragen und Antworten",
     "firstQuestion": "Wie funktioniert das Kalender erstellen mit dem HTWKalender?",

frontend/src/i18n/translations/en.json

@@ -53,12 +53,21 @@
     "noCalendarFound": "no calendar found"
   },
   "additionalModules": {
-    "subTitle": "Select additional Modules that are not listed in the regular semester for your Course",
+    "subTitle": "Select additional modules that are not listed in the regular semester for your course",
     "dropDown": "Select additional modules",
     "module": "module",
     "modules": "modules",
-    "dropDownFooterSelected": "selected",
+    "footerModulesSelected": "{count} module selected | {count} modules selected",
-    "nextStep": "next step"
+    "nextStep": "next step",
+    "professor": "professor",
+    "course": "course",
+    "info": "info",
+    "info-long": "information",
+    "paginator": {
+      "from": "",
+      "to": " to ", 
+      "of": " of "
+    }
   },
   "renameModules": {
     "reminder": "reminder",
@@ -90,6 +99,12 @@
     "toGoogleCalendar": "to Google Calendar",
     "toMicrosoftCalendar": "to Microsoft Calendar"
   },
+  "calendarPreview": {
+    "preview": "preview",
+    "preview-long": "calendar preview",
+    "module": "module",
+    "course": "course"
+  },
   "faqView": {
     "headline": "faq",
     "firstQuestion": "How does calendar creation work with HTWKalender?",

frontend/src/view/AdditionalModules.vue

@@ -8,14 +8,19 @@ import { DataTableRowSelectEvent, DataTableRowUnselectEvent } from "primevue/dat
 import { useDialog } from "primevue/usedialog";
 import router from "../router";
 import { fetchModule } from "../api/fetchModule.ts";
+import { useI18n } from "vue-i18n";
 
 const dialog = useDialog();
+const { t } = useI18n({ useScope: "global" });
 
 const fetchedModules = async () => {
   return await fetchAllModules();
 };
 
 const store = moduleStore();
+if (store.isEmpty()) {
+  router.replace("/");
+}
 
 const modules: Ref<Module[]> = ref([]);
 const filters = ref({
@@ -97,7 +102,14 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         :rows="10"
         :rows-per-page-options="[5, 10, 20, 50]"
         paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
-        current-page-report-template="{first} to {last} of {totalRecords}"
+        :current-page-report-template="
+          $t('additionalModules.paginator.from') +
+          '{first}' + 
+          $t('additionalModules.paginator.to') + 
+          '{last}' + 
+          $t('additionalModules.paginator.of') + 
+          '{totalRecords}'
+        "
         filter-display="row"
         :loading="!modules.length"
         loading-icon="pi pi-spinner"
@@ -113,7 +125,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
 
         <Column
           field="course"
-          header="Course"
+          :header="$t('additionalModules.course')"
           :show-clear-button="false"
           :show-filter-menu="false"
         >
@@ -128,7 +140,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         </Column>
         <Column
           field="name"
-          header="Name"
+          :header="$t('additionalModules.module')"
           :show-clear-button="false"
           :show-filter-menu="false"
         >
@@ -143,7 +155,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         </Column>
         <Column
           field="prof"
-          header="Professor"
+          :header="$t('additionalModules.professor')"
           :show-clear-button="false"
           :show-filter-menu="false"
         >
@@ -156,14 +168,16 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             />
           </template>
         </Column>
-        <Column header="Info">
+        <Column 
+          :header="$t('additionalModules.info')"
+        >
           <template #body="slotProps">
             <Button
               icon="pi pi-info"
               severity="secondary"
               rounded
               outlined
-              aria-label="Information"
+              :aria-label="$t('additionalModules.info-long')"
               class="small-button"
               @click.stop="showInfo(slotProps.data)"
             ></Button>
@@ -171,9 +185,9 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         </Column>
         <template #footer>
           <div class="py-2 px-3">
-            <b>{{ store ? store.countModules() : 0 }}</b>
+            {{ 
-            item{{ (store ? store.countModules() : 0) !== 1 ? "s" : "" }}
+              t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 })
-            selected.
+            }} 
           </div>
         </template>
       </DataTable>