Galery nearly finished. only access rights aren't loaded for editin

frontend/src/dialogues/socialnetwork/ImageDialog.vue

@@ -0,0 +1,107 @@
+<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">
+        <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') }}</label>
+                <input type="text" v-model="imageTitle" />
+            </div>
+            <div class="form-group">
+                <label for="visibility">{{ $t('socialnetwork.gallery.imagedialog.edit_visibility') }}</label>
+                <multiselect v-model="selectedVisibilities" :options="visibilityOptions" :multiple="true"
+                    label="description" :track-by="'id'" :close-on-select="false"
+                    :placeholder="$t('socialnetwork.gallery.imagedialog.edit_visibility_placeholder')">
+                    <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';
+
+export default {
+    components: {
+        DialogWidget,
+        Multiselect,
+    },
+    props: {
+        visibilityOptions: {
+            type: Array,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            image: null,
+            imageTitle: '',
+            selectedVisibilities: [],
+        };
+    },
+    computed: {
+        buttons() {
+            return [
+                { text: this.$t('socialnetwork.gallery.imagedialog.save_changes'), action: this.saveChanges },
+                { text: this.$t('socialnetwork.gallery.imagedialog.close'), action: this.closeDialog }
+            ];
+        },
+    },
+    methods: {
+        open(image) {
+            this.image = image;
+            this.imageTitle = image.title;
+            this.selectedVisibilities = image.visibilities || [];
+            this.$refs.dialog.open();
+        },
+        closeDialog() {
+            this.$refs.dialog.close();
+        },
+        async saveChanges() {
+            const updatedImage = {
+                ...this.image,
+                title: this.imageTitle,
+                visibilities: this.selectedVisibilities,
+            };
+
+            try {
+                this.$emit('save', updatedImage);
+                this.closeDialog();
+            } catch (error) {
+                console.error('Error saving image changes:', error);
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+.form-group {
+    margin-bottom: 15px;
+}
+
+.image-container {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.multiselect {
+    display: inline-block;
+    width: auto;
+}
+</style>