first initialization gallery
This commit is contained in:
Torsten Schulz
52
frontend/src/components/FolderItem.vue
Normal file
52
frontend/src/components/FolderItem.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
137
frontend/src/dialogues/socialnetwork/CreateFolderDialog.vue
Normal file
137
frontend/src/dialogues/socialnetwork/CreateFolderDialog.vue
Normal file
@@ -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>
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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',
|
||||
|
||||
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