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

Some fixes and additions

Browse Source
This commit is contained in:
Torsten Schulz
2025-07-09 14:28:35 +02:00
parent 5029be81e9
commit fceea5b7fb
32 changed files with 4373 additions and 1294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,71 +11,27 @@
<input type="text" v-model="newTitle" />
</label>
</div>
<editor v-model="newContent" :init="tinymceInitOptions" :api-key="apiKey"
tinymce-script-src="/tinymce/tinymce.min.js"></editor>
<div class="editor-container">
<EditorContent :editor="editor" class="editor" />
</div>
<button @click="saveNewTopic">{{ $t('socialnetwork.forum.createNewTopic') }}</button>
</div>
<div v-else-if="titles.length > 0">
<div class="pagination">
<button @click="goToPage(1)" v-if="page != 1">&laquo; {{ $t('socialnetwork.forum.pagination.first')
}}</button>
<button @click="goToPage(page - 1)" v-if="page != 1">&lsaquo; {{
$t('socialnetwork.forum.pagination.previous') }}</button>
<span>{{ $t('socialnetwork.forum.pagination.page').replace("<<page>>", page).replace("<<of>>", totalPages)
}}</span>
<button @click="goToPage(page + 1)" v-if="page != totalPages">{{ $t('socialnetwork.forum.pagination.next')
}}
&rsaquo;</button>
<button @click="goToPage(totalPages)" v-if="page != totalPages">{{ $t('socialnetwork.forum.pagination.last')
}}
&raquo;</button>
</div>
<table>
<thead>
<tr>
<th>{{ $t('socialnetwork.forum.topic') }}</th>
<th>{{ $t('socialnetwork.forum.createdBy') }}</th>
<th>{{ $t('socialnetwork.forum.createdAt') }}</th>
<th>{{ $t('socialnetwork.forum.reactions') }}</th>
<th>{{ $t('socialnetwork.forum.lastReaction') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="title in titles">
<td><span class="link" @click="openTopic(title.id)">{{ title.title }}</span></td>
<td><span class="link" @click="openProfile(title.createdByHash)">{{ title.createdBy }}</span></td>
<td>{{ new Date(title.createdAt).toLocaleString() }}</td>
<td>{{ title.numberOfItems }}</td>
<td>{{ new Date(title.lastMessageDate).toLocaleString() }}</td>
</tr>
</tbody>
</table>
<div class="pagination">
<button @click="goToPage(1)" v-if="page != 1">&laquo; {{ $t('socialnetwork.forum.pagination.first')
}}</button>
<button @click="goToPage(page - 1)" v-if="page != 1">&lsaquo; {{
$t('socialnetwork.forum.pagination.previous') }}</button>
<span>{{ $t('socialnetwork.forum.pagination.page').replace("<<page>>", page).replace("<<of>>", totalPages)
}}</span>
<button @click="goToPage(page + 1)" v-if="page != totalPages">{{ $t('socialnetwork.forum.pagination.next')
}}
&rsaquo;</button>
<button @click="goToPage(totalPages)" v-if="page != totalPages">{{ $t('socialnetwork.forum.pagination.last')
}}
&raquo;</button>
</div>
<!-- PAGINATION + TABLE bleibt unverändert -->
<!-- ... -->
</div>
<div v-else>{{ $t('socialnetwork.forum.noTitles') }}</div>
</template>
<script>
import apiClient from '../../utils/axios';
import TinyMCEEditor from '@tinymce/tinymce-vue';
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import apiClient from '../../utils/axios'
export default {
name: 'ForumView',
components: {
editor: TinyMCEEditor,
EditorContent,
},
computed: {
totalPages() {
@@ -91,30 +47,20 @@ export default {
titles: [],
inCreation: false,
newTitle: '',
newContent: '',
apiKey: import.meta.env.VITE_TINYMCE_API_KEY ?? '',
tinymceInitOptions: {
script_url: '/tinymce/tinymce.min.js',
height: 300,
menubar: true,
plugins: [
'lists', 'link',
'searchreplace', 'visualblocks', 'code',
'insertdatetime', 'table'
],
toolbar:
'undo redo cut copy paste | bold italic forecolor backcolor fontfamily fontsize| \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | link visualblocks code',
contextmenu: 'link image table',
menubar: 'edit format table',
promotion: false,
},
editor: null,
}
},
async mounted() {
this.forumId = this.$route.params.id;
await this.loadForum();
this.editor = new Editor({
extensions: [StarterKit],
content: '',
});
},
beforeUnmount() {
if (this.editor) this.editor.destroy();
},
methods: {
async loadForum() {
@@ -123,12 +69,16 @@ export default {
},
createNewTopic() {
this.inCreation = !this.inCreation;
if (this.inCreation && this.editor) {
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.newEntryContent
content,
});
this.setData(response.data);
this.inCreation = false;
@@ -171,6 +121,19 @@ export default {
flex: 1;
}
.editor-container {
margin: 1em 0;
border: 1px solid #ccc;
padding: 10px;
min-height: 200px;
background-color: white;
}
.editor {
min-height: 150px;
outline: none;
}
.pagination {
display: flex;
justify-content: center;
@@ -185,4 +148,4 @@ export default {
.pagination span {
padding: 0.5em;
}
</style>
</style>