ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Working example with i18next

This commit is contained in:
Daniel Egger 2023-07-04 15:17:12 +02:00
parent 9e3a22b510
commit aaf226dde9
22 changed files with 151 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/package-lock.json generated
View File

@ -22,6 +22,7 @@
"d3": "^7.8.5",
"dayjs": "^1.11.8",
"graphql": "^16.6.0",
"i18next-vue": "^2.2.0",
"lodash": "^4.17.21",
"loglevel": "^1.8.0",
"mitt": "^3.0.0",
@ -13209,6 +13210,15 @@
"node": ">=10.17.0"
}
},
"node_modules/i18next-vue": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/i18next-vue/-/i18next-vue-2.2.0.tgz",
"integrity": "sha512-cU3ObbNf1veYWsaWsw9NS/cZGRaVN2GTn13Xmg+Dch+NYa9Wsmz0Ly81EImf2CNDVPIz9RlgizcsxqQ4wTmqaw==",
"peerDependencies": {
"i18next": ">=19",
"vue": "^3.2.43"
}
},
"node_modules/iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@ -30072,6 +30082,11 @@
"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
"dev": true
},
"i18next-vue": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/i18next-vue/-/i18next-vue-2.2.0.tgz",
"integrity": "sha512-cU3ObbNf1veYWsaWsw9NS/cZGRaVN2GTn13Xmg+Dch+NYa9Wsmz0Ly81EImf2CNDVPIz9RlgizcsxqQ4wTmqaw=="
},
"iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",

1
client/package.json
View File

@ -34,6 +34,7 @@
"d3": "^7.8.5",
"dayjs": "^1.11.8",
"graphql": "^16.6.0",
"i18next-vue": "^2.2.0",
"lodash": "^4.17.21",
"loglevel": "^1.8.0",
"mitt": "^3.0.0",

4
client/src/components/FeedbackForm.vue
View File

@ -17,12 +17,12 @@ import { useMutation } from "@urql/vue";
import { useRouteQuery } from "@vueuse/router";
import log from "loglevel";
import { computed, onMounted, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useTranslation } from "i18next-vue";
const props = defineProps<{ page: LearningContentFeedback }>();
const courseSessionsStore = useCourseSessionsStore();
const circleStore = useCircleStore();
const { t } = useI18n();
const { t } = useTranslation();
onMounted(async () => {
log.debug("Feedback mounted");

4
client/src/components/header/MainNavigationBar.vue
View File

@ -13,7 +13,7 @@ import { useRouteLookups } from "@/utils/route";
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
import { computed, onMounted, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { useTranslation } from "i18next-vue";
log.debug("MainNavigationBar created");
@ -24,7 +24,7 @@ const notificationsStore = useNotificationsStore();
const { inCockpit, inCompetenceProfile, inCourse, inLearningPath, inMediaLibrary } =
useRouteLookups();
const { t } = useI18n();
const { t } = useTranslation();
const state = reactive({
showMobileNavigationMenu: false,
showMobileProfileMenu: false,

4
client/src/components/ui/RatingScale.vue
View File

@ -74,9 +74,9 @@
import QuestionSummary from "@/components/ui/QuestionSummary.vue";
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useTranslation } from "i18next-vue";
const { t } = useI18n();
const { t } = useTranslation();
type RGB = [number, number, number];
const red: RGB = [221, 103, 81]; // red-600

12
client/src/i18n.ts
View File

@ -1,5 +1,6 @@
import type { AvailableLanguages } from "@/stores/user";
import dayjs from "dayjs";
import i18next from "i18next";
import { nextTick } from "vue";
import { createI18n } from "vue-i18n";
@ -17,11 +18,11 @@ export function setupI18n(
}
export function setI18nLanguage(locale: string) {
if (i18n.mode === "legacy") {
i18n.global.locale = locale;
} else {
i18n.global.locale.value = locale;
}
// if (i18n.mode === "legacy") {
// i18n.global.locale = locale;
// } else {
// i18n.global.locale.value = locale;
// }
/**
* NOTE:
* If you need to specify the language setting for headers, such as the `fetch` API, set it here.
@ -29,6 +30,7 @@ export function setI18nLanguage(locale: string) {
*
* axios.defaults.headers.common['Accept-Language'] = locale
*/
i18next.changeLanguage(locale);
document.querySelector("html")?.setAttribute("lang", locale);
}

53
client/src/i18nextWrapper.ts Normal file
View File

@ -0,0 +1,53 @@
import i18next from "i18next";
import I18NextVue from "i18next-vue";
import { nextTick } from "vue";
i18next
// detect user language
// learn more: https://github.com/i18next/i18next-browser-languageDetector
// .use(LanguageDetector)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
debug: true,
fallbackLng: "fr",
defaultNS: "translations",
resources: {
de: {
translation: {},
},
},
});
export function i18nextWrapper(app) {
app.use(I18NextVue, { i18next });
return app;
}
export async function loadI18nextLocaleMessages(locale: any) {
// load locale messages with dynamic import
const messages = await import(
/* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
);
// set locale and locale message
console.log(messages);
console.log(messages["welcome"]);
console.log(
"#######################################################################3"
);
console.log(i18next);
window.i18next = i18next;
i18next.addResourceBundle(locale, "translations", messages, true, true);
// i18next.addResourceBundle(
// "de",
// "translations",
// {
// welcome: "Hallo, jetzt aber!",
// },
// true,
// true
// );
return nextTick();
}

3
client/src/locales/de.json
View File

@ -8,6 +8,7 @@
"SSO Login/Registration": "SSO Login/Registration",
"Trainerunterlagen": "Trainerunterlagen",
"Zur Zeit sind keine Termine vorhanden": "Zur Zeit sind keine Termine vorhanden",
"welcome": "Hallo Welt",
"assignment": {
"acceptConditionsDisclaimer": "Bedingungen akzeptieren und Ergebnisse abgeben",
"assessmentDocumentDisclaimer": "Diese geleitete Fallarbeit wird auf Grund des folgenden Beurteilungsinstrument bewertet:",
@ -89,7 +90,7 @@
"dashboard": {
"courses": "Lehrgang",
"nocourses": "Du wurdest noch keinem Lehrgang zugewiesen.",
"welcome": "Willkommen, {name}"
"welcome": "Willkommen, {{name}}"
},
"feedback": {
"answers": "Antworten",

2
client/src/locales/fr.json
View File

@ -89,7 +89,7 @@
"dashboard": {
"courses": "Formation",
"nocourses": "Tu n’as été affecté(e) à aucune formation encore.",
"welcome": "Bienvenue, {name}"
"welcome": "Bienvenue, {{name}}"
},
"feedback": {
"answers": "Réponses",

2
client/src/locales/it.json
View File

@ -89,7 +89,7 @@
"dashboard": {
"courses": "Corso",
"nocourses": "Non sei ancora stato/a assegnato/a a nessun corso.",
"welcome": "Ti diamo il benvenuto, {name}"
"welcome": "Ti diamo il benvenuto, {{name}}"
},
"feedback": {
"answers": "Risposte",

10
client/src/main.ts
View File

@ -1,3 +1,4 @@
import { i18nextWrapper, loadI18nextLocaleMessages } from "@/i18nextWrapper";
import * as Sentry from "@sentry/vue";
import * as log from "loglevel";
import { createPinia } from "pinia";
@ -5,7 +6,6 @@ import { createApp, markRaw } from "vue";
import type { Router } from "vue-router";
import "../tailwind.css";
import App from "./App.vue";
import { loadLocaleMessages, setupI18n } from "./i18n";
import router from "./router";
declare module "pinia" {
@ -25,8 +25,8 @@ if (appEnv.startsWith("prod")) {
const commit = "VBV_VERSION_BUILD_NUMBER_VBV";
log.warn(`application started appEnv=${appEnv}, build=${commit}`);
const i18n = setupI18n();
const app = createApp(App);
// const i18n = setupI18n();
const app = i18nextWrapper(createApp(App));
Sentry.init({
app,
@ -37,7 +37,7 @@ Sentry.init({
});
// todo: define lang setup
loadLocaleMessages("de").then(() => {
loadI18nextLocaleMessages("de").then(() => {
app.use(router);
const pinia = createPinia();
@ -45,7 +45,7 @@ loadLocaleMessages("de").then(() => {
store.router = markRaw(router);
});
app.use(pinia);
app.use(i18n);
// app.use(i18n);
app.mount("#app");
});

3
client/src/pages/LoginPage.vue
View File

@ -4,8 +4,10 @@ import type { LoginMethod } from "@/types";
import * as log from "loglevel";
import { reactive } from "vue";
import { useRoute } from "vue-router";
import { useTranslation } from "i18next-vue";
const route = useRoute();
const { t } = useTranslation();
defineProps<{
loginMethod: LoginMethod;
@ -26,6 +28,7 @@ const userStore = useUserStore();
<main class="bg-gray-200 lg:px-12 lg:py-12">
<div class="container-medium">
<h1 class="mb-8">Login</h1>
<h2>{{ t("welcome") }}</h2>
<form
v-if="loginMethod === 'local'"

4
client/src/pages/cockpit/FeedbackPage.vue
View File

@ -63,7 +63,7 @@ import { useCurrentCourseSession } from "@/composables";
import { itGet } from "@/fetchHelpers";
import * as log from "loglevel";
import { onMounted, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { useTranslation } from "i18next-vue";
interface FeedbackData {
amount: number;
@ -80,7 +80,7 @@ const props = defineProps<{
log.debug("FeedbackPage created", props.circleId);
const courseSession = useCurrentCourseSession();
const { t } = useI18n();
const { t } = useTranslation();
const orderedQuestions = [
{

4
client/src/pages/competence/PerformanceCriteriaPage.vue
View File

@ -6,7 +6,7 @@ import type { CourseCompletionStatus } from "@/types";
import * as log from "loglevel";
import type { Ref } from "vue";
import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useTranslation } from "i18next-vue";
const props = defineProps<{
courseSlug: string;
@ -28,7 +28,7 @@ const shownCriteria = computed(() => {
});
});
const { t } = useI18n();
const { t } = useTranslation();
const mobileMenuItems: MenuItem[] = [
{

4
client/src/pages/learningPath/circlePage/DocumentSection.vue
View File

@ -73,9 +73,9 @@ import type { CircleDocument, DocumentUploadData } from "@/types";
import dialog from "@/utils/confirm-dialog";
import log from "loglevel";
import { computed, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import DocumentListItem from "./DocumentListItem.vue";
import DocumentUploadForm from "./DocumentUploadForm.vue";
import { useTranslation } from "i18next-vue";
const courseSessionsStore = useCourseSessionsStore();
const circleStore = useCircleStore();
@ -90,7 +90,7 @@ const dropdownLearningSequences = computed(() =>
);
// confirm dialog
const { t } = useI18n();
const { t } = useTranslation();
const deleteDocument = async (doc: CircleDocument) => {
const options = {
title: t("circlePage.documents.deleteModalTitle"),

4
client/src/pages/learningPath/circlePage/DocumentUploadForm.vue
View File

@ -2,7 +2,7 @@
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import type { DocumentUploadData, DropdownSelectable } from "@/types";
import { reactive } from "vue";
import { useI18n } from "vue-i18n";
import { useTranslation } from "i18next-vue";
export interface Props {
learningSequences?: DropdownSelectable[];
@ -10,7 +10,7 @@ export interface Props {
isUploading?: boolean;
}
const { t } = useI18n();
const { t } = useTranslation();
const props = withDefaults(defineProps<Props>(), {
learningSequences: () => [],

4
client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue
View File

@ -11,7 +11,7 @@ import { useMutation } from "@urql/vue";
import type { Dayjs } from "dayjs";
import log from "loglevel";
import { computed, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { useTranslation } from "i18next-vue";
const props = defineProps<{
assignment: Assignment;
@ -26,7 +26,7 @@ const emit = defineEmits<{
const courseSessionsStore = useCourseSessionsStore();
const courseSession = useCurrentCourseSession();
const { t } = useI18n();
const { t } = useTranslation();
const state = reactive({
confirmInput: false,

4
client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue
View File

@ -22,9 +22,9 @@ import { useRouteQuery } from "@vueuse/router";
import dayjs from "dayjs";
import * as log from "loglevel";
import { computed, onMounted, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { useTranslation } from "i18next-vue";
const { t } = useI18n();
const { t } = useTranslation();
const courseSession = useCurrentCourseSession();
const userStore = useUserStore();

4
client/src/pages/learningPath/learningContentPage/layouts/LearningContentFooter.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import eventBus from "@/utils/eventBus";
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useTranslation } from "i18next-vue";
export type ClosingButtonVariant = "close" | "mark_as_done";
@ -13,7 +13,7 @@ const props = defineProps<{
closingButtonVariant: ClosingButtonVariant;
}>();
const { t } = useI18n();
const { t } = useTranslation();
// eslint-disable-next-line vue/return-in-computed-property
const closingButtonText = computed(() => {

5
client/src/stores/user.ts
View File

@ -1,7 +1,8 @@
import log from "loglevel";
import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers";
import { loadLocaleMessages, setI18nLanguage } from "@/i18n";
import { setI18nLanguage } from "@/i18n";
import { loadI18nextLocaleMessages } from "@/i18nextWrapper";
import dayjs from "dayjs";
import { defineStore } from "pinia";
@ -74,7 +75,7 @@ async function setLocale(language: AvailableLanguages) {
await import("dayjs/locale/it");
}
dayjs.locale(language);
await loadLocaleMessages(language);
await loadI18nextLocaleMessages(language);
setI18nLanguage(language);
}

51
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "vbv_lernwelt_cypress",
"version": "1.0.0",
"dependencies": {
"i18next": "^23.2.6",
"pa11y": "^6.2.3"
},
"devDependencies": {
@ -16,10 +17,9 @@
}
},
"node_modules/@babel/runtime": {
"version": "7.21.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
"integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
"dev": true,
"version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
"integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
"dependencies": {
"regenerator-runtime": "^0.13.11"
},
@ -1673,6 +1673,28 @@
"node": ">=8.12.0"
}
},
"node_modules/i18next": {
"version": "23.2.6",
"resolved": "https://registry.npmjs.org/i18next/-/i18next-23.2.6.tgz",
"integrity": "sha512-i0P2XBisewaICJ7UQtwymeJj6cXUigM+s8XNIXmWk4oJ8iTok2taCbOTX0ps+u9DFcQ6FWH6xLIU0dLEnMaNbA==",
"funding": [
{
"type": "individual",
"url": "https://locize.com"
},
{
"type": "individual",
"url": "https://locize.com/i18next.html"
},
{
"type": "individual",
"url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
}
],
"dependencies": {
"@babel/runtime": "^7.22.5"
}
},
"node_modules/ieee754": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@ -2753,8 +2775,7 @@
"node_modules/regenerator-runtime": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
"dev": true
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
"node_modules/request-progress": {
"version": "3.0.0",
@ -3400,10 +3421,9 @@
},
"dependencies": {
"@babel/runtime": {
"version": "7.21.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
"integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
"dev": true,
"version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
"integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
"requires": {
"regenerator-runtime": "^0.13.11"
}
@ -4644,6 +4664,14 @@
"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
"dev": true
},
"i18next": {
"version": "23.2.6",
"resolved": "https://registry.npmjs.org/i18next/-/i18next-23.2.6.tgz",
"integrity": "sha512-i0P2XBisewaICJ7UQtwymeJj6cXUigM+s8XNIXmWk4oJ8iTok2taCbOTX0ps+u9DFcQ6FWH6xLIU0dLEnMaNbA==",
"requires": {
"@babel/runtime": "^7.22.5"
}
},
"ieee754": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@ -5398,8 +5426,7 @@
"regenerator-runtime": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
"dev": true
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
"request-progress": {
"version": "3.0.0",

1
package.json
View File

@ -14,6 +14,7 @@
"cypress-cloud": "^1.7.4"
},
"dependencies": {
"i18next": "^23.2.6",
"pa11y": "^6.2.3"
}
}