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) => {
|
||||
if (isFileBlob(value)) {
|
||||
return (
|
||||
<div>
|
||||
<span>{key}</span>
|
||||
<button onClick={() => handleDownload(key, value)}>Download</button>
|
||||
</div>
|
||||
<button
|
||||
className="download-button"
|
||||
onClick={() => handleDownload(key, value)}
|
||||
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 => {
|
||||
if (!name) return "Nom non disponible";
|
||||
const getDataIcon = (value: any) => {
|
||||
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)) {
|
||||
if (name.length === 1 && name[0] === 96) {
|
||||
return "`"; // Caractère spécial
|
||||
}
|
||||
try {
|
||||
const chars = name.map(code => String.fromCharCode(Number(code)));
|
||||
return chars.join('');
|
||||
} catch (e) {
|
||||
return "Nom encodé (format non supporté)";
|
||||
}
|
||||
} else if (typeof name === 'string') {
|
||||
return name;
|
||||
}
|
||||
const renderDataField = (
|
||||
key: string,
|
||||
value: any,
|
||||
hash: string | undefined,
|
||||
isPrivate: boolean,
|
||||
processId: string,
|
||||
stateId: string
|
||||
) => {
|
||||
const isEditing = editingField?.key === key &&
|
||||
editingField?.processId === processId &&
|
||||
editingField?.stateId === stateId;
|
||||
|
||||
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 (
|
||||
<div className="processes-viewer">
|
||||
<h2>Processus</h2>
|
||||
<button onClick = {handleFilterClick}>
|
||||
<button onClick={handleFilterClick}>
|
||||
{isFiltered ? 'Show All Processes' : 'Filter Processes'}
|
||||
</button>
|
||||
<p className="block-count">
|
||||
@ -132,11 +198,8 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
|
||||
|
||||
<div className="block-list">
|
||||
{Object.entries(processes).map(([processId, process]) => {
|
||||
if (isFiltered) {
|
||||
// skip processes that are not in myProcesses
|
||||
if (!myProcesses.includes(processId)) {
|
||||
return;
|
||||
}
|
||||
if (isFiltered && !myProcesses.includes(processId)) {
|
||||
return null;
|
||||
}
|
||||
const isExpanded = expandedBlocks.includes(processId);
|
||||
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) => {
|
||||
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 (
|
||||
<div key={`${processId}-state-${index}`} className="state-item">
|
||||
<h4>État {index + 1}</h4>
|
||||
@ -170,57 +243,27 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
|
||||
<div className="state-detail">
|
||||
<strong>Empreinte totale de l'état:</strong> {state.state_id}
|
||||
</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">
|
||||
<h5>Données privées</h5>
|
||||
<div className="private-data-item">
|
||||
{!myProcesses.includes(processId) ? (
|
||||
<div className="no-data-message">
|
||||
Vous n'avez pas accès aux données privées de ce processus
|
||||
</div>
|
||||
) : !privateData[state.state_id] ? (
|
||||
(() => {
|
||||
fetchPrivateData(processId, state.state_id);
|
||||
return <div>Chargement...</div>;
|
||||
})()
|
||||
) : 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="data-fields-container">
|
||||
{/* Public Data */}
|
||||
{Object.entries(state.public_data).map(([key, value]) =>
|
||||
renderDataField(key, value, state.pcd_commitment[key], false, processId, state.state_id)
|
||||
)}
|
||||
|
||||
{/* Private Data */}
|
||||
{myProcesses.includes(processId) ? (
|
||||
Object.keys(statePrivateData).length > 0 ? (
|
||||
Object.entries(statePrivateData).map(([key, value]) =>
|
||||
renderDataField(key, value, state.pcd_commitment[key], true, processId, state.state_id)
|
||||
)
|
||||
) : (
|
||||
<div className="no-data-message">
|
||||
Aucune donnée privée disponible
|
||||
</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 className="loading-message">Chargement des données privées...</div>
|
||||
)
|
||||
) : (
|
||||
<div className="no-access-message">
|
||||
🔒 Vous n'avez pas accès aux données privées de ce processus
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -233,7 +276,7 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
ProcessesViewer.displayName = 'ProcessesViewer';
|
||||
export default memo(ProcessesViewer);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user