4nk/skeleton
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Filter my processes in processes viewer

Browse Source
This commit is contained in:
Sosthene 2025-06-11 20:37:52 +02:00 committed by Sosthene
parent 09e8530c6a
commit 8eec5b3455
2 changed files with 59 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -169,7 +169,7 @@ function App() {
{/* Espace pour contenu supplémentaire à droite */} {/* Espace pour contenu supplémentaire à droite */}
<div className="content-area"> <div className="content-area">
{/* Affichage des blocs de la blockchain */} {/* Affichage des blocs de la blockchain */}
<BlockchainViewer processes={processes} /> <BlockchainViewer processes={processes} myProcesses={myProcesses}/>
</div> </div>
</div> </div>

98
src/components/ProcessesViewer.tsx
View File

@ -21,10 +21,16 @@ interface Processes {
interface ProcessesViewerProps { interface ProcessesViewerProps {
processes: Processes | null; processes: Processes | null;
myProcesses: string[];
} }
function ProcessesViewer({ processes }: ProcessesViewerProps) { function ProcessesViewer({ processes, myProcesses }: ProcessesViewerProps) {
const [expandedBlocks, setExpandedBlocks] = useState<string[]>([]); const [expandedBlocks, setExpandedBlocks] = useState<string[]>([]);
const [isFiltered, setIsFiltered] = useState<boolean>(false);
const handleFilterClick = () => {
setIsFiltered(prev => !prev);
};
// Si pas de données, afficher un message // Si pas de données, afficher un message
if (!processes || Object.keys(processes).length === 0) { if (!processes || Object.keys(processes).length === 0) {
@ -87,21 +93,30 @@ function ProcessesViewer({ processes }: ProcessesViewerProps) {
return ( return (
<div className="processes-viewer"> <div className="processes-viewer">
<h2>Processus</h2> <h2>Processus</h2>
<button onClick = {handleFilterClick}>
{isFiltered ? 'Show All Processes' : 'Filter Processes'}
</button>
<p className="block-count">{Object.keys(processes).length} processus disponible(s)</p> <p className="block-count">{Object.keys(processes).length} processus disponible(s)</p>
<div className="block-list"> <div className="block-list">
{Object.entries(processes).map(([blockId, block]) => { {Object.entries(processes).map(([processId, process]) => {
const isExpanded = expandedBlocks.includes(blockId); if (isFiltered) {
const stateCount = block.states.length; // skip processes that are not in myProcesses
if (!myProcesses.includes(processId)) {
return;
}
}
const isExpanded = expandedBlocks.includes(processId);
const stateCount = process.states.length - 1; // We just ignore the last state, which is always empty
// Le premier état est le plus récent // Le premier état est le plus récent
return ( return (
<div key={blockId} className="block-item"> <div key={processId} className="block-item">
<div <div
className={`block-header ${isExpanded ? 'expanded' : ''}`} className={`block-header ${isExpanded ? 'expanded' : ''}`}
onClick={() => toggleBlock(blockId)} onClick={() => toggleBlock(processId)}
> >
<div className="block-id">{blockId.substring(0, 8)}...{blockId.substring(blockId.length - 4)}</div> <div className="block-id">{processId.substring(0, 8)}...{processId.substring(processId.length - 4)}</div>
<div className="block-state-count">{stateCount} état(s)</div> <div className="block-state-count">{stateCount} état(s)</div>
<div className="block-toggle">{isExpanded ? '▼' : '▶'}</div> <div className="block-toggle">{isExpanded ? '▼' : '▶'}</div>
</div> </div>
@ -109,45 +124,48 @@ function ProcessesViewer({ processes }: ProcessesViewerProps) {
{isExpanded && ( {isExpanded && (
<div className="block-details"> <div className="block-details">
<div className="block-complete-id"> <div className="block-complete-id">
<strong>ID complet:</strong> {blockId} <strong>ID complet:</strong> {processId}
</div> </div>
{block.states.map((state, index) => ( {process.states.map((state, index) => {
<div key={`${blockId}-state-${index}`} className="state-item"> if (index === stateCount - 1) return null;
<h4>État {index + 1}</h4> return (
<div className="state-detail"> <div key={`${processId}-state-${index}`} className="state-item">
<strong>State ID:</strong> {state.state_id} <h4>État {index + 1}</h4>
</div> <div className="state-detail">
<div className="state-detail"> <strong>State ID:</strong> {state.state_id}
<strong>Commited dans:</strong> {state.commited_in}
</div>
<div className="state-public-data">
<h5>Données publiques</h5>
<div className="public-data-item">
<strong>Nom:</strong> {formatName(state.public_data.memberPublicName)}
</div> </div>
{state.public_data.pairedAddresses && ( <div className="state-detail">
<strong>Commited dans:</strong> {state.commited_in}
</div>
<div className="state-public-data">
<h5>Données publiques</h5>
<div className="public-data-item"> <div className="public-data-item">
<strong>Adresses associées:</strong> <strong>Nom:</strong> {formatName(state.public_data.memberPublicName)}
<ul className="address-list">
{Array.isArray(state.public_data.pairedAddresses) ?
(typeof state.public_data.pairedAddresses[0] === 'string' ? (
(state.public_data.pairedAddresses as string[]).map((addr, i) => (
<li key={i}>{addr}</li>
))
) : (
<li>{formatAddress(state.public_data.pairedAddresses as number[])}</li>
)) : (
<li>{String(state.public_data.pairedAddresses || '')}</li>
)
}
</ul>
</div> </div>
)} {state.public_data.pairedAddresses && (
<div className="public-data-item">
<strong>Adresses associées:</strong>
<ul className="address-list">
{Array.isArray(state.public_data.pairedAddresses) ?
(typeof state.public_data.pairedAddresses[0] === 'string' ? (
(state.public_data.pairedAddresses as string[]).map((addr, i) => (
<li key={i}>{addr}</li>
))
) : (
<li>{formatAddress(state.public_data.pairedAddresses as number[])}</li>
)) : (
<li>{String(state.public_data.pairedAddresses || '')}</li>
)
}
</ul>
</div>
)}
</div>
</div> </div>
</div> );
))} })}
</div> </div>
)} )}
</div> </div>