first initialization gallery
This commit is contained in:
Torsten Schulz
227
frontend/src/views/social/GalleryView.vue
Normal file
227
frontend/src/views/social/GalleryView.vue
Normal file
@@ -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 ? '▲' : '▼' }}</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>
|
||||
Reference in New Issue
Block a user