Refactor lesson loading and navigation logic in VocabLessonView

- 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

View File

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