Finished guestbook and gallery. started diary

frontend/src/views/social/GalleryView.vue

@@ -3,10 +3,11 @@
     <div class="gallery-view">
         <div class="sidebar">
             <h3>{{ $t('socialnetwork.gallery.folders') }}</h3>
-            <ul>
+            <ul 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]"></folder-item>
+                    :parentsWithChildren="[false]" @edit-folder="openEditFolderDialog" @delete-folder="deleteFolder">
+                </folder-item>
             </ul>
             <button @click="openCreateFolderDialog">{{ $t('socialnetwork.gallery.create_folder') }}</button>
         </div>
@@ -74,8 +75,6 @@
             </div>
         </div>
     </div>
-    <CreateFolderDialog ref="createFolderDialog" :parentFolder="selectedFolder" @created="handleFolderCreated" />
-    <ImageDialog ref="imageDialog" :visibilityOptions="visibilityOptions" @save="saveImage" />
 </template>
 
 <script>
@@ -83,15 +82,11 @@ import apiClient from '@/utils/axios.js';
 import Multiselect from 'vue-multiselect';
 import FolderItem from '../../components/FolderItem.vue';
 import 'vue-multiselect/dist/vue-multiselect.min.css';
-import CreateFolderDialog from '../../dialogues/socialnetwork/CreateFolderDialog.vue';
-import ImageDialog from '../../dialogues/socialnetwork/ImageDialog.vue';
 
 export default {
     components: {
         FolderItem,
         Multiselect,
-        CreateFolderDialog,
-        ImageDialog,
     },
     data() {
         return {
@@ -154,7 +149,12 @@ export default {
             });
         },
         openCreateFolderDialog() {
-            this.$refs.createFolderDialog.open();
+            const parentFolder = this.selectedFolder || { id: null, name: this.$t('socialnetwork.gallery.root_folder') };
+            Object.assign(this.$root.$refs.createFolderDialog, {
+                parentFolder: parentFolder,
+                folderId: 0,
+            });
+            this.$root.$refs.createFolderDialog.open();
         },
         async handleFolderCreated() {
             await this.loadFolders();
@@ -209,7 +209,7 @@ export default {
             this.isUploadVisible = !this.isUploadVisible;
         },
         openImageDialog(image) {
-            this.$refs.imageDialog.open(image);
+            this.$root.$refs.editImageDialog.open(image);
         },
         async saveImage(updatedImage) {
             try {
@@ -228,7 +228,34 @@ export default {
                 console.error('Error saving image:', error);
             }
         },
-   },
+        openEditFolderDialog(folder) {
+            const parentFolder = folder.parent || { id: null, name: this.$t('socialnetwork.gallery.root_folder') };
+            Object.assign(this.$root.$refs.createFolderDialog, {
+                parentFolder: parentFolder,
+                folderId: folder.id,
+            });
+            this.$root.$refs.createFolderDialog.open(folder);
+        },
+        async deleteFolder(folder) {
+            const folderName = folder.name;
+            const confirmed = await this.$root.$refs.chooseDialog.open({
+                title: this.$t('socialnetwork.gallery.delete_folder_confirmation_title'),
+                message: this.$t('socialnetwork.gallery.delete_folder_confirmation_message').replace('%%folderName%%', folderName),
+            });
+            if (confirmed) {
+                const deletedFolderIsCurrentFolder = folder.id === this.selectFolder.id;
+                try {
+                    await apiClient.delete(`/api/socialnetwork/folders/${folder.id}`);
+                    await this.loadFolders();
+                } catch (error) {
+                    console.error('Fehler beim Löschen des Ordners:', error);
+                }
+                if (deletedFolderIsCurrentFolder) {
+                    this.selectFolder = this.folders[0];
+                }
+            }
+        },
+    },
 };
 </script>
 
@@ -300,4 +327,21 @@ export default {
     object-fit: contain;
     cursor: pointer;
 }
+
+.icon {
+    cursor: pointer;
+    margin-left: 10px;
+}
+
+.edit-icon {
+    color: green;
+}
+
+.delete-icon {
+    color: red;
+}
+
+.tree {
+    padding: 0;
+}
 </style>