torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor lesson loading and navigation logic in VocabLessonView

Browse Source 
- Improved handling of course and lesson changes by resetting flags to prevent multiple executions during navigation.
- Enhanced the loadLesson method to prevent redundant loading and ensure a smoother user experience.
- Added console logging for better debugging and user feedback during navigation and lesson transitions.
- Updated navigation logic to use replace instead of push for better history management.
This commit is contained in:
Torsten Schulz (local)
2026-01-19 22:15:06 +01:00
parent 21f6130666
commit 7f57ecc35e
1 changed files with 39 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/views/social/VocabLessonView.vue
View File

@@ -423,19 +423,36 @@ export default {
}
},
watch: {
courseId() {
this.loadLesson();
courseId(newVal, oldVal) {
if (newVal !== oldVal) {
// Reset Flags beim Kurswechsel
this.isCheckingLessonCompletion = false;
this.isNavigatingToNext = false;
this.loadLesson();
}
},
lessonId() {
this.loadLesson();
lessonId(newVal, oldVal) {
if (newVal !== oldVal) {
// Reset Flags beim Lektionswechsel
this.isCheckingLessonCompletion = false;
this.isNavigatingToNext = false;
this.loadLesson();
}
}
},
methods: {
async loadLesson() {
// Verhindere mehrfaches Laden
if (this.loading) return;
this.loading = true;
// Setze Antworten und Ergebnisse zurück
this.exerciseAnswers = {};
this.exerciseResults = {};
// Reset Flags
this.isCheckingLessonCompletion = false;
this.isNavigatingToNext = false;
try {
const res = await apiClient.get(`/api/vocab/lessons/${this.lessonId}`);
this.lesson = res.data;
@@ -623,7 +640,10 @@ export default {
},
async navigateToNextLesson() {
// Verhindere mehrfache Navigation
if (this.isNavigatingToNext) return;
if (this.isNavigatingToNext) {
console.log('[VocabLessonView] Navigation bereits in Gang, überspringe...');
return;
}
this.isNavigatingToNext = true;
try {
@@ -632,7 +652,9 @@ export default {
const course = courseRes.data;
if (!course.lessons || course.lessons.length === 0) {
console.log('[VocabLessonView] Keine Lektionen gefunden');
this.isNavigatingToNext = false;
this.isCheckingLessonCompletion = false;
return;
}
@@ -642,17 +664,27 @@ export default {
if (currentLessonIndex >= 0 && currentLessonIndex < course.lessons.length - 1) {
// Nächste Lektion gefunden
const nextLesson = course.lessons[currentLessonIndex + 1];
console.log('[VocabLessonView] Nächste Lektion gefunden:', nextLesson.id);
// Zeige Erfolgs-Meldung und leite weiter
if (confirm(this.$t('socialnetwork.vocab.courses.lessonCompleted') + '\n' + this.$t('socialnetwork.vocab.courses.goToNextLesson'))) {
this.$router.push(`/socialnetwork/vocab/courses/${this.courseId}/lessons/${nextLesson.id}`);
const shouldNavigate = confirm(this.$t('socialnetwork.vocab.courses.lessonCompleted') + '\n' + this.$t('socialnetwork.vocab.courses.goToNextLesson'));
if (shouldNavigate) {
console.log('[VocabLessonView] Navigiere zur nächsten Lektion:', nextLesson.id);
// Setze Flags zurück BEVOR die Navigation stattfindet
this.isNavigatingToNext = false;
this.isCheckingLessonCompletion = false;
// Verwende replace statt push, um die History nicht zu belasten
this.$router.replace(`/socialnetwork/vocab/courses/${this.courseId}/lessons/${nextLesson.id}`);
} else {
// Benutzer hat abgebrochen - Flag zurücksetzen
console.log('[VocabLessonView] Navigation abgebrochen');
this.isNavigatingToNext = false;
this.isCheckingLessonCompletion = false;
}
} else {
// Letzte Lektion - zeige Abschluss-Meldung
console.log('[VocabLessonView] Letzte Lektion erreicht');
alert(this.$t('socialnetwork.vocab.courses.allLessonsCompleted'));
this.isNavigatingToNext = false;
this.isCheckingLessonCompletion = false;