From 7f57ecc35eb0e9c88ba115348da3228a7a49ec0c Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 19 Jan 2026 22:15:06 +0100
Subject: [PATCH] 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.
---
 frontend/src/views/social/VocabLessonView.vue | 46 ++++++++++++++++---
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/social/VocabLessonView.vue b/frontend/src/views/social/VocabLessonView.vue
index 507772d..5c1321f 100644
--- a/frontend/src/views/social/VocabLessonView.vue
+++ b/frontend/src/views/social/VocabLessonView.vue
@@ -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;