Erster Aufbau Forum

2024-10-15 16:28:42 +02:00
parent c31be3f879
commit 663564aa96
163 changed files with 9449 additions and 116 deletions
--- a/frontend/src/views/social/DiaryView.vue
+++ b/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>