Update fields

src/components/ProcessesViewer.css

@@ -178,3 +178,203 @@
   padding: 10px;
   text-align: center;
 }
+
+.update-button {
+  padding: 8px 16px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.update-button:hover {
+  background-color: #45a049;
+}
+
+.data-fields-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: rgba(255, 255, 255, 0.02);
+  border-radius: 8px;
+}
+
+.data-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background-color: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.data-field:hover {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.data-field-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-color);
+}
+
+.data-type-icon,
+.data-value-icon {
+  font-size: 1.1rem;
+  opacity: 0.8;
+}
+
+.data-label {
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.data-field-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding-left: 2rem;
+  color: var(--text-color);
+}
+
+.hash-tooltip {
+  cursor: help;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+  color: var(--text-color);
+}
+
+.hash-tooltip:hover {
+  opacity: 1;
+}
+
+.download-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  color: var(--text-color);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.download-button:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.loading-message,
+.no-access-message {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-color);
+  background-color: rgba(255, 255, 255, 0.04);
+  border-radius: 6px;
+  margin: 1rem 0;
+}
+
+.no-access-message {
+  color: #ff6b6b;
+  background-color: rgba(255, 107, 107, 0.1);
+}
+
+.field-update-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--text-color-muted);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-left: auto;
+  font-size: 1rem;
+}
+
+.field-update-button:hover {
+  color: var(--primary-color);
+  background-color: rgba(var(--primary-color-rgb), 0.1);
+}
+
+.field-update-button:active {
+  transform: scale(0.95);
+}
+
+.edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem;
+  background-color: rgba(255, 255, 255, 0.04);
+  border-radius: 4px;
+}
+
+.edit-form input[type="text"],
+.edit-form input[type="number"],
+.edit-form select,
+.edit-form textarea {
+  width: 100%;
+  padding: 0.5rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  color: var(--text-color);
+  font-size: 0.9rem;
+}
+
+.edit-form input[type="file"] {
+  width: 100%;
+  padding: 0.5rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  color: var(--text-color);
+  font-size: 0.9rem;
+}
+
+.edit-form textarea {
+  font-family: monospace;
+  min-height: 100px;
+  resize: vertical;
+}
+
+.edit-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.edit-form-actions button {
+  padding: 0.25rem 0.75rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  color: var(--text-color);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.edit-form-actions button:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.edit-form-actions button:active {
+  transform: scale(0.95);
+}

src/components/ProcessesViewer.tsx

@@ -30,6 +30,13 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
   const [expandedBlocks, setExpandedBlocks] = useState<string[]>([]);
   const [isFiltered, setIsFiltered] = useState<boolean>(false);
   const [privateData, setPrivateData] = useState<Record<string, Record<string, any>>>({});
+  const [editingField, setEditingField] = useState<{
+    processId: string;
+    stateId: string;
+    key: string;
+    value: any;
+  } | null>(null);
+  const [tempValue, setTempValue] = useState<any>(null);
 
   const handleFilterClick = () => {
     setIsFiltered(prev => !prev);
@@ -62,13 +69,11 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
       await messageBus.isReady();
 
       const data = await messageBus.getData(processId, stateId);
-      console.log(data);
 
       setPrivateData(prev => ({
         ...prev,
         [stateId]: data
       }));
-      console.log(privateData);
     } catch (error) {
       console.error('Error fetching private data:', error);
     }
@@ -89,39 +94,289 @@ 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>
+        <button 
+          className="download-button"
+          onClick={() => handleDownload(key, value)}
+          title="Télécharger le fichier"
+        >
+          📥 Télécharger
+        </button>
+      );
+    }
+    return JSON.stringify(value || '');
+  };
+
+  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
+  };
+
+  const handleFieldUpdate = async (processId: string, stateId: string, key: string, value: any) => {
+    try {
+      const messageBus = MessageBus.getInstance(iframeUrl);
+      await messageBus.isReady();
+
+      const updateData = {
+        [key]: value
+      };
+
+      // First update the process
+      const updatedProcess = await messageBus.updateProcess(processId, stateId, updateData, [], null);
+      if (!updatedProcess) {
+        throw new Error('No updated process found');
+      }
+
+      const newStateId = updatedProcess.diffs[0]?.state_id;
+
+      if (!newStateId) {
+        throw new Error('No new state id found');
+      }
+      
+      // Then notify about the update
+      await messageBus.notifyProcessUpdate(processId, newStateId);
+      
+      // Finally validate the state
+      await messageBus.validateState(processId, newStateId);
+      
+      // Refresh the processes data
+      const updatedProcesses = await messageBus.getProcesses();
+      if (onProcessesUpdate) {
+        onProcessesUpdate(updatedProcesses);
+      }
+      console.log('Process updated successfully');
+    } catch (error) {
+      console.error('Error updating field:', error);
+      // You might want to show an error message to the user here
+    }
+  };
+
+  const renderEditForm = (key: string, value: any, onSave: (newValue: any) => void, onCancel: () => void) => {
+    // Initialize tempValue when editing starts
+    if (tempValue === null) {
+      setTempValue(value);
+    }
+
+    const handleFormClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+    };
+
+    if (isFileBlob(value)) {
+      return (
+        <div className="edit-form">
+          <input
+            type="file"
+            onChange={(e) => {
+              e.stopPropagation();
+              const file = e.target.files?.[0];
+              if (file) {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                  if (event.target?.result) {
+                    const arrayBuffer = event.target.result as ArrayBuffer;
+                    const uint8Array = new Uint8Array(arrayBuffer);
+                    setTempValue({
+                      type: file.type,
+                      data: uint8Array
+                    });
+                  }
+                };
+                reader.readAsArrayBuffer(file);
+              }
+            }}
+          />
+          <div className="edit-form-actions">
+            <button onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onSave(tempValue);
+              setTempValue(null);
+            }}>Sauvegarder</button>
+            <button onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onCancel();
+              setTempValue(null);
+            }}>Annuler</button>
+          </div>
         </div>
       );
     }
-    return JSON.stringify(value || ''); // TODO handle most common cases
-  };
 
-  const formatName = (name: string | number[] | undefined): string => {
-    if (!name) return "Nom non disponible";
-
-    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;
+    if (typeof value === 'boolean') {
+      return (
+        <div className="edit-form" onClick={handleFormClick} onMouseDown={handleFormClick}>
+          <select
+            value={tempValue.toString()}
+            onChange={(e) => {
+              e.stopPropagation();
+              setTempValue(e.target.value === 'true');
+            }}
+          >
+            <option value="true">Vrai</option>
+            <option value="false">Faux</option>
+          </select>
+          <div className="edit-form-actions">
+            <button onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onSave(tempValue);
+            }}>Sauvegarder</button>
+            <button onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onCancel();
+            }}>Annuler</button>
+          </div>
+        </div>
+      );
     }
 
-    return "Format de nom inconnu";
+    if (Array.isArray(value)) {
+      return (
+        <div className="edit-form" onClick={handleFormClick} onMouseDown={handleFormClick}>
+          <textarea
+            value={JSON.stringify(tempValue, null, 2)}
+            onChange={(e) => {
+              e.stopPropagation();
+              try {
+                const newValue = JSON.parse(e.target.value);
+                if (Array.isArray(newValue)) {
+                  setTempValue(newValue);
+                }
+              } catch (error) {
+                // Invalid JSON, ignore
+              }
+            }}
+            onClick={handleFormClick}
+            onMouseDown={handleFormClick}
+            rows={4}
+          />
+          <div className="edit-form-actions">
+            <button onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onSave(tempValue);
+            }}>Sauvegarder</button>
+            <button onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onCancel();
+            }}>Annuler</button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="edit-form" onClick={handleFormClick} onMouseDown={handleFormClick}>
+        <input
+          type={typeof value === 'number' ? 'number' : 'text'}
+          value={tempValue}
+          onChange={(e) => {
+            e.stopPropagation();
+            const newValue = typeof value === 'number' 
+              ? parseFloat(e.target.value)
+              : e.target.value;
+            setTempValue(newValue);
+          }}
+          onClick={handleFormClick}
+          onMouseDown={handleFormClick}
+          autoFocus
+        />
+        <div className="edit-form-actions">
+          <button onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onSave(tempValue);
+          }}>Sauvegarder</button>
+          <button onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onCancel();
+          }}>Annuler</button>
+        </div>
+      </div>
+    );
+  };
+
+  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 (
+      <div 
+        className="data-field" 
+        key={key}
+      >
+        <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"
+        >
+          {isEditing ? (
+            <div>
+              {renderEditForm(
+                key,
+                value,
+                async (newValue) => {
+                  await handleFieldUpdate(processId, stateId, key, newValue);
+                  setEditingField(null);
+                  setTempValue(null);
+                },
+                () => {
+                  setEditingField(null);
+                  setTempValue(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 +387,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 +413,18 @@ 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);
+                      setTimeout(() => {
+                        fetchPrivateData(processId, state.state_id);
+                      }, 0);
+                    }
+
+                    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 +434,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 +467,7 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
       </div>
     </div>
   );
-};
+}
 
 ProcessesViewer.displayName = 'ProcessesViewer';
 export default memo(ProcessesViewer);