Erster Aufbau Forum
This commit is contained in:
Torsten Schulz
167
frontend/src/dialogues/admin/ForumAdminView.vue
Normal file
167
frontend/src/dialogues/admin/ForumAdminView.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="forums-admin">
|
||||
<h2>{{ $t('admin.forum.title') }}</h2>
|
||||
|
||||
<div class="forum-list">
|
||||
<h3>{{ $t('admin.forum.currentForums') }}</h3>
|
||||
<ul>
|
||||
<li v-for="forum in forums" :key="forum.id" class="forum-item">
|
||||
<div class="forum-info">
|
||||
<strong>{{ forum.name }}</strong>
|
||||
<button @click="editForum(forum)" class="btn btn-sm">{{ $t('admin.forum.edit') }}</button>
|
||||
<button @click="confirmDelete(forum)" class="btn btn-sm btn-danger">{{ $t('admin.forum.delete')
|
||||
}}</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="create-forum">
|
||||
<h3 v-if="!inEdit">{{ $t('admin.forum.createForum') }}</h3>
|
||||
<h3 v-else>{{ $t('admin.forum.editForum') }}</h3>
|
||||
<button v-if="inEdit" @click="toggleToNewForum">{{ $t('admin.forum.toggleToNewForum') }}</button>
|
||||
<form @submit.prevent="submitNewForum">
|
||||
<div>
|
||||
<label for="name">{{ $t('admin.forum.forumName') }}</label>
|
||||
<input v-model="newForum.name" id="name" type="text" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="permissions">{{ $t('admin.forum.permissions.label') }}</label>
|
||||
<multiselect v-model="newForum.permissions" :options="permissionsOptions" :multiple="true"
|
||||
:close-on-select="false" :clear-on-select="false" :preserve-search="true"
|
||||
:placeholder="$t('admin.forum.selectPermissions')" label="label" track-by="value">
|
||||
<template v-slot:option="option">
|
||||
{{ $t(`admin.${option.option.label}`) }}
|
||||
</template>
|
||||
<template v-slot:tag="tag">
|
||||
<span>{{ $t(`admin.${tag.option.label}`) }}</span>
|
||||
</template>
|
||||
</multiselect>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">{{ $t('admin.forum.create') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
<choose-dialog ref="confirmDialog" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import apiClient from '@/utils/axios.js';
|
||||
import ChooseDialog from '@/dialogues/standard/ChooseDialog.vue';
|
||||
import Multiselect from 'vue-multiselect';
|
||||
|
||||
export default {
|
||||
name: 'ForumsAdminView',
|
||||
components: {
|
||||
ChooseDialog,
|
||||
Multiselect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
forums: [],
|
||||
newForum: {
|
||||
name: '',
|
||||
permissions: [],
|
||||
},
|
||||
permissionsOptions: [
|
||||
{ value: 'all', label: this.$t('forum.permissions.all') },
|
||||
{ value: 'admin', label: this.$t('forum.permissions.admin') },
|
||||
{ value: 'teammember', label: this.$t('forum.permissions.teammember') },
|
||||
{ value: 'user', label: this.$t('forum.permissions.user') },
|
||||
{ value: 'age', label: this.$t('forum.permissions.age') },
|
||||
],
|
||||
inEdit: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async loadForums() {
|
||||
try {
|
||||
const response = await apiClient.get('/api/forum');
|
||||
this.forums = response.data;
|
||||
} catch (error) {
|
||||
console.error('Error loading forums:', error);
|
||||
}
|
||||
},
|
||||
async submitNewForum() {
|
||||
try {
|
||||
await apiClient.post('/api/forum', {
|
||||
name: this.newForum.name,
|
||||
permissions: this.newForum.permissions,
|
||||
});
|
||||
this.newForum.name = '';
|
||||
this.newForum.permissions = [];
|
||||
this.loadForums();
|
||||
} catch (error) {
|
||||
console.error('Error creating forum:', error);
|
||||
}
|
||||
},
|
||||
editForum(forum) {
|
||||
this.inEdit = true;
|
||||
this.newForum.name = forum.name;
|
||||
this.newForum.permissions = forum.permissions;
|
||||
},
|
||||
toggleToNewForum() {
|
||||
this.inEdit = false;
|
||||
this.newForum.name = '';
|
||||
this.newForum.permissions = '';
|
||||
},
|
||||
async deleteForum(forum) {
|
||||
try {
|
||||
await apiClient.delete(`/api/forum/${forum.id}`);
|
||||
this.loadForums();
|
||||
} catch (error) {
|
||||
console.error('Error deleting forum:', error);
|
||||
}
|
||||
},
|
||||
async confirmDelete(forum) {
|
||||
const confirmed = await this.$refs.confirmDialog.open({
|
||||
title: this.$t('admin.forum.confirmDeleteTitle'),
|
||||
message: this.$t('admin.forum.confirmDeleteMessage', { forumName: forum.name }),
|
||||
});
|
||||
if (confirmed) {
|
||||
this.deleteForum(forum);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.loadForums();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.forums-admin {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.forum-list ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.forum-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.forum-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.forum-info > strong {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.create-forum form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.create-forum form div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<DialogWidget ref="dialog" :title="$t('socialnetwork.profile.pretitle')" :isTitleTranslated="isTitleTranslated"
|
||||
:show-close="true" :buttons="[{ text: 'Ok', action: 'close' }]" :modal="false" @close="closeDialog"
|
||||
height="75%">
|
||||
:show-close="true" :buttons="[{ text: 'Ok', action: 'close' }]" :modal="false" @close="closeDialog" height="75%"
|
||||
name="UserProfileDialog">
|
||||
<div class="dialog-body">
|
||||
<div>
|
||||
<ul class="tab-list">
|
||||
@@ -49,7 +49,8 @@
|
||||
<img :src="imagePreview" alt="Image Preview"
|
||||
style="max-width: 100px; max-height: 100px;" />
|
||||
</div>
|
||||
<editor v-model="newEntryContent" :init="tinymceInitOptions" :api-key="apiKey"></editor>
|
||||
<editor v-model="newEntryContent" :init="tinymceInitOptions" :api-key="apiKey"
|
||||
tinymce-script-src="/tinymce/tinymce.min.js"></editor>
|
||||
</div>
|
||||
<button @click="submitGuestbookEntry">{{ $t('socialnetwork.profile.guestbook.submit')
|
||||
}}</button>
|
||||
@@ -97,20 +98,14 @@ export default {
|
||||
FolderItem,
|
||||
editor: TinyMCEEditor,
|
||||
},
|
||||
props: {
|
||||
userId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isTitleTranslated: true,
|
||||
userProfile: {},
|
||||
activeTab: 'general',
|
||||
userId: '',
|
||||
folders: [],
|
||||
images: [],
|
||||
userId: 0,
|
||||
selectedFolder: null,
|
||||
newEntryContent: '',
|
||||
guestbookEntries: [],
|
||||
@@ -126,18 +121,22 @@ export default {
|
||||
],
|
||||
apiKey: import.meta.env.VITE_TINYMCE_API_KEY,
|
||||
tinymceInitOptions: {
|
||||
script_url: '/tinymce/tinymce.min.js',
|
||||
height: 300,
|
||||
menubar: false,
|
||||
menubar: true,
|
||||
plugins: [
|
||||
'advlist autolink lists link image charmap print preview anchor',
|
||||
'searchreplace visualblocks code fullscreen',
|
||||
'insertdatetime media table paste code help wordcount'
|
||||
'lists', 'link',
|
||||
'searchreplace', 'visualblocks', 'code',
|
||||
'insertdatetime', 'table'
|
||||
],
|
||||
toolbar:
|
||||
'undo redo cut copy paste | bold italic forecolor fontfamily fontsize | \
|
||||
'undo redo cut copy paste | bold italic forecolor backcolor fontfamily fontsize| \
|
||||
alignleft aligncenter alignright alignjustify | \
|
||||
bullist numlist outdent indent | removeformat | help'
|
||||
}
|
||||
bullist numlist outdent indent | removeformat | link visualblocks code',
|
||||
contextmenu: 'link image table',
|
||||
menubar: 'edit format table',
|
||||
promotion: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<DialogWidget ref="dialog" :title="title" :icon="icon" :show-close="true" :buttons="dialogButtons" :modal="true"
|
||||
:isTitleTranslated="false" width="30em" height="15em">
|
||||
:isTitleTranslated="false" width="30em" height="15em" name="ChooseDialog">
|
||||
<div class="dialog-body">
|
||||
<p>{{ message }}</p>
|
||||
</div>
|
||||
@@ -21,6 +21,7 @@ export default {
|
||||
message: "Sind Sie sicher?",
|
||||
icon: null,
|
||||
resolve: null,
|
||||
dialogButtons: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<DialogWidget ref="dialog" title="contact.title" :isTitleTranslated="true" icon="contact24.png" :show-close="true"
|
||||
:buttons="[{ text: 'Ok', action: 'save' }, { text: 'Cancel', action: 'close' }]" :modal="false" @save="save"
|
||||
:width="'50em'">
|
||||
:width="'50em'" name="ContactDialog">
|
||||
<table>
|
||||
<tr>
|
||||
<td>{{ $t("dialog.contact.email") }}</td>
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
:modal=false
|
||||
@close="closeDialog"
|
||||
@ok="handleOk"
|
||||
name="DataPrivacyDialog"
|
||||
>
|
||||
<div v-html="dataPrivacyContent"></div>
|
||||
</DialogWidget>
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
:modal=false
|
||||
@close="closeDialog"
|
||||
@ok="handleOk"
|
||||
name="ImprintDialog"
|
||||
>
|
||||
<div v-html="imprintContent"></div>
|
||||
</DialogWidget>
|
||||
|
||||
Reference in New Issue
Block a user