90 lines
3.3 KiB
Vue
90 lines
3.3 KiB
Vue
<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) {
|
|
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);
|
|
}
|
|
},
|
|
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() {
|
|
this.loadGuestbookEntries(1);
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.pagination {
|
|
margin-top: 1em;
|
|
background-color: #7BBE55;
|
|
color: #fff;
|
|
padding: 0.5em 0;
|
|
}
|
|
</style> |