Use folderName and a loader when retriving data

This commit is contained in:
omaroughriss 2025-10-21 16:10:47 +02:00
parent 2c3b627aaa
commit 1cf45b83ae

View File

@ -181,6 +181,7 @@ export default function FoldersPage() {
const [folderProcesses, setFolderProcesses] = useState<any>(null) const [folderProcesses, setFolderProcesses] = useState<any>(null)
const [myFolderProcesses, setMyFolderProcesses] = useState<string[]>([]) const [myFolderProcesses, setMyFolderProcesses] = useState<string[]>([])
const [folderPrivateData, setFolderPrivateData] = useState<Record<string, Record<string, any>>>({}) const [folderPrivateData, setFolderPrivateData] = useState<Record<string, Record<string, any>>>({})
const [loadingFolders, setLoadingFolders] = useState(false)
// Modal states // Modal states
const [inviteMessage, setInviteMessage] = useState("") const [inviteMessage, setInviteMessage] = useState("")
@ -418,43 +419,54 @@ export default function FoldersPage() {
if (!folderProcesses) return; if (!folderProcesses) return;
const folderData: FolderData[] = []; const folderData: FolderData[] = [];
let hasAllPrivateData = true;
let hasFoldersToLoad = false;
Object.entries(folderProcesses).forEach(([processId, process]: [string, any]) => { Object.entries(folderProcesses).forEach(([processId, process]: [string, any]) => {
// Only include processes that belong to the user (myFolderProcesses) // Only include processes that belong to the user (myFolderProcesses)
if (!myFolderProcesses.includes(processId)) return; if (!myFolderProcesses.includes(processId)) return;
// Check if this process has a folderNumber in pcd_commitment // Check if this process has a folderNumber in pcd_commitment
const latestState = process.states[process.states.length - 2]; // -2 because last state is empty const latestState = process.states[0]; // -2 because last state is empty
if (!latestState) return; if (!latestState) return;
const folderNumber = latestState.pcd_commitment?.folderNumber; const folderNumber = latestState.pcd_commitment?.folderNumber;
if (!folderNumber) return; // Skip processes without folderNumber if (!folderNumber) return; // Skip processes without folderNumber
hasFoldersToLoad = true; // We have at least one folder to load
// Get private data for this state if available // Get private data for this state if available
const privateData = folderPrivateData[latestState.state_id] || {}; const privateData = folderPrivateData[latestState.state_id];
// Create folder data from process data // If we don't have private data yet, trigger fetch and mark as incomplete
if (!privateData) {
hasAllPrivateData = false;
setTimeout(() => fetchFolderPrivateData(processId, latestState.state_id), 0);
return; // Skip creating folder until we have private data
}
// Only create folder when we have private data
const folder: FolderData = { const folder: FolderData = {
id: parseInt(folderNumber) || Math.floor(Math.random() * 10000), id: parseInt(folderNumber) || Math.floor(Math.random() * 10000),
name: latestState.public_data?.name || privateData?.name || `Dossier ${folderNumber}`, name: privateData.name || `Dossier ${folderNumber}`,
description: latestState.public_data?.description || privateData?.description || '', description: privateData.description || '',
documentsCount: latestState.public_data?.documentsCount || privateData?.documentsCount || 0, documentsCount: privateData.documentsCount || 0,
subfoldersCount: latestState.public_data?.subfoldersCount || privateData?.subfoldersCount || 0, subfoldersCount: privateData.subfoldersCount || 0,
size: latestState.public_data?.size || privateData?.size || '0 MB', size: privateData.size || '0 MB',
created: new Date(latestState.public_data?.created || privateData?.created || Date.now()), created: new Date(privateData.created || Date.now()),
modified: new Date(latestState.public_data?.modified || privateData?.modified || Date.now()), modified: new Date(privateData.modified || Date.now()),
owner: latestState.public_data?.owner || privateData?.owner || 'Propriétaire 4NK', owner: privateData.owner || 'Propriétaire 4NK',
access: (latestState.public_data?.access || privateData?.access || 'private') as 'shared' | 'private', access: (privateData.access || 'private') as 'shared' | 'private',
members: latestState.public_data?.members || privateData?.members || [], members: privateData.members || [],
tags: latestState.public_data?.tags || privateData?.tags || [], tags: privateData.tags || [],
color: latestState.public_data?.color || privateData?.color || 'blue', color: privateData.color || 'blue',
favorite: latestState.public_data?.favorite || privateData?.favorite || false, favorite: privateData.favorite || false,
storageType: (latestState.public_data?.storageType || privateData?.storageType || 'temporary') as 'temporary' | 'permanent', storageType: (privateData.storageType || 'temporary') as 'temporary' | 'permanent',
status: (latestState.public_data?.status || privateData?.status || 'active') as 'active' | 'archived' | 'pending' | 'completed' | 'validated', status: (privateData.status || 'active') as 'active' | 'archived' | 'pending' | 'completed' | 'validated',
type: latestState.public_data?.type || privateData?.type || 'general', type: privateData.type || 'general',
expectedDocuments: latestState.public_data?.expectedDocuments || privateData?.expectedDocuments || [], expectedDocuments: privateData.expectedDocuments || [],
activity: latestState.public_data?.activity || privateData?.activity || [], activity: privateData.activity || [],
permissions: latestState.public_data?.permissions || privateData?.permissions || { permissions: privateData.permissions || {
canView: true, canView: true,
canEdit: true, // User owns this process canEdit: true, // User owns this process
canDelete: true, // User owns this process canDelete: true, // User owns this process
@ -462,33 +474,45 @@ export default function FoldersPage() {
canArchive: true, // User owns this process canArchive: true, // User owns this process
canAnalyze: true, canAnalyze: true,
}, },
temporaryStorageConfig: latestState.public_data?.temporaryStorageConfig || privateData?.temporaryStorageConfig, temporaryStorageConfig: privateData.temporaryStorageConfig,
documents: latestState.public_data?.documents || privateData?.documents || [], documents: privateData.documents || [],
}; };
folderData.push(folder); folderData.push(folder);
// Fetch private data if we don't have it yet (we know this is the user's process)
if (!folderPrivateData[latestState.state_id]) {
setTimeout(() => fetchFolderPrivateData(processId, latestState.state_id), 0);
}
}); });
setFolders(folderData); // Manage loading state
if (hasFoldersToLoad && !hasAllPrivateData) {
// Update stats setLoadingFolders(true);
setStats({ } else if (hasAllPrivateData) {
total: folderData.length, setLoadingFolders(false);
shared: folderData.filter((folder) => folder.access === "shared").length, setFolders(folderData);
private: folderData.filter((folder) => folder.access === "private").length,
thisWeek: folderData.filter((folder) => { // Update stats
const weekAgo = new Date() setStats({
weekAgo.setDate(weekAgo.getDate() - 7) total: folderData.length,
return folder.modified > weekAgo shared: folderData.filter((folder) => folder.access === "shared").length,
}).length, private: folderData.filter((folder) => folder.access === "private").length,
permanent: folderData.filter((folder) => folder.storageType === "permanent").length, thisWeek: folderData.filter((folder) => {
temporary: folderData.filter((folder) => folder.storageType === "temporary").length, const weekAgo = new Date()
}); weekAgo.setDate(weekAgo.getDate() - 7)
return folder.modified > weekAgo
}).length,
permanent: folderData.filter((folder) => folder.storageType === "permanent").length,
temporary: folderData.filter((folder) => folder.storageType === "temporary").length,
});
} else if (!hasFoldersToLoad) {
setLoadingFolders(false);
setFolders([]);
setStats({
total: 0,
shared: 0,
private: 0,
thisWeek: 0,
permanent: 0,
temporary: 0,
});
}
}, [folderProcesses, myFolderProcesses, folderPrivateData, iframeUrl]); }, [folderProcesses, myFolderProcesses, folderPrivateData, iframeUrl]);
useEffect(() => { useEffect(() => {
@ -539,6 +563,7 @@ export default function FoldersPage() {
setMyFolderProcesses([]); setMyFolderProcesses([]);
setFolderPrivateData({}); setFolderPrivateData({});
setFolders([]); setFolders([]);
setLoadingFolders(false);
// Émettre un événement pour vider les messages locaux // Émettre un événement pour vider les messages locaux
EventBus.getInstance().emit('CLEAR_CONSOLE'); EventBus.getInstance().emit('CLEAR_CONSOLE');
@ -1766,7 +1791,15 @@ export default function FoldersPage() {
</div> </div>
)} )}
{filteredFolders.length === 0 && ( {loadingFolders && isConnected && (
<div className="text-center py-12">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
<h3 className="text-lg font-medium text-gray-100 mb-2">Chargement des dossiers...</h3>
<p className="text-gray-400">Récupération des données privées depuis 4NK</p>
</div>
)}
{!loadingFolders && filteredFolders.length === 0 && (
<div className="text-center py-12"> <div className="text-center py-12">
<Folder className="h-12 w-12 mx-auto text-gray-500 mb-4" /> <Folder className="h-12 w-12 mx-auto text-gray-500 mb-4" />
<h3 className="text-lg font-medium text-gray-100 mb-2">Aucun dossier trouvé</h3> <h3 className="text-lg font-medium text-gray-100 mb-2">Aucun dossier trouvé</h3>