yourpart3/frontend/src/views/social/VocabCourseView.vue

<template>
  <div class="vocab-course-view">
    <div v-if="loading">{{ $t('general.loading') }}</div>
    <div v-else-if="course">
      <h2>{{ course.title }}</h2>
      <p v-if="course.description">{{ course.description }}</p>

      <div class="course-info">
        <span>{{ $t('socialnetwork.vocab.courses.difficulty') }}: {{ course.difficultyLevel }}</span>
        <span v-if="course.isPublic">{{ $t('socialnetwork.vocab.courses.public') }}</span>
        <span v-if="course.shareCode && isOwner" class="share-code">
          {{ $t('socialnetwork.vocab.courses.shareCode') }}: <code>{{ course.shareCode }}</code>
        </span>
      </div>

      <div v-if="isOwner" class="owner-actions">
        <button @click="showAddLessonDialog = true">{{ $t('socialnetwork.vocab.courses.addLesson') }}</button>
        <button @click="editCourse">{{ $t('socialnetwork.vocab.courses.edit') }}</button>
      </div>

      <div v-if="course.lessons && course.lessons.length > 0" class="lessons-list">
        <h3>{{ $t('socialnetwork.vocab.courses.lessons') }}</h3>
        <div v-for="lesson in course.lessons" :key="lesson.id" class="lesson-item">
          <div class="lesson-header">
            <span class="lesson-number">{{ lesson.lessonNumber }}.</span>
            <h4 @click="openLesson(lesson.id)" class="lesson-title">{{ lesson.title }}</h4>
            <span v-if="getLessonProgress(lesson.id)?.completed" class="badge completed">
              {{ $t('socialnetwork.vocab.courses.completed') }}
            </span>
            <span v-if="getLessonProgress(lesson.id)?.score" class="score">
              {{ $t('socialnetwork.vocab.courses.score') }}: {{ getLessonProgress(lesson.id).score }}
            </span>
          </div>
          <p v-if="lesson.description" class="lesson-description">{{ lesson.description }}</p>
          <div class="lesson-actions">
            <button @click="openLesson(lesson.id)">
              {{ getLessonProgress(lesson.id)?.completed ? $t('socialnetwork.vocab.courses.review') : $t('socialnetwork.vocab.courses.start') }}
            </button>
            <button v-if="isOwner" @click="editLesson(lesson.id)">{{ $t('socialnetwork.vocab.courses.edit') }}</button>
            <button v-if="isOwner" @click="deleteLesson(lesson.id)">{{ $t('general.delete') }}</button>
          </div>
        </div>
      </div>
      <div v-else>
        <p>{{ $t('socialnetwork.vocab.courses.noLessons') }}</p>
      </div>
    </div>

    <!-- Add Lesson Dialog -->
    <div v-if="showAddLessonDialog" class="dialog-overlay" @click="showAddLessonDialog = false">
      <div class="dialog" @click.stop>
        <h3>{{ $t('socialnetwork.vocab.courses.addLesson') }}</h3>
        <form @submit.prevent="addLesson">
          <div class="form-group">
            <label>{{ $t('socialnetwork.vocab.courses.lessonNumber') }}</label>
            <input type="number" v-model.number="newLesson.lessonNumber" min="1" required />
          </div>
          <div class="form-group">
            <label>{{ $t('socialnetwork.vocab.courses.title') }}</label>
            <input v-model="newLesson.title" required />
          </div>
          <div class="form-group">
            <label>{{ $t('socialnetwork.vocab.courses.description') }}</label>
            <textarea v-model="newLesson.description"></textarea>
          </div>
          <div class="form-group">
            <label>{{ $t('socialnetwork.vocab.courses.chapter') }}</label>
            <select v-model="newLesson.chapterId" required>
              <option value="">{{ $t('socialnetwork.vocab.courses.selectChapter') }}</option>
              <option v-for="chapter in chapters" :key="chapter.id" :value="chapter.id">{{ chapter.title }}</option>
            </select>
          </div>
          <div class="form-actions">
            <button type="submit">{{ $t('general.create') }}</button>
            <button type="button" @click="showAddLessonDialog = false">{{ $t('general.cancel') }}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import apiClient from '@/utils/axios.js';

export default {
  name: 'VocabCourseView',
  props: {
    courseId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      course: null,
      progress: [],
      chapters: [],
      showAddLessonDialog: false,
      newLesson: {
        lessonNumber: 1,
        title: '',
        description: '',
        chapterId: null
      }
    };
  },
  computed: {
    ...mapGetters(['user']),
    isOwner() {
      return this.course && this.course.ownerUserId === this.user?.id;
    }
  },
  watch: {
    courseId() {
      this.loadCourse();
    }
  },
  methods: {
    async loadCourse() {
      this.loading = true;
      try {
        const res = await apiClient.get(`/api/vocab/courses/${this.courseId}`);
        this.course = res.data;
        await this.loadProgress();
        if (this.course.languageId) {
          await this.loadChapters();
        }
      } catch (e) {
        console.error('Konnte Kurs nicht laden:', e);
      } finally {
        this.loading = false;
      }
    },
    async loadProgress() {
      try {
        const res = await apiClient.get(`/api/vocab/courses/${this.courseId}/progress`);
        this.progress = res.data || [];
      } catch (e) {
        // Nicht eingeschrieben? Progress ist leer
        this.progress = [];
      }
    },
    async loadChapters() {
      try {
        const res = await apiClient.get(`/api/vocab/languages/${this.course.languageId}/chapters`);
        this.chapters = res.data?.chapters || [];
      } catch (e) {
        console.error('Konnte Kapitel nicht laden:', e);
      }
    },
    getLessonProgress(lessonId) {
      return this.progress.find(p => p.lessonId === lessonId);
    },
    async addLesson() {
      try {
        await apiClient.post(`/api/vocab/courses/${this.courseId}/lessons`, this.newLesson);
        this.showAddLessonDialog = false;
        this.newLesson = {
          lessonNumber: 1,
          title: '',
          description: '',
          chapterId: null
        };
        await this.loadCourse();
      } catch (e) {
        console.error('Fehler beim Hinzufügen der Lektion:', e);
        alert(e.response?.data?.error || 'Fehler beim Hinzufügen der Lektion');
      }
    },
    async deleteLesson(lessonId) {
      if (!confirm(this.$t('socialnetwork.vocab.courses.confirmDelete'))) {
        return;
      }
      try {
        await apiClient.delete(`/api/vocab/lessons/${lessonId}`);
        await this.loadCourse();
      } catch (e) {
        console.error('Fehler beim Löschen der Lektion:', e);
        alert(e.response?.data?.error || 'Fehler beim Löschen der Lektion');
      }
    },
    openLesson(lessonId) {
      this.$router.push(`/socialnetwork/vocab/courses/${this.courseId}/lessons/${lessonId}`);
    },
    editCourse() {
      this.$router.push(`/socialnetwork/vocab/courses/${this.courseId}/edit`);
    },
    editLesson(lessonId) {
      // TODO: Implement edit lesson
      console.log('Edit lesson', lessonId);
    }
  },
  async mounted() {
    await this.loadCourse();
  },
};
</script>

<style scoped>
.vocab-course-view {
  padding: 20px;
}

.course-info {
  display: flex;
  gap: 15px;
  margin: 15px 0;
  color: #666;
  flex-wrap: wrap;
}

.share-code {
  font-family: monospace;
}

.share-code code {
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

.owner-actions {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}

.lessons-list {
  margin-top: 30px;
}

.lesson-item {
  background: white;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
}

.lesson-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.lesson-number {
  font-weight: bold;
  color: #666;
}

.lesson-title {
  cursor: pointer;
  margin: 0;
  flex: 1;
  color: #0066cc;
  text-decoration: underline;
}

.badge.completed {
  background: #4CAF50;
  color: white;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 0.85em;
}

.score {
  color: #666;
  font-size: 0.9em;
}

.lesson-description {
  color: #666;
  margin: 10px 0;
}

.lesson-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.form-group {
  margin: 15px 0;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-group textarea {
  min-height: 80px;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>