Compositeurs de messages dans Dokos

Dokos intègre désormais deux nouveaux composants d'interface pour faciliter la rédaction et l'envoi de messages : EmailComposer pour les emails et CommentComposer pour les commentaires internes. Ces outils offrent une expérience utilisateur moderne et intuitive, directement intégrée dans l'interface de Dokos.

EmailComposer : Envoyer des emails professionnels

L'EmailComposer est un éditeur riche qui permet de rédiger et d'envoyer des emails directement depuis Dokos, avec toutes les fonctionnalités attendues d'un client email moderne.

Fonctionnalités clés

• En-têtes complets : Gestion des champs De, À, Cc, Cci et Objet avec recherche intelligente des destinataires.
• Éditeur riche : Mise en forme du texte, insertion d'images et de pièces jointes.
• Réponses citées : Intégration automatique des emails précédents dans une réponse.
• Gestion des pièces jointes : Téléchargement et suppression des fichiers joints.
• Personnalisation de l'expéditeur : Sélection parmi plusieurs identités d'envoi.

Utilisation de base

Pour utiliser l'EmailComposer, vous devez l'intégrer dans une vue personnalisée de Dokos. Voici un exemple simple d'utilisation :

<EmailComposer
  ref="composer"
  v-model="body"
  v-model:recipients="recipients"
  :search-recipients="searchContacts"
  :upload-function="uploadFile"
  @submit="onSend"
/>

Configuration des champs d'en-tête

Par défaut, l'EmailComposer affiche les champs À, Cc et Bcc. Vous pouvez personnaliser les champs visibles via la prop headerFields :

<EmailComposer
  :headerFields="['from', 'to', 'subject']"
/>

Gestion des expéditeurs

Si vous avez configuré plusieurs identités d'envoi, vous pouvez les passer via la prop senders :

<EmailComposer
  :senders="[{ label: 'Support Technique', value: 'support@maisonverte.com' }]"
/>

Réponses citées

Pour répondre à un email existant, utilisez la prop quoted :

<EmailComposer
  v-model:quoted="originalMessage"
/>

Le contenu cité apparaîtra sous forme de bloc réductible dans l'éditeur et sera automatiquement intégré au corps du message lors de l'envoi.

Exemple complet

Voici un exemple complet d'intégration de l'EmailComposer dans une vue Dokos :

<script setup>
import { ref } from "vue";
import { EmailComposer } from "@framework/ui/Composer";

const body = ref("");
const recipients = ref([{ label: "Maison Verte SARL", value: "contact@maisonverte.com" }]);
const composer = ref(null);

async function searchContacts(query) {
  // Recherche de contacts dans Dokos
  const results = await frappe.call("frappe.client.get_list", {
    doctype: "Contact",
    filters: { name: ["like", `%${query}%`] },
    fields: ["name", "email_id"]
  });
  return results.map(contact => ({
    label: contact.name,
    value: contact.email_id
  }));
}

async function uploadFile(file) {
  // Téléchargement de la pièce jointe
  const attachment = await frappe.call("upload_file", {
    file: file,
    doctype: "Communication",
    docname: "Nouveau"
  });
  return {
    name: attachment.file_url,
    url: attachment.file_url
  };
}

async function onSend(payload) {
  // Envoi de l'email via Dokos
  await frappe.call("frappe.email.queue", {
    recipients: payload.recipients.map(r => r.value),
    sender: payload.from,
    subject: payload.subject,
    message: payload.body,
    attachments: payload.attachments.map(a => a.name)
  });
  composer.value?.reset();
}
</script>

<template>
  <EmailComposer
    ref="composer"
    v-model="body"
    v-model:recipients="recipients"
    v-model:subject="subject"
    :search-recipients="searchContacts"
    :upload-function="uploadFile"
    @submit="onSend"
  />
</template>

CommentComposer : Rédiger des commentaires internes

Le CommentComposer est conçu pour rédiger des commentaires internes avec mentions d'utilisateurs, idéal pour les discussions au sein des documents Dokos.

Fonctionnalités clés

• Éditeur riche : Mise en forme du texte et insertion d'images.
• Mentions d'utilisateurs : Saisie de @ pour mentionner des utilisateurs Dokos.
• Pièces jointes : Téléchargement de fichiers directement dans le commentaire.

Utilisation de base

<CommentComposer
  ref="commentComposer"
  v-model="comment"
  :upload-function="uploadFile"
  @submit="onCommentSubmit"
/>

Exemple complet

<script setup>
import { ref } from "vue";
import { CommentComposer } from "@framework/ui/Composer";

const comment = ref("");
const commentComposer = ref(null);

async function uploadFile(file) {
  const attachment = await frappe.call("upload_file", {
    file: file,
    doctype: "Comment",
    docname: "Nouveau"
  });
  return {
    name: attachment.file_url,
    url: attachment.file_url
  };
}

async function onCommentSubmit(payload) {
  await frappe.call("frappe.desk.add_comment", {
    reference_doctype: "Task",
    reference_name: "TASK-001",
    content: payload.body
  });
  commentComposer.value?.reset();
}
</script>

<template>
  <CommentComposer
    ref="commentComposer"
    v-model="comment"
    :upload-function="uploadFile"
    @submit="onCommentSubmit"
  />
</template>

Bonnes pratiques

Gestion des erreurs

Les deux compositeurs gèrent automatiquement les erreurs de recherche de destinataires ou de téléchargement de fichiers. Assurez-vous de fournir des fonctions de recherche et de téléchargement robustes pour une expérience utilisateur optimale.

Accessibilité

Les compositeurs sont conçus pour être accessibles :

• Navigation au clavier complète.
• Gestion des raccourcis (comme Échap pour fermer les popups).
• Contrastes de couleurs conformes aux standards d'accessibilité.

Personnalisation avancée

Pour une intégration plus poussée, vous pouvez utiliser les slots pour personnaliser l'apparence :

<EmailComposer v-model="body" @submit="onSend">
  <template #header>
    <div class="custom-header">
      <input v-model="customSubject" placeholder="Sujet personnalisé" />
    </div>
  </template>
</EmailComposer>

Diagramme de flux

Voici un aperçu du flux de travail avec l'EmailComposer :

      
flowchart TD
    A[Ouverture de l'éditeur] --> B[Rédaction du message]
    B --> C{Ajout de pièces jointes ?}
    C -->|Oui| D[Téléchargement des fichiers]
    C -->|Non| E[Saisie des destinataires]
    D --> E
    E --> F[Envoi du message]
    F --> G[Réinitialisation de l'éditeur]

    

Cas d'usage courants

Envoi d'un email à un client

1. Ouvrez l'EmailComposer depuis un document Client (ex: Maison Verte SARL).
2. Saisissez l'adresse email du contact dans le champ À (la recherche automatique vous proposera les contacts existants).
3. Rédigez votre message et ajoutez des pièces jointes si nécessaire.
4. Cliquez sur Envoyer pour transmettre l'email via Dokos.

Réponse à un email reçu

1. Ouvrez l'email reçu dans Dokos.
2. Cliquez sur Répondre pour ouvrir l'EmailComposer avec le contenu cité.
3. Modifiez le message si nécessaire et envoyez.

Ajout d'un commentaire interne

1. Ouvrez un document Dokos (ex: une Opportunité pour Bureau Moderne).
2. Utilisez le CommentComposer dans la section commentaires.
3. Mentionnez un collègue avec @ pour l'alerter.
4. Cliquez sur Publier pour enregistrer le commentaire.

Intégration avec les données de démonstration

Pour tester ces fonctionnalités avec les données de démonstration de Dokos :

• Client : Maison Verte SARL (contact@maisonverte.com)
• Fournisseur : Bureau Moderne (contact@bureaumoderne.com)
• Utilisateurs : Administrateur, Marc Dupont (marc.dupont@example.com)

Ces exemples vous permettront de simuler des envois d'emails et des commentaires internes dans un environnement réaliste.

Limitations et évolutions futures

• Pièces jointes : La taille maximale des pièces jointes dépend de la configuration de votre serveur Dokos.
• Intégration native : Ces composants sont actuellement destinés à une intégration personnalisée. Une intégration native dans l'interface de Dokos est prévue dans une future version.
• Thématisation : Les couleurs et styles s'adaptent automatiquement au thème Dokos actif.

Pour toute question ou besoin d'assistance sur l'intégration de ces composants, consultez la documentation des développeurs de Dokos ou contactez l'équipe support.