Add demo language switch

client/src/components/AppFooter.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import type { availableLanguages } from "@/stores/user";
+import { SUPPORT_LOCALES } from "@/i18n";
+import type { AvailableLanguages } from "@/stores/user";
 import { useUserStore } from "@/stores/user";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 import * as log from "loglevel";
 
 log.debug("AppFooter created");
 
 const userStore = useUserStore();
 
-async function changeLocale(event: Event) {
+async function changeLocale(language: AvailableLanguages) {
-  const target = event.target as HTMLSelectElement;
+  userStore.setUserLanguages(language);
-  userStore.setUserLanguages(target.value as availableLanguages);
 }
 </script>
 
@@ -21,19 +22,27 @@ async function changeLocale(event: Event) {
     <div class="lg:ml-8">{{ $t("footer.imprint") }}</div>
     <div class="flex-grow"></div>
     <div>VBV_VERSION_BUILD_NUMBER_VBV</div>
-    <div class="lg:ml-8">Deutsch</div>
+    <Menu>
-    <!--div class="locale-changer">
+      <MenuButton class="lg:ml-8" data-cy="language-switch-button">
-      <select @change="changeLocale($event)">
+        <it-icon-globe class="relative top-[2px] h-4 w-4" />
-        <option
+        <span class="ml-2 inline">{{ $t(`language.${userStore.language}`) }}</span>
-          v-for="locale in ['de', 'fr']"
+      </MenuButton>
-          :key="`locale-${locale}`"
+      <div class="relative">
-          :value="locale"
+        <MenuItems
-          :selected="locale === userStore.language"
+          class="lg:right- absolute -top-24 -right-2/3 w-40 bg-white px-4 py-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
         >
-          {{ locale }}
+          <MenuItem v-for="locale in SUPPORT_LOCALES" :key="locale" class="py-1">
-        </option>
+            <button
-      </select>
+              class=""
-    </div -->
+              @click="changeLocale(locale)"
+              :data-cy="`language-selector-${locale}`"
+            >
+              <span class="ml-2 inline">{{ $t(`language.${locale}`) }}</span>
+            </button>
+          </MenuItem>
+        </MenuItems>
+      </div>
+    </Menu>
     <div class="lg:ml-8">{{ $t("footer.contact") }}</div>
   </footer>
 </template>

client/src/i18n.ts

@@ -1,9 +1,10 @@
+import type { AvailableLanguages } from "@/stores/user";
 import dayjs from "dayjs";
 import { nextTick } from "vue";
 import { createI18n } from "vue-i18n";
 
 // https://vue-i18n.intlify.dev/guide/advanced/lazy.html
-export const SUPPORT_LOCALES = ["de", "fr", "it"];
+export const SUPPORT_LOCALES: AvailableLanguages[] = ["de", "fr"];
 let i18n: any = null;
 
 export function setupI18n(

client/src/locales/de.json

@@ -118,6 +118,10 @@
     "transferTask": "Transferauftrag | Transferaufträge",
     "yes": "Ja"
   },
+  "language": {
+    "de": "Deutsch",
+    "fr": "Französisch"
+  },
   "learningContent": {
     "completeAndContinue": "Als erledigt markieren"
   },

client/src/pages/DashboardPage.vue

@@ -45,7 +45,11 @@ onMounted(async () => {
                   ></LearningPathDiagramSmall>
                 </div>
                 <div>
-                  <router-link class="btn-blue" :to="courseSession.learning_path_url">
+                  <router-link
+                    class="btn-blue"
+                    :to="courseSession.learning_path_url"
+                    :data-cy="`continue-course-${courseSession.course.id}`"
+                  >
                     {{ $t("general.nextStep") }}
                   </router-link>
                 </div>

client/src/stores/user.ts

@@ -8,7 +8,7 @@ import { defineStore } from "pinia";
 const logoutRedirectUrl = import.meta.env.VITE_LOGOUT_REDIRECT;
 // typed state https://stackoverflow.com/questions/71012513/when-using-pinia-and-typescript-how-do-you-use-an-action-to-set-the-state
 
-export type availableLanguages = "de" | "fr" | "it";
+export type AvailableLanguages = "de" | "fr" | "it";
 
 export type UserState = {
   id: number;
@@ -20,7 +20,7 @@ export type UserState = {
   is_superuser: boolean;
   course_session_experts: number[];
   loggedIn: boolean;
-  language: availableLanguages;
+  language: AvailableLanguages;
 };
 
 const initialUserState: UserState = {
@@ -36,7 +36,7 @@ const initialUserState: UserState = {
   language: "de",
 };
 
-async function setLocale(language: availableLanguages) {
+async function setLocale(language: AvailableLanguages) {
   await loadLocaleMessages(language);
   setI18nLanguage(language);
 }
@@ -92,7 +92,7 @@ export const useUserStore = defineStore({
       appStore.userLoaded = true;
       await setLocale(data.language);
     },
-    async setUserLanguages(language: availableLanguages) {
+    async setUserLanguages(language: AvailableLanguages) {
       await setLocale(language);
       this.$state.language = language;
       await itPost("/api/core/me/", { language }, { method: "PUT" });

server/vbv_lernwelt/core/management/commands/cypress_reset.py

@@ -1,5 +1,6 @@
 import djclick as click
 
+from vbv_lernwelt.core.models import User
 from vbv_lernwelt.course.models import CourseCompletion
 from vbv_lernwelt.notify.models import Notification
 
@@ -9,3 +10,4 @@ def command():
     print("cypress reset data")
     CourseCompletion.objects.all().delete()
     Notification.objects.all().delete()
+    User.objects.all().update(language="de")

server/vbv_lernwelt/static/icons/icon-globe.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99997 0.500065C5.87826 0.500065 3.84354 1.34291 2.34313 2.84319C0.842877 4.34358 0 6.37855 0 8.50003C0 10.6215 0.842844 12.6565 2.34313 14.1569C3.84351 15.6571 5.87849 16.5 7.99997 16.5C10.1214 16.5 12.1564 15.6572 13.6568 14.1569C15.1571 12.6565 15.9999 10.6215 15.9999 8.50003C15.9999 7.09568 15.6303 5.71622 14.9281 4.50002C14.226 3.28382 13.2161 2.27398 11.9999 1.57181C10.7837 0.869634 9.40425 0.5 7.9999 0.5L7.99997 0.500065ZM14.2315 5.64294H11.5087C11.1104 4.2353 10.4191 2.92763 9.48007 1.80587C10.514 2.03661 11.4806 2.50308 12.3047 3.16848C13.1288 3.83405 13.7883 4.68085 14.2315 5.64298V5.64294ZM7.96862 15.0885C6.92078 14.0448 6.13802 12.7653 5.68571 11.3573H10.3143C9.8611 12.7657 9.07743 14.0451 8.02857 15.0885C8.01059 15.1014 7.98648 15.1014 7.96862 15.0885H7.96862ZM5.39718 10.2144C5.18761 9.0811 5.18761 7.9191 5.39718 6.78581H10.6028C10.8123 7.9191 10.8123 9.0811 10.6028 10.2144H5.39718ZM1.1428 8.5001C1.1419 7.92178 1.21486 7.34564 1.35989 6.78581H4.23706C4.05058 7.92103 4.05058 9.07917 4.23706 10.2144H1.35989C1.21486 9.65455 1.1419 9.07842 1.1428 8.5001ZM7.99997 1.90023C8.01004 1.89628 8.02127 1.89628 8.03135 1.90023C9.08072 2.94729 9.86361 4.23086 10.3143 5.64294H5.68567C6.13886 4.23451 6.92254 2.95506 7.97139 1.91166C7.97917 1.90439 7.98938 1.90031 7.99997 1.90018L7.99997 1.90023ZM11.7629 6.78581H14.6401C14.9296 7.91032 14.9296 9.08988 14.6401 10.2144H11.7629C11.9494 9.07917 11.9494 7.92103 11.7629 6.78581ZM6.52012 1.80587C5.5821 2.92832 4.89089 4.23572 4.49154 5.64294H1.76869C2.21193 4.68082 2.87139 3.83402 3.69549 3.16845C4.51959 2.50301 5.48619 2.03656 6.52012 1.80583V1.80587ZM1.76876 11.3573H4.49161C4.88982 12.7649 5.58115 14.0726 6.52019 15.1943C5.48626 14.9636 4.51966 14.4971 3.69556 13.8317C2.87146 13.1661 2.21199 12.3193 1.76876 11.3572V11.3573ZM9.48308 15.1943C10.4199 14.0716 11.1101 12.7642 11.5087 11.3573H14.2316C13.7883 12.3194 13.1289 13.1662 12.3048 13.8317C11.4807 14.4972 10.5141 14.9636 9.48014 15.1944L9.48308 15.1943Z" fill="#0A0A0A"/>
+</svg>