Finished guestbook and gallery. started diary

frontend/src/components/AppFooter.vue

@@ -14,37 +14,28 @@
       <a href="#" @click.prevent="openDataPrivacyDialog">{{ $t('dataPrivacy.button') }}</a>
       <a href="#" @click.prevent="openContactDialog">{{ $t('contact.button') }}</a>
     </div>
-    <ImprintDialog ref="imprintDialog" name="imprintDialog" />
-    <DataPrivacyDialog ref="dataPrivacyDialog" name="dataPrivacyDialog" />
-    <ContactDialog ref="contactDialog" name="contactDialog" />
   </footer>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import ImprintDialog from '../dialogues/standard/ImprintDialog.vue';
-import DataPrivacyDialog from '../dialogues/standard/DataPrivacyDialog.vue';
-import ContactDialog from '../dialogues/standard/ContactDialog.vue';
 
 export default {
   name: 'AppFooter',
   components: {
-    ImprintDialog,
-    DataPrivacyDialog,
-    ContactDialog,
   },
   computed: {
     ...mapGetters('dialogs', ['openDialogs'])
   },
   methods: {
     openImprintDialog() {
-      this.$refs.imprintDialog.open();
+      this.$root.$refs.imprintDialog.open();
     },
     openDataPrivacyDialog() {
-      this.$refs.dataPrivacyDialog.open();
+      this.$root.$refs.dataPrivacyDialog.open();
     },
     openContactDialog() {
-      this.$refs.contactDialog.open();
+      this.$root.$refs.contactDialog.open();
     },
     toggleDialogMinimize(dialogName) {
       this.$store.dispatch('dialogs/toggleDialogMinimize', dialogName);

frontend/src/components/DialogWidget.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal }]" @click.self="handleOverlayClick">
+  <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal, 'is-active': isActive }]" @click.self="handleOverlayClick">
     <div class="dialog" :class="{ minimized: minimized }"
       :style="{ width: dialogWidth, height: dialogHeight, top: dialogTop, left: dialogLeft, position: 'absolute' }"
       v-if="!minimized" ref="dialog">
@@ -75,6 +75,7 @@ export default {
       dragOffsetY: 0,
       localTitle: this.title,
       localIsTitleTranslated: this.isTitleTranslated,
+      isActive: false,
     };
   },
   computed: {
@@ -112,7 +113,7 @@ export default {
     },
     buttonClick(action) {
       if (typeof action === 'function') {
-        action(); // Wenn action eine Funktion ist, rufe sie direkt auf
+        action();
       } else {
         this.$emit(action);
         if (action === 'close') {
@@ -132,6 +133,9 @@ export default {
       this.minimized = !this.minimized;
       this.$store.dispatch('dialogs/toggleDialogMinimize', this.name);
     },
+    isMinimized() {
+      return this.minimized;
+    },
     startDragging(event) {
       this.isDragging = true;
       const dialog = this.$refs.dialog;
@@ -159,6 +163,9 @@ export default {
         isTitleTranslated: this.localIsTitleTranslated
       });
     },
+    setActiveState(newActiveState) {
+      this.isActive = newActiveState;
+    }
   }
 };
 </script>
@@ -254,4 +261,7 @@ export default {
   color: #7E471B;
   border: 1px solid #7E471B;
 }
+.is-active {
+  z-index: 990;
+}
 </style>

frontend/src/components/FolderItem.vue

@@ -1,20 +1,25 @@
 <template>
     <div class="folder-item">
-        <span @click="selectFolder" class="folder-name" :class="{ selected: folder.id === selectedFolder?.id }">
+        <div @click="selectFolder" class="folder-name" :class="{ selected: folder.id === selectedFolder?.id }">
+            <span v-if="!noActionItems" class="action-items">
+                <span @click="$emit('edit-folder', folder)" class="icon edit-icon" title="Edit folder">✎</span>
+                <span @click="$emit('delete-folder', folder)" class="icon delete-icon" title="Delete folder">✖</span>
+            </span>
             <template v-for="i in depth">
                 <span v-if="showPipe(i)" class="marker filler">|</span>
                 <span v-else class="marker filler">&nbsp;</span>
             </template>
             <span v-if="isLastItem" class="end-marker marker">⌞</span>
             <span v-else class="marker">&#x251C;</span>
-            <span>&nbsp;{{ folder.name }}</span>
-        </span>
+            <span class="folder-name-text">&nbsp;{{ folder.name }}</span>
+        </div>
+
         <template v-if="folder.children && folder.children.length" class="children">
             <folder-item v-for="(child, index) in folder.children" :key="child.id" :folder="child"
                 :selected-folder="selectedFolder" @select-folder="forwardSelectFolderEvent"
-                :depth="depth + 1"
-                :isLastItem="index === folder.children.length - 1"
-                :parentsWithChildren="getNewParentsWithChildrenList(index)">
+                @edit-folder="$emit('edit-folder', $event)" @delete-folder="$emit('delete-folder', $event)"
+                :depth="depth + 1" :isLastItem="index === folder.children.length - 1"
+                :parentsWithChildren="getNewParentsWithChildrenList(index)" :noActionItems="noActionItems">
             </folder-item>
         </template>
     </div>
@@ -36,6 +41,10 @@ export default {
             type: Array,
             default: () => []
         },
+        noActionItems: {
+            type: Boolean,
+            default: false
+        },
         selectedFolder: Object,
     },
     methods: {
@@ -58,10 +67,6 @@ export default {
 </script>
 
 <style scoped>
-.folder-name {
-    cursor: pointer;
-}
-
 .selected {
     font-weight: bold;
 }
@@ -89,4 +94,25 @@ export default {
 .folder-item {
     margin: -2px 0;
 }
+
+.folder-actions {
+    display: flex;
+    gap: 10px;
+}
+
+.icon {
+    cursor: pointer;
+}
+
+.edit-icon {
+    color: green;
+}
+
+.delete-icon {
+    color: red;
+}
+
+.folder-name-text {
+    cursor: pointer;
+}
 </style>