Finished guestbook and gallery. started diary

frontend/src/dialogues/auth/RegisterDialog.vue

@@ -18,7 +18,6 @@
             <SelectDropdownWidget labelTr="settings.personal.label.language" :v-model="language"
                 tooltipTr="settings.personal.tooltip.language" :list="languages" :value="language" />
         </div>
-        <ErrorDialog ref="errorDialog" />
     </DialogWidget>
 </template>
 
@@ -26,14 +25,12 @@
 import { mapActions } from 'vuex';
 import apiClient from '@/utils/axios.js';
 import DialogWidget from '@/components/DialogWidget.vue';
-import ErrorDialog from '@/dialogues/standard/ErrorDialog.vue';
 import SelectDropdownWidget from '@/components/form/SelectDropdownWidget.vue';
 
 export default {
     name: 'RegisterDialog',
     components: {
         DialogWidget,
-        ErrorDialog,
         SelectDropdownWidget,
     },
     data() {
@@ -85,7 +82,7 @@ export default {
         },
         async register() {
             if (!this.canRegister) {
-                this.$refs.errorDialog.open('tr:register.passwordMismatch');
+                this.$root.$refs.errrorDialog.open('tr:register.passwordMismatch');
                 return;
             }
 
@@ -102,14 +99,14 @@ export default {
                     this.$refs.dialog.close();
                     this.$router.push('/activate');
                 } else {
-                    this.$refs.errorDialog.open("tr:register.failure");
+                    this.$root.$refs.errrorDialog.open("tr:register.failure");
                 }
             } catch (error) {
                 if (error.response && error.response.status === 409) {
-                    this.$refs.errorDialog.open('tr:register.' + error.response.data.error);
+                    this.$root.$refs.errrorDialog.open('tr:register.' + error.response.data.error);
                 } else {
                     console.error('Error registering user:', error);
-                    this.$refs.errorDialog.open('tr:register.' + error.response.data.error);
+                    this.$root.$refs.errrorDialog.open('tr:register.' + error.response.data.error);
                 }
             }
         },

frontend/src/dialogues/socialnetwork/CreateFolderDialog.vue

@@ -5,36 +5,38 @@
         <div>
             <div class="form-group">
                 <label>{{ $t("socialnetwork.gallery.create_folder_dialog.parent_folder") }}</label>
+                <!-- Hier wird der übergeordnete Ordner angezeigt, aber nicht bearbeitbar -->
                 <input type="text" :value="parentFolder.name" disabled />
             </div>
             <div class="form-group">
                 <label for="folderTitle">{{ $t("socialnetwork.gallery.create_folder_dialog.folder_title") }}</label>
+                <!-- Setze den Titel des Ordners für Bearbeiten -->
                 <input type="text" v-model="folderTitle"
                     :placeholder="$t('socialnetwork.gallery.create_folder_dialog.folder_title')" required />
             </div>
             <div class="form-group">
-                <label for="visibility">{{ $t("socialnetwork.gallery.create_folder_dialog.visibility") }}
-                    <multiselect v-model="selectedVisibility" :options="visibilityOptions" :multiple="true"
-                        label="description" :track-by="'id'" :close-on-select="false"
-                        :placeholder="$t('socialnetwork.gallery.create_folder_dialog.select_visibility')">
-                        <template #option="{ option }">
-                            <span v-if="option && option.description">{{
-                                $t(`socialnetwork.gallery.visibility.${option.description}`) }}
-                            </span>
-                        </template>
-                        <template #tag="{ option, remove }">
-                            <span v-if="option && option.description" class="multiselect__tag">
-                                {{ $t(`socialnetwork.gallery.visibility.${option.description}`) }}
-                                <span @click="remove(option)">×</span>
-                            </span>
-                        </template>
-                    </multiselect>
-                </label>
+                <label for="visibility">{{ $t("socialnetwork.gallery.create_folder_dialog.visibility") }}</label>
+                <multiselect v-model="selectedVisibility" :options="visibilityOptions" :multiple="true"
+                    label="description" :track-by="'id'" :close-on-select="false"
+                    :placeholder="$t('socialnetwork.gallery.create_folder_dialog.select_visibility')">
+                    <template #option="{ option }">
+                        <span v-if="option && option.description">{{
+                            $t(`socialnetwork.gallery.visibility.${option.description}`) }}
+                        </span>
+                    </template>
+                    <template #tag="{ option, remove }">
+                        <span v-if="option && option.description" class="multiselect__tag">
+                            {{ $t(`socialnetwork.gallery.visibility.${option.description}`) }}
+                            <span @click="remove(option)">×</span>
+                        </span>
+                    </template>
+                </multiselect>
             </div>
         </div>
     </DialogWidget>
 </template>
 
+
 <script>
 import Multiselect from 'vue-multiselect';
 import DialogWidget from '@/components/DialogWidget.vue';
@@ -47,20 +49,13 @@ export default {
         DialogWidget,
         Multiselect
     },
-    props: {
-        parentFolder: {
-            type: [Object, null],
-            required: true,
-            default() {
-                return { id: null, name: '' };
-            }
-        }
-    },
     data() {
         return {
             folderTitle: '',
             visibilityOptions: [],
             selectedVisibility: [],
+            parentFolder: {id: null, name: ''},
+            folderId: 0
         };
     },
     computed: {
@@ -73,44 +68,56 @@ export default {
         await this.loadVisibilityOptions();
     },
     methods: {
-        async open() {
-            if (!this.parentFolder || !this.parentFolder.id) {
-                console.error('No parent folder selected');
-                return;
+        open(folder = null) {
+            if (folder) {
+                this.folderTitle = folder.name;
+                this.selectedVisibility = this.visibilityOptions.filter(option =>
+                    folder.visibilityTypeIds.includes(option.id)
+                );
+            } else {
+                this.folderTitle = '';
+                this.selectedVisibility = [];
             }
             this.$refs.dialog.open();
         },
-        closeDialog() {
-            this.$refs.dialog.close();
-        },
         async loadVisibilityOptions() {
             try {
                 const response = await apiClient.get('/api/socialnetwork/imagevisibilities');
                 this.visibilityOptions = response.data;
+                if (this.selectedVisibility.length) {
+                    this.selectedVisibility = this.visibilityOptions.filter(option =>
+                        this.selectedVisibility.map(v => v.id).includes(option.id)
+                    );
+                }
             } catch (error) {
                 console.error('Error loading visibility options:', error);
             }
         },
         async createFolder() {
-            if (!this.folderTitle || !this.selectedVisibility) {
+            if (!this.folderTitle || !this.selectedVisibility.length) {
                 alert(this.$t('socialnetwork.gallery.errors.missing_fields'));
                 return;
             }
-
+            const payload = {
+                name: this.folderTitle,
+                parentId: this.parentFolder.id,
+                visibilities: this.selectedVisibility.map(item => item.id),
+            };
             try {
-                const payload = {
-                    name: this.folderTitle,
-                    parentId: this.parentFolder.id,
-                    visibilities: this.selectedVisibility.map(item => item.id),
-                };
-
-                await apiClient.post('/api/socialnetwork/folders', payload);
+                if (this.parentFolder.id) {
+                    await apiClient.put(`/api/socialnetwork/folders/${this.parentFolder.id}`, payload);
+                } else {
+                    await apiClient.post(`/api/socialnetwork/folders/${this.folderId}`, payload);
+                }
                 this.$emit('created', payload);
                 this.closeDialog();
             } catch (error) {
-                console.error('Error creating folder:', error);
+                console.error('Fehler beim Erstellen/Bearbeiten des Ordners:', error);
             }
-        }
+        },
+        closeDialog() {
+            this.$refs.dialog.close();
+        },
     }
 };
 

frontend/src/dialogues/socialnetwork/EditImageDialog.vue

@@ -1,7 +1,7 @@
 <template>
     <DialogWidget ref="dialog" title="socialnetwork.gallery.edit_image_dialog.title" icon="image16.png"
         :show-close="true" :buttons="buttons" :modal="true" :isTitleTranslated="true" @close="closeDialog"
-        name="ImageDialog">
+        name="EditImageDialog">
         <div>
             <div class="image-container">
                 <img :src="image.url" alt="Image" :style="{ maxWidth: '600px', maxHeight: '600px' }" />
@@ -37,21 +37,17 @@ import Multiselect from 'vue-multiselect';
 import DialogWidget from '@/components/DialogWidget.vue';
 
 export default {
+    name: "EditImageDialog",
     components: {
         DialogWidget,
         Multiselect,
     },
-    props: {
-        visibilityOptions: {
-            type: Array,
-            required: true,
-        },
-    },
     data() {
         return {
             image: null,
             imageTitle: '',
             selectedVisibilities: [],
+            visibilityOptions: [],
         };
     },
     computed: {

frontend/src/dialogues/socialnetwork/ShowImageDialog.vue

@@ -0,0 +1,65 @@
+<template>
+    <DialogWidget ref="dialog" title="socialnetwork.gallery.show_image_dialog.title" icon="image16.png"
+        :show-close="true" :buttons="buttons" :modal="true" :isTitleTranslated="true" @close="closeDialog"
+        name="ImageDialog">
+        <div>
+            <div class="image-container">
+                <img :src="image.url" alt="Image" :style="{ maxWidth: '600px', maxHeight: '600px' }" />
+            </div>
+            <div class="form-group">
+                <label for="imageTitle">{{ $t('socialnetwork.gallery.imagedialog.image_title') }} <span type="text">{{
+                        imageTitle }}</span></label>
+            </div>
+        </div>
+    </DialogWidget>
+</template>
+
+<script>
+import DialogWidget from '@/components/DialogWidget.vue';
+
+export default {
+    name: "ShowImageDialog",
+    components: {
+        DialogWidget,
+    },
+    data() {
+        return {
+            image: null,
+            imageTitle: '',
+        };
+    },
+    computed: {
+        buttons() {
+            return [
+                { text: this.$t('socialnetwork.gallery.imagedialog.close'), action: this.closeDialog }
+            ];
+        },
+    },
+    methods: {
+        open(image) {
+            this.image = image;
+            this.imageTitle = image.title;
+            this.$refs.dialog.open();
+        },
+        closeDialog() {
+            this.$refs.dialog.close();
+        },
+    },
+};
+</script>
+
+<style scoped>
+.form-group {
+    margin-bottom: 15px;
+}
+
+.image-container {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.multiselect {
+    display: inline-block;
+    width: auto;
+}
+</style>

frontend/src/dialogues/socialnetwork/UserProfileDialog.vue

@@ -1,7 +1,8 @@
 <template>
     <DialogWidget ref="dialog" :title="$t('socialnetwork.profile.pretitle')" :isTitleTranslated="isTitleTranslated"
-        :show-close="true" :buttons="[{ text: 'Ok', action: 'close' }]" :modal="false" @close="closeDialog">
-        <div  class="dialog-body">
+        :show-close="true" :buttons="[{ text: 'Ok', action: 'close' }]" :modal="false" @close="closeDialog"
+        height="75%">
+        <div class="dialog-body">
             <div>
                 <ul class="tab-list">
                     <li v-for="tab in tabs" :key="tab.name" :class="{ active: activeTab === tab.name }"
@@ -9,7 +10,6 @@
                         {{ tab.label }}
                     </li>
                 </ul>
-
                 <div class="tab-content" v-if="activeTab === 'general'">
                     <table>
                         <tr v-for="(value, key) in userProfile.params" :key="key">
@@ -18,6 +18,67 @@
                         </tr>
                     </table>
                 </div>
+                <div class="tab-content images-tab" v-if="activeTab === 'images'">
+                    <div v-if="folders.length === 0">{{ $t('socialnetwork.profile.noFolders') }}</div>
+                    <ul v-else class="tree">
+                        <folder-item v-for="folder in [folders]" :key="folder.id" :folder="folder"
+                            :selected-folder="selectedFolder" @select-folder="selectFolder" :isLastItem="true"
+                            :depth="0" :parentsWithChildren="[false]" :noActionItems="true">
+                        </folder-item>
+                    </ul>
+                    <ul v-if="images.length > 0" class="image-list">
+                        <li v-for="image in images" :key="image.id" @click="openImageDialog(image)">
+                            <img :src="image.url || image.placeholder" alt="Loading..." />
+                            <p>{{ image.title }}</p>
+                        </li>
+                    </ul>
+                </div>
+                <div class="tab-content" v-if="activeTab === 'guestbook'">
+                    <div class="guestbook-input-section">
+                        <button @click="toggleInputSection">
+                            {{ showInputSection ? $t('socialnetwork.profile.guestbook.hideInput') :
+                            $t('socialnetwork.profile.guestbook.showInput') }}
+                        </button>
+
+                        <div v-if="showInputSection">
+                            <div class="form-group">
+                                <label for="guestbookImage">{{ $t('socialnetwork.profile.guestbook.imageUpload')
+                                    }}</label>
+                                <input type="file" @change="onFileChange" accept="image/*" />
+                                <div v-if="imagePreview" class="image-preview">
+                                    <img :src="imagePreview" alt="Image Preview"
+                                        style="max-width: 100px; max-height: 100px;" />
+                                </div>
+                                <editor v-model="newEntryContent" :init="tinymceInitOptions" :api-key="apiKey"></editor>
+                            </div>
+                            <button @click="submitGuestbookEntry">{{ $t('socialnetwork.profile.guestbook.submit')
+                                }}</button>
+                        </div>
+                    </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 class="pagination">
+                            <button @click="loadGuestbookEntries(currentPage - 1)" :disabled="currentPage === 1">{{
+                                $t('socialnetwork.guestbook.prevPage') }}</button>
+                            <span>{{ $t('socialnetwork.guestbook.page') }} {{ currentPage }} / {{ totalPages }}</span>
+                            <button @click="loadGuestbookEntries(currentPage + 1)"
+                                :disabled="currentPage === totalPages">{{ $t('socialnetwork.guestbook.nextPage')
+                                }}</button>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </DialogWidget>
@@ -26,11 +87,15 @@
 <script>
 import DialogWidget from '@/components/DialogWidget.vue';
 import apiClient from '@/utils/axios.js';
+import FolderItem from '../../components/FolderItem.vue';
+import TinyMCEEditor from '@tinymce/tinymce-vue';
 
 export default {
     name: 'UserProfileDialog',
     components: {
-        DialogWidget
+        DialogWidget,
+        FolderItem,
+        editor: TinyMCEEditor,
     },
     props: {
         userId: {
@@ -44,11 +109,35 @@ export default {
             userProfile: {},
             activeTab: 'general',
             userId: '',
+            folders: [],
+            images: [],
+            selectedFolder: null,
+            newEntryContent: '',
+            guestbookEntries: [],
+            showInputSection: false,
+            imagePreview: null,
+            selectedImage: null,
+            currentPage: 1,
+            totalPages: 1,
             tabs: [
                 { name: 'general', label: this.$t('socialnetwork.profile.tab.general') },
                 { name: 'images', label: this.$t('socialnetwork.profile.tab.images') },
                 { name: 'guestbook', label: this.$t('socialnetwork.profile.tab.guestbook') }
             ],
+            apiKey: import.meta.env.VITE_TINYMCE_API_KEY,
+            tinymceInitOptions: {
+                height: 300,
+                menubar: false,
+                plugins: [
+                    'advlist autolink lists link image charmap print preview anchor',
+                    'searchreplace visualblocks code fullscreen',
+                    'insertdatetime media table paste code help wordcount'
+                ],
+                toolbar:
+                    'undo redo cut copy paste | bold italic forecolor fontfamily fontsize | \
+                    alignleft aligncenter alignright alignjustify | \
+                    bullist numlist outdent indent | removeformat | help'
+            }
         };
     },
     methods: {
@@ -58,26 +147,43 @@ export default {
         },
         async loadUserProfile() {
             try {
-                const response = await apiClient.get(`/api/socialnetwork/profile/${this.userId}`);
+                const response = await apiClient.get(`/api/socialnetwork/profile/main/${this.userId}`);
                 this.userProfile = response.data;
                 const newTitle = this.$t('socialnetwork.profile.title').replace('<username>', this.userProfile.username);
                 this.$refs.dialog.updateTitle(newTitle, false);
+                if (this.activeTab === 'images') {
+                    await this.loadUserFolders();
+                }
             } catch (error) {
                 this.$refs.dialog.updateTitle('socialnetwork.profile.error_title', true);
                 console.error('Fehler beim Laden des Benutzerprofils:', error);
             }
         },
+        async loadUserFolders() {
+            try {
+                const response = await apiClient.get(`/api/socialnetwork/profile/images/folders/${this.userProfile.username}`);
+                this.folders = response.data || [];
+                this.selectFolder(this.folders);
+            } catch (error) {
+                console.error('Fehler beim Laden der Ordner:', error);
+            }
+        },
         closeDialog() {
             this.$refs.dialog.close();
         },
         selectTab(tabName) {
             this.activeTab = tabName;
+            if (tabName === 'images') {
+                this.loadUserFolders();
+            } else if (tabName === 'guestbook') {
+                this.loadGuestbookEntries(1);
+            }
         },
         generateValue(key, value) {
             if (Array.isArray(value.value)) {
                 const strings = [];
                 for (const val of value.value) {
-                    strings.push(this.generateValue(key, {type: value.type, value: val}));
+                    strings.push(this.generateValue(key, { type: value.type, value: val }));
                 }
                 return strings.join(', ');
             }
@@ -101,7 +207,109 @@ export default {
                 default:
                     return value.value;
             }
-        }
+        },
+        async selectFolder(folder) {
+            this.selectedFolder = folder;
+            await this.loadImages(folder.id);
+        },
+        async loadImages(folderId) {
+            try {
+                const response = await apiClient.get(`/api/socialnetwork/folder/${folderId}`);
+                this.images = response.data.map((image) => ({
+                    ...image,
+                    placeholder:
+                        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3C/svg%3E',
+                    url: null,
+                }));
+                await this.fetchImages();
+            } catch (error) {
+                console.error('Error loading images:', error);
+            }
+        },
+        async fetchImages() {
+            this.images.forEach((image) => {
+                this.fetchImage(image);
+            });
+        },
+        async fetchImage(image) {
+            const userId = localStorage.getItem('userid');
+            try {
+                const response = await apiClient.get(`/api/socialnetwork/image/${image.hash}`, {
+                    headers: {
+                        userid: userId,
+                    },
+                    responseType: 'blob',
+                });
+                image.url = URL.createObjectURL(response.data);
+            } catch (error) {
+                console.error('Error fetching image:', error);
+            }
+        },
+        openImageDialog(image) {
+            this.$root.$refs.showImageDialog.open(image);
+        },
+        toggleInputSection() {
+            this.showInputSection = !this.showInputSection;
+        },
+        onFileChange(event) {
+            const file = event.target.files[0];
+            if (file) {
+                this.selectedImage = file;
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    this.imagePreview = e.target.result;
+                };
+                reader.readAsDataURL(file);
+            }
+        },
+        async submitGuestbookEntry() {
+            if (!this.newEntryContent) return alert(this.$t('socialnetwork.guestbook.emptyContent'));
+            const formData = new FormData();
+            formData.append('htmlContent', this.newEntryContent);
+            formData.append('recipientName', this.userProfile.username);
+            if (this.selectedImage) {
+                formData.append('image', this.selectedImage);
+            }
+            try {
+                await apiClient.post('/api/socialnetwork/guestbook/entries', formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data'
+                    }
+                });
+                this.newEntryContent = '';
+                this.selectedImage = null;
+                this.imagePreview = null;
+                await this.loadGuestbookEntries(1);
+            } catch (error) {
+                console.error('Fehler beim Erstellen des Gästebucheintrags:', error);
+            }
+        },
+        async loadGuestbookEntries(page) {
+            try {
+                const response = await apiClient.get(`/api/socialnetwork/guestbook/entries/${this.userProfile.username}/${page}`);
+                this.guestbookEntries = response.data.entries;
+                this.currentPage = response.data.currentPage;
+                this.totalPages = response.data.totalPages;
+                this.guestbookEntries.forEach((entry) => {
+                    if (entry.withImage) {
+                        this.fetchGuestbookImage(this.userProfile.username, entry);
+                    }
+                });
+            } catch (error) {
+                console.error('Fehler beim Laden der Gästebucheinträge:', error);
+            }
+        },
+        async fetchGuestbookImage(guestbookOwnerName, entry) {
+            try {
+                console.log(entry, guestbookOwnerName);
+                const response = await apiClient.get(`/api/socialnetwork/guestbook/image/${guestbookOwnerName}/${entry.id}`, {
+                    responseType: 'blob',
+                });
+                entry.image = { url: URL.createObjectURL(response.data) };
+            } catch (error) {
+                console.error('Error fetching image:', error);
+            }
+        },
     }
 };
 </script>
@@ -138,12 +346,90 @@ export default {
 }
 
 .dialog-body,
-.dialog-body > div {
+.dialog-body>div {
     height: 100%;
 }
 
-.dialog-body > div {
+.dialog-body>div {
     display: flex;
     flex-direction: column;
 }
+
+.tree {
+    padding: 0;
+}
+
+.images-tab {
+    display: flex;
+}
+
+.image-list {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    list-style: none;
+}
+
+.image-list li {
+    display: inline-block;
+    padding: 2px;
+    border: 1px solid #F9A22C;
+    margin: 0 4px 4px 0;
+}
+
+.image-list li img {
+    max-width: 200px;
+    max-height: 200px;
+    object-fit: contain;
+    cursor: pointer;
+}
+
+.image-list > li > p {
+    text-align: center;
+}
+
+.folder-name-text {
+    cursor: pointer;
+}
+
+.guestbook-input-section {
+    margin-bottom: 20px;
+}
+
+.form-group {
+    margin: 10px 0;
+}
+
+.image-preview img {
+    max-width: 100px;
+    max-height: 100px;
+}
+
+.guestbook-entries {
+    display: flex;
+    flex-direction: column;
+}
+
+.guestbook-entry {
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+}
+
+.entry-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.8em;
+    color: gray;
+}
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.pagination button {
+    margin: 0 10px;
+}
 </style>

frontend/src/dialogues/standard/ChooseDialog.vue

@@ -0,0 +1,62 @@
+<template>
+    <DialogWidget ref="dialog" :title="title" :icon="icon" :show-close="true" :buttons="dialogButtons" :modal="true"
+        :isTitleTranslated="false" width="30em" height="15em">
+        <div class="dialog-body">
+            <p>{{ message }}</p>
+        </div>
+    </DialogWidget>
+</template>
+
+<script>
+import DialogWidget from "@/components/DialogWidget.vue";
+
+export default {
+    name: "ChooseDialog",
+    components: {
+        DialogWidget,
+    },
+    data() {
+        return {
+            title: "Bestätigung",
+            message: "Sind Sie sicher?",
+            icon: null,
+            resolve: null,
+        };
+    },
+    methods: {
+        open(options = {}) {
+            this.title = options.title || "Bestätigung";
+            this.message = options.message || "Sind Sie sicher?";
+            this.icon = options.icon || null;
+            this.dialogButtons = [
+                { text: this.$t("yes"), action: this.confirmYes },
+                { text: this.$t("no"), action: this.confirmNo },
+            ];
+            return new Promise((resolve) => {
+                this.resolve = resolve;
+                this.$refs.dialog.open();
+            });
+        },
+        close() {
+            this.$refs.dialog.close();
+        },
+        confirmYes() {
+            console.log('ja');
+            this.resolve(true);
+            this.close();
+        },
+        confirmNo() {
+            console.log('nein');
+            this.resolve(false);
+            this.close();
+        },
+    },
+};
+</script>
+
+<style scoped>
+.dialog-body {
+    padding: 20px;
+    text-align: center;
+}
+</style>