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 */}
<div className="content-area">
{/* Affichage des blocs de la blockchain */}
<BlockchainViewer processes={processes} />
<BlockchainViewer processes={processes} myProcesses={myProcesses}/>
</div>
</div>

40
src/components/ProcessesViewer.tsx
View File

@ -21,10 +21,16 @@ interface Processes {
interface ProcessesViewerProps {
processes: Processes | null;
myProcesses: string[];
}
function ProcessesViewer({ processes }: ProcessesViewerProps) {
function ProcessesViewer({ processes, myProcesses }: ProcessesViewerProps) {
const [expandedBlocks, setExpandedBlocks] = useState<string[]>([]);
const [isFiltered, setIsFiltered] = useState<boolean>(false);
const handleFilterClick = () => {
setIsFiltered(prev => !prev);
};
// Si pas de données, afficher un message
if (!processes || Object.keys(processes).length === 0) {
@ -87,21 +93,30 @@ function ProcessesViewer({ processes }: ProcessesViewerProps) {
return (
<div className="processes-viewer">
<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>
<div className="block-list">
{Object.entries(processes).map(([blockId, block]) => {
const isExpanded = expandedBlocks.includes(blockId);
const stateCount = block.states.length;
{Object.entries(processes).map(([processId, process]) => {
if (isFiltered) {
// 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
return (
<div key={blockId} className="block-item">
<div key={processId} className="block-item">
<div
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-toggle">{isExpanded ? '▼' : '▶'}</div>
</div>
@ -109,11 +124,13 @@ function ProcessesViewer({ processes }: ProcessesViewerProps) {
{isExpanded && (
<div className="block-details">
<div className="block-complete-id">
<strong>ID complet:</strong> {blockId}
<strong>ID complet:</strong> {processId}
</div>
{block.states.map((state, index) => (
<div key={`${blockId}-state-${index}`} className="state-item">
{process.states.map((state, index) => {
if (index === stateCount - 1) return null;
return (
<div key={`${processId}-state-${index}`} className="state-item">
<h4>État {index + 1}</h4>
<div className="state-detail">
<strong>State ID:</strong> {state.state_id}
@ -147,7 +164,8 @@ function ProcessesViewer({ processes }: ProcessesViewerProps) {
)}
</div>
</div>
))}
);
})}
</div>
)}
</div>