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

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

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

### 2. Notifications CRUD (les plus utilisées)

```javascript
// 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

```javascript
// 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

```javascript
// 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

```javascript
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

```javascript
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

```javascript
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

```javascript
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` :

```css
.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` :

```typescript
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

```javascript
// 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 :

```javascript
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`