feat: Add comprehensive system enhancements
- Add version display above storage consumption in admin sidebar - Fix storage consumption to stick to bottom of window using flexbox - Add user upload settings to events (allow uploads, category selection) - Enhance disk space tab to comprehensive system status view - Add localized date formatting for German/English language support - Remove quick actions from dashboard for cleaner interface - Create user photo upload functionality for galleries - Add database migration for user upload settings - Update all TypeScript types and interfaces 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,224 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Upload, X, CheckCircle } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Button, Card, CardContent } from '../common';
|
||||
import { api } from '../../config/api';
|
||||
|
||||
interface UserPhotoUploadProps {
|
||||
eventId: number;
|
||||
categoryId: number | null | undefined;
|
||||
onUploadComplete: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const UserPhotoUpload: React.FC<UserPhotoUploadProps> = ({
|
||||
eventId,
|
||||
categoryId,
|
||||
onUploadComplete,
|
||||
onClose,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState<{ [key: string]: number }>({});
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFiles = Array.from(e.target.files || []);
|
||||
|
||||
// Validate file types
|
||||
const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
|
||||
const validFiles = selectedFiles.filter(file => {
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
toast.error(`Invalid file type: ${file.name}`);
|
||||
return false;
|
||||
}
|
||||
// Check file size (50MB max)
|
||||
if (file.size > 50 * 1024 * 1024) {
|
||||
toast.error(`File too large: ${file.name}`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
setFiles(prev => [...prev, ...validFiles]);
|
||||
};
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
setFiles(prev => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (files.length === 0) return;
|
||||
|
||||
setUploading(true);
|
||||
let successCount = 0;
|
||||
let failedCount = 0;
|
||||
|
||||
for (const file of files) {
|
||||
const formData = new FormData();
|
||||
formData.append('photos', file);
|
||||
if (categoryId) {
|
||||
formData.append('category_id', categoryId.toString());
|
||||
}
|
||||
|
||||
try {
|
||||
await api.post(`/api/gallery/${eventId}/upload`, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
onUploadProgress: (progressEvent) => {
|
||||
if (progressEvent.total) {
|
||||
const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
|
||||
setUploadProgress(prev => ({
|
||||
...prev,
|
||||
[file.name]: progress,
|
||||
}));
|
||||
}
|
||||
},
|
||||
});
|
||||
successCount++;
|
||||
} catch (error) {
|
||||
console.error(`Failed to upload ${file.name}:`, error);
|
||||
failedCount++;
|
||||
}
|
||||
}
|
||||
|
||||
setUploading(false);
|
||||
|
||||
if (successCount > 0) {
|
||||
toast.success(t('toast.uploadSuccess') + ` (${successCount} ${t('common.photos')})`);
|
||||
onUploadComplete();
|
||||
}
|
||||
|
||||
if (failedCount > 0) {
|
||||
toast.error(`${failedCount} ${t('upload.someFilesFailed')}`);
|
||||
}
|
||||
|
||||
if (failedCount === 0) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
const formatBytes = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<Card className="w-full max-w-2xl max-h-[90vh] overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-neutral-200">
|
||||
<h2 className="text-xl font-semibold text-neutral-900">{t('upload.uploadPhotos')}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-neutral-100 rounded-lg transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5 text-neutral-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 overflow-y-auto" style={{ maxHeight: 'calc(90vh - 200px)' }}>
|
||||
{/* Upload Area */}
|
||||
<div className="mb-6">
|
||||
<label className="block">
|
||||
<div className="border-2 border-dashed border-neutral-300 rounded-lg p-8 text-center hover:border-primary-500 transition-colors cursor-pointer">
|
||||
<Upload className="w-12 h-12 text-neutral-400 mx-auto mb-3" />
|
||||
<p className="text-sm font-medium text-neutral-700 mb-1">
|
||||
{t('upload.clickToUpload')}
|
||||
</p>
|
||||
<p className="text-xs text-neutral-500">
|
||||
{t('upload.fileRequirements')}
|
||||
</p>
|
||||
<input
|
||||
type="file"
|
||||
className="hidden"
|
||||
multiple
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
onChange={handleFileSelect}
|
||||
disabled={uploading}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Selected Files */}
|
||||
{files.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium text-neutral-700 mb-2">
|
||||
{t('upload.selectedFiles')} ({files.length})
|
||||
</h3>
|
||||
{files.map((file, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between p-3 bg-neutral-50 rounded-lg"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-neutral-900 truncate">
|
||||
{file.name}
|
||||
</p>
|
||||
<p className="text-xs text-neutral-500">
|
||||
{formatBytes(file.size)}
|
||||
</p>
|
||||
</div>
|
||||
{uploadProgress[file.name] !== undefined ? (
|
||||
<div className="flex items-center gap-2">
|
||||
{uploadProgress[file.name] === 100 ? (
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
) : (
|
||||
<div className="w-20">
|
||||
<div className="bg-neutral-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-primary-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${uploadProgress[file.name]}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => removeFile(index)}
|
||||
className="p-1 hover:bg-neutral-200 rounded transition-colors"
|
||||
disabled={uploading}
|
||||
>
|
||||
<X className="w-4 h-4 text-neutral-500" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-end gap-3 p-6 border-t border-neutral-200">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={uploading}
|
||||
>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleUpload}
|
||||
disabled={files.length === 0 || uploading}
|
||||
isLoading={uploading}
|
||||
>
|
||||
{uploading ? t('upload.uploading') : t('common.upload')} ({files.length})
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
UserPhotoUpload.displayName = 'UserPhotoUpload';
|
||||
Reference in New Issue
Block a user