torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torsten Schulz
2024-09-22 20:50:19 +02:00
parent 7ab6939863
commit a2ee66c9de
11 changed files with 555 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
frontend/src/views/social/GalleryView.vue
View File

@@ -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>