New-Thanasoft/thanasoft-front/NOTIFICATIONS.md

Système de Notifications

Un système de notifications toast moderne et réactif pour afficher des messages en haut à droite de l'écran.

📁 Fichiers créés

• src/stores/notification.ts - Store Pinia pour gérer l'état des notifications
• src/components/NotificationContainer.vue - Composant conteneur qui affiche les notifications
• src/composables/useNotification.ts - Composable pour faciliter l'utilisation
• src/examples/NotificationExamples.vue - Exemples d'utilisation

🚀 Utilisation

1. Import dans un composant

import { useNotification } from "@/composables/useNotification";

export default {
  setup() {
    const notification = useNotification();
    
    // Votre code...
  }
}

2. Notifications CRUD (les plus utilisées)

// Création
notification.created("Le client");
// Affiche: "Créé avec succès - Le client a été créé avec succès."

// Mise à jour
notification.updated("La catégorie");
// Affiche: "Modifié avec succès - La catégorie a été modifié avec succès."

// Suppression
notification.deleted("Le produit");
// Affiche: "Supprimé avec succès - Le produit a été supprimé avec succès."

3. Notifications personnalisées

// Succès
notification.success("Titre", "Message de succès");

// Erreur
notification.error("Erreur", "Message d'erreur");

// Avertissement
notification.warning("Attention", "Message d'avertissement");

// Information
notification.info("Info", "Message d'information");

4. Durée personnalisée

// Par défaut, les notifications durent 5 secondes (5000ms)
// Vous pouvez changer cela :

notification.created("Le client", 3000); // 3 secondes
notification.success("Titre", "Message", 10000); // 10 secondes

💡 Exemples d'utilisation réels

Dans un formulaire de création

const createClient = async () => {
  try {
    const response = await clientService.create(formData);
    notification.created("Le client");
    router.push("/clients");
  } catch (error) {
    notification.error("Erreur", "Impossible de créer le client");
  }
};

Dans un formulaire de mise à jour

const updateCategory = async () => {
  try {
    await categoryService.update(id, formData);
    notification.updated("La catégorie");
  } catch (error) {
    notification.error("Erreur", error.message);
  }
};

Dans une action de suppression

const deleteProduct = async (id) => {
  try {
    await productService.delete(id);
    notification.deleted("Le produit");
    await fetchProducts(); // Recharger la liste
  } catch (error) {
    notification.error("Erreur", "Impossible de supprimer le produit");
  }
};

Avec SweetAlert2 pour confirmation

const confirmDelete = (id) => {
  this.$swal({
    title: "Êtes-vous sûr ?",
    text: "Cette action est irréversible !",
    icon: "warning",
    showCancelButton: true,
    confirmButtonText: "Oui, supprimer",
    cancelButtonText: "Annuler",
  }).then((result) => {
    if (result.isConfirmed) {
      deleteClient(id);
    }
  });
};

const deleteClient = async (id) => {
  try {
    await clientService.delete(id);
    notification.deleted("Le client");
    await fetchClients();
  } catch (error) {
    notification.error("Erreur", "Impossible de supprimer le client");
  }
};

🎨 Types de notifications

Type	Couleur	Icône	Usage
success	Vert	✓	Opérations réussies
error	Rouge	✗	Erreurs
warning	Orange	⚠	Avertissements
info	Bleu	ℹ	Informations

⚙️ Configuration

Position

Les notifications apparaissent en haut à droite par défaut. Pour changer la position, modifiez le CSS dans NotificationContainer.vue :

.notification-container {
  position: fixed;
  top: 20px;      /* Changer pour bottom: 20px; pour en bas */
  right: 20px;    /* Changer pour left: 20px; pour à gauche */
  z-index: 9999;
}

Durée par défaut

Pour changer la durée par défaut (5 secondes), modifiez dans notification.ts :

const duration = notification.duration || 5000; // Changer 5000 en valeur désirée

📱 Responsive

Le système est entièrement responsive. Sur mobile (< 768px), les notifications prennent toute la largeur de l'écran avec une marge de 10px.

🎭 Animations

Les notifications glissent depuis la droite à l'apparition et disparaissent avec une animation fluide.

🧪 Tester le système

1. Importez la page d'exemples dans votre router
2. Naviguez vers /notification-examples
3. Testez tous les types de notifications

// Dans votre fichier router
{
  path: "/notification-examples",
  name: "NotificationExamples",
  component: () => import("@/examples/NotificationExamples.vue"),
}

🛠️ Utilisation directe du store (avancé)

Si vous avez besoin d'un contrôle plus fin :

import { useNotificationStore } from "@/stores/notification";

const notificationStore = useNotificationStore();

notificationStore.addNotification({
  type: "success",
  title: "Titre personnalisé",
  message: "Message personnalisé",
  duration: 8000
});

📝 Notes

• Les notifications se ferment automatiquement après la durée spécifiée
• Plusieurs notifications peuvent être affichées simultanément
• Chaque notification peut être fermée manuellement en cliquant sur le X
• Les notifications sont gérées globalement via Pinia
• Le composant NotificationContainer est déjà intégré dans App.vue