Add support for user's native language in VocabCourseListView

- Introduced a new option for selecting the user's native language in the course selection dropdown.
- Implemented logic to load the user's native language based on the UI language and map it to the corresponding language ID.
- Updated internationalization files to include strings for the user's native language in both German and English, enhancing the user experience.
This commit is contained in:
Torsten Schulz (local)
2026-01-19 13:54:03 +01:00
parent 89ec084106
commit a657c59b2c
3 changed files with 36 additions and 1 deletions

View File

@@ -355,6 +355,7 @@
"targetLanguage": "Zielsprache", "targetLanguage": "Zielsprache",
"nativeLanguage": "Muttersprache", "nativeLanguage": "Muttersprache",
"allNativeLanguages": "Alle Muttersprachen", "allNativeLanguages": "Alle Muttersprachen",
"myNativeLanguage": "Meine Muttersprache",
"forAllLanguages": "Für alle Sprachen", "forAllLanguages": "Für alle Sprachen",
"optional": "Optional", "optional": "Optional",
"invalidCode": "Ungültiger Code", "invalidCode": "Ungültiger Code",

View File

@@ -355,6 +355,7 @@
"targetLanguage": "Target Language", "targetLanguage": "Target Language",
"nativeLanguage": "Native Language", "nativeLanguage": "Native Language",
"allNativeLanguages": "All Native Languages", "allNativeLanguages": "All Native Languages",
"myNativeLanguage": "My Native Language",
"forAllLanguages": "For All Languages", "forAllLanguages": "For All Languages",
"optional": "Optional", "optional": "Optional",
"invalidCode": "Invalid code", "invalidCode": "Invalid code",

View File

@@ -30,6 +30,7 @@
<label>{{ $t('socialnetwork.vocab.courses.nativeLanguage') }}:</label> <label>{{ $t('socialnetwork.vocab.courses.nativeLanguage') }}:</label>
<select v-model="selectedNativeLanguageId" @change="loadAllCourses"> <select v-model="selectedNativeLanguageId" @change="loadAllCourses">
<option value="">{{ $t('socialnetwork.vocab.courses.allNativeLanguages') }}</option> <option value="">{{ $t('socialnetwork.vocab.courses.allNativeLanguages') }}</option>
<option v-if="myNativeLanguageId" value="my">{{ $t('socialnetwork.vocab.courses.myNativeLanguage') }}</option>
<option value="null">{{ $t('socialnetwork.vocab.courses.forAllLanguages') }}</option> <option value="null">{{ $t('socialnetwork.vocab.courses.forAllLanguages') }}</option>
<option v-for="lang in languages" :key="lang.id" :value="lang.id">{{ lang.name }}</option> <option v-for="lang in languages" :key="lang.id" :value="lang.id">{{ lang.name }}</option>
</select> </select>
@@ -140,6 +141,7 @@ export default {
loading: false, loading: false,
courses: [], courses: [],
languages: [], languages: [],
myNativeLanguageId: null,
showCreateDialog: false, showCreateDialog: false,
showShareCodeDialog: false, showShareCodeDialog: false,
searchTerm: '', searchTerm: '',
@@ -158,17 +160,44 @@ export default {
}; };
}, },
computed: { computed: {
...mapGetters(['user']), ...mapGetters(['user', 'language']),
}, },
methods: { methods: {
async loadLanguages() { async loadLanguages() {
try { try {
const res = await apiClient.get('/api/vocab/languages'); const res = await apiClient.get('/api/vocab/languages');
this.languages = res.data?.languages || []; this.languages = res.data?.languages || [];
// Lade die Muttersprache des Benutzers
await this.loadMyNativeLanguage();
} catch (e) { } catch (e) {
console.error('Konnte Sprachen nicht laden:', e); console.error('Konnte Sprachen nicht laden:', e);
} }
}, },
async loadMyNativeLanguage() {
try {
// Mappe UI-Sprache zu vocab_language Name
const languageMap = {
'de': 'Deutsch',
'en': 'Englisch',
'es': 'Spanisch',
'fr': 'Französisch',
'it': 'Italienisch',
'pt': 'Portugiesisch'
};
const uiLanguage = this.language || 'de';
const nativeLanguageName = languageMap[uiLanguage] || 'Deutsch';
// Finde die entsprechende vocab_language ID
const nativeLang = this.languages.find(lang => lang.name === nativeLanguageName);
if (nativeLang) {
this.myNativeLanguageId = nativeLang.id;
}
} catch (e) {
console.error('Konnte Muttersprache nicht laden:', e);
}
},
async loadAllCourses() { async loadAllCourses() {
this.loading = true; this.loading = true;
try { try {
@@ -182,11 +211,15 @@ export default {
// Nur nativeLanguageId senden, wenn explizit eine Sprache ausgewählt wurde // Nur nativeLanguageId senden, wenn explizit eine Sprache ausgewählt wurde
// Leer bedeutet: zeige alle Kurse // Leer bedeutet: zeige alle Kurse
// "null" bedeutet: zeige nur Kurse ohne Muttersprache // "null" bedeutet: zeige nur Kurse ohne Muttersprache
// "my" bedeutet: verwende die Muttersprache des Benutzers
// Eine ID bedeutet: zeige nur Kurse für diese Muttersprache // Eine ID bedeutet: zeige nur Kurse für diese Muttersprache
if (this.selectedNativeLanguageId !== '') { if (this.selectedNativeLanguageId !== '') {
if (this.selectedNativeLanguageId === 'null') { if (this.selectedNativeLanguageId === 'null') {
// Explizit Kurse ohne Muttersprache anfordern // Explizit Kurse ohne Muttersprache anfordern
params.nativeLanguageId = null; params.nativeLanguageId = null;
} else if (this.selectedNativeLanguageId === 'my') {
// Verwende die Muttersprache des Benutzers
params.nativeLanguageId = this.myNativeLanguageId;
} else { } else {
// Spezifische Muttersprache // Spezifische Muttersprache
params.nativeLanguageId = this.selectedNativeLanguageId; params.nativeLanguageId = this.selectedNativeLanguageId;