Composer

Le Composer est un composant unifié de Dokos qui permet aux utilisateurs de rédiger des emails et des commentaires de manière intuitive, avec une interface moderne et des fonctionnalités avancées comme la gestion des pièces jointes, des destinataires, et des extensions personnalisées.

Fonctionnalités principales

Interface unifiée

Le Composer offre une interface cohérente pour :

• La rédaction d'emails (via EmailComposer)
• La rédaction de commentaires (via CommentComposer)

Les deux modes partagent des fonctionnalités communes comme l'éditeur de texte riche, la gestion des pièces jointes, et la personnalisation de l'en-tête.

Gestion des destinataires

Le Composer permet de gérer facilement les destinataires des emails avec des champs dédiés pour :

• À (To)
• CC (Cc)
• CCI (Bcc)

Chaque champ est configurable via des props pour afficher ou masquer les options selon les besoins.

      
flowchart TD
    A[Composer] --> B[Champ "À"]
    A --> C[Champ "CC"]
    A --> D[Champ "CCI"]
    B --> E[Destinataires sélectionnés]
    C --> E
    D --> E

    

Pièces jointes

Le Composer prend en charge la gestion des pièces jointes avec les fonctionnalités suivantes :

• Affichage sous forme de grille avec des icônes par type de fichier
• Limite configurable du nombre de pièces jointes (par défaut : 10)
• Bouton d'ajout intuitif intégré dans la barre d'outils

Extensions personnalisées

Le Composer permet d'héberger des extensions Tiptap pour personnaliser l'éditeur de texte riche. Ces extensions sont ajoutées après les extensions par défaut de RichTextKit, ce qui permet de redéfinir les comportements par défaut.

Exemples d'utilisation

Répondre à un ticket

Dans cet exemple, le Composer est utilisé pour répondre à un ticket client. L'interface affiche les onglets Email et Commentaire, ainsi qu'une zone de réponse citée.

<template>
  <EmailComposer
    show-from
    show-subject
    v-model:to="to"
    v-model:cc="cc"
    @submit="onSend"
  />
</template>

Réponse rapide

Pour une réponse rapide, le Composer peut être intégré directement dans l'en-tête d'un document, comme un ticket ou une tâche.

<template>
  <CommentComposer
    placeholder="Ajoutez un commentaire rapide..."
    @submit="onCommentSubmit"
  />
</template>

API du Composer

Props communes

EmailComposer

Props spécifiques

Événements

Exemple d'utilisation

<template>
  <EmailComposer
    show-from
    show-subject
    :show-bcc="false"
    v-model:to="toRecipients"
    v-model:cc="ccRecipients"
    @submit="handleEmailSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      toRecipients: [{ email: 'client@exemple.com', label: 'Maison Verte SARL' }],
      ccRecipients: [{ email: 'collaborateur@exemple.com', label: 'Bureau Moderne' }]
    }
  },
  methods: {
    handleEmailSubmit(payload) {
      console.log('Email envoyé:', payload);
    }
  }
}
</script>

CommentComposer

Props spécifiques

Événements

Exemple d'utilisation

<template>
  <CommentComposer
    placeholder="Partagez vos idées ici..."
    @submit="handleCommentSubmit"
  />
</template>

<script>
export default {
  methods: {
    handleCommentSubmit(payload) {
      console.log('Commentaire envoyé:', payload);
    }
  }
}
</script>

Changements majeurs (Breaking Changes)

Migration depuis l'ancienne API

Si vous utilisiez l'ancienne API du EmailComposer, voici comment migrer vers la nouvelle version :

Avant

<EmailComposer
  :header-fields="['from', 'subject', 'to', 'cc']"
  v-model:recipients="recipients"
  @submit="onSend"
/>

Après

<EmailComposer
  show-from
  show-subject
  v-model:to="recipients.to"
  v-model:cc="recipients.cc"
  @submit="onSend"
/>

Payload du submit

Le payload de l'événement @submit a également été aplati :

Avant

{
  "recipients": {
    "to": [...],
    "cc": [...],
    "bcc": [...]
  }
}

Après

{
  "to": [...],
  "cc": [...],
  "bcc": [...]
}

Personnalisation avancée

Ajouter des extensions Tiptap

Vous pouvez personnaliser l'éditeur de texte riche en ajoutant des extensions Tiptap via la prop extensions. Ces extensions sont ajoutées après les extensions par défaut de RichTextKit, ce qui permet de redéfinir les comportements par défaut.

<template>
  <EmailComposer :extensions="customExtensions" />
</template>

<script>
import { Extension } from '@tiptap/core';

const CustomHighlight = Extension.create({
  name: 'customHighlight',
  addCommands() {
    return {
      setHighlight: () => ({ commands }) => {
        return commands.setMark('highlight');
      }
    }
  }
});

export default {
  data() {
    return {
      customExtensions: [CustomHighlight]
    }
  }
}
</script>

Limiter le nombre de pièces jointes

Utilisez la prop maxAttachments pour limiter le nombre de pièces jointes autorisées :

<EmailComposer :max-attachments="5" />

Exemples concrets

Répondre à un ticket client

Scénario : Un utilisateur répond à un ticket client depuis le module Support de Dokos.

1. L'utilisateur ouvre le ticket #SUPP-2023-001 concernant une commande en retard.
2. Il clique sur Répondre pour ouvrir le Composer.
3. Le Composer affiche les onglets Email et Commentaire.
4. L'utilisateur sélectionne l'onglet Email et remplit les champs :
   • À : client@maisonverte.com (Maison Verte SARL)
   • CC : logistique@bureaumoderne.com (Bureau Moderne)
   • Sujet : Suivi commande #CMD-2023-045
5. Il rédige un message dans l'éditeur de texte riche, ajoute une pièce jointe (bon de livraison), et clique sur Envoyer.

      
sequenceDiagram
    participant U as Utilisateur
    participant C as Composer
    participant S as Système
    U->>C: Ouvre le Composer
    C->>U: Affiche les onglets Email/Commentaire
    U->>C: Sélectionne l'onglet Email
    U->>C: Remplit les champs À, CC, Sujet
    U->>C: Rédige le message
    U->>C: Ajoute une pièce jointe
    U->>C: Clique sur Envoyer
    C->>S: Envoie l'email
    S->>U: Confirme l'envoi

    

Réponse rapide depuis un document

Scénario : Un utilisateur ajoute un commentaire rapide depuis une fiche Client.

1. L'utilisateur ouvre la fiche du client Maison Verte SARL.
2. Il descend jusqu'à la section Commentaires et clique dans la zone de texte du Composer.
3. Il rédige un commentaire : « Le client a demandé un suivi pour la commande #CMD-2023-045. »
4. Il clique sur Envoyer pour publier le commentaire.

Questions fréquentes

Comment masquer un champ de destinataire ?

Utilisez les props show-to, show-cc, ou show-bcc pour masquer les champs que vous ne souhaitez pas afficher. Par exemple :

<EmailComposer :show-bcc="false" />

Comment limiter le nombre de pièces jointes ?

Utilisez la prop maxAttachments pour définir une limite. Par exemple, pour autoriser seulement 5 pièces jointes :

<EmailComposer :max-attachments="5" />

Comment personnaliser l'éditeur de texte ?

Vous pouvez ajouter des extensions Tiptap via la prop extensions. Ces extensions seront ajoutées après les extensions par défaut de RichTextKit, ce qui vous permet de redéfinir les comportements par défaut.

Que faire si mon code ne compile plus après la mise à jour ?

Si vous utilisiez l'ancienne API du EmailComposer, vous devez migrer vers la nouvelle API. Consultez la section Migration depuis l'ancienne API pour plus de détails.