15 localization with translation strings

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" : "" }}
-            selected.
+            {{ 
+              t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 })
+            }} 
           </div>
         </template>
       </DataTable>