New-Thanasoft/thanasoft-front/src/examples/NotificationExamples.vue

<template>
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header pb-0">
            <h5>Exemples de Notifications</h5>
            <p class="text-sm">
              Testez le système de notifications avec différents types
            </p>
          </div>
          <div class="card-body">
            <!-- Notifications CRUD -->
            <div class="mb-4">
              <h6 class="mb-3">Notifications CRUD</h6>
              <div class="row">
                <div class="col-md-4 mb-3">
                  <button
                    class="btn btn-success w-100"
                    @click="showCreatedNotification"
                  >
                    <i class="ni ni-fat-add me-2"></i>
                    Création
                  </button>
                </div>
                <div class="col-md-4 mb-3">
                  <button
                    class="btn btn-info w-100"
                    @click="showUpdatedNotification"
                  >
                    <i class="ni ni-settings me-2"></i>
                    Mise à jour
                  </button>
                </div>
                <div class="col-md-4 mb-3">
                  <button
                    class="btn btn-danger w-100"
                    @click="showDeletedNotification"
                  >
                    <i class="ni ni-fat-delete me-2"></i>
                    Suppression
                  </button>
                </div>
              </div>
            </div>

            <!-- Notifications par type -->
            <div class="mb-4">
              <h6 class="mb-3">Notifications par Type</h6>
              <div class="row">
                <div class="col-md-3 mb-3">
                  <button
                    class="btn bg-gradient-success w-100"
                    @click="showSuccessNotification"
                  >
                    <i class="ni ni-check-bold me-2"></i>
                    Succès
                  </button>
                </div>
                <div class="col-md-3 mb-3">
                  <button
                    class="btn bg-gradient-danger w-100"
                    @click="showErrorNotification"
                  >
                    <i class="ni ni-fat-remove me-2"></i>
                    Erreur
                  </button>
                </div>
                <div class="col-md-3 mb-3">
                  <button
                    class="btn bg-gradient-warning w-100"
                    @click="showWarningNotification"
                  >
                    <i class="ni ni-bell-55 me-2"></i>
                    Attention
                  </button>
                </div>
                <div class="col-md-3 mb-3">
                  <button
                    class="btn bg-gradient-info w-100"
                    @click="showInfoNotification"
                  >
                    <i class="ni ni-bulb-61 me-2"></i>
                    Information
                  </button>
                </div>
              </div>
            </div>

            <!-- Notifications multiples -->
            <div>
              <h6 class="mb-3">Tests Avancés</h6>
              <div class="row">
                <div class="col-md-6 mb-3">
                  <button
                    class="btn btn-outline-primary w-100"
                    @click="showMultipleNotifications"
                  >
                    <i class="ni ni-bullet-list-67 me-2"></i>
                    Afficher plusieurs notifications
                  </button>
                </div>
                <div class="col-md-6 mb-3">
                  <button
                    class="btn btn-outline-secondary w-100"
                    @click="showLongDurationNotification"
                  >
                    <i class="ni ni-time-alarm me-2"></i>
                    Notification longue durée (10s)
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "NotificationExamples",
  setup() {
    const notification = useNotification();

    // Notifications CRUD
    const showCreatedNotification = () => {
      notification.created("Le client");
    };

    const showUpdatedNotification = () => {
      notification.updated("La catégorie");
    };

    const showDeletedNotification = () => {
      notification.deleted("Le produit");
    };

    // Notifications par type
    const showSuccessNotification = () => {
      notification.success(
        "Opération réussie",
        "L'action a été effectuée avec succès."
      );
    };

    const showErrorNotification = () => {
      notification.error(
        "Erreur rencontrée",
        "Une erreur s'est produite lors du traitement."
      );
    };

    const showWarningNotification = () => {
      notification.warning(
        "Attention requise",
        "Veuillez vérifier les données avant de continuer."
      );
    };

    const showInfoNotification = () => {
      notification.info(
        "Information",
        "Une nouvelle mise à jour est disponible."
      );
    };

    // Tests avancés
    const showMultipleNotifications = () => {
      notification.success("Notification 1", "Première notification");
      setTimeout(() => {
        notification.info("Notification 2", "Deuxième notification");
      }, 500);
      setTimeout(() => {
        notification.warning("Notification 3", "Troisième notification");
      }, 1000);
    };

    const showLongDurationNotification = () => {
      notification.info(
        "Notification longue",
        "Cette notification restera visible pendant 10 secondes.",
        10000
      );
    };

    return {
      showCreatedNotification,
      showUpdatedNotification,
      showDeletedNotification,
      showSuccessNotification,
      showErrorNotification,
      showWarningNotification,
      showInfoNotification,
      showMultipleNotifications,
      showLongDurationNotification,
    };
  },
};
</script>