Historique d'activité des documents dans Dodock

L'historique d'activité d'un document dans Dodock regroupe en un seul endroit chronologique toutes les interactions liées à ce document : emails, commentaires, pièces jointes, modifications de champs et logs système. Cette vue unifiée permet de suivre l'évolution d'un document sans avoir à naviguer entre plusieurs sections.

Accès à l'historique d'activité

L'historique d'activité est accessible depuis la barre latérale de tout document, sous la section Activité. Cliquez sur l'onglet Activité pour afficher le fil chronologique.

      
sequenceDiagram
    participant Utilisateur
    participant Document
    participant Activite as Historique d'activité

    

Fonctionnalités clés

1. Affichage chronologique des activités

L'historique est présenté du plus ancien au plus récent, contrairement à l'affichage classique qui montre d'abord les dernières interactions. Cette organisation permet de reconstituer l'historique complet d'un document depuis sa création.

Exemple — Maison Verte SARL Thomas consulte une commande fournisseur. L'historique d'activité lui montre d'abord l'email initial du fournisseur, suivi des commentaires internes, des modifications de statut et des pièces jointes ajoutées au fil du temps. Il peut ainsi retracer toute la chaîne de décisions sans quitter le document.

2. Chargement progressif des emails

Pour les documents avec un grand nombre d'emails (ex : tickets d'assistance, commandes récurrentes), Dodock charge les emails par pages. Un bouton "Charger plus d'emails" apparaît en bas de la liste lorsque des emails plus anciens sont disponibles.

Exemple — Bureau Moderne Une commande client avec 50 emails liés affiche d'abord les 10 plus récents. Sophie clique sur "Charger plus d'emails" pour voir les échanges plus anciens, sans ralentir le chargement initial du document.

3. Mise à jour en temps réel

L'historique d'activité se met à jour automatiquement via le socket lorsque de nouvelles interactions ont lieu (ex : un collègue ajoute un commentaire ou un email est reçu). Aucune actualisation manuelle n'est nécessaire.

Exemple — Agence Créative Leblanc Deux collaborateurs travaillent simultanément sur un devis. Lorsqu'Amina ajoute un commentaire, Thomas voit immédiatement la mise à jour dans l'historique sans avoir à recharger la page.

4. Personnalisation de l'affichage

Dodock permet de personnaliser l'affichage de l'historique via des slots (pour les développeurs). Par exemple :

• Remplacer l'icône d'un type d'activité (ex : utiliser une icône personnalisée pour les commentaires).
• Ajouter des actions spécifiques (ex : un bouton pour supprimer un commentaire).
• Intégrer des types d'activités personnalisés (ex : un feedback client).

Exemple — Développeur chez Dokos Un développeur crée un type d'activité personnalisé pour suivre les validations internes. Il utilise le slot #item-validation pour afficher ces validations dans l'historique avec une icône spécifique et un bouton d'action.

5. Groupement des activités similaires

Les modifications de champs sont regroupées par session pour éviter d'encombrer l'historique. Par exemple, si un utilisateur modifie plusieurs champs en une seule sauvegarde, une seule ligne "Modification des champs" apparaît, avec un détail des changements.

Exemple — Maison Verte SARL Léa modifie le statut, la date de livraison et le mode de paiement d'une commande en une seule fois. L'historique affiche une seule entrée "Modification des champs" avec la liste des champs modifiés, au lieu de trois entrées séparées.

Types d'activités affichées

Cas d'usage avancés

1. Suivi des modifications de champs

L'historique d'activité permet de voir qui a modifié un champ et quand, avec la valeur avant/après la modification. Cela est particulièrement utile pour les documents critiques comme les factures ou les contrats.

Exemple — Bureau Moderne Le service comptable utilise l'historique pour vérifier qui a modifié le montant d'une facture et à quelle date, afin de retracer une erreur de saisie.

2. Audit des communications

Pour les documents nécessitant un suivi strict (ex : commandes, tickets d'assistance), l'historique permet de vérifier toutes les communications (emails, commentaires) échangées avec les clients ou fournisseurs.

Exemple — Maison Verte SARL Thomas utilise l'historique pour vérifier qu'un email de confirmation a bien été envoyé au client après la validation d'une commande.

3. Intégration avec des workflows personnalisés

Les développeurs peuvent étendre l'historique pour y intégrer des activités spécifiques à un workflow (ex : validations, approbations, feedbacks).

Exemple — Développeur chez Dokos Un workflow d'approbation est ajouté à un type de document. Chaque étape d'approbation apparaît dans l'historique avec une icône personnalisée et un lien vers le document d'approbation.

Configuration pour les développeurs

Pour les développeurs souhaitant personnaliser ou étendre l'historique d'activité, voici les points d'entrée principaux :

1. Utilisation du composant ActivityTimeline

Le composant Vue <ActivityTimeline /> permet de rendre un fil d'activités. Il s'utilise avec le hook useActivityTimeline() pour charger les données.

<script setup lang="ts">
import { ActivityTimeline, useActivityTimeline } from "@framework/ui";

const { activities, loading, paginate } = useActivityTimeline("HD Ticket", docname);
</script>

<template>
  <ActivityTimeline :activities :loading :paginate />
</template>

2. Personnalisation des slots

Les slots permettent de remplacer ou d'étendre l'affichage des activités. Voici quelques exemples :

• Remplacer une ligne d'activité :

  <template #item-comment="{ activity }">
    <MonComposantCommentaire :activity />
  </template>
  

• Personnaliser une région d'un email/commentaire :

  <template #item-email="{ activity }">
    <EmailItem :email="activity">
      <template #actions>
        <Button variant="ghost" icon="trash-2" @click="supprimerEmail(activity)" />
      </template>
    </EmailItem>
  </template>
  

• Ajouter un type d'activité personnalisé :

  <script setup lang="ts">
  const feedback = {
    type: "feedback",
    key: "feedback:1",
    timestamp: "2026-07-02 10:00:00",
    data: { rating: 5, message: "Service rapide et efficace !" },
  };
  const feed = computed(() => [...activities.value, feedback]);
  </script>
  
  <template>
    <ActivityTimeline :activities="feed" :loading>
      <template #item-feedback="{ activity }">
        <FeedbackItem :activity />
      </template>
    </ActivityTimeline>
  </template>
  

3. Configuration du chargement des emails

Le hook useActivityTimeline() permet de configurer le chargement des emails :

• Pagination : Utilisez le prop :paginate pour activer le chargement progressif.
• Position du bouton "Charger plus" : Personnalisable via les slots.

<ActivityTimeline :activities :loading :paginate />

Bonnes pratiques

• Pour les utilisateurs :
  • Utilisez l'historique pour retracer les décisions et communications liées à un document.
  • Vérifiez régulièrement les modifications de champs pour les documents critiques.
• Pour les développeurs :
  • Personnalisez l'historique pour refléter les workflows spécifiques de votre entreprise.
  • Testez les performances de l'historique sur des documents avec un grand nombre d'activités.
  • Documentez les types d'activités personnalisés pour faciliter la maintenance.