305 lines
9.8 KiB
TypeScript
305 lines
9.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Folder, FileText, Upload, FolderPlus, Trash2, Loader2, ChevronRight } from 'lucide-react';
|
|
|
|
interface MissionFile {
|
|
type: 'folder' | 'file';
|
|
name: string;
|
|
path: string;
|
|
key: string;
|
|
size?: number;
|
|
lastModified?: string;
|
|
}
|
|
|
|
interface MissionUser {
|
|
role: string;
|
|
userId: string;
|
|
}
|
|
|
|
interface Mission {
|
|
id: string;
|
|
name: string;
|
|
creatorId: string;
|
|
isClosed?: boolean;
|
|
missionUsers?: MissionUser[];
|
|
}
|
|
|
|
interface MissionFilesManagerProps {
|
|
mission: Mission;
|
|
currentUserId: string;
|
|
currentPath?: string;
|
|
onFileSelect?: (file: MissionFile) => void;
|
|
selectedFileKey?: string;
|
|
}
|
|
|
|
export const MissionFilesManager: React.FC<MissionFilesManagerProps> = ({
|
|
mission,
|
|
currentUserId,
|
|
currentPath = 'attachments',
|
|
onFileSelect,
|
|
selectedFileKey
|
|
}) => {
|
|
const [files, setFiles] = useState<MissionFile[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isUploading, setIsUploading] = useState(false);
|
|
const [newFolderName, setNewFolderName] = useState('');
|
|
const [showNewFolder, setShowNewFolder] = useState(false);
|
|
|
|
// Check user permissions
|
|
const isCreator = mission.creatorId === currentUserId;
|
|
const userRole = mission.missionUsers?.find(mu => mu.userId === currentUserId)?.role;
|
|
const isGardien = userRole === 'gardien-temps' || userRole === 'gardien-parole' || userRole === 'gardien-memoire';
|
|
const isClosed = mission.isClosed || false;
|
|
const canManage = (isCreator || isGardien) && !isClosed; // Cannot manage if mission is closed
|
|
|
|
const fetchFiles = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
const url = `/api/missions/${mission.id}/files${currentPath ? `?path=${encodeURIComponent(currentPath)}` : ''}`;
|
|
const response = await fetch(url);
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch files');
|
|
}
|
|
|
|
const data = await response.json();
|
|
// API returns { folders: [], files: [] } or { files: [] }
|
|
setFiles(data.files || []);
|
|
} catch (err) {
|
|
console.error('Error fetching mission files:', err);
|
|
setError(err instanceof Error ? err.message : 'Failed to load files');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!mission.id) return;
|
|
fetchFiles();
|
|
}, [mission.id, currentPath]);
|
|
|
|
const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
if (!file || !canManage) return;
|
|
|
|
try {
|
|
setIsUploading(true);
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
formData.append('missionId', mission.id);
|
|
formData.append('path', currentPath);
|
|
|
|
const response = await fetch(`/api/missions/${mission.id}/files/upload`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json().catch(() => ({}));
|
|
const errorMessage = errorData.details || errorData.error || 'Failed to upload file';
|
|
throw new Error(errorMessage);
|
|
}
|
|
|
|
// Refresh file list
|
|
await fetchFiles();
|
|
} catch (err) {
|
|
console.error('Error uploading file:', err);
|
|
setError(err instanceof Error ? err.message : 'Failed to upload file');
|
|
} finally {
|
|
setIsUploading(false);
|
|
// Reset input
|
|
event.target.value = '';
|
|
}
|
|
};
|
|
|
|
const handleCreateFolder = async () => {
|
|
if (!newFolderName.trim() || !canManage) return;
|
|
|
|
try {
|
|
setIsLoading(true);
|
|
const folderPath = currentPath ? `${currentPath}/${newFolderName}` : newFolderName;
|
|
|
|
const response = await fetch(`/api/missions/${mission.id}/files/folder`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ path: folderPath })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to create folder');
|
|
}
|
|
|
|
// Refresh file list
|
|
await fetchFiles();
|
|
|
|
setNewFolderName('');
|
|
setShowNewFolder(false);
|
|
} catch (err) {
|
|
console.error('Error creating folder:', err);
|
|
setError(err instanceof Error ? err.message : 'Failed to create folder');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (file: MissionFile) => {
|
|
if (!canManage || !confirm(`Êtes-vous sûr de vouloir supprimer ${file.name} ?`)) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/missions/${mission.id}/files`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ key: file.key })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to delete');
|
|
}
|
|
|
|
// Refresh file list
|
|
await fetchFiles();
|
|
} catch (err) {
|
|
console.error('Error deleting file:', err);
|
|
setError(err instanceof Error ? err.message : 'Failed to delete');
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full">
|
|
<Loader2 className="h-6 w-6 animate-spin text-carnet-text-muted" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="text-center">
|
|
<p className="text-red-500 mb-2">Erreur</p>
|
|
<p className="text-carnet-text-muted text-sm">{error}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-carnet-bg">
|
|
<div className="p-4 border-b border-carnet-border">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center space-x-2">
|
|
<Folder className="h-5 w-5 text-carnet-text-primary" />
|
|
<h2 className="text-lg font-semibold text-carnet-text-primary">
|
|
{currentPath || 'Fichiers'}
|
|
</h2>
|
|
</div>
|
|
{canManage && (
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={() => setShowNewFolder(!showNewFolder)}
|
|
className="p-2 text-carnet-text-primary hover:bg-carnet-hover rounded-md"
|
|
title="Créer un dossier"
|
|
>
|
|
<FolderPlus className="h-5 w-5" />
|
|
</button>
|
|
<label className="p-2 text-carnet-text-primary hover:bg-carnet-hover rounded-md cursor-pointer">
|
|
<Upload className="h-5 w-5" />
|
|
<input
|
|
type="file"
|
|
className="hidden"
|
|
onChange={handleFileUpload}
|
|
disabled={isUploading}
|
|
/>
|
|
</label>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{showNewFolder && canManage && (
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="text"
|
|
value={newFolderName}
|
|
onChange={(e) => setNewFolderName(e.target.value)}
|
|
onKeyPress={(e) => e.key === 'Enter' && handleCreateFolder()}
|
|
placeholder="Nom du dossier"
|
|
className="flex-1 px-3 py-2 border border-carnet-border rounded-md text-sm text-carnet-text-primary bg-white focus:outline-none focus:ring-1 focus:ring-primary"
|
|
/>
|
|
<button
|
|
onClick={handleCreateFolder}
|
|
className="px-4 py-2 bg-primary text-white rounded-md text-sm hover:bg-primary/90"
|
|
>
|
|
Créer
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setShowNewFolder(false);
|
|
setNewFolderName('');
|
|
}}
|
|
className="px-4 py-2 border border-carnet-border rounded-md text-sm text-carnet-text-primary hover:bg-carnet-hover"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
{files.length === 0 ? (
|
|
<div className="flex items-center justify-center h-full">
|
|
<p className="text-carnet-text-muted">Aucun fichier</p>
|
|
</div>
|
|
) : (
|
|
<ul className="divide-y divide-carnet-border">
|
|
{files.map((file) => {
|
|
const Icon = file.type === 'folder' ? Folder : FileText;
|
|
return (
|
|
<li
|
|
key={file.key}
|
|
className={`p-4 hover:bg-carnet-hover flex items-center justify-between group ${
|
|
selectedFileKey === file.key ? 'bg-carnet-hover' : ''
|
|
}`}
|
|
>
|
|
<div
|
|
className="flex items-center space-x-2 flex-1 cursor-pointer"
|
|
onClick={() => onFileSelect?.(file)}
|
|
>
|
|
<Icon className="h-4 w-4 text-carnet-text-muted" />
|
|
<span className="text-sm text-carnet-text-primary">{file.name}</span>
|
|
{file.type === 'folder' && (
|
|
<ChevronRight className="h-4 w-4 text-carnet-text-muted" />
|
|
)}
|
|
</div>
|
|
{canManage && (
|
|
<button
|
|
onClick={() => handleDelete(file)}
|
|
className="p-2 text-red-500 hover:bg-red-50 rounded-md opacity-0 group-hover:opacity-100 transition-opacity"
|
|
title="Supprimer"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
{isUploading && (
|
|
<div className="p-4 border-t border-carnet-border">
|
|
<div className="flex items-center space-x-2 text-carnet-text-muted">
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
<span className="text-sm">Upload en cours...</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|