first initialization gallery

backend/controllers/socialnetworkController.js

@@ -9,6 +9,8 @@ class SocialNetworkController {
         this.getFolders = this.getFolders.bind(this);
         this.uploadImage = this.uploadImage.bind(this);
         this.getImage = this.getImage.bind(this);
+        this.getImageVisibilityTypes = this.getImageVisibilityTypes.bind(this);
+        this.getFolderImageList = this.getFolderImageList.bind(this);
     }
 
     async userSearch(req, res) {
@@ -39,8 +41,9 @@ class SocialNetworkController {
 
     async createFolder(req, res) {
         try {
+            const userId = req.headers.userid;
             const folderData = req.body;
-            const folder = await this.socialNetworkService.createFolder(folderData);
+            const folder = await this.socialNetworkService.createFolder(userId, folderData);
             res.status(201).json(folder);
         } catch (error) {
             console.error('Error in createFolder:', error);
@@ -59,10 +62,23 @@ class SocialNetworkController {
         }
     }
 
+    async getFolderImageList(req, res) {
+        try {
+            const userId = req.headers.userid;
+            const { folderId } = req.params;
+            const images = await this.socialNetworkService.getFolderImageList(userId, folderId);
+            res.status(200).json(images);
+        } catch (error) {
+            console.error('Error in getFolderImageList:', error);
+            res.status(500).json({ error: error.message });
+        }
+    }
+
     async uploadImage(req, res) {
         try {
+            const userId = req.headers.userid;
             const imageData = req.body;
-            const image = await this.socialNetworkService.uploadImage(imageData);
+            const image = await this.socialNetworkService.uploadImage(userId, imageData);
             res.status(201).json(image);
         } catch (error) {
             console.error('Error in uploadImage:', error);
@@ -80,6 +96,16 @@ class SocialNetworkController {
             res.status(500).json({ error: error.message });
         }
     }
+
+    async getImageVisibilityTypes(req, res) {
+        try {
+            const types = await this.socialNetworkService.getPossibleImageVisibilities();
+            res.status(200).json(types);
+        } catch (error) {
+            console.log(error);
+            res.status(500).json({ error: error.message });
+        }
+    }
 }
 
 export default SocialNetworkController;

backend/models/associations.js

@@ -12,6 +12,11 @@ import UserParamVisibilityType from './type/user_param_visibility.js';
 import UserParamVisibility from './community/user_param_visibility.js';
 import Folder from './community/folder.js';
 import Image from './community/image.js';
+import ImageVisibilityType from './type/image_visibility.js';
+import ImageVisibilityUser from './community/image_visibility_user.js';
+import FolderImageVisibility from './community/folder_image_visibility.js';
+import ImageImageVisibility from './community/image_image_visibility.js';
+import FolderVisibilityUser from './community/folder_visibility_user.js';
 
 export default function setupAssociations() {
     SettingsType.hasMany(UserParamType, { foreignKey: 'settingsId', as: 'user_param_types' });
@@ -57,4 +62,37 @@ export default function setupAssociations() {
 
     Image.belongsTo(User, { foreignKey: 'userId' });
     User.hasMany(Image, { foreignKey: 'userId' }); 
+
+    Folder.belongsToMany(ImageVisibilityType, {
+        through: FolderImageVisibility,
+        foreignKey: 'folderId',
+        otherKey: 'visibilityTypeId'
+    });
+    ImageVisibilityType.belongsToMany(Folder, {
+        through: FolderImageVisibility,
+        foreignKey: 'visibilityTypeId',
+        otherKey: 'folderId'
+    });
+
+    Image.belongsToMany(ImageVisibilityType, {
+        through: ImageImageVisibility,
+        foreignKey: 'imageId',
+        otherKey: 'visibilityTypeId'
+    });
+    ImageVisibilityType.belongsToMany(Image, {
+        through: ImageImageVisibility,
+        foreignKey: 'visibilityTypeId',
+        otherKey: 'imageId'
+    });
+
+    Folder.belongsToMany(ImageVisibilityUser, {
+        through: FolderVisibilityUser,
+        foreignKey: 'folderId',
+        otherKey: 'visibilityUserId'
+    });
+    ImageVisibilityUser.belongsToMany(Folder, {
+        through: FolderVisibilityUser,
+        foreignKey: 'visibilityUserId',
+        otherKey: 'folderId'
+    });
 }

backend/models/community/folder.js

@@ -23,14 +23,6 @@ const Folder = sequelize.define('folder', {
             key: 'id',
         },
     },
-    visibilityType: {
-        type: DataTypes.INTEGER,
-        allowNull: false,
-        references: {
-            model: UserParamVisibilityType,
-            key: 'id',
-        },
-    },
 }, {
     tableName: 'folder',
     schema: 'community',

backend/models/community/folder_image_visibility.js

@@ -0,0 +1,37 @@
+import { sequelize } from '../../utils/sequelize.js';
+import { DataTypes } from 'sequelize';
+
+const FolderImageVisibility = sequelize.define('folder_image_visibility', {
+    id: {
+        type: DataTypes.INTEGER,
+        autoIncrement: true,
+        primaryKey: true,
+        allowNull: false
+    },
+    folderId: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        references: {
+            model: 'folder',
+            key: 'id'
+        }
+    },
+    visibilityTypeId: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        references: {
+            model: {
+                schema: 'type', 
+                tableName: 'image_visibility_type'
+            },
+            key: 'id'
+        }
+    }
+}, {
+    tableName: 'folder_image_visibility',
+    schema: 'community',
+    timestamps: false,
+    underscored: true,
+});
+
+export default FolderImageVisibility;

backend/models/community/folder_visibility_user.js

@@ -0,0 +1,34 @@
+import { sequelize } from '../../utils/sequelize.js';
+import { DataTypes } from 'sequelize';
+
+const FolderVisibilityUser = sequelize.define('folder_visibility_user', {
+    id: {
+        type: DataTypes.INTEGER,
+        autoIncrement: true,
+        primaryKey: true,
+        allowNull: false
+    },
+    folderId: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        references: {
+            model: 'folder',
+            key: 'id'
+        }
+    },
+    visibilityUserId: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        references: {
+            model: 'image_visibility_user',
+            key: 'id'
+        }
+    }
+}, {
+    tableName: 'folder_visibility_user',
+    schema: 'community',
+    timestamps: false,
+    underscored: true,
+});
+
+export default FolderVisibilityUser;

backend/models/community/image.js

@@ -36,14 +36,6 @@ const Image = sequelize.define('image', {
             key: 'id',
         },
     },
-    visibilityType: {
-        type: DataTypes.INTEGER,
-        allowNull: false,
-        references: {
-            model: UserParamVisibilityType,
-            key: 'id',
-        },
-    },
 }, {
     tableName: 'image',
     schema: 'community',

backend/models/community/image_image_visibility.js

@@ -0,0 +1,37 @@
+import { sequelize } from '../../utils/sequelize.js';
+import { DataTypes } from 'sequelize';
+
+const ImageImageVisibility = sequelize.define('image_image_visibility', {
+    id: {
+        type: DataTypes.INTEGER,
+        autoIncrement: true,
+        primaryKey: true,
+        allowNull: false
+    },
+    imageId: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        references: {
+            model: 'image', 
+            key: 'id'
+        }
+    },
+    visibilityTypeId: {
+        type: DataTypes.INTEGER,
+        allowNull: false,
+        references: {
+            model: {
+                schema: 'type',
+                tableName: 'image_visibility_type'
+            },
+            key: 'id'
+        }
+    }
+}, {
+    tableName: 'image_image_visibility',
+    schema: 'community',
+    timestamps: false,
+    underscored: true,
+});
+
+export default ImageImageVisibility;

backend/models/community/image_visibility_user.js

@@ -0,0 +1,26 @@
+import { sequelize } from '../../utils/sequelize.js';
+import { DataTypes } from 'sequelize';
+
+const ImageVisibilityUser = sequelize.define('image_visibility_user', {
+    id: {
+        type: DataTypes.INTEGER,
+        autoIncrement: true,
+        primaryKey: true,
+        allowNull: false
+    },
+    image_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+    },
+    user_id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+    }
+}, {
+    tableName: 'image_visibility_user',
+    timestamps: false,
+    underscored: true,
+    schema: 'community'
+});
+
+export default ImageVisibilityUser;

backend/models/index.js

@@ -14,6 +14,11 @@ import UserParamVisibilityType from './type/user_param_visibility.js';
 import UserParamVisibility from './community/user_param_visibility.js';
 import Folder from './community/folder.js';
 import Image from './community/image.js';
+import ImageVisibilityType from './type/image_visibility.js';
+import ImageVisibilityUser from './community/image_visibility_user.js';
+import FolderImageVisibility from './community/folder_image_visibility.js';
+import ImageImageVisibility from './community/image_image_visibility.js';
+import FolderVisibilityUser from './community/folder_visibility_user.js';
 
 const models = {
     SettingsType,
@@ -32,6 +37,11 @@ const models = {
     UserParamVisibility,
     Folder,
     Image,
+    ImageVisibilityType,
+    ImageVisibilityUser,
+    FolderImageVisibility,
+    ImageImageVisibility,
+    FolderVisibilityUser,
 };
 
 export default models;

backend/models/type/image_visibility.js

@@ -0,0 +1,22 @@
+import { sequelize } from '../../utils/sequelize.js';
+import { DataTypes } from 'sequelize';
+
+const ImageVisibilityType = sequelize.define('image_visibility_type', {
+    id: {
+        type: DataTypes.INTEGER,
+        autoIncrement: true,
+        primaryKey: true,
+        allowNull: false
+    },
+    description: {
+        type: DataTypes.STRING,
+        allowNull: false
+    }
+}, {
+    tableName: 'image_visibility_type',
+    schema: 'type',
+    timestamps: false,
+    underscored: true,
+});
+
+export default ImageVisibilityType;

backend/routers/socialnetworkRouter.js

@@ -5,13 +5,13 @@ import SocialNetworkController from '../controllers/socialnetworkController.js';
 const router = express.Router();
 const socialNetworkController = new SocialNetworkController();
 
-router.post('/usersearch', authenticate, socialNetworkController.userSearch);
-router.get('/profile/:userId', authenticate, socialNetworkController.profile);
 router.post('/usersearch', authenticate, socialNetworkController.userSearch);
 router.get('/profile/:userId', authenticate, socialNetworkController.profile);
 router.post('/folders', authenticate, socialNetworkController.createFolder);
 router.get('/folders', authenticate, socialNetworkController.getFolders);
+router.get('/folder/:folderId', authenticate, socialNetworkController.getFolderImageList);
 router.post('/images', authenticate, socialNetworkController.uploadImage);
 router.get('/images/:imageId', authenticate, socialNetworkController.getImage);
+router.get('/imagevisibilities', authenticate, socialNetworkController.getImageVisibilityTypes);
 
 export default router;

backend/services/socialnetworkService.js

@@ -8,6 +8,8 @@ import UserParamVisibility from '../models/community/user_param_visibility.js';
 import UserParamVisibilityType from '../models/type/user_param_visibility.js';
 import Folder from '../models/community/folder.js';
 import Image from '../models/community/image.js';
+import ImageVisibilityType from '../models/type/image_visibility.js';
+import FolderImageVisibility from '../models/community/folder_image_visibility.js';
 
 class SocialNetworkService extends BaseService {
     async searchUsers({ username, ageFrom, ageTo, genders }) {
@@ -23,20 +25,84 @@ class SocialNetworkService extends BaseService {
         return this.constructUserProfile(user, requestingUserId);
     }
 
-    async createFolder(data) {
-        this.validateFolderData(data);
-        await this.checkUserAccess(data.userId);
-        return await Folder.create(data);
+    async createFolder(hashedUserId, data) {
+        await this.checkUserAccess(hashedUserId);
+        const user = await User.findOne({
+            hashedId: hashedUserId
+        });
+        const parentFolder = Folder.findOne({
+            id: data.parentId,
+            userId: user.id
+        });
+        if (!parentFolder) {
+            throw new Error('foldernotfound');
+        }
+        const newFolder = await Folder.create({
+            parentId: data.parentId,
+            userId: user.id,
+            name: data.name
+        });
+        for (const visibilityId of data.visibilities) {
+            await FolderImageVisibility.create({
+                folderId: newFolder.id,
+                visibilityTypeId: visibilityId
+            });
+        }
+        return newFolder;
     }
 
-    async getFolders(userId) {
-        await this.checkUserAccess(userId);
-        return await Folder.findAll({ where: { userId } });
+    async getFolders(hashedId) {
+        const userId = await this.checkUserAccess(hashedId);
+        let rootFolder = await Folder.findOne({ where: { parentId: null, userId } });
+        if (!rootFolder) {
+            const user = await User.findOne({ where: { id: userId } });
+            const visibility = await ImageVisibilityType.findOne({
+                where: {
+                    description: 'everyone'
+                }
+            });
+            rootFolder = await Folder.create({
+                name: user.username,
+                parentId: null,
+                userId,
+                visibilityTypeId: visibility.id
+            });
+        }
+        const children = await this.getSubFolders(rootFolder.id, userId);
+        rootFolder = rootFolder.get(); 
+        rootFolder.children = children;
+        return rootFolder;
     }
 
-    async uploadImage(imageData) {
+    async getSubFolders(parentId, userId) {
+        const folders = await Folder.findAll({ where: { parentId, userId } });
+        for (const folder of folders) {
+            const children = await this.getSubFolders(folder.id, userId);
+            folder.setDataValue('children', children);
+        }
+        return folders.map(folder => folder.get());
+    }
+
+    async getFolderImageList(hashedId, folderId) {
+        const userId = await this.checkUserAccess(hashedId);
+        const folder = await Folder.findOne({
+            where: {
+                id: folderId,
+                userId
+            }
+        });
+        if (!folder) throw new Error('Folder not found');
+        return await Image.findAll({
+            where: {
+                folderId: folder.id
+            }   
+        });
+    }
+
+    async uploadImage(hashedId, imageData) {
         this.validateImageData(imageData);
-        await this.checkUserAccess(imageData.userId);
+        const userId = await this.checkUserAccess(hashedId);
+        imageData.id = userId;
         return await Image.create(imageData);
     }
 
@@ -47,9 +113,10 @@ class SocialNetworkService extends BaseService {
         return image;
     }
 
-    async checkUserAccess(userId) {
-        const user = await User.findByPk(userId);
+    async checkUserAccess(hashedId) {
+        const user = await User.findOne({ hashedId: hashedId });
         if (!user || !user.active) throw new Error('Access denied: User not found or inactive');
+        return user.id;
     }
 
     validateFolderData(data) {
@@ -184,6 +251,10 @@ class SocialNetworkService extends BaseService {
         });
         return userParamValue ? userParamValue.value : value;
     }
+
+    async getPossibleImageVisibilities() {
+        return await ImageVisibilityType.findAll();
+    }
 }
 
 export default SocialNetworkService;

backend/utils/initializeImageTypes.js

@@ -0,0 +1,19 @@
+import ImageVisibilityType from '../models/type/image_visibility.js';
+
+const initializeImageTypes = async () => {
+    const visibilities = [
+        'everyone',
+        'friends',
+        'adults',
+        'friends-and-adults',
+        'selected-users',
+    ];
+    for (const visibility of visibilities) {
+        await ImageVisibilityType.findOrCreate({
+            where: { description: visibility },
+            defaults: { description: visibility }
+        });
+    }
+}
+
+export default initializeImageTypes;

backend/utils/syncDatabase.js

@@ -2,6 +2,7 @@ import { initializeDatabase } from './sequelize.js';
 import initializeTypes from './initializeTypes.js';
 import initializeSettings from './initializeSettings.js';
 import initializeUserRights from './initializeUserRights.js';
+import initializeImageTypes from './initializeImageTypes.js';
 import setupAssociations from '../models/associations.js';
 import models from '../models/index.js';
 import { createTriggers } from '../models/trigger.js';
@@ -18,6 +19,7 @@ const syncDatabase = async () => {
         await initializeSettings();
         await initializeTypes();
         await initializeUserRights();
+        await initializeImageTypes();
     } catch (error) {
         console.error('Unable to synchronize the database:', error);
     }

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>