From 656c3b3d0923ed422dcc2ff8acf98be36dafbbbc Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 19 Jan 2026 19:40:36 +0100
Subject: [PATCH] Improve exercise display and logging in VocabLessonView

- Updated the exercise tab button to show the count of available grammar exercises, enhancing user feedback.
- Enhanced conditional rendering to ensure proper handling of lesson and exercise data, preventing potential errors.
- Added detailed logging for exercise count and active tab state, aiding in debugging and monitoring.
---
 frontend/src/views/social/VocabLessonView.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/social/VocabLessonView.vue b/frontend/src/views/social/VocabLessonView.vue
index 46bb1fa..7b781c5 100644
--- a/frontend/src/views/social/VocabLessonView.vue
+++ b/frontend/src/views/social/VocabLessonView.vue
@@ -22,9 +22,9 @@
           :class="{ active: activeTab === 'exercises' }" 
           @click="activeTab = 'exercises'"
           class="tab-button"
-          :disabled="!hasExercises"
         >
           {{ $t('socialnetwork.vocab.courses.exercises') }}
+          <span v-if="hasExercises" class="exercise-count">({{ lesson?.grammarExercises?.length || 0 }})</span>
         </button>
       </div>
 
@@ -65,7 +65,7 @@
 
       <!-- Übungen-Tab -->
       <div v-if="activeTab === 'exercises'" class="grammar-exercises">
-        <div v-if="lesson.grammarExercises && lesson.grammarExercises.length > 0">
+        <div v-if="lesson && lesson.grammarExercises && lesson.grammarExercises.length > 0">
           <h3>{{ $t('socialnetwork.vocab.courses.grammarExercises') }}</h3>
           <div v-for="exercise in lesson.grammarExercises" :key="exercise.id" class="exercise-item">
           <h4>{{ exercise.title }}</h4>
@@ -157,7 +157,7 @@
           </div>
           </div>
         </div>
-        <div v-else>
+        <div v-else-if="lesson && (!lesson.grammarExercises || lesson.grammarExercises.length === 0)">
           <p>{{ $t('socialnetwork.vocab.courses.noExercises') }}</p>
         </div>
       </div>
@@ -267,6 +267,9 @@ export default {
         this.lesson = res.data;
         console.log('[VocabLessonView] Geladene Lektion:', this.lesson);
         console.log('[VocabLessonView] Übungen:', this.lesson?.grammarExercises);
+        console.log('[VocabLessonView] Anzahl Übungen:', this.lesson?.grammarExercises?.length || 0);
+        console.log('[VocabLessonView] activeTab:', this.activeTab);
+        console.log('[VocabLessonView] hasExercises:', this.hasExercises);
         // Initialisiere Übungen aus der Lektion oder lade sie separat
         if (this.lesson && this.lesson.id) {
           if (this.lesson.grammarExercises && this.lesson.grammarExercises.length > 0) {