feat:#5 added localization and primeVue local

frontend/src/components/LocaleSwitcher.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import localeStore from "../store/localeStore.ts";
 import { useI18n } from "vue-i18n";
 import { DropdownChangeEvent } from "primevue/dropdown";
+import { usePrimeVue } from "primevue/config";
+import primeVue_de from "@/i18n/translations/primevue/prime_vue_local_de.json";
+import primeVue_en from "@/i18n/translations/primevue/prime_vue_local_en.json";
 const { t } = useI18n({ useScope: "global" });
 
 const countries = computed(() => [
@@ -18,9 +21,19 @@ function displayCountry(code: string) {
   return countries.value.find((country) => country.code === code)?.name;
 }
 
-function updateLocale(dropdownChangeEvent: DropdownChangeEvent) {
-  localeStore().setLocale(dropdownChangeEvent.value);
+const primeVueConfig = usePrimeVue();
+
+function updateLocale(locale: string) {
+  localeStore().setLocale(locale);
+
+  if (locale === "de") {
+    primeVueConfig.config.locale = primeVue_de;
+  } else {
+    primeVueConfig.config.locale = primeVue_en;
+  }
 }
+
+updateLocale(localeStore().locale);
 </script>
 <template>
   <Dropdown
@@ -29,7 +42,7 @@ function updateLocale(dropdownChangeEvent: DropdownChangeEvent) {
     option-label="name"
     placeholder="Select a Language"
     class="w-full md:w-14rem"
-    @change="updateLocale($event)"
+    @change="updateLocale($event.value)"
   >
     <template #value="slotProps">
       <div v-if="slotProps.value" class="flex align-items-center">