165 lines
3.7 KiB
Markdown
165 lines
3.7 KiB
Markdown
# 🚀 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 :
|
|
|
|
```javascript
|
|
import { useNotification } from "@/composables/useNotification";
|
|
```
|
|
|
|
### Étape 2 : Initialiser dans setup()
|
|
|
|
```javascript
|
|
export default {
|
|
setup() {
|
|
const notification = useNotification();
|
|
|
|
return {
|
|
notification
|
|
};
|
|
}
|
|
}
|
|
```
|
|
|
|
### Étape 3 : Utiliser dans vos fonctions
|
|
|
|
```javascript
|
|
// 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
|
|
|
|
```javascript
|
|
<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
|
|
|
|
```javascript
|
|
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
|
|
|
|
```javascript
|
|
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
|
|
|
|
```javascript
|
|
// 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 :
|
|
|
|
```javascript
|
|
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 :
|
|
|
|
```javascript
|
|
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`
|