Aller au contenu principal

Éditeur Visuel de Workflows

Vue d'ensemble​

L'éditeur visuel de workflows permet de créer et modifier des workflows de manière intuitive grâce à une interface drag & drop. Les utilisateurs peuvent réorganiser les phases et les tâches simplement en les glissant-déposant.

Fonctionnalités​

Réorganisation des phases​

  • Drag & drop des phases : Les phases peuvent être réorganisées en les glissant-déposant
  • Mise à jour automatique : L'ordre d'affichage (display_order) est automatiquement mis à jour lors du réordonnancement
  • Indicateur visuel : Poignée de glissement (GripVertical) visible sur chaque phase

Réorganisation des tâches​

  • Drag & drop des tâches : Les tâches dans chaque phase peuvent être réorganisées indépendamment
  • Mise à jour automatique : L'ordre d'affichage de chaque tâche est automatiquement mis à jour
  • Indicateur visuel : Poignée de glissement visible sur chaque tâche

Architecture​

Composants​

  1. WorkflowVisualEditor : Composant principal qui gère le drag & drop des phases

    • Utilise @dnd-kit/core pour le contexte de drag & drop
    • Utilise @dnd-kit/sortable pour les éléments sortables
    • Gère la réorganisation des phases

  2. SortablePhaseItem : Composant pour chaque phase sortable

    • Wrapper autour de WorkflowPhaseForm
    • Gère les attributs de drag & drop
    • Applique les styles de transformation

  3. SortableTaskList : Composant pour gérer le drag & drop des tâches

    • Contexte de drag & drop indépendant pour chaque phase
    • Gère la réorganisation des tâches dans une phase

  4. SortableTaskItemComponent : Composant pour chaque tâche sortable

    • Wrapper autour de WorkflowTaskForm
    • Gère les attributs de drag & drop
    • Applique les styles de transformation

Technologies utilisées​

  • @dnd-kit/core : Bibliothèque principale pour le drag & drop
  • @dnd-kit/sortable : Extension pour les listes sortables
  • @dnd-kit/utilities : Utilitaires pour les transformations CSS

Utilisation​

Dans WorkflowFormPage​

L'éditeur visuel est intégré dans la page de formulaire de workflow :

<WorkflowVisualEditor
  phases={phases}
  onPhaseRemove={removePhase}
  onPhaseUpdate={updatePhase}
  onPhasesChange={(newPhases) => {
    setPhases(newPhases);
  }}
/>

Gestion des événements​

Lorsqu'un élément est déplacé :

  1. Événement onDragEnd : Déclenché quand le drag & drop se termine
  2. Calcul des indices : Les indices de l'élément actif et de l'élément cible sont calculés
  3. Réorganisation : arrayMove est utilisé pour réorganiser le tableau
  4. Mise à jour de l'ordre : Les display_order sont mis à jour automatiquement
  5. Callback : Le callback parent est appelé avec le nouveau tableau

Exemple de code​

Réorganisation des phases​

const handleDragEnd = (event: DragEndEvent) => {
  const { active, over } = event;

  if (!over || active.id === over.id) {
    return;
  }

  const activeIndex = phases.findIndex(
    (_, index) => `phase-${index}` === active.id
  );
  const overIndex = phases.findIndex(
    (_, index) => `phase-${index}` === over.id
  );

  if (activeIndex !== -1 && overIndex !== -1) {
    const newPhases = arrayMove(phases, activeIndex, overIndex);
    const reorderedPhases = newPhases.map((phase, index) => ({
      ...phase,
      display_order: index,
    }));
    onPhasesChange(reorderedPhases);
  }
};

Réorganisation des tâches​

const handleDragEnd = (event: DragEndEvent) => {
  const { active, over } = event;

  if (!over || active.id === over.id) {
    return;
  }

  const activeIndex = tasks.findIndex(
    (_, index) => `task-${phaseIndex}-${index}` === active.id
  );
  const overIndex = tasks.findIndex(
    (_, index) => `task-${phaseIndex}-${index}` === over.id
  );

  if (activeIndex !== -1 && overIndex !== -1) {
    const newTasks = arrayMove(tasks, activeIndex, overIndex);
    const reorderedTasks = newTasks.map((task, index) => ({
      ...task,
      display_order: index,
    }));
    onTasksChange(reorderedTasks);
  }
};

Accessibilité​

  • Support clavier : Les éléments peuvent être réorganisés au clavier grâce à KeyboardSensor
  • Indicateurs visuels : Opacité réduite pendant le drag pour indiquer l'élément en cours de déplacement
  • Transitions : Animations fluides lors du réordonnancement

Limitations actuelles​

  1. Contexte unique : Chaque phase a son propre contexte de drag & drop pour les tâches, ce qui empêche de déplacer des tâches entre phases (comportement attendu)

  2. Ordre horizontal : Les phases sont affichées horizontalement sur desktop, ce qui peut nécessiter du scroll horizontal sur petits écrans

Améliorations futures​

  1. Vue en arborescence : Affichage hiérarchique des workflows avec phases et tâches
  2. Prévisualisation : Aperçu du workflow avant sauvegarde
  3. Validation visuelle : Indicateurs visuels pour les erreurs de configuration
  4. Templates visuels : Bibliothèque de templates de workflows avec aperçu visuel
  5. Export visuel : Export du workflow sous forme d'image ou de diagramme