# 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<MembreModel>, 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

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

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

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

```dart
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.