yourpart3/frontend/src/views/social/DiaryView.vue

<template>
    <div class="diary-view">
        <section class="diary-hero surface-card">
            <div>
                <span class="diary-kicker">Persönliche Einträge</span>
                <h2>{{ $t('socialnetwork.diary.title') }}</h2>
                <p>Gedanken, Notizen und kurze Updates in einer ruhigen, persönlichen Ansicht.</p>
            </div>
        </section>

        <section class="new-entry-section surface-card">
            <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>
        </section>

        <div v-if="diaryEntries.length === 0" class="diary-empty surface-card">{{ $t('socialnetwork.diary.noEntries') }}</div>
        <section v-else class="diary-entries">
            <article v-for="entry in diaryEntries" :key="entry.id" class="diary-entry surface-card">
                <p v-html="sanitizedText(entry)"></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>
            </article>
        </section>

        <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" />
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import apiClient from '@/utils/axios.js';
import ChooseDialog from "@/dialogues/standard/ChooseDialog.vue";
import DOMPurify from 'dompurify';

export default {
    name: 'DiaryView',
    components: {
        ChooseDialog
    },
    data() {
        return {
            diaryEntries: [],
            newEntryText: '', 
            currentPage: 1,
            totalPages: 1,
            isEditing: false, 
            editingEntryId: null,
        };
    },
    computed: {
        ...mapGetters(['user']),
        },
    methods: {
        sanitizedText(entry) {
            return DOMPurify.sanitize(entry.text);
        },
        async loadDiaryEntries(page) {
            try {
                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>
.diary-view {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 24px;
}

.diary-hero,
.new-entry-section {
    margin-bottom: 16px;
    padding: 22px;
}

.diary-kicker {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(248, 162, 43, 0.14);
    color: #8a5411;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.diary-hero p {
    margin: 0;
    color: var(--color-text-secondary);
}

textarea {
    height: 140px;
    margin-bottom: 10px;
}

.form-actions button {
    margin-right: 10px;
}

.diary-entry {
    margin-bottom: 1em;
    padding: 18px 20px;
}

.entry-info {
    color: var(--color-text-muted);
    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;
    color: var(--color-text-secondary);
    padding: 0.5em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.diary-entries {
    display: grid;
    gap: 12px;
}

.diary-empty {
    padding: 22px;
    text-align: center;
    color: var(--color-text-secondary);
}

</style>