127 lines
3.9 KiB
Vue
127 lines
3.9 KiB
Vue
<template>
|
|
<h2 class="link" @click="openForum()">{{ $t('socialnetwork.forum.title') }} {{ forumName }}</h2>
|
|
<h3 v-if="forumTopic">{{ forumTopic }}</h3>
|
|
<ul class="messages">
|
|
<li v-for="message in messages">
|
|
<div v-html="message.text"></div>
|
|
<div class="footer">
|
|
<span class="link" @click="openProfile(message.lastMessageUser.hashedId)">{{
|
|
message.lastMessageUser.username }}</span>
|
|
<span>{{ new Date(message.createdAt).toLocaleString() }}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<editor v-model="newContent" :init="tinymceInitOptions" :api-key="apiKey"
|
|
tinymce-script-src="/tinymce/tinymce.min.js"></editor>
|
|
<button @click="saveNewMessage">{{ $t('socialnetwork.forum.createNewMesssage') }}</button>
|
|
</template>
|
|
|
|
<script>
|
|
import apiClient from '../../utils/axios';
|
|
import TinyMCEEditor from '@tinymce/tinymce-vue';
|
|
|
|
export default {
|
|
name: 'ForumTopicView',
|
|
components: {
|
|
editor: TinyMCEEditor,
|
|
},
|
|
data() {
|
|
return {
|
|
forumTopicId: String,
|
|
forumTopic: null,
|
|
forumName: null,
|
|
forumId: 0,
|
|
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,
|
|
},
|
|
}
|
|
},
|
|
async mounted() {
|
|
this.forumTopicId = this.$route.params.id;
|
|
this.loadForumTopic();
|
|
},
|
|
methods: {
|
|
async loadForumTopic() {
|
|
try {
|
|
console.log(this.forumTopicId);
|
|
const url = `/api/forum/topic/${this.forumTopicId}`;
|
|
console.log('url', url);
|
|
const response = await apiClient.get(url);
|
|
this.setContent(response.data);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
},
|
|
setContent(responseData) {
|
|
this.forumTopic = responseData.title;
|
|
this.forumName = responseData.forum.name;
|
|
this.forumId = responseData.forum.id;
|
|
this.messages = responseData.messages;
|
|
},
|
|
async openProfile(id) {
|
|
this.$root.$refs.userProfileDialog.userId = id;
|
|
this.$root.$refs.userProfileDialog.open();
|
|
},
|
|
async saveNewMessage() {
|
|
try {
|
|
const url = `/api/forum/topic/${this.forumTopicId}/message`;
|
|
const response = await apiClient.post(url, {
|
|
content: this.newContent,
|
|
});
|
|
this.newContent = '';
|
|
this.setContent(response.data);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
},
|
|
openForum() {
|
|
this.$router.push(`/socialnetwork/forum/${this.forumId}`);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.messages {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.messages > li {
|
|
border: 1px solid #7BBE55;
|
|
margin-bottom: 0.25em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.messages > li > .footer {
|
|
color: #F9A22C;
|
|
font-size: 0.7em;
|
|
margin-top: 0.5em;
|
|
display: flex;
|
|
}
|
|
|
|
.messages>li>.footer>span:first-child {
|
|
flex: 1;
|
|
}
|
|
|
|
.messages > li > .footer > span:last-child {
|
|
text-align: right;
|
|
}
|
|
</style> |