Galery nearly finished. only access rights aren't loaded for editin
This commit is contained in:
Torsten Schulz
@@ -11,6 +11,8 @@ class SocialNetworkController {
|
||||
this.getImage = this.getImage.bind(this);
|
||||
this.getImageVisibilityTypes = this.getImageVisibilityTypes.bind(this);
|
||||
this.getFolderImageList = this.getFolderImageList.bind(this);
|
||||
this.getImageByHash = this.getImageByHash.bind(this);
|
||||
this.changeImage = this.changeImage.bind(this);
|
||||
}
|
||||
|
||||
async userSearch(req, res) {
|
||||
@@ -77,8 +79,9 @@ class SocialNetworkController {
|
||||
async uploadImage(req, res) {
|
||||
try {
|
||||
const userId = req.headers.userid;
|
||||
const imageData = req.body;
|
||||
const image = await this.socialNetworkService.uploadImage(userId, imageData);
|
||||
const file = req.file;
|
||||
const formData = req.body;
|
||||
const image = await this.socialNetworkService.uploadImage(userId, file, formData);
|
||||
res.status(201).json(image);
|
||||
} catch (error) {
|
||||
console.error('Error in uploadImage:', error);
|
||||
@@ -106,6 +109,38 @@ class SocialNetworkController {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
}
|
||||
|
||||
async getImageByHash(req, res) {
|
||||
try {
|
||||
const userId = req.headers.userid;
|
||||
const { hash } = req.params;
|
||||
const filePath = await this.socialNetworkService.getImageFilePath(userId, hash);
|
||||
console.log(filePath);
|
||||
res.sendFile(filePath, err => {
|
||||
if (err) {
|
||||
console.error('Error sending file:', err);
|
||||
res.status(500).json({ error: 'Error sending file' });
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error in getImageByHash:', error);
|
||||
res.status(403).json({ error: error.message || 'Access denied or image not found' });
|
||||
}
|
||||
}
|
||||
|
||||
async changeImage(req, res) {
|
||||
try {
|
||||
const userId = req.headers.userid;
|
||||
const { imageId } = req.params;
|
||||
const { title, visibilities } = req.body;
|
||||
const folderId = await this.socialNetworkService.changeImage(userId, imageId, title, visibilities);
|
||||
console.log('--->', folderId);
|
||||
res.status(201).json(await this.socialNetworkService.getFolderImageList(userId, folderId));
|
||||
} catch (error) {
|
||||
console.error('Error in getImageByHash:', error);
|
||||
res.status(403).json({ error: error.message || 'Access denied or image not found' });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default SocialNetworkController;
|
||||
|
||||
117
backend/package-lock.json
generated
117
backend/package-lock.json
generated
@@ -16,6 +16,7 @@
|
||||
"express": "^4.19.2",
|
||||
"i18n": "^0.15.1",
|
||||
"joi": "^17.13.3",
|
||||
"multer": "^1.4.5-lts.1",
|
||||
"mysql2": "^3.10.3",
|
||||
"nodemailer": "^6.9.14",
|
||||
"pg": "^8.12.0",
|
||||
@@ -351,6 +352,11 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/append-field": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
|
||||
"integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw=="
|
||||
},
|
||||
"node_modules/aproba": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
|
||||
@@ -513,11 +519,27 @@
|
||||
"concat-map": "0.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/buffer-from": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
|
||||
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
|
||||
},
|
||||
"node_modules/buffer-more-ints": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/buffer-more-ints/-/buffer-more-ints-1.0.0.tgz",
|
||||
"integrity": "sha512-EMetuGFz5SLsT0QTnXzINh4Ksr+oo4i+UGTXEshiGCQWnsgSs7ZhJ8fzlwQ+OzEMs0MpDAMr1hxnblp5a4vcHg=="
|
||||
},
|
||||
"node_modules/busboy": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
|
||||
"integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
|
||||
"dependencies": {
|
||||
"streamsearch": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.16.0"
|
||||
}
|
||||
},
|
||||
"node_modules/bytes": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
|
||||
@@ -619,6 +641,47 @@
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
|
||||
},
|
||||
"node_modules/concat-stream": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
|
||||
"integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
|
||||
"engines": [
|
||||
"node >= 0.8"
|
||||
],
|
||||
"dependencies": {
|
||||
"buffer-from": "^1.0.0",
|
||||
"inherits": "^2.0.3",
|
||||
"readable-stream": "^2.2.2",
|
||||
"typedarray": "^0.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-stream/node_modules/isarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
|
||||
},
|
||||
"node_modules/concat-stream/node_modules/readable-stream": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
|
||||
"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
|
||||
"dependencies": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
"isarray": "~1.0.0",
|
||||
"process-nextick-args": "~2.0.0",
|
||||
"safe-buffer": "~5.1.1",
|
||||
"string_decoder": "~1.1.1",
|
||||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-stream/node_modules/string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"dependencies": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/config-chain": {
|
||||
"version": "1.1.13",
|
||||
"resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
|
||||
@@ -1822,6 +1885,14 @@
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/minimist": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
|
||||
"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/minipass": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
|
||||
@@ -1893,6 +1964,34 @@
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
|
||||
},
|
||||
"node_modules/multer": {
|
||||
"version": "1.4.5-lts.1",
|
||||
"resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz",
|
||||
"integrity": "sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==",
|
||||
"dependencies": {
|
||||
"append-field": "^1.0.0",
|
||||
"busboy": "^1.0.0",
|
||||
"concat-stream": "^1.5.2",
|
||||
"mkdirp": "^0.5.4",
|
||||
"object-assign": "^4.1.1",
|
||||
"type-is": "^1.6.4",
|
||||
"xtend": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/multer/node_modules/mkdirp": {
|
||||
"version": "0.5.6",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
|
||||
"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
|
||||
"dependencies": {
|
||||
"minimist": "^1.2.6"
|
||||
},
|
||||
"bin": {
|
||||
"mkdirp": "bin/cmd.js"
|
||||
}
|
||||
},
|
||||
"node_modules/mustache": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
|
||||
@@ -2253,6 +2352,11 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
|
||||
},
|
||||
"node_modules/proto-list": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
|
||||
@@ -2698,6 +2802,14 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/streamsearch": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
|
||||
"integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string_decoder": {
|
||||
"version": "0.10.31",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
|
||||
@@ -2832,6 +2944,11 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/typedarray": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
|
||||
"integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
|
||||
},
|
||||
"node_modules/umzug": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/umzug/-/umzug-2.3.0.tgz",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
"express": "^4.19.2",
|
||||
"i18n": "^0.15.1",
|
||||
"joi": "^17.13.3",
|
||||
"multer": "^1.4.5-lts.1",
|
||||
"mysql2": "^3.10.3",
|
||||
"nodemailer": "^6.9.14",
|
||||
"pg": "^8.12.0",
|
||||
|
||||
@@ -1,19 +1,9 @@
|
||||
import ContactService from '../services/ContactService.js';
|
||||
import { Router } from 'express';
|
||||
import ContactController from '../controllers/contactController.js';
|
||||
|
||||
class ContactController {
|
||||
constructor() {
|
||||
this.addContactMessage = this.addContactMessage.bind(this);
|
||||
}
|
||||
const router = Router();
|
||||
const contactController = new ContactController();
|
||||
|
||||
async addContactMessage(req, res) {
|
||||
try {
|
||||
const { email, name, message, acceptDataSave } = req.body;
|
||||
await ContactService.addContactMessage(email, name, message, acceptDataSave);
|
||||
res.status(200).json({ status: 'ok' });
|
||||
} catch (error) {
|
||||
res.status(409).json({ error: error.message });
|
||||
}
|
||||
}
|
||||
}
|
||||
router.post('/', contactController.addContactMessage);
|
||||
|
||||
export default ContactController;
|
||||
export default router;
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import express from 'express';
|
||||
import { authenticate } from '../middleware/authMiddleware.js';
|
||||
import SocialNetworkController from '../controllers/socialnetworkController.js';
|
||||
import multer from 'multer';
|
||||
const upload = multer();
|
||||
|
||||
const router = express.Router();
|
||||
const socialNetworkController = new SocialNetworkController();
|
||||
@@ -10,8 +12,10 @@ router.get('/profile/:userId', authenticate, socialNetworkController.profile);
|
||||
router.post('/folders', authenticate, socialNetworkController.createFolder);
|
||||
router.get('/folders', authenticate, socialNetworkController.getFolders);
|
||||
router.get('/folder/:folderId', authenticate, socialNetworkController.getFolderImageList);
|
||||
router.post('/images', authenticate, socialNetworkController.uploadImage);
|
||||
router.post('/images', authenticate, upload.single('image'), socialNetworkController.uploadImage);
|
||||
router.get('/images/:imageId', authenticate, socialNetworkController.getImage);
|
||||
router.put('/images/:imageId', authenticate, socialNetworkController.changeImage);
|
||||
router.get('/imagevisibilities', authenticate, socialNetworkController.getImageVisibilityTypes);
|
||||
router.get('/image/:hash', authenticate, socialNetworkController.getImageByHash);
|
||||
|
||||
export default router;
|
||||
|
||||
@@ -10,6 +10,14 @@ import Folder from '../models/community/folder.js';
|
||||
import Image from '../models/community/image.js';
|
||||
import ImageVisibilityType from '../models/type/image_visibility.js';
|
||||
import FolderImageVisibility from '../models/community/folder_image_visibility.js';
|
||||
import ImageImageVisibility from '../models/community/image_image_visibility.js';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
|
||||
class SocialNetworkService extends BaseService {
|
||||
async searchUsers({ username, ageFrom, ageTo, genders }) {
|
||||
@@ -95,15 +103,81 @@ class SocialNetworkService extends BaseService {
|
||||
return await Image.findAll({
|
||||
where: {
|
||||
folderId: folder.id
|
||||
}
|
||||
},
|
||||
order: [
|
||||
['title', 'asc']
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
async uploadImage(hashedId, imageData) {
|
||||
this.validateImageData(imageData);
|
||||
const userId = await this.checkUserAccess(hashedId);
|
||||
imageData.id = userId;
|
||||
return await Image.create(imageData);
|
||||
async uploadImage(hashedId, file, formData) {
|
||||
const userId = await this.getUserId(hashedId);
|
||||
const newFileName = this.generateUniqueFileName(file.originalname);
|
||||
const filePath = this.buildFilePath(newFileName);
|
||||
await this.saveFile(file.buffer, filePath);
|
||||
const newImage = await this.createImageRecord(formData, userId, file, newFileName);
|
||||
await this.saveImageVisibilities(newImage.id, formData.visibility);
|
||||
return newImage;
|
||||
}
|
||||
|
||||
async getUserId(hashedId) {
|
||||
return await this.checkUserAccess(hashedId);
|
||||
}
|
||||
|
||||
generateUniqueFileName(originalFileName) {
|
||||
const uniqueHash = uuidv4();
|
||||
return `${uniqueHash}`;
|
||||
}
|
||||
|
||||
buildFilePath(fileName) {
|
||||
const userImagesPath = path.join(__dirname, '../images/user');
|
||||
return path.join(userImagesPath, fileName);
|
||||
}
|
||||
|
||||
async saveFile(buffer, filePath) {
|
||||
try {
|
||||
await fs.mkdir(path.dirname(filePath), { recursive: true });
|
||||
await fs.writeFile(filePath, buffer);
|
||||
} catch (error) {
|
||||
throw new Error(`Failed to save file: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async createImageRecord(formData, userId, file, fileName) {
|
||||
try {
|
||||
return await Image.create({
|
||||
title: formData.title,
|
||||
description: formData.description || null,
|
||||
originalFileName: file.originalname,
|
||||
hash: fileName,
|
||||
folderId: formData.folderId,
|
||||
userId: userId,
|
||||
});
|
||||
} catch (error) {
|
||||
throw new Error(`Failed to create image record: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async saveImageVisibilities(imageId, visibilities) {
|
||||
if (typeof visibilities === 'string') {
|
||||
visibilities = JSON.parse(visibilities);
|
||||
}
|
||||
if (!visibilities || !Array.isArray(visibilities)) {
|
||||
throw new Error('Invalid visibilities provided');
|
||||
}
|
||||
|
||||
try {
|
||||
const visibilityPromises = visibilities.map(visibilityId => {
|
||||
return ImageImageVisibility.create({
|
||||
imageId: imageId,
|
||||
visibilityTypeId: visibilityId
|
||||
});
|
||||
});
|
||||
|
||||
await Promise.all(visibilityPromises);
|
||||
} catch (error) {
|
||||
throw new Error(`Failed to save image visibilities: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async getImage(imageId) {
|
||||
@@ -255,6 +329,51 @@ class SocialNetworkService extends BaseService {
|
||||
async getPossibleImageVisibilities() {
|
||||
return await ImageVisibilityType.findAll();
|
||||
}
|
||||
|
||||
async getImageFilePath(hashedUserId, hash) {
|
||||
const image = await Image.findOne({ where: { hash } });
|
||||
if (!image) {
|
||||
throw new Error('Image not found');
|
||||
}
|
||||
const userId = await this.checkUserAccess(hashedUserId);
|
||||
const hasAccess = await this.checkUserImageAccess(userId, image.id);
|
||||
if (!hasAccess) {
|
||||
throw new Error('Access denied');
|
||||
}
|
||||
const imagePath = this.buildFilePath(image.hash);
|
||||
if (!fs.existsSync(imagePath)) {
|
||||
throw new Error('File not found');
|
||||
}
|
||||
return imagePath;
|
||||
}
|
||||
|
||||
async checkUserImageAccess(userId, imageId) {
|
||||
const image = await Image.findByPk(imageId);
|
||||
if (image.userId === userId) {
|
||||
return true;
|
||||
}
|
||||
const accessRules = await ImageImageVisibility.findAll({
|
||||
where: { imageId }
|
||||
});
|
||||
return accessRules.some(rule => {
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
async changeImage(hashedUserId, imageId, title, visibilities) {
|
||||
const userId = await this.checkUserAccess(hashedUserId);
|
||||
await this.checkUserImageAccess(userId, imageId);
|
||||
const image = await Image.findOne({ where: { id: imageId } });
|
||||
if (!image) {
|
||||
throw new Error('image not found')
|
||||
}
|
||||
await image.update({ title: title });
|
||||
await ImageImageVisibility.destroy({ where: { imageId } });
|
||||
for (const visibility of visibilities) {
|
||||
await ImageImageVisibility.create({ imageId, visibilityTypeId: visibility.id });
|
||||
}
|
||||
return image.folderId;
|
||||
}
|
||||
}
|
||||
|
||||
export default SocialNetworkService;
|
||||
|
||||
@@ -55,6 +55,7 @@ button:hover {
|
||||
|
||||
h1, h2, h3 {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.multiselect__option--highlight,
|
||||
|
||||
@@ -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"> </span>
|
||||
</template>
|
||||
<span v-if="isLastItem" class="end-marker marker">⌞</span>
|
||||
<span v-else class="marker">├</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)">
|
||||
<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>
|
||||
|
||||
107
frontend/src/dialogues/socialnetwork/ImageDialog.vue
Normal file
107
frontend/src/dialogues/socialnetwork/ImageDialog.vue
Normal file
@@ -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>
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user