Display private data
This commit is contained in:
Sosthene
parent
334f548cbb
commit
1dee8b9ef6
@ -89,39 +89,105 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
|
|||||||
const formatValue = (key: string, value: string | number[] | FileBlob) => {
|
const formatValue = (key: string, value: string | number[] | FileBlob) => {
|
||||||
if (isFileBlob(value)) {
|
if (isFileBlob(value)) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<button
|
||||||
<span>{key}</span>
|
className="download-button"
|
||||||
<button onClick={() => handleDownload(key, value)}>Download</button>
|
onClick={() => handleDownload(key, value)}
|
||||||
</div>
|
title="Télécharger le fichier"
|
||||||
|
>
|
||||||
|
📥 Télécharger
|
||||||
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return JSON.stringify(value || ''); // TODO handle most common cases
|
return JSON.stringify(value || '');
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatName = (name: string | number[] | undefined): string => {
|
const getDataIcon = (value: any) => {
|
||||||
if (!name) return "Nom non disponible";
|
if (isFileBlob(value)) return '📄';
|
||||||
|
if (typeof value === 'string') return '📝';
|
||||||
|
if (typeof value === 'number') return '🔢';
|
||||||
|
if (Array.isArray(value)) return '📋';
|
||||||
|
if (typeof value === 'boolean') return '✅';
|
||||||
|
return '📦'; // object
|
||||||
|
};
|
||||||
|
|
||||||
if (Array.isArray(name)) {
|
const renderDataField = (
|
||||||
if (name.length === 1 && name[0] === 96) {
|
key: string,
|
||||||
return "`"; // Caractère spécial
|
value: any,
|
||||||
}
|
hash: string | undefined,
|
||||||
try {
|
isPrivate: boolean,
|
||||||
const chars = name.map(code => String.fromCharCode(Number(code)));
|
processId: string,
|
||||||
return chars.join('');
|
stateId: string
|
||||||
} catch (e) {
|
) => {
|
||||||
return "Nom encodé (format non supporté)";
|
const isEditing = editingField?.key === key &&
|
||||||
}
|
editingField?.processId === processId &&
|
||||||
} else if (typeof name === 'string') {
|
editingField?.stateId === stateId;
|
||||||
return name;
|
|
||||||
}
|
|
||||||
|
|
||||||
return "Format de nom inconnu";
|
const handleFieldClick = (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="data-field"
|
||||||
|
key={key}
|
||||||
|
onClick={handleFieldClick}
|
||||||
|
onMouseDown={handleFieldClick}
|
||||||
|
>
|
||||||
|
<div className="data-field-header">
|
||||||
|
<span className="data-type-icon" title={isPrivate ? 'Donnée privée' : 'Donnée publique'}>
|
||||||
|
{isPrivate ? '🔒' : '🌐'}
|
||||||
|
</span>
|
||||||
|
<span className="data-value-icon">{getDataIcon(value)}</span>
|
||||||
|
<span className="data-label">{key}</span>
|
||||||
|
<button
|
||||||
|
className="field-update-button"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
setEditingField({ processId, stateId, key, value });
|
||||||
|
}}
|
||||||
|
title="Mettre à jour cette valeur"
|
||||||
|
>
|
||||||
|
{isEditing ? '✕' : '🔄'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="data-field-content"
|
||||||
|
onClick={handleFieldClick}
|
||||||
|
onMouseDown={handleFieldClick}
|
||||||
|
>
|
||||||
|
{isEditing ? (
|
||||||
|
<div onClick={handleFieldClick} onMouseDown={handleFieldClick}>
|
||||||
|
{renderEditForm(
|
||||||
|
key,
|
||||||
|
value,
|
||||||
|
async (newValue) => {
|
||||||
|
await handleFieldUpdate(processId, stateId, key, newValue);
|
||||||
|
setEditingField(null);
|
||||||
|
},
|
||||||
|
() => setEditingField(null)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{formatValue(key, value)}
|
||||||
|
{hash && (
|
||||||
|
<div className="hash-tooltip" title={`Hash: ${hash}`}>
|
||||||
|
🔑
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="processes-viewer">
|
<div className="processes-viewer">
|
||||||
<h2>Processus</h2>
|
<h2>Processus</h2>
|
||||||
<button onClick = {handleFilterClick}>
|
<button onClick={handleFilterClick}>
|
||||||
{isFiltered ? 'Show All Processes' : 'Filter Processes'}
|
{isFiltered ? 'Show All Processes' : 'Filter Processes'}
|
||||||
</button>
|
</button>
|
||||||
<p className="block-count">
|
<p className="block-count">
|
||||||
@ -132,11 +198,8 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
|
|||||||
|
|
||||||
<div className="block-list">
|
<div className="block-list">
|
||||||
{Object.entries(processes).map(([processId, process]) => {
|
{Object.entries(processes).map(([processId, process]) => {
|
||||||
if (isFiltered) {
|
if (isFiltered && !myProcesses.includes(processId)) {
|
||||||
// skip processes that are not in myProcesses
|
return null;
|
||||||
if (!myProcesses.includes(processId)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
const isExpanded = expandedBlocks.includes(processId);
|
const isExpanded = expandedBlocks.includes(processId);
|
||||||
const stateCount = process.states.length - 1; // We just ignore the last state, which is always empty
|
const stateCount = process.states.length - 1; // We just ignore the last state, which is always empty
|
||||||
@ -161,6 +224,16 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
|
|||||||
|
|
||||||
{process.states.map((state, index) => {
|
{process.states.map((state, index) => {
|
||||||
if (index === stateCount) return null;
|
if (index === stateCount) return null;
|
||||||
|
|
||||||
|
// Fetch private data if needed
|
||||||
|
if (myProcesses.includes(processId) && !privateData[state.state_id]) {
|
||||||
|
console.log('Fetching private data for state:', state.state_id);
|
||||||
|
fetchPrivateData(processId, state.state_id);
|
||||||
|
}
|
||||||
|
|
||||||
|
const statePrivateData = privateData[state.state_id] || {};
|
||||||
|
console.log(statePrivateData);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={`${processId}-state-${index}`} className="state-item">
|
<div key={`${processId}-state-${index}`} className="state-item">
|
||||||
<h4>État {index + 1}</h4>
|
<h4>État {index + 1}</h4>
|
||||||
@ -170,59 +243,29 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
|
|||||||
<div className="state-detail">
|
<div className="state-detail">
|
||||||
<strong>Empreinte totale de l'état:</strong> {state.state_id}
|
<strong>Empreinte totale de l'état:</strong> {state.state_id}
|
||||||
</div>
|
</div>
|
||||||
<div className="state-detail">
|
|
||||||
<strong>Empreinte par information:</strong>
|
|
||||||
<ul>
|
|
||||||
{Object.entries(state.pcd_commitment).map(([key, value]) => (
|
|
||||||
<div key={key}>
|
|
||||||
<strong>{key}:</strong> {value}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="state-private-data">
|
<div className="data-fields-container">
|
||||||
<h5>Données privées</h5>
|
{/* Public Data */}
|
||||||
<div className="private-data-item">
|
{Object.entries(state.public_data).map(([key, value]) =>
|
||||||
{!myProcesses.includes(processId) ? (
|
renderDataField(key, value, state.pcd_commitment[key], false, processId, state.state_id)
|
||||||
<div className="no-data-message">
|
)}
|
||||||
Vous n'avez pas accès aux données privées de ce processus
|
|
||||||
</div>
|
{/* Private Data */}
|
||||||
) : !privateData[state.state_id] ? (
|
{myProcesses.includes(processId) ? (
|
||||||
(() => {
|
Object.keys(statePrivateData).length > 0 ? (
|
||||||
fetchPrivateData(processId, state.state_id);
|
Object.entries(statePrivateData).map(([key, value]) =>
|
||||||
return <div>Chargement...</div>;
|
renderDataField(key, value, state.pcd_commitment[key], true, processId, state.state_id)
|
||||||
})()
|
)
|
||||||
) : Object.keys(privateData[state.state_id]).length > 0 ? (
|
|
||||||
Object.entries(privateData[state.state_id]).map(([key, value]) => (
|
|
||||||
<div key={key}>
|
|
||||||
<strong>{key}:</strong> {formatValue(key, value)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : (
|
) : (
|
||||||
<div className="no-data-message">
|
<div className="loading-message">Chargement des données privées...</div>
|
||||||
Aucune donnée privée disponible
|
)
|
||||||
|
) : (
|
||||||
|
<div className="no-access-message">
|
||||||
|
🔒 Vous n'avez pas accès aux données privées de ce processus
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="state-public-data">
|
|
||||||
<h5>Données publiques</h5>
|
|
||||||
<div className="public-data-item">
|
|
||||||
{Object.keys(state.public_data).length > 0 ? (
|
|
||||||
Object.entries(state.public_data).map(([key, value]) => (
|
|
||||||
<div key={key}>
|
|
||||||
<strong>{key}:</strong> {formatValue(key, value)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<div className="no-data-message">
|
|
||||||
Aucune donnée publique disponible
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
@ -233,7 +276,7 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
ProcessesViewer.displayName = 'ProcessesViewer';
|
ProcessesViewer.displayName = 'ProcessesViewer';
|
||||||
export default memo(ProcessesViewer);
|
export default memo(ProcessesViewer);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user