Erster Aufbau Forum

frontend/src/views/social/DiaryView.vue

@@ -0,0 +1,184 @@
+<template>
+    <h2>{{ $t('socialnetwork.diary.title') }}</h2>
+
+    <div class="new-entry-section">
+        <h3>{{ isEditing ? $t('socialnetwork.diary.editEntry') : $t('socialnetwork.diary.newEntry') }}</h3>
+        <textarea v-model="newEntryText" placeholder="Write your diary entry..."></textarea>
+        <div class="form-actions">
+            <button @click="saveEntry">{{ isEditing ? $t('socialnetwork.diary.update') : $t('socialnetwork.diary.save')
+                }}</button>
+            <button v-if="isEditing" @click="cancelEdit">{{ $t('socialnetwork.diary.cancel') }}</button>
+        </div>
+    </div>
+
+    <div v-if="diaryEntries.length === 0">{{ $t('socialnetwork.diary.noEntries') }}</div>
+    <div v-else class="diary-entries">
+        <div v-for="entry in diaryEntries" :key="entry.id" class="diary-entry">
+            <p v-html="entry.text"></p>
+            <div class="entry-info">
+                <span class="entry-timestamp">{{ new Date(entry.createdAt).toLocaleString() }}</span>
+                <span class="entry-actions">
+                    <span @click="editEntry(entry)" class="button" :title="$t('socialnetwork.diary.edit')">✎</span>
+                    <span @click="deleteEntry(entry.id)" class="button" :title="$t('socialnetwork.diary.delete')">✖</span>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <div class=" pagination">
+        <button @click="loadDiaryEntries(currentPage - 1)" v-if="currentPage !== 1">{{
+            $t('socialnetwork.diary.prevPage') }}</button>
+        <span>{{ $t('socialnetwork.diary.page') }} {{ currentPage }} / {{ totalPages }}</span>
+        <button @click="loadDiaryEntries(currentPage + 1)" v-if="currentPage < totalPages">{{
+            $t('socialnetwork.diary.nextPage') }}</button>
+    </div>
+    <ChooseDialog ref="chooseDialog" />
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import apiClient from '@/utils/axios.js';
+import ChooseDialog from "@/dialogues/standard/ChooseDialog.vue";
+
+export default {
+    name: 'DiaryView',
+    components: {
+        ChooseDialog
+    },
+    data() {
+        return {
+            diaryEntries: [],
+            newEntryText: '', 
+            currentPage: 1,
+            totalPages: 1,
+            isEditing: false, 
+            editingEntryId: null,
+        };
+    },
+    computed: {
+        ...mapGetters(['user']),
+    },
+    methods: {
+        async loadDiaryEntries(page) {
+            try {
+                console.log(page);
+                const response = await apiClient.get(`/api/socialnetwork/diary/${page}`);
+                this.diaryEntries = response.data.entries;
+                this.currentPage = page;
+                this.totalPages = response.data.totalPages;
+            } catch (error) {
+                console.error('Error loading diary entries:', error);
+            }
+        },
+
+        async saveEntry() {
+            if (!this.newEntryText) return;
+
+            try {
+                if (this.isEditing) {
+                    await apiClient.put(`/api/socialnetwork/diary/${this.editingEntryId}`, {
+                        text: this.newEntryText,
+                    });
+                    this.isEditing = false;
+                    this.editingEntryId = null;
+                } else {
+                    await apiClient.post(`/api/socialnetwork/diary`, {
+                        text: this.newEntryText,
+                        userId: this.user.id,
+                    });
+                }
+                this.newEntryText = '';
+                this.loadDiaryEntries(this.currentPage);
+            } catch (error) {
+                console.error('Error saving entry:', error);
+            }
+        },
+
+        editEntry(entry) {
+            this.isEditing = true;
+            this.newEntryText = entry.text;
+            this.editingEntryId = entry.id;
+        },
+
+        cancelEdit() {
+            this.isEditing = false;
+            this.newEntryText = '';
+            this.editingEntryId = null;
+        },
+
+        async confirmDeleteEntry(entryId) {
+            const confirmed = await this.$refs.chooseDialog.open({
+                title: this.$t('socialnetwork.diary.confirmDeleteTitle'),
+                message: this.$t('socialnetwork.diary.confirmDeleteMessage')
+            });
+
+            if (confirmed) {
+                this.deleteEntry(entryId);
+            }
+        },
+
+        async deleteEntry(entryId) {
+            try {
+                await apiClient.delete(`/api/socialnetwork/diary/${entryId}`);
+                this.loadDiaryEntries(this.currentPage);
+            } catch (error) {
+                console.error('Error deleting entry:', error);
+            }
+        }
+    },
+    mounted() {
+        this.loadDiaryEntries(1);
+    },
+};
+</script>
+
+<style scoped>
+.new-entry-section {
+    margin-bottom: 20px;
+}
+
+textarea {
+    width: 100%;
+    height: 100px;
+    margin-bottom: 10px;
+}
+
+.form-actions button {
+    margin-right: 10px;
+}
+
+.diary-entry {
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 1em;
+    padding-bottom: 1em;
+}
+
+.entry-info {
+    color: gray;
+    display: flex;
+    flex-direction: row;
+}
+
+.entry-timestamp {
+        font-size: 0.8em;
+}
+.entry-actions {
+    flex: 1;
+    text-align: right;
+}
+.entry-actions button {
+    margin-right: 10px;
+}
+
+.pagination {
+    margin-top: 1em;
+    background-color: #7BBE55;
+    color: #fff;
+    padding: 0.5em 0;
+}
+
+.diary-entries {
+    width: 400px;
+}
+
+</style>

frontend/src/views/social/ForumView.vue

@@ -0,0 +1,185 @@
+<template>
+    <h2>{{ $t('socialnetwork.forum.title') }} {{ forumName }}</h2>
+    <div class="creationtoggler">
+        <button @click="createNewTopic">{{ $t(!inCreation ? 'socialnetwork.forum.showNewTopic' :
+            'socialnetwork.forum.hideNewTopic') }}</button>
+    </div>
+    <div v-if="inCreation">
+        <div>
+            <label class="newtitle">
+                {{ $t('socialnetwork.forum.topic') }}
+                <input type="text" v-model="newTitle" />
+            </label>
+        </div>
+        <editor v-model="newEntryContent" :init="tinymceInitOptions" :api-key="apiKey"
+            tinymce-script-src="/tinymce/tinymce.min.js"></editor>
+        <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>
+    </div>
+    <div v-else>{{ $t('socialnetwork.forum.noTitles') }}</div>
+</template>
+
+<script>
+import apiClient from '../../utils/axios';
+import TinyMCEEditor from '@tinymce/tinymce-vue';
+
+export default {
+    name: 'ForumView',
+    components: {
+        editor: TinyMCEEditor,
+    },
+    computed: {
+        totalPages() {
+            return Math.ceil(this.numberOfItems / 25);
+        }
+    },
+    data() {
+        return {
+            forumName: 'test',
+            forumId: 0,
+            page: 1,
+            numberOfItems: 0,
+            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,
+            },
+        }
+    },
+    async mounted() {
+        this.forumId = this.$route.params.id;
+        await this.loadForum();
+    },
+    methods: {
+        async loadForum() {
+            const response = await apiClient.get(`/api/forum/${this.forumId}/${this.page}`);
+            this.setData(response.data);
+        },
+        createNewTopic() {
+            this.inCreation = !this.inCreation;
+        },
+        async saveNewTopic() {
+            const response = await apiClient.post('/api/forum/topic', {
+                forumId: this.forumId,
+                title: this.newTitle,
+                content: this.newEntryContent
+            });
+            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;
+        },
+        goToPage(page) {
+            if (page >= 1 && page <= this.totalPages) {
+                this.page = page;
+                this.loadForum();
+            }
+        },
+        openProfile(id) {
+            this.$root.$refs.userProfileDialog.userId = id;
+            this.$root.$refs.userProfileDialog.open();
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.creationtoggler {
+    margin-bottom: 1em;
+}
+
+.newtitle {
+    display: flex;
+    gap: 1em;
+    vertical-align: middle;
+}
+
+.newtitle input {
+    flex: 1;
+}
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    gap: 0.5em;
+    margin: 1em 0;
+}
+
+.pagination button {
+    padding: 0.5em 1em;
+}
+
+.pagination span {
+    padding: 0.5em;
+}
+</style>

frontend/src/views/social/GuestbookView.vue

@@ -49,7 +49,6 @@ export default {
             this.$router.push({ name: 'profile', params: { username } });
         },
         async loadGuestbookEntries(page) {
-            console.log(page);
             try {
                 const response = await apiClient.get(`/api/socialnetwork/guestbook/entries/${this.user.username}/${page}`);
                 this.guestbookEntries = response.data.entries;
@@ -63,7 +62,6 @@ export default {
             } catch (error) {
                 console.error('Fehler beim Laden der Gästebucheinträge:', error);
             }
-            console.log('page changed', this.currentPage);
         },
         async fetchGuestbookImage(guestbookOwnerName, entry) {
             try {
@@ -77,7 +75,6 @@ export default {
         },
     },
     mounted() {
-        console.log('get it');
         this.loadGuestbookEntries(1);
     },
 }