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:
@@ -423,19 +423,36 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
courseId() {
|
courseId(newVal, oldVal) {
|
||||||
|
if (newVal !== oldVal) {
|
||||||
|
// Reset Flags beim Kurswechsel
|
||||||
|
this.isCheckingLessonCompletion = false;
|
||||||
|
this.isNavigatingToNext = false;
|
||||||
this.loadLesson();
|
this.loadLesson();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
lessonId() {
|
lessonId(newVal, oldVal) {
|
||||||
|
if (newVal !== oldVal) {
|
||||||
|
// Reset Flags beim Lektionswechsel
|
||||||
|
this.isCheckingLessonCompletion = false;
|
||||||
|
this.isNavigatingToNext = false;
|
||||||
this.loadLesson();
|
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;
|
||||||
|
|||||||
Reference in New Issue
Block a user