From 3cc5f63610bb8deaf16c9be1faddd6d58f123bac Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Tue, 7 Apr 2026 09:38:00 +0200
Subject: [PATCH] feat(vocab): add lesson review functionality and update
 navigation

- Introduced VocabLessonReviewView for reviewing lessons within the vocabulary course structure.
- Updated routing in socialRoutes.js to include a new path for lesson reviews, ensuring authenticated access.
- Modified VocabCourseView to change the lesson button click behavior to navigate to the review view, enhancing user flow.
- Added a new method to handle lesson review navigation, improving the overall user experience in the vocabulary section.
---
 frontend/src/router/socialRoutes.js           |   8 +
 frontend/src/views/social/VocabCourseView.vue |   9 +-
 .../views/social/VocabLessonReviewView.vue    | 285 ++++++++++++++++++
 3 files changed, 301 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/views/social/VocabLessonReviewView.vue

diff --git a/frontend/src/router/socialRoutes.js b/frontend/src/router/socialRoutes.js
index a3604d1..b6019b9 100644
--- a/frontend/src/router/socialRoutes.js
+++ b/frontend/src/router/socialRoutes.js
@@ -13,6 +13,7 @@ const VocabChapterView = () => import('../views/social/VocabChapterView.vue');
 const VocabCourseListView = () => import('../views/social/VocabCourseListView.vue');
 const VocabCourseView = () => import('../views/social/VocabCourseView.vue');
 const VocabLessonView = () => import('../views/social/VocabLessonView.vue');
+const VocabLessonReviewView = () => import('../views/social/VocabLessonReviewView.vue');
 const EroticAccessView = () => import('../views/social/EroticAccessView.vue');
 const EroticPicturesView = () => import('../views/social/EroticPicturesView.vue');
 const EroticVideosView = () => import('../views/social/EroticVideosView.vue');
@@ -121,6 +122,13 @@ const socialRoutes = [
         props: true,
         meta: { requiresAuth: true }
     },
+    {
+        path: '/socialnetwork/vocab/courses/:courseId/lessons/:lessonId/review',
+        name: 'VocabLessonReview',
+        component: VocabLessonReviewView,
+        props: true,
+        meta: { requiresAuth: true }
+    },
     {
         path: '/socialnetwork/vocab/courses/:courseId/lessons/:lessonId',
         name: 'VocabLesson',
diff --git a/frontend/src/views/social/VocabCourseView.vue b/frontend/src/views/social/VocabCourseView.vue
index e4dc988..526550f 100644
--- a/frontend/src/views/social/VocabCourseView.vue
+++ b/frontend/src/views/social/VocabCourseView.vue
@@ -87,7 +87,7 @@
                 :key="`due-${lesson.id}`"
                 type="button"
                 class="course-flow-lesson"
-                @click="openLesson(lesson.id)"
+                @click="openLessonReview(lesson.id)"
               >
                 <strong>{{ lesson.title }}</strong>
                 <span>{{ formatReviewDue(getLessonProgress(lesson.id, lesson)?.reviewNextDueAt) }}</span>
@@ -705,6 +705,10 @@ export default {
       if (!step?.lesson) {
         return;
       }
+      if (step.type === 'review_due') {
+        this.openLessonReview(step.lesson.id);
+        return;
+      }
       if (step.type === 'practice') {
         this.openLessonPractice(step.lesson);
         return;
@@ -717,6 +721,9 @@ export default {
         lessonId: lesson.id
       });
     },
+    openLessonReview(lessonId) {
+      this.$router.push(`/socialnetwork/vocab/courses/${this.courseId}/lessons/${lessonId}/review`);
+    },
     openLessonAssistant(lessonId) {
       this.$router.push(`/socialnetwork/vocab/courses/${this.courseId}/lessons/${lessonId}?assistant=1`);
     },
diff --git a/frontend/src/views/social/VocabLessonReviewView.vue b/frontend/src/views/social/VocabLessonReviewView.vue
new file mode 100644
index 0000000..4c27a6d
--- /dev/null
+++ b/frontend/src/views/social/VocabLessonReviewView.vue
@@ -0,0 +1,285 @@
+<template>
+  <div class="vocab-review-view">
+    <section class="surface-card review-header">
+      <button type="button" class="button-secondary" @click="backToCourse">{{ $t('general.back') }}</button>
+      <div>
+        <h2>Kurz-Wiederholung</h2>
+        <p v-if="lesson">{{ lesson.title }} (#{{ lesson.lessonNumber }})</p>
+      </div>
+    </section>
+
+    <section v-if="loading" class="surface-card review-state">{{ $t('general.loading') }}</section>
+    <section v-else-if="!lesson" class="surface-card review-state">{{ $t('socialnetwork.vocab.notFound') }}</section>
+    <section v-else class="surface-card review-body">
+      <p class="review-intro">
+        Kurze Session mit {{ reviewQueue.length }} Begriffen. Nach Abschluss wird die geplante Wiederholung als erledigt markiert.
+      </p>
+
+      <div v-if="reviewDone" class="review-done">
+        <h3>Geschafft</h3>
+        <p>Richtig: {{ correctCount }} / {{ reviewQueue.length }}</p>
+        <button type="button" @click="backToCourse">Zurück zum Kurs</button>
+      </div>
+
+      <div v-else-if="currentItem" class="review-card">
+        <p class="review-progress">Begriff {{ currentIndex + 1 }} von {{ reviewQueue.length }}</p>
+        <p class="review-question">{{ currentPrompt }}</p>
+
+        <div v-if="mode === 'multiple_choice'" class="review-options">
+          <label v-for="(opt, idx) in currentOptions" :key="idx" class="review-option">
+            <input v-model="selectedOption" type="radio" :value="opt" />
+            <span>{{ opt }}</span>
+          </label>
+        </div>
+
+        <div v-else class="review-input">
+          <input
+            v-model="typedAnswer"
+            type="text"
+            :placeholder="$t('socialnetwork.vocab.courses.enterAnswer')"
+            @keyup.enter="checkCurrent"
+          />
+        </div>
+
+        <div class="review-actions">
+          <button
+            type="button"
+            :disabled="submitDisabled"
+            @click="checkCurrent"
+          >
+            {{ $t('socialnetwork.vocab.courses.checkAnswer') }}
+          </button>
+        </div>
+
+        <p v-if="feedback" class="review-feedback" :class="feedbackCorrect ? 'ok' : 'bad'">
+          {{ feedback }}
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import apiClient from '@/utils/axios.js';
+
+export default {
+  name: 'VocabLessonReviewView',
+  props: {
+    courseId: { type: String, required: true },
+    lessonId: { type: String, required: true }
+  },
+  data() {
+    return {
+      loading: false,
+      lesson: null,
+      reviewQueue: [],
+      currentIndex: 0,
+      mode: 'multiple_choice',
+      currentOptions: [],
+      selectedOption: '',
+      typedAnswer: '',
+      feedback: '',
+      feedbackCorrect: false,
+      correctCount: 0,
+      reviewDone: false
+    };
+  },
+  computed: {
+    currentItem() {
+      return this.reviewQueue[this.currentIndex] || null;
+    },
+    currentPrompt() {
+      if (!this.currentItem) return '';
+      return this.mode === 'multiple_choice'
+        ? `Was bedeutet "${this.currentItem.target}"?`
+        : `Tippe auf Zielsprache: "${this.currentItem.gloss}"`;
+    },
+    submitDisabled() {
+      if (!this.currentItem) return true;
+      return this.mode === 'multiple_choice' ? !this.selectedOption : !this.typedAnswer.trim();
+    }
+  },
+  methods: {
+    normalize(s) {
+      return String(s || '').trim().toLowerCase();
+    },
+    parseCorePatterns() {
+      const raw = this.lesson?.didactics?.corePatterns || [];
+      const out = [];
+      raw.forEach((entry) => {
+        if (entry && typeof entry === 'object' && entry.target) {
+          out.push({ target: String(entry.target).trim(), gloss: String(entry.gloss || '').trim() });
+          return;
+        }
+        const s = String(entry || '').trim();
+        if (!s) return;
+        const split = s.indexOf('|');
+        if (split >= 0) {
+          out.push({ target: s.slice(0, split).trim(), gloss: s.slice(split + 1).trim() });
+        } else {
+          out.push({ target: s, gloss: '' });
+        }
+      });
+      return out.filter((x) => x.target);
+    },
+    buildQueue() {
+      const fromPatterns = this.parseCorePatterns();
+      const q = [];
+      const seen = new Set();
+      fromPatterns.forEach((item) => {
+        const key = `${this.normalize(item.target)}|${this.normalize(item.gloss)}`;
+        if (!seen.has(key) && item.target) {
+          seen.add(key);
+          q.push(item);
+        }
+      });
+      return q.slice(0, 10);
+    },
+    randomOtherGlosses(correctGloss) {
+      const pool = this.reviewQueue
+        .map((x) => x.gloss)
+        .filter((g) => g && this.normalize(g) !== this.normalize(correctGloss));
+      const out = [];
+      while (pool.length && out.length < 3) {
+        const idx = Math.floor(Math.random() * pool.length);
+        out.push(pool[idx]);
+        pool.splice(idx, 1);
+      }
+      return out;
+    },
+    setupCurrent() {
+      this.feedback = '';
+      this.selectedOption = '';
+      this.typedAnswer = '';
+      if (!this.currentItem) return;
+      this.mode = this.currentItem.gloss ? 'multiple_choice' : 'typing';
+      if (this.mode === 'multiple_choice') {
+        const opts = [this.currentItem.gloss, ...this.randomOtherGlosses(this.currentItem.gloss)];
+        this.currentOptions = opts.sort(() => Math.random() - 0.5);
+      } else {
+        this.currentOptions = [];
+      }
+    },
+    async checkCurrent() {
+      if (!this.currentItem) return;
+      const isCorrect = this.mode === 'multiple_choice'
+        ? this.normalize(this.selectedOption) === this.normalize(this.currentItem.gloss)
+        : this.normalize(this.typedAnswer) === this.normalize(this.currentItem.target);
+
+      this.feedbackCorrect = isCorrect;
+      if (isCorrect) {
+        this.correctCount += 1;
+        this.feedback = this.$t('socialnetwork.vocab.courses.correct');
+      } else {
+        this.feedback = `${this.$t('socialnetwork.vocab.courses.wrong')} - ${this.$t('socialnetwork.vocab.courses.correctAnswer')}: ${this.mode === 'multiple_choice' ? this.currentItem.gloss : this.currentItem.target}`;
+      }
+
+      window.setTimeout(async () => {
+        this.currentIndex += 1;
+        if (this.currentIndex >= this.reviewQueue.length) {
+          await this.finishReview();
+          return;
+        }
+        this.setupCurrent();
+      }, 500);
+    },
+    async finishReview() {
+      this.reviewDone = true;
+      try {
+        await apiClient.put(`/api/vocab/lessons/${this.lessonId}/progress`, {
+          completed: true,
+          score: 100,
+          timeSpentMinutes: 1
+        });
+      } catch (e) {
+        console.error('Review-Fortschritt konnte nicht gespeichert werden:', e);
+      }
+    },
+    backToCourse() {
+      this.$router.push(`/socialnetwork/vocab/courses/${this.courseId}`);
+    },
+    async load() {
+      this.loading = true;
+      try {
+        const { data } = await apiClient.get(`/api/vocab/lessons/${this.lessonId}`);
+        this.lesson = data;
+        this.reviewQueue = this.buildQueue();
+        if (this.reviewQueue.length === 0) {
+          this.reviewDone = true;
+        } else {
+          this.setupCurrent();
+        }
+      } finally {
+        this.loading = false;
+      }
+    }
+  },
+  mounted() {
+    this.load();
+  }
+};
+</script>
+
+<style scoped>
+.vocab-review-view {
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+}
+.review-header {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  margin-bottom: 14px;
+}
+.review-state,
+.review-body {
+  padding: 18px;
+}
+.review-intro {
+  margin-top: 0;
+  color: var(--color-text-secondary);
+}
+.review-card {
+  margin-top: 8px;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 14px;
+  background: #fff;
+}
+.review-progress {
+  margin: 0 0 8px;
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+}
+.review-question {
+  margin: 0 0 12px;
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+.review-options {
+  display: grid;
+  gap: 8px;
+}
+.review-option {
+  display: flex;
+  gap: 8px;
+}
+.review-input input {
+  width: 100%;
+  padding: 8px 10px;
+}
+.review-actions {
+  margin-top: 10px;
+}
+.review-feedback {
+  margin-top: 10px;
+  font-weight: 600;
+}
+.review-feedback.ok { color: #2f6b3d; }
+.review-feedback.bad { color: #9c3e3e; }
+.review-done {
+  padding: 12px;
+  border-radius: 10px;
+  background: rgba(68, 138, 86, 0.12);
+}
+</style>