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

<template>
  <div class="vocab-course-list">
    <h2>{{ $t('socialnetwork.vocab.courses.title') }}</h2>

    <div class="box">
      <div class="actions">
        <button @click="showCreateDialog = true">{{ $t('socialnetwork.vocab.courses.create') }}</button>
        <button @click="loadMyCourses">{{ $t('socialnetwork.vocab.courses.myCourses') }}</button>
        <button @click="loadAllCourses">{{ $t('socialnetwork.vocab.courses.allCourses') }}</button>
      </div>

      <div v-if="loading">{{ $t('general.loading') }}</div>
      <div v-else>
        <div v-if="courses.length === 0">
          {{ $t('socialnetwork.vocab.courses.none') }}
        </div>
        <div v-else class="course-list">
          <div v-for="course in courses" :key="course.id" class="course-item">
            <div class="course-header">
              <h3 @click="openCourse(course.id)" class="course-title">{{ course.title }}</h3>
              <span v-if="course.isOwner" class="badge owner">{{ $t('socialnetwork.vocab.courses.owner') }}</span>
              <span v-else-if="course.enrolledAt" class="badge enrolled">{{ $t('socialnetwork.vocab.courses.enrolled') }}</span>
              <span v-if="course.isPublic" class="badge public">{{ $t('socialnetwork.vocab.courses.public') }}</span>
            </div>
            <p v-if="course.description" class="course-description">{{ course.description }}</p>
            <div class="course-meta">
              <span>{{ $t('socialnetwork.vocab.courses.difficulty') }}: {{ course.difficultyLevel }}</span>
              <span v-if="course.lessons">{{ $t('socialnetwork.vocab.courses.lessons') }}: {{ course.lessons.length }}</span>
            </div>
            <div class="course-actions">
              <button v-if="!course.enrolledAt && (course.isPublic || course.isOwner)" @click="enroll(course.id)">
                {{ $t('socialnetwork.vocab.courses.enroll') }}
              </button>
              <button v-if="course.enrolledAt" @click="openCourse(course.id)">
                {{ $t('socialnetwork.vocab.courses.continue') }}
              </button>
              <button v-if="course.isOwner" @click="editCourse(course.id)">
                {{ $t('socialnetwork.vocab.courses.edit') }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Create Course Dialog -->
    <div v-if="showCreateDialog" class="dialog-overlay" @click="showCreateDialog = false">
      <div class="dialog" @click.stop>
        <h3>{{ $t('socialnetwork.vocab.courses.create') }}</h3>
        <form @submit.prevent="createCourse">
          <div class="form-group">
            <label>{{ $t('socialnetwork.vocab.courses.title') }}</label>
            <input v-model="newCourse.title" required />
          </div>
          <div class="form-group">
            <label>{{ $t('socialnetwork.vocab.courses.description') }}</label>
            <textarea v-model="newCourse.description"></textarea>
          </div>
          <div class="form-group">
            <label>{{ $t('socialnetwork.vocab.courses.language') }}</label>
            <select v-model="newCourse.languageId" required>
              <option value="">{{ $t('socialnetwork.vocab.courses.selectLanguage') }}</option>
              <option v-for="lang in languages" :key="lang.id" :value="lang.id">{{ lang.name }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>{{ $t('socialnetwork.vocab.courses.difficulty') }}</label>
            <input type="number" v-model.number="newCourse.difficultyLevel" min="1" max="10" />
          </div>
          <div class="form-group">
            <label>
              <input type="checkbox" v-model="newCourse.isPublic" />
              {{ $t('socialnetwork.vocab.courses.public') }}
            </label>
          </div>
          <div class="form-actions">
            <button type="submit">{{ $t('general.create') }}</button>
            <button type="button" @click="showCreateDialog = 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: 'VocabCourseListView',
  data() {
    return {
      loading: false,
      courses: [],
      languages: [],
      showCreateDialog: false,
      newCourse: {
        title: '',
        description: '',
        languageId: null,
        difficultyLevel: 1,
        isPublic: false
      }
    };
  },
  computed: {
    ...mapGetters(['user']),
  },
  methods: {
    async loadLanguages() {
      try {
        const res = await apiClient.get('/api/vocab/languages');
        this.languages = res.data?.languages || [];
      } catch (e) {
        console.error('Konnte Sprachen nicht laden:', e);
      }
    },
    async loadAllCourses() {
      this.loading = true;
      try {
        const res = await apiClient.get('/api/vocab/courses', { params: { includePublic: true, includeOwn: true } });
        const courses = res.data || [];
        // Füge isOwner Flag hinzu
        this.courses = courses.map(c => ({
          ...c,
          isOwner: c.ownerUserId === this.user?.id
        }));
      } catch (e) {
        console.error('Konnte Kurse nicht laden:', e);
      } finally {
        this.loading = false;
      }
    },
    async loadMyCourses() {
      this.loading = true;
      try {
        const res = await apiClient.get('/api/vocab/courses/my');
        const courses = res.data || [];
        // Füge isOwner Flag hinzu
        this.courses = courses.map(c => ({
          ...c,
          isOwner: c.ownerUserId === this.user?.id
        }));
      } catch (e) {
        console.error('Konnte meine Kurse nicht laden:', e);
      } finally {
        this.loading = false;
      }
    },
    async createCourse() {
      try {
        await apiClient.post('/api/vocab/courses', this.newCourse);
        this.showCreateDialog = false;
        this.newCourse = {
          title: '',
          description: '',
          languageId: null,
          difficultyLevel: 1,
          isPublic: false
        };
        await this.loadAllCourses();
      } catch (e) {
        console.error('Fehler beim Erstellen des Kurses:', e);
        alert(e.response?.data?.error || 'Fehler beim Erstellen des Kurses');
      }
    },
    async enroll(courseId) {
      try {
        await apiClient.post(`/api/vocab/courses/${courseId}/enroll`);
        await this.loadAllCourses();
      } catch (e) {
        console.error('Fehler beim Einschreiben:', e);
        alert(e.response?.data?.error || 'Fehler beim Einschreiben');
      }
    },
    openCourse(courseId) {
      this.$router.push(`/socialnetwork/vocab/courses/${courseId}`);
    },
    editCourse(courseId) {
      this.$router.push(`/socialnetwork/vocab/courses/${courseId}/edit`);
    }
  },
  async mounted() {
    await this.loadLanguages();
    await this.loadAllCourses();
  },
};
</script>

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

.box {
  background: #f6f6f6;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

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

.course-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

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

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

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

.badge {
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 0.85em;
}

.badge.owner {
  background: #4CAF50;
  color: white;
}

.badge.enrolled {
  background: #2196F3;
  color: white;
}

.badge.public {
  background: #FF9800;
  color: white;
}

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

.course-meta {
  display: flex;
  gap: 15px;
  margin: 10px 0;
  font-size: 0.9em;
  color: #888;
}

.course-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>