🚀 Guide de Démarrage Rapide - Notifications

Installation terminée ✅

Le système de notifications est déjà intégré dans votre application. Vous pouvez l'utiliser immédiatement !

Utilisation en 3 étapes simples

Étape 1 : Importer le composable

Dans votre composant Vue, ajoutez l'import :

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

Étape 2 : Initialiser dans setup()

export default {
  setup() {
    const notification = useNotification();
    
    return {
      notification
    };
  }
}

Étape 3 : Utiliser dans vos fonctions

// Pour une création
notification.created("Le client");

// Pour une mise à jour
notification.updated("La catégorie");

// Pour une suppression
notification.deleted("Le produit");

📋 Exemple complet pour un formulaire de client

<script>
import { useNotification } from "@/composables/useNotification";
import ClientService from "@/services/client";

export default {
  name: "NewClientForm",
  setup() {
    const notification = useNotification();
    
    const createClient = async (formData) => {
      try {
        await ClientService.create(formData);
        notification.created("Le client");
        // Redirection ou autre action...
      } catch (error) {
        notification.error("Erreur", "Impossible de créer le client");
      }
    };
    
    return {
      createClient
    };
  }
}
</script>

🔄 Pour une mise à jour

const updateClient = async (id, formData) => {
  try {
    await ClientService.update(id, formData);
    notification.updated("Le client");
  } catch (error) {
    notification.error("Erreur", error.message);
  }
};

❌ Pour une suppression

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

🎨 Autres types de notifications

// Succès personnalisé
notification.success("Bravo !", "L'opération a réussi");

// Erreur personnalisée
notification.error("Oups !", "Une erreur s'est produite");

// Avertissement
notification.warning("Attention", "Vérifiez vos données");

// Information
notification.info("Info", "Nouvelle fonctionnalité disponible");

⏱️ Changer la durée d'affichage

Par défaut : 5 secondes. Pour changer :

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

📍 Où apparaissent les notifications ?

Position : En haut à droite de l'écran
Mobile : Pleine largeur en haut
Animation : Glisse depuis la droite
Fermeture : Automatique après 5s ou clic sur X

🧪 Tester le système

Vous pouvez tester toutes les notifications sur la page d'exemples. Voir le fichier NOTIFICATIONS.md pour plus de détails.

💡 Astuce

Pour un code plus propre, vous pouvez utiliser le composable directement dans vos méthodes :

const { created, updated, deleted, error, success } = useNotification();

// Puis simplement :
created("Le client");
updated("La catégorie");
deleted("Le produit");

❓ Questions fréquentes

Q: Les notifications fonctionnent-elles sur toutes les pages ? R: Oui, elles sont globales et fonctionnent partout.

Q: Puis-je avoir plusieurs notifications en même temps ? R: Oui, elles s'empilent automatiquement.

Q: Comment changer la position des notifications ? R: Voir le fichier NOTIFICATIONS.md pour la configuration avancée.

📚 Pour plus d'informations, consultez NOTIFICATIONS.md

3.7 KiB Raw Blame History