feat:#60 added localization switch

frontend/src/components/LocaleSwitcher.vue

@@ -1,39 +1,49 @@
 <script lang="ts" setup>
-import i18n, { supportedLocales } from "../i18n";
-import { Ref, ref } from "vue";
-import router from "../router";
+import { computed } from "vue";
+import localeStore from "../store/localeStore.ts";
 import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: 'global' })
 
-const locales = ref(
-  Object.keys(supportedLocales).map((code) => ({
-    code,
-    name: supportedLocales[code].name,
-  })),
-);
+const countries = computed(() => [
+  { name: t('english'), code: "en", icon: "🇬🇧" },
+  { name: t('german'), code: "de", icon: "🇩🇪" },
+]);
 
-// selectedLocal is the string of the selected locale from i18n matched with the locales array
-const selectedLocale: Ref<any> = ref();
+function displayIcon(code: string) {
+  return countries.value.find((country) => country.code === code)?.icon;
+}
 
-const i18n1 = (i18n.vueI18n);
+function displayCountry(code: string) {
+  return countries.value.find((country) => country.code === code)?.name;
+}
 
-function onLocaleChange() {
-  const newLocale: string = selectedLocale.value.code;
-
-  // If the selected locale is the same as the
-  // active one, do nothing
-  if (newLocale === i18n.vueI18n.global.locale) {
-    return;
-  }
-  i18n1.global.locale = newLocale;
-  router.push(`/${newLocale}`);
+function updateLocale(locale: string) {
+  localeStore().setLocale(locale);
 }
 </script>
 <template>
   <Dropdown
-    :options="locales"
-    optionLabel="name"
-    v-model="selectedLocale"
-    @change="onLocaleChange"
+    :options="$i18n.availableLocales"
+    v-model="$i18n.locale"
+    @change="updateLocale($event.data)"
+    option-label="name"
+    placeholder="Select a Language"
+    class="w-full md:w-14rem"
   >
+    <template #value="slotProps">
+      <div v-if="slotProps.value" class="flex align-items-center">
+        <div class="mr-2 flag">{{ displayIcon(slotProps.value) }}</div>
+        <div>{{ displayCountry(slotProps.value) }}</div>
+      </div>
+      <span v-else>
+        {{ slotProps.placeholder }}
+      </span>
+    </template>
+    <template #option="slotProps">
+      <div class="flex align-items-center">
+        <div class="mr-2 flag">{{ displayIcon(slotProps.option) }}</div>
+        <div>{{ displayCountry(slotProps.option) }}</div>
+      </div>
+    </template>
   </Dropdown>
-</template>
+</template>