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

2024-09-22 20:50:19 +02:00
parent 7ab6939863
commit a2ee66c9de
11 changed files with 555 additions and 57 deletions
--- a/frontend/src/assets/styles.scss
+++ b/frontend/src/assets/styles.scss
@@ -55,6 +55,7 @@ button:hover {

 h1, h2, h3 {
  margin: 0;
+  display: block;
 }

 .multiselect__option--highlight,
--- a/frontend/src/components/FolderItem.vue
+++ b/frontend/src/components/FolderItem.vue
@@ -1,16 +1,22 @@
 <template>
-    <div>
+    <div class="folder-item">
        <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>
+            <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>
-        <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)">
+        <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)">
            </folder-item>
-        </div>
+        </template>
    </div>
 </template>

@@ -18,15 +24,34 @@
 export default {
    props: {
        folder: Object,
-        prefix: {
-            type: String,
-            default: ''
+        isLastItem: {
+            type: Boolean,
+            default: false
        },
-        selectedFolder: Object, // Den aktuellen ausgewählten Ordner als Prop übergeben
+        depth: {
+            type: Number,
+            default: 0
+        },
+        parentsWithChildren: {
+            type: Array,
+            default: () => []
+        },
+        selectedFolder: Object,
    },
    methods: {
        selectFolder() {
-            this.$emit('select-folder', this.folder); // Ordner auswählen und nach oben emitten
+            this.$emit('select-folder', this.folder);
+        },
+        forwardSelectFolderEvent(selectedFolder) {
+            this.$emit('select-folder', selectedFolder);
+        },
+        showPipe(index) {
+            return this.parentsWithChildren[index - 1];
+        },
+        getNewParentsWithChildrenList(index) {
+            const newParentsWithChildren = [...this.parentsWithChildren];
+            newParentsWithChildren.push(index < this.folder.children.length - 1);
+            return newParentsWithChildren;
        }
    }
 };
@@ -48,5 +73,20 @@ export default {
 .end-marker {
    font-size: 1.2em;
    vertical-align: middle;
+    margin-top: -22px;
+    padding-left: 3px;
+}
+
+.marker {
+    display: inline-block;
+    width: 10px;
+}
+
+.filler {
+    padding-left: 3.5px;
+}
+
+.folder-item {
+    margin: -2px 0;
 }
 </style>
--- a/frontend/src/dialogues/socialnetwork/ImageDialog.vue
+++ b/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>
--- a/frontend/src/i18n/locales/de/socialnetwork.json
+++ b/frontend/src/i18n/locales/de/socialnetwork.json
@@ -166,6 +166,14 @@
                "folder_title": "Ordnername",
                "visibility": "Sichtbar für",
                "select_visibility": "Bitte auswählen"
+            },
+            "noimages": "In diesem Ordner befinden sich zur Zeit keine Bilder",
+            "imagedialog": {
+                "image_title": "Titel",
+                "edit_visibility": "Sichtbar für",
+                "save_changes": "Änderungen speichern",
+                "close": "Schließen",
+                "edit_visibility_placeholder": "Bitte auswählen"
            }
        }
    }
--- a/frontend/src/views/social/GalleryView.vue
+++ b/frontend/src/views/social/GalleryView.vue
@@ -4,8 +4,9 @@
        <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>
+                <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>
            </ul>
            <button @click="openCreateFolderDialog">{{ $t('socialnetwork.gallery.create_folder') }}</button>
        </div>
@@ -41,8 +42,8 @@
                                :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 v-if="option && option.description">
+                                        {{ $t(`socialnetwork.gallery.visibility.${option.description}`) }}
                                    </span>
                                </template>
                                <template #tag="{ option, remove }">
@@ -54,24 +55,27 @@
                            </multiselect>
                        </div>

-                        <button type="submit" class="upload-button">{{ $t('socialnetwork.gallery.upload.upload_button')
-                            }}</button>
+                        <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" />
+                <ul v-if="images.length > 0">
+                    <li v-for="image in images" :key="image.id" @click="openImageDialog(image)">
+                        <img :src="image.url || image.placeholder" alt="Loading..." />
                        <p>{{ image.title }}</p>
                    </li>
                </ul>
+                <span v-else>{{ $t('socialnetwork.gallery.noimages') }}</span>
            </div>
        </div>
    </div>
    <CreateFolderDialog ref="createFolderDialog" :parentFolder="selectedFolder" @created="handleFolderCreated" />
+    <ImageDialog ref="imageDialog" :visibilityOptions="visibilityOptions" @save="saveImage" />
 </template>

 <script>
@@ -79,13 +83,15 @@ 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
+import CreateFolderDialog from '../../dialogues/socialnetwork/CreateFolderDialog.vue';
+import ImageDialog from '../../dialogues/socialnetwork/ImageDialog.vue';

 export default {
    components: {
        FolderItem,
        Multiselect,
-        CreateFolderDialog
+        CreateFolderDialog,
+        ImageDialog,
    },
    data() {
        return {
@@ -124,22 +130,34 @@ export default {
                console.error('Error loading visibility options:', error);
            }
        },
-        selectFolder(folder) {
+        async selectFolder(folder) {
            this.selectedFolder = folder;
+            await this.loadImages(folder.id);
        },
-         async loadImages(folderId) {
+        async loadImages(folderId) {
            try {
                const response = await apiClient.get(`/api/socialnetwork/folder/${folderId}`);
-                this.images = response.data;
+                this.images = response.data.map((image) => ({
+                    ...image,
+                    placeholder:
+                        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3C/svg%3E', // Placeholder SVG
+                    url: null, 
+                }));
+                await this.fetchImages();
            } catch (error) {
                console.error('Error loading images:', error);
            }
        },
+        async fetchImages() {
+            this.images.forEach((image) => {
+                this.fetchImage(image);
+            });
+        },
        openCreateFolderDialog() {
            this.$refs.createFolderDialog.open();
        },
        async handleFolderCreated() {
-            await this.loadFolders(); // Reload the folders after creation
+            await this.loadFolders();
        },
        onFileChange(event) {
            this.fileToUpload = event.target.files[0];
@@ -156,7 +174,7 @@ export default {
            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)));
+            formData.append('visibility', JSON.stringify(this.selectedVisibilities.map((v) => v.id)));

            try {
                await apiClient.post('/api/socialnetwork/images', formData, {
@@ -173,12 +191,47 @@ export default {
                console.error('Error uploading image:', error);
            }
        },
+        async fetchImage(image) {
+            const userId = localStorage.getItem('userid');
+            try {
+                const response = await apiClient.get(`/api/socialnetwork/image/${image.hash}`, {
+                    headers: {
+                        userid: userId,
+                    },
+                    responseType: 'blob',
+                });
+                image.url = URL.createObjectURL(response.data);
+            } catch (error) {
+                console.error('Error fetching image:', error);
+            }
+        },
        toggleUploadSection() {
            this.isUploadVisible = !this.isUploadVisible;
        },
-    },
+        openImageDialog(image) {
+            this.$refs.imageDialog.open(image);
+        },
+        async saveImage(updatedImage) {
+            try {
+                const response =  await apiClient.put(`/api/socialnetwork/images/${updatedImage.id}`, {
+                    title: updatedImage.title,
+                    visibilities: updatedImage.visibilities,
+                });
+                this.images = response.data.map((image) => ({
+                    ...image,
+                    placeholder:
+                        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3C/svg%3E', // Placeholder SVG
+                    url: null,
+                }));
+                await this.fetchImages();
+            } catch (error) {
+                console.error('Error saving image:', error);
+            }
+        },
+   },
 };
 </script>
+
 <style scoped>
 .gallery-view {
    display: flex;
@@ -199,11 +252,12 @@ export default {

 .image-list {
    display: flex;
+    flex-direction: column;
    flex-wrap: wrap;
 }

 .image-list li {
-    margin: 10px;
+    margin: 4px;
 }

 .icon-upload-toggle {
@@ -224,4 +278,26 @@ export default {
 .folder-item.selected {
    background-color: lightgray;
 }
+
+.image-list > ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.image-list > ul > li {
+    display: inline-block;
+    padding: 2px;
+    border: 1px solid #F9A22C;
+}
+
+.image-list > ul > li > p {
+    text-align: center;
+}
+
+.image-list li img {
+    max-width: 200px;
+    max-height: 200px;
+    object-fit: contain;
+    cursor: pointer;
+}
 </style>