first initialization gallery

frontend/src/components/FolderItem.vue

@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <span @click="selectFolder" class="folder-name" :class="{ selected: folder.id === selectedFolder?.id }">
+            <span v-if="!folder.children || !folder.children.length" class="end-marker">⌞</span>
+            <span v-else>{{ prefix }}</span>
+            <span> {{ folder.name }}</span>
+        </span>
+        <div v-if="folder.children && folder.children.length" class="children">
+            <folder-item v-for="child in folder.children" :key="child.id" :folder="child"
+                :selected-folder="selectedFolder" 
+                @select-folder="$emit('select-folder', child)">
+            </folder-item>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        folder: Object,
+        prefix: {
+            type: String,
+            default: ''
+        },
+        selectedFolder: Object, // Den aktuellen ausgewählten Ordner als Prop übergeben
+    },
+    methods: {
+        selectFolder() {
+            this.$emit('select-folder', this.folder); // Ordner auswählen und nach oben emitten
+        }
+    }
+};
+</script>
+
+<style scoped>
+.folder-name {
+    cursor: pointer;
+}
+
+.selected {
+    font-weight: bold;
+}
+
+.children {
+    margin-left: 20px;
+}
+
+.end-marker {
+    font-size: 1.2em;
+    vertical-align: middle;
+}
+</style>

frontend/src/components/form/MultiselectWidget.vue

@@ -12,10 +12,10 @@
             :track-by="'value'"
         >
             <template #option="{ option }">
-                <span v-if="option && option.value">Option: {{ getTranslation(option) }}</span>
+                <span v-if="option && option.value">{{ getTranslation(option) }}</span>
             </template>
             <template #tag="{ option, remove }">
-                <span v-if="option && option.captionTr" class="custom-tag">
+                <span v-if="option && option.captionTr" class="multiselect__tag">
                     {{ $t(option.captionTr) }}
                     <span @click="remove(option)">×</span>
                 </span>

frontend/src/dialogues/socialnetwork/CreateFolderDialog.vue

@@ -0,0 +1,137 @@
+<template>
+    <DialogWidget ref="dialog" title="socialnetwork.gallery.create_folder_dialog.title" icon="folder16.png"
+        :show-close="true" :buttons="buttons" :modal="true" :isTitleTranslated="true" @close="closeDialog"
+        name="CreateFolderDialog">
+        <div>
+            <div class="form-group">
+                <label>{{ $t("socialnetwork.gallery.create_folder_dialog.parent_folder") }}</label>
+                <input type="text" :value="parentFolder.name" disabled />
+            </div>
+            <div class="form-group">
+                <label for="folderTitle">{{ $t("socialnetwork.gallery.create_folder_dialog.folder_title") }}</label>
+                <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>
+            </div>
+        </div>
+    </DialogWidget>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect';
+import DialogWidget from '@/components/DialogWidget.vue';
+import { mapGetters } from 'vuex';
+import apiClient from '@/utils/axios.js';
+
+export default {
+    name: 'CreateFolderDialog',
+    components: {
+        DialogWidget,
+        Multiselect
+    },
+    props: {
+        parentFolder: {
+            type: [Object, null],
+            required: true,
+            default() {
+                return { id: null, name: '' };
+            }
+        }
+    },
+    data() {
+        return {
+            folderTitle: '',
+            visibilityOptions: [],
+            selectedVisibility: [],
+        };
+    },
+    computed: {
+        ...mapGetters(['isLoggedIn']),
+        buttons() {
+            return [{ text: this.$t("socialnetwork.gallery.create_folder"), action: this.createFolder }];
+        },
+    },
+    async mounted() {
+        await this.loadVisibilityOptions();
+    },
+    methods: {
+        async open() {
+            if (!this.parentFolder || !this.parentFolder.id) {
+                console.error('No parent folder selected');
+                return;
+            }
+            this.$refs.dialog.open();
+        },
+        closeDialog() {
+            this.$refs.dialog.close();
+        },
+        async loadVisibilityOptions() {
+            try {
+                const response = await apiClient.get('/api/socialnetwork/imagevisibilities');
+                this.visibilityOptions = response.data;
+            } catch (error) {
+                console.error('Error loading visibility options:', error);
+            }
+        },
+        async createFolder() {
+            if (!this.folderTitle || !this.selectedVisibility) {
+                alert(this.$t('socialnetwork.gallery.errors.missing_fields'));
+                return;
+            }
+
+            try {
+                const payload = {
+                    name: this.folderTitle,
+                    parentId: this.parentFolder.id,
+                    visibilities: this.selectedVisibility.map(item => item.id),
+                };
+
+                await apiClient.post('/api/socialnetwork/folders', payload);
+                this.$emit('created', payload);
+                this.closeDialog();
+            } catch (error) {
+                console.error('Error creating folder:', error);
+            }
+        }
+    }
+};
+
+</script>
+
+<style scoped>
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+input[disabled] {
+    background-color: #f0f0f0;
+}
+
+.multiselect {
+    display: inline-block;
+    width: auto;
+}
+</style>

frontend/src/i18n/locales/de/socialnetwork.json

@@ -138,6 +138,35 @@
             "town": "Stadt",
             "bodyheight": "Größe",
             "weight": "Gewicht"
+        },
+        "gallery": {
+            "title": "Gallerie",
+            "folders": "Ordner",
+            "create_folder": "Ordner anlegen",
+            "upload": {
+                "title": "Bild hochladen",
+                "image_title": "Titel",
+                "image_file": "Datei",
+                "visibility": "Sichtbar für",
+                "upload_button": "Hochladen",
+                "selectvisibility": "Bitte auswählen"
+            },
+            "images": "Bilder",
+            "visibility": {
+                "everyone": "Jeden",
+                "friends": "Freunde",
+                "adults": "Erwachsene",
+                "friends-and-adults": "Freunde und Erwachsene",
+                "selected-users": "Ausgewählte Benutzer",
+                "none": "Niemand"
+            },
+            "create_folder_dialog": {
+                "title": "Ordner anlegen",
+                "parent_folder": "Wird angelegt in",
+                "folder_title": "Ordnername",
+                "visibility": "Sichtbar für",
+                "select_visibility": "Bitte auswählen"
+            }
         }
     }
 }

frontend/src/router/index.js

@@ -11,6 +11,7 @@ import InterestsView from '../views/settings/InterestsView.vue';
 import AdminInterestsView from '../views/admin/InterestsView.vue';
 import AdminContactsView from '../views/admin/ContactsView.vue';
 import SearchView from '../views/social/SearchView.vue';
+import GalleryView from '../views/social/GalleryView.vue';
 
 const routes = [
   {
@@ -29,6 +30,12 @@ const routes = [
     component: SearchView,
     meta: { requiresAuth: true }
   },
+  {
+    path: '/socialnetwork/gallery',
+    name: 'Gallery',
+    component: GalleryView,
+    meta: { requiresAuth: true }
+  },
   {
     path: '/settings/personal',
     name: 'Personal settings',

frontend/src/views/social/GalleryView.vue

@@ -0,0 +1,227 @@
+<template>
+    <h2>{{ $t('socialnetwork.gallery.title') }}</h2>
+    <div class="gallery-view">
+        <div class="sidebar">
+            <h3>{{ $t('socialnetwork.gallery.folders') }}</h3>
+            <ul>
+                <folder-item v-for="folder in [folders]" :key="folder.id" :folder="folder" :prefix="'|-- '"
+                    :selected-folder="selectedFolder" @select-folder="selectFolder"></folder-item>
+            </ul>
+            <button @click="openCreateFolderDialog">{{ $t('socialnetwork.gallery.create_folder') }}</button>
+        </div>
+
+        <div class="content">
+            <div class="upload-section">
+                <div class="upload-header" @click="toggleUploadSection">
+                    <span>
+                        <i class="icon-upload-toggle">{{ isUploadVisible ? '&#9650;' : '&#9660;' }}</i>
+                    </span>
+                    <h3>{{ $t('socialnetwork.gallery.upload.title') }}</h3>
+                </div>
+                <div v-if="isUploadVisible" class="upload-content">
+                    <form @submit.prevent="handleUpload">
+                        <div class="form-group">
+                            <label for="imageTitle">{{ $t('socialnetwork.gallery.upload.image_title') }}</label>
+                            <input type="text" v-model="imageTitle"
+                                :placeholder="$t('socialnetwork.gallery.upload.image_title')" />
+                        </div>
+
+                        <div class="form-group">
+                            <label for="imageFile">{{ $t('socialnetwork.gallery.upload.image_file') }}</label>
+                            <input type="file" @change="onFileChange" accept="image/*" required />
+                            <div v-if="imagePreview" class="image-preview">
+                                <img :src="imagePreview" alt="Image Preview"
+                                    style="max-width: 150px; max-height: 150px;" />
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="visibility">{{ $t('socialnetwork.gallery.upload.visibility') }}</label>
+                            <multiselect v-model="selectedVisibilities" :options="visibilityOptions" :multiple="true"
+                                :close-on-select="false" label="description"
+                                :placeholder="$t('socialnetwork.gallery.upload.selectvisibility')" :track-by="'value'">
+                                <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>
+
+                        <button type="submit" class="upload-button">{{ $t('socialnetwork.gallery.upload.upload_button')
+                            }}</button>
+                    </form>
+                </div>
+            </div>
+
+            <div class="image-list">
+                <h3>{{ $t('socialnetwork.gallery.images') }}</h3>
+                <ul>
+                    <li v-for="image in images" :key="image.id">
+                        <img :src="image.url" :alt="image.title" />
+                        <p>{{ image.title }}</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <CreateFolderDialog ref="createFolderDialog" :parentFolder="selectedFolder" @created="handleFolderCreated" />
+</template>
+
+<script>
+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 the dialog
+
+export default {
+    components: {
+        FolderItem,
+        Multiselect,
+        CreateFolderDialog
+    },
+    data() {
+        return {
+            folders: { children: [] },
+            images: [],
+            selectedFolder: null,
+            imageTitle: '',
+            fileToUpload: null,
+            isUploadVisible: false,
+            visibilityOptions: [],
+            selectedVisibilities: [],
+            imagePreview: null,
+        };
+    },
+    async mounted() {
+        await this.loadFolders();
+        await this.loadImageVisibilities();
+        if (this.folders) {
+            this.selectFolder(this.folders);
+        }
+    },
+    methods: {
+        async loadFolders() {
+            try {
+                const response = await apiClient.get('/api/socialnetwork/folders');
+                this.folders = response.data;
+            } catch (error) {
+                console.error('Error loading folders:', error);
+            }
+        },
+        async loadImageVisibilities() {
+            try {
+                const response = await apiClient.get('/api/socialnetwork/imagevisibilities');
+                this.visibilityOptions = response.data;
+            } catch (error) {
+                console.error('Error loading visibility options:', error);
+            }
+        },
+        selectFolder(folder) {
+            this.selectedFolder = folder;
+        },
+         async loadImages(folderId) {
+            try {
+                const response = await apiClient.get(`/api/socialnetwork/folder/${folderId}`);
+                this.images = response.data;
+            } catch (error) {
+                console.error('Error loading images:', error);
+            }
+        },
+        openCreateFolderDialog() {
+            this.$refs.createFolderDialog.open();
+        },
+        async handleFolderCreated() {
+            await this.loadFolders(); // Reload the folders after creation
+        },
+        onFileChange(event) {
+            this.fileToUpload = event.target.files[0];
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.imagePreview = e.target.result;
+            };
+            reader.readAsDataURL(this.fileToUpload);
+        },
+        async handleUpload() {
+            if (!this.fileToUpload) return;
+
+            const formData = new FormData();
+            formData.append('image', this.fileToUpload);
+            formData.append('folderId', this.selectedFolder.id);
+            formData.append('title', this.imageTitle);
+            formData.append('visibility', JSON.stringify(this.selectedVisibilities.map(v => v.id)));
+
+            try {
+                await apiClient.post('/api/socialnetwork/images', formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                });
+                this.loadImages(this.selectedFolder.id);
+                this.imageTitle = '';
+                this.fileToUpload = null;
+                this.imagePreview = null;
+                this.selectedVisibilities = [];
+            } catch (error) {
+                console.error('Error uploading image:', error);
+            }
+        },
+        toggleUploadSection() {
+            this.isUploadVisible = !this.isUploadVisible;
+        },
+    },
+};
+</script>
+<style scoped>
+.gallery-view {
+    display: flex;
+}
+
+.sidebar {
+    width: 200px;
+    margin-right: 20px;
+}
+
+.content {
+    flex: 1;
+}
+
+.upload-section {
+    margin-bottom: 20px;
+}
+
+.image-list {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.image-list li {
+    margin: 10px;
+}
+
+.icon-upload-toggle {
+    float: left;
+    cursor: pointer;
+}
+
+.multiselect {
+    display: inline-block;
+    width: auto;
+}
+
+.folder-item {
+    padding: 5px;
+    cursor: pointer;
+}
+
+.folder-item.selected {
+    background-color: lightgray;
+}
+</style>