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

Add all fields in state render

Browse Source
This commit is contained in:
omaroughriss 2025-06-19 20:59:35 +02:00
parent ae64b057a6
commit 4740f4a67c
1 changed files with 110 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/components/ProcessesViewer.tsx
View File

@ -26,6 +26,81 @@ interface ProcessesViewerProps {
onProcessesUpdate?: (processes: Processes) => void;
}
const compareStates = (
currentState: BlockState,
index: number,
previousState?: BlockState,
currentPrivateData?: Record<string, any>,
previousPrivateData?: Record<string, any>
) => {
const result: Record<string, {
value: any,
status: 'unchanged' | 'modified',
hash?: string,
isPrivate: boolean,
stateId: string
}> = {};
// Ajouter toutes les données publiques de l'état actuel
Object.keys(currentState.public_data).forEach(key => {
const currentValue = currentState.public_data[key];
const previousValue = previousState?.public_data[key];
const isModified = index > 0 &&
previousValue !== undefined &&
JSON.stringify(currentValue) !== JSON.stringify(previousValue);
result[key] = {
value: currentValue,
status: isModified ? 'modified' : 'unchanged',
hash: currentState.pcd_commitment[key],
isPrivate: false,
stateId: currentState.state_id
};
});
// Gérer les données privées
if (index === 0) {
// Pour le premier état, on ajoute simplement les données privées actuelles
if (currentPrivateData) {
Object.entries(currentPrivateData).forEach(([key, value]) => {
result[key] = {
value,
status: 'unchanged',
hash: currentState.pcd_commitment[key],
isPrivate: true,
stateId: currentState.state_id
};
});
}
} else if (previousPrivateData) {
// Pour les états suivants, on commence par les données privées de l'état précédent
Object.entries(previousPrivateData).forEach(([key, value]) => {
result[key] = {
value,
status: 'unchanged',
hash: previousState?.pcd_commitment[key],
isPrivate: true,
stateId: previousState!.state_id
};
});
// Puis on met à jour les données privées qui ont changé
if (currentPrivateData) {
Object.entries(currentPrivateData).forEach(([key, value]) => {
result[key] = {
value,
status: 'modified',
hash: currentState.pcd_commitment[key],
isPrivate: true,
stateId: currentState.state_id
};
});
}
}
return result;
};
function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: ProcessesViewerProps) {
const [expandedBlocks, setExpandedBlocks] = useState<string[]>([]);
const [isFiltered, setIsFiltered] = useState<boolean>(false);
@ -310,16 +385,26 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
hash: string | undefined,
isPrivate: boolean,
processId: string,
stateId: string
stateId: string,
status: 'unchanged' | 'modified' = 'unchanged',
originStateId?: string
) => {
const isEditing = editingField?.key === key &&
editingField?.processId === processId &&
editingField?.stateId === stateId;
const getStatusColor = (status: string) => {
return status === 'modified' ? '#32a852' : 'transparent';
};
return (
<div
className="data-field"
key={key}
style={{
backgroundColor: getStatusColor(status),
transition: 'background-color 0.3s'
}}
>
<div className="data-field-header">
<span className="data-type-icon" title={isPrivate ? 'Donnée privée' : 'Donnée publique'}>
@ -327,6 +412,11 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
</span>
<span className="data-value-icon">{getDataIcon(value)}</span>
<span className="data-label">{key}</span>
{originStateId && originStateId !== stateId && (
<span className="data-origin" title={`Propagé depuis l'état ${originStateId}`}>
↺
</span>
)}
<button
className="field-update-button"
onClick={(e) => {
@ -423,7 +513,15 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
}
const statePrivateData = privateData[state.state_id] || {};
console.log(statePrivateData);
// On utilise compareStates avec l'état précédent et les données privées
const stateData = compareStates(
state,
index,
index > 0 ? process.states[index - 1] : undefined,
statePrivateData,
index > 0 ? privateData[process.states[index - 1].state_id] : undefined
);
return (
<div key={`${processId}-state-${index}`} className="state-item">
@ -436,21 +534,18 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
</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)
{/* Toutes les données (publiques et privées) */}
{Object.entries(stateData).map(([key, { value, status, hash, isPrivate, stateId }]) =>
renderDataField(key, value, hash, isPrivate, processId, stateId, status, 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)
)
) : (
{/* Message de chargement pour les données privées si nécessaire */}
{myProcesses.includes(processId) && Object.keys(statePrivateData).length === 0 && (
<div className="loading-message">Chargement des données privées...</div>
)
) : (
)}
{/* Message si pas d'accès aux données privées */}
{!myProcesses.includes(processId) && (
<div className="no-access-message">
🔒 Vous n'avez pas accès aux données privées de ce processus
</div>