torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Changed menu that dialogues can be opened too; added random chat

Browse Source
This commit is contained in:
Torsten Schulz
2025-07-17 16:52:11 +02:00
parent 89cf12a7a8
commit 6062570fe8
5 changed files with 415 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
frontend/src/views/social/ForumView.vue
View File

@@ -1,9 +1,13 @@
<template>
<h2>{{ $t('socialnetwork.forum.title') }} {{ forumName }}</h2>
<div class="creationtoggler">
<button @click="createNewTopic">{{ $t(!inCreation ? 'socialnetwork.forum.showNewTopic' :
'socialnetwork.forum.hideNewTopic') }}</button>
<button @click="createNewTopic">
{{ $t(!inCreation
? 'socialnetwork.forum.showNewTopic'
: 'socialnetwork.forum.hideNewTopic') }}
</button>
</div>
<div v-if="inCreation">
<div>
<label class="newtitle">
@@ -14,13 +18,26 @@
<div class="editor-container">
<EditorContent :editor="editor" class="editor" />
</div>
<button @click="saveNewTopic">{{ $t('socialnetwork.forum.createNewTopic') }}</button>
<button @click="saveNewTopic">
{{ $t('socialnetwork.forum.createNewTopic') }}
</button>
</div>
<div v-else-if="titles.length > 0">
<!-- PAGINATION + TABLE bleibt unverändert -->
<!-- ... -->
<!-- hier kommt deine bestehende TABLE + PAGINATION hin -->
<table>
<!-- Kopfzeile, Spalten etc. -->
</table>
<div class="pagination">
<button @click="goToPage(page-1)" :disabled="page<=1">‹</button>
<span>{{ page }} / {{ totalPages }}</span>
<button @click="goToPage(page+1)" :disabled="page>=totalPages">›</button>
</div>
</div>
<div v-else>
{{ $t('socialnetwork.forum.noTitles') }}
</div>
<div v-else>{{ $t('socialnetwork.forum.noTitles') }}</div>
</template>
<script>
@@ -30,18 +47,10 @@ import apiClient from '../../utils/axios'
export default {
name: 'ForumView',
components: {
EditorContent,
},
computed: {
totalPages() {
return Math.ceil(this.numberOfItems / 25);
}
},
components: { EditorContent },
data() {
return {
forumName: 'test',
forumId: 0,
forumName: '',
page: 1,
numberOfItems: 0,
titles: [],
@@ -50,57 +59,94 @@ export default {
editor: null,
}
},
computed: {
// Neu: Forum‑ID immer direkt aus der Route ziehen
forumId() {
return this.$route.params.id
},
totalPages() {
return Math.ceil(this.numberOfItems / 25)
}
},
watch: {
// Sobald sich die Route‑ID ändert, zurück auf Seite 1 und neu laden
forumId: {
handler() {
this.page = 1
this.loadForum()
},
immediate: true
},
// Wenn sich die Seite ändert, ebenfalls neu laden
page(newPage, oldPage) {
if (newPage !== oldPage) {
this.loadForum()
}
}
},
async mounted() {
this.forumId = this.$route.params.id;
await this.loadForum();
// Editor initialisieren
this.editor = new Editor({
extensions: [StarterKit],
content: '',
});
})
},
beforeUnmount() {
if (this.editor) this.editor.destroy();
if (this.editor) this.editor.destroy()
},
methods: {
async loadForum() {
const response = await apiClient.get(`/api/forum/${this.forumId}/${this.page}`);
this.setData(response.data);
try {
const { data } = await apiClient.get(
`/api/forum/${this.forumId}/${this.page}`
)
this.forumName = data.name
this.titles = data.titles
this.numberOfItems = data.totalTopics
} catch (err) {
console.error('Fehler beim Laden des Forums', err)
}
},
createNewTopic() {
this.inCreation = !this.inCreation;
this.inCreation = !this.inCreation
if (this.inCreation && this.editor) {
this.editor.commands.setContent('');
this.editor.commands.setContent('')
}
},
async saveNewTopic() {
const content = this.editor ? this.editor.getHTML() : '';
const response = await apiClient.post('/api/forum/topic', {
forumId: this.forumId,
title: this.newTitle,
content,
});
this.setData(response.data);
this.inCreation = false;
},
setData(data) {
this.forumName = data.name;
this.titles = data.titles;
this.page = data.page;
this.numberOfItems = data.totalTopics;
const content = this.editor ? this.editor.getHTML() : ''
if (!this.newTitle.trim() || !content.trim()) return
try {
const { data } = await apiClient.post(
'/api/forum/topic',
{
forumId: this.forumId,
title: this.newTitle,
content
}
)
// Neu: Server kann aktuelle Liste zurückliefern
this.forumName = data.name
this.titles = data.titles
this.numberOfItems = data.totalTopics
this.page = data.page
this.inCreation = false
this.newTitle = ''
} catch (err) {
console.error('Fehler beim Erstellen des Themas', err)
}
},
goToPage(page) {
if (page >= 1 && page <= this.totalPages) {
this.page = page;
this.loadForum();
this.page = page
}
},
openProfile(id) {
this.$root.$refs.userProfileDialog.userId = id;
this.$root.$refs.userProfileDialog.open();
this.$root.$refs.userProfileDialog.userId = id
this.$root.$refs.userProfileDialog.open()
},
openTopic(topicId) {
this.$router.push(`/socialnetwork/forumtopic/${topicId}`);
this.$router.push(`/socialnetwork/forumtopic/${topicId}`)
},
}
}
@@ -110,17 +156,14 @@ export default {
.creationtoggler {
margin-bottom: 1em;
}
.newtitle {
display: flex;
gap: 1em;
vertical-align: middle;
}
.newtitle input {
flex: 1;
}
.editor-container {
margin: 1em 0;
border: 1px solid #ccc;
@@ -128,23 +171,19 @@ export default {
min-height: 200px;
background-color: white;
}
.editor {
min-height: 150px;
outline: none;
}
.pagination {
display: flex;
justify-content: center;
gap: 0.5em;
margin: 1em 0;
}
.pagination button {
padding: 0.5em 1em;
}
.pagination span {
padding: 0.5em;
}