geo/app/lib/presentation/widgets/docs/membre_widgets_documentation.md

Documentation des Widgets Membre

Cette documentation décrit les widgets créés pour afficher et gérer les données des membres dans l'application GeoSector.

Widgets disponibles

1. MembreRowWidget

Widget qui représente une ligne individuelle dans un tableau de membres. Il affiche les informations d'un membre et des boutons d'action pour l'édition et la suppression.

Propriétés

• membre (MembreModel, requis) : Le modèle de membre à afficher
• onEdit (Function()?, optionnel) : Callback appelé lorsque le bouton d'édition est pressé
• onDelete (Function()?, optionnel) : Callback appelé lorsque le bouton de suppression est pressé

Colonnes affichées

• ID : Identifiant unique du membre
• Prénom (firstName) : Prénom du membre
• Nom (name) : Nom de famille du membre
• Secteur (sectName) : Nom du secteur auquel le membre est associé
• Rôle (fkRole) : Rôle du membre (affiché sous forme de texte : User, Admin, Super)
• Actions : Boutons d'édition et de suppression

2. MembreTableWidget

Widget qui affiche un tableau complet de membres avec en-tête et lignes. Il utilise le widget MembreRowWidget pour afficher chaque ligne.

Propriétés

• membres (List, requis) : La liste des membres à afficher
• onEdit (Function(MembreModel)?, optionnel) : Callback appelé lorsque le bouton d'édition est pressé pour un membre
• onDelete (Function(MembreModel)?, optionnel) : Callback appelé lorsque le bouton de suppression est pressé pour un membre
• showHeader (bool, défaut: true) : Indique si l'en-tête du tableau doit être affiché
• height (double?, optionnel) : Hauteur du tableau (null pour prendre toute la hauteur disponible)
• padding (EdgeInsetsGeometry?, optionnel) : Padding du tableau

Exemple d'utilisation

Un exemple complet d'utilisation est disponible dans le fichier app/lib/presentation/widgets/examples/membre_table_example.dart.

Utilisation simple

// S'assurer que la boîte Hive est ouverte
if (!Hive.isBoxOpen(AppKeys.membresBoxName)) {
  await Hive.openBox<MembreModel>(AppKeys.membresBoxName);
}

// Récupérer les membres depuis la boîte Hive
final membresBox = Hive.box<MembreModel>(AppKeys.membresBoxName);
final membres = membresBox.values.toList();

// Afficher le tableau
return MembreTableWidget(
  membres: membres,
  onEdit: (membre) {
    // Gérer l'édition
  },
  onDelete: (membre) {
    // Gérer la suppression
  },
);

Utilisation avec gestion d'état

class _MyWidgetState extends State<MyWidget> {
  List<MembreModel> _membres = [];
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _loadMembres();
  }

  Future<void> _loadMembres() async {
    setState(() {
      _isLoading = true;
    });

    try {
      // S'assurer que la boîte Hive est ouverte
      if (!Hive.isBoxOpen(AppKeys.membresBoxName)) {
        await Hive.openBox<MembreModel>(AppKeys.membresBoxName);
      }

      // Récupérer les membres depuis la boîte Hive
      final membresBox = Hive.box<MembreModel>(AppKeys.membresBoxName);
      final membres = membresBox.values.toList();

      setState(() {
        _membres = membres;
        _isLoading = false;
      });
    } catch (e) {
      debugPrint('Erreur lors du chargement des membres: $e');
      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return _isLoading
      ? const Center(child: CircularProgressIndicator())
      : MembreTableWidget(
          membres: _membres,
          onEdit: _handleEdit,
          onDelete: _handleDelete,
        );
  }
}

Gestion des événements

Édition d'un membre

void _handleEdit(MembreModel membre) {
  // Exemple de gestion de l'événement d'édition
  debugPrint('Édition du membre: ${membre.firstName} ${membre.name} (ID: ${membre.id})');

  // Ici, vous pourriez ouvrir une boîte de dialogue ou naviguer vers une page d'édition
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('Édition de membre'),
      content: Text('Vous avez demandé à éditer le membre ${membre.firstName} ${membre.name}'),
      actions: [
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: const Text('Fermer'),
        ),
      ],
    ),
  );
}

Suppression d'un membre

void _handleDelete(MembreModel membre) {
  // Exemple de gestion de l'événement de suppression
  debugPrint('Suppression du membre: ${membre.firstName} ${membre.name} (ID: ${membre.id})');

  // Demander confirmation avant de supprimer
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('Confirmation de suppression'),
      content: Text('Êtes-vous sûr de vouloir supprimer le membre ${membre.firstName} ${membre.name} ?'),
      actions: [
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: const Text('Annuler'),
        ),
        TextButton(
          onPressed: () async {
            // Fermer la boîte de dialogue
            Navigator.of(context).pop();

            try {
              // Supprimer le membre de la boîte Hive
              final membresBox = Hive.box<MembreModel>(AppKeys.membresBoxName);
              await membresBox.delete(membre.id);

              // Mettre à jour l'état
              setState(() {
                _membres = _membres.where((m) => m.id != membre.id).toList();
              });

              // Afficher un message de confirmation
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('Membre ${membre.firstName} ${membre.name} supprimé'),
                  backgroundColor: Colors.green,
                ),
              );
            } catch (e) {
              debugPrint('Erreur lors de la suppression du membre: $e');
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('Erreur lors de la suppression: $e'),
                  backgroundColor: Colors.red,
                ),
              );
            }
          },
          child: const Text('Supprimer'),
          style: TextButton.styleFrom(foregroundColor: Colors.red),
        ),
      ],
    ),
  );
}

Personnalisation

Les widgets utilisent le thème de l'application pour le style. Vous pouvez personnaliser l'apparence en modifiant le thème ou en étendant les widgets pour créer vos propres versions personnalisées.