Implement vocab course and grammar exercise features in backend and frontend
- Added new course management functionalities in VocabController, including creating, updating, and deleting courses and lessons. - Implemented enrollment and progress tracking for courses, along with grammar exercise creation and management. - Updated database schema to include tables for courses, lessons, enrollments, and grammar exercises. - Enhanced frontend with new routes and views for course listing and details, including internationalization support for course-related texts. - Improved user experience by adding navigation to courses from the main vocab trainer view.
This commit is contained in:
Torsten Schulz (local)
330
frontend/src/views/social/VocabCourseListView.vue
Normal file
330
frontend/src/views/social/VocabCourseListView.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user