Finished guestbook and gallery. started diary

frontend/src/views/social/GuestbookView.vue

@@ -0,0 +1,93 @@
+<template>
+    <h2>{{ $t('socialnetwork.guestbook.title') }}</h2>
+    <div>
+        <div v-if="guestbookEntries.length === 0">{{ $t('socialnetwork.profile.guestbook.noEntries') }}
+        </div>
+        <div v-else class="guestbook-entries">
+            <div v-for="entry in guestbookEntries" :key="entry.id" class="guestbook-entry">
+                <img v-if="entry.image" :src="entry.image.url" alt="Entry Image"
+                    style="max-width: 400px; max-height: 400px;" />
+                <p v-html="entry.contentHtml"></p>
+                <div class="entry-info">
+                    <span class="entry-timestamp">{{ new Date(entry.createdAt).toLocaleString() }}</span>
+                    <span class="entry-user">
+                        <span @click="openProfile(entry.senderUsername)">{{ entry.sender }}</span>
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="pagination">
+            <button @click="loadGuestbookEntries(currentPage - 1)" v-if="currentPage !== 1">{{
+                $t('socialnetwork.guestbook.prevPage') }}</button>
+            <span>{{ $t('socialnetwork.guestbook.page') }} {{ currentPage }} / {{ totalPages }}</span>
+            <button @click="loadGuestbookEntries(currentPage + 1)" v-if="currentPage < totalPages">{{
+                $t('socialnetwork.guestbook.nextPage')
+            }}</button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import apiClient from '@/utils/axios.js';
+
+export default {
+    name: 'GuestbookView',
+    data() {
+        return {
+            guestbookEntries: [],
+            currentPage: 1,
+            totalPages: 1,
+        };
+    },
+    computed: {
+        ...mapGetters(['user']),
+    },
+    methods: {
+        ...mapActions('socialnetwork', ['fetchUserProfile']),
+        openProfile(username) {
+            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;
+                this.currentPage = page;
+                this.totalPages = response.data.totalPages;
+                this.guestbookEntries.forEach((entry) => {
+                    if (entry.withImage) {
+                        this.fetchGuestbookImage(this.user.username, entry);
+                    }
+                });
+            } catch (error) {
+                console.error('Fehler beim Laden der Gästebucheinträge:', error);
+            }
+            console.log('page changed', this.currentPage);
+        },
+        async fetchGuestbookImage(guestbookOwnerName, entry) {
+            try {
+                const response = await apiClient.get(`/api/socialnetwork/guestbook/image/${this.user.username}/${entry.id}`, {
+                    responseType: 'blob',
+                });
+                entry.image = { url: URL.createObjectURL(response.data) };
+            } catch (error) {
+                console.error('Error fetching image:', error);
+            }
+        },
+    },
+    mounted() {
+        console.log('get it');
+        this.loadGuestbookEntries(1);
+    },
+}
+</script>
+
+<style lang="css" scoped>
+.pagination {
+    margin-top: 1em;
+    background-color: #7BBE55;
+    color: #fff;
+    padding: 0.5em 0;
+}
+</style>