444 lines
16 KiB
Dart
444 lines
16 KiB
Dart
import 'dart:async';
|
|
import 'package:flutter/material.dart';
|
|
import '../../../../shared/design_system/unionflow_design_v2.dart';
|
|
import '../../../../shared/design_system/components/uf_app_bar.dart';
|
|
import '../../../../core/constants/app_constants.dart';
|
|
|
|
/// Annuaire des Membres - Design UnionFlow
|
|
class MembersPageWithDataAndPagination extends StatefulWidget {
|
|
final List<Map<String, dynamic>> members;
|
|
final int totalCount;
|
|
final int currentPage;
|
|
final int totalPages;
|
|
final Function(int page, String? recherche) onPageChanged;
|
|
final VoidCallback onRefresh;
|
|
final void Function(String? query)? onSearch;
|
|
final VoidCallback? onAddMember;
|
|
|
|
const MembersPageWithDataAndPagination({
|
|
super.key,
|
|
required this.members,
|
|
required this.totalCount,
|
|
required this.currentPage,
|
|
required this.totalPages,
|
|
required this.onPageChanged,
|
|
required this.onRefresh,
|
|
this.onSearch,
|
|
this.onAddMember,
|
|
});
|
|
|
|
@override
|
|
State<MembersPageWithDataAndPagination> createState() => _MembersPageWithDataAndPaginationState();
|
|
}
|
|
|
|
class _MembersPageWithDataAndPaginationState extends State<MembersPageWithDataAndPagination> {
|
|
final TextEditingController _searchController = TextEditingController();
|
|
String _searchQuery = '';
|
|
String _filterStatus = 'Tous';
|
|
Timer? _searchDebounce;
|
|
|
|
@override
|
|
void dispose() {
|
|
_searchDebounce?.cancel();
|
|
_searchController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: UnionFlowColors.background,
|
|
appBar: UFAppBar(
|
|
title: 'Annuaire Membres',
|
|
backgroundColor: UnionFlowColors.surface,
|
|
foregroundColor: UnionFlowColors.textPrimary,
|
|
actions: [
|
|
if (widget.onAddMember != null)
|
|
IconButton(
|
|
icon: const Icon(Icons.person_add_outlined),
|
|
color: UnionFlowColors.unionGreen,
|
|
onPressed: widget.onAddMember,
|
|
tooltip: 'Ajouter un membre',
|
|
),
|
|
const SizedBox(width: 8),
|
|
],
|
|
),
|
|
body: Column(
|
|
children: [
|
|
_buildHeader(),
|
|
_buildSearchAndFilters(),
|
|
Expanded(child: _buildMembersList()),
|
|
if (widget.totalPages > 1) _buildPagination(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildHeader() {
|
|
final activeCount = widget.members.where((m) => m['status'] == 'Actif').length;
|
|
final pendingCount = widget.members.where((m) => m['status'] == 'En attente').length;
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: UnionFlowColors.surface,
|
|
border: Border(
|
|
bottom: BorderSide(color: UnionFlowColors.border.withOpacity(0.5), width: 1),
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Expanded(child: _buildStatBadge('Total', widget.totalCount.toString(), UnionFlowColors.unionGreen)),
|
|
const SizedBox(width: 12),
|
|
Expanded(child: _buildStatBadge('Actifs', activeCount.toString(), UnionFlowColors.success)),
|
|
const SizedBox(width: 12),
|
|
Expanded(child: _buildStatBadge('Attente', pendingCount.toString(), UnionFlowColors.warning)),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildStatBadge(String label, String value, Color color) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
|
|
decoration: BoxDecoration(
|
|
color: color.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(color: color.withOpacity(0.3), width: 1),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Text(value, style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700, color: color)),
|
|
const SizedBox(height: 2),
|
|
Text(label, style: TextStyle(fontSize: 10, fontWeight: FontWeight.w600, color: color)),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildSearchAndFilters() {
|
|
return Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: UnionFlowColors.surface,
|
|
border: Border(bottom: BorderSide(color: UnionFlowColors.border.withOpacity(0.5), width: 1)),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
TextField(
|
|
controller: _searchController,
|
|
onChanged: (v) {
|
|
setState(() => _searchQuery = v);
|
|
_searchDebounce?.cancel();
|
|
_searchDebounce = Timer(AppConstants.searchDebounce, () {
|
|
widget.onSearch?.call(v.isEmpty ? null : v);
|
|
});
|
|
},
|
|
style: const TextStyle(fontSize: 14, color: UnionFlowColors.textPrimary),
|
|
decoration: InputDecoration(
|
|
hintText: 'Rechercher un membre...',
|
|
hintStyle: const TextStyle(fontSize: 13, color: UnionFlowColors.textTertiary),
|
|
prefixIcon: const Icon(Icons.search, size: 20, color: UnionFlowColors.textSecondary),
|
|
suffixIcon: _searchQuery.isNotEmpty
|
|
? IconButton(
|
|
icon: const Icon(Icons.clear, size: 18, color: UnionFlowColors.textSecondary),
|
|
onPressed: () {
|
|
_searchDebounce?.cancel();
|
|
_searchController.clear();
|
|
setState(() => _searchQuery = '');
|
|
widget.onSearch?.call(null);
|
|
},
|
|
)
|
|
: null,
|
|
contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: BorderSide(color: UnionFlowColors.border.withOpacity(0.3)),
|
|
),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: BorderSide(color: UnionFlowColors.border.withOpacity(0.3)),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: const BorderSide(color: UnionFlowColors.unionGreen, width: 1.5),
|
|
),
|
|
filled: true,
|
|
fillColor: UnionFlowColors.surfaceVariant.withOpacity(0.3),
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: [
|
|
_buildFilterChip('Tous'),
|
|
const SizedBox(width: 8),
|
|
_buildFilterChip('Actif'),
|
|
const SizedBox(width: 8),
|
|
_buildFilterChip('Inactif'),
|
|
const SizedBox(width: 8),
|
|
_buildFilterChip('En attente'),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildFilterChip(String label) {
|
|
final isSelected = _filterStatus == label;
|
|
return GestureDetector(
|
|
onTap: () => setState(() => _filterStatus = label),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
|
decoration: BoxDecoration(
|
|
color: isSelected ? UnionFlowColors.unionGreen : UnionFlowColors.surface,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(color: isSelected ? UnionFlowColors.unionGreen : UnionFlowColors.border, width: 1),
|
|
),
|
|
child: Text(
|
|
label,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w600,
|
|
color: isSelected ? Colors.white : UnionFlowColors.textSecondary,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildMembersList() {
|
|
final filtered = widget.members.where((m) {
|
|
final matchesSearch = _searchQuery.isEmpty ||
|
|
m['name']!.toLowerCase().contains(_searchQuery.toLowerCase()) ||
|
|
(m['email']?.toLowerCase().contains(_searchQuery.toLowerCase()) ?? false);
|
|
final matchesStatus = _filterStatus == 'Tous' || m['status'] == _filterStatus;
|
|
return matchesSearch && matchesStatus;
|
|
}).toList();
|
|
|
|
if (filtered.isEmpty) return _buildEmptyState();
|
|
|
|
return RefreshIndicator(
|
|
onRefresh: () async => widget.onRefresh(),
|
|
color: UnionFlowColors.unionGreen,
|
|
child: ListView.separated(
|
|
padding: const EdgeInsets.all(12),
|
|
itemCount: filtered.length,
|
|
separatorBuilder: (_, __) => const SizedBox(height: 6),
|
|
itemBuilder: (context, index) => _buildMemberCard(filtered[index]),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildMemberCard(Map<String, dynamic> member) {
|
|
return GestureDetector(
|
|
onTap: () => _showMemberDetails(member),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 7),
|
|
decoration: BoxDecoration(
|
|
color: UnionFlowColors.surface,
|
|
borderRadius: BorderRadius.circular(10),
|
|
border: Border.all(color: UnionFlowColors.border.withOpacity(0.3), width: 1),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 32,
|
|
height: 32,
|
|
decoration: const BoxDecoration(gradient: UnionFlowColors.primaryGradient, shape: BoxShape.circle),
|
|
alignment: Alignment.center,
|
|
child: Text(
|
|
member['initiales'] ?? '??',
|
|
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 13),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
member['name'] ?? 'Inconnu',
|
|
style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: UnionFlowColors.textPrimary),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
member['role'] ?? 'Membre',
|
|
style: const TextStyle(fontSize: 12, color: UnionFlowColors.textSecondary),
|
|
),
|
|
if (member['email'] != null) ...[
|
|
const SizedBox(height: 4),
|
|
Row(
|
|
children: [
|
|
const Icon(Icons.email_outlined, size: 12, color: UnionFlowColors.textTertiary),
|
|
const SizedBox(width: 4),
|
|
Text(member['email']!, style: const TextStyle(fontSize: 11, color: UnionFlowColors.textTertiary)),
|
|
],
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
_buildStatusBadge(member['status']),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildStatusBadge(String? status) {
|
|
Color color;
|
|
switch (status) {
|
|
case 'Actif':
|
|
color = UnionFlowColors.success;
|
|
break;
|
|
case 'Inactif':
|
|
color = UnionFlowColors.error;
|
|
break;
|
|
case 'En attente':
|
|
color = UnionFlowColors.warning;
|
|
break;
|
|
default:
|
|
color = UnionFlowColors.textSecondary;
|
|
}
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: color.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(color: color.withOpacity(0.3), width: 1),
|
|
),
|
|
child: Text(status ?? '?', style: TextStyle(fontSize: 11, fontWeight: FontWeight.w600, color: color)),
|
|
);
|
|
}
|
|
|
|
Widget _buildEmptyState() {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: const BoxDecoration(color: UnionFlowColors.unionGreenPale, shape: BoxShape.circle),
|
|
child: const Icon(Icons.people_outline, size: 40, color: UnionFlowColors.unionGreen),
|
|
),
|
|
const SizedBox(height: 12),
|
|
const Text(
|
|
'Aucun membre trouvé',
|
|
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w700, color: UnionFlowColors.textPrimary),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
_searchQuery.isEmpty ? 'Changez vos filtres' : 'Essayez une autre recherche',
|
|
style: const TextStyle(fontSize: 13, color: UnionFlowColors.textSecondary),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildPagination() {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(vertical: 12),
|
|
decoration: BoxDecoration(
|
|
color: UnionFlowColors.surface,
|
|
border: Border(top: BorderSide(color: UnionFlowColors.border.withOpacity(0.5), width: 1)),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
IconButton(
|
|
icon: const Icon(Icons.chevron_left, size: 24),
|
|
color: widget.currentPage > 0 ? UnionFlowColors.unionGreen : UnionFlowColors.textTertiary,
|
|
onPressed: widget.currentPage > 0
|
|
? () => widget.onPageChanged(
|
|
widget.currentPage - 1,
|
|
_searchQuery.isEmpty ? null : _searchQuery,
|
|
)
|
|
: null,
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
decoration: BoxDecoration(gradient: UnionFlowColors.primaryGradient, borderRadius: BorderRadius.circular(20)),
|
|
child: Text(
|
|
'Page ${widget.currentPage + 1} / ${widget.totalPages}',
|
|
style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: Colors.white),
|
|
),
|
|
),
|
|
IconButton(
|
|
icon: const Icon(Icons.chevron_right, size: 24),
|
|
color: widget.currentPage < widget.totalPages - 1 ? UnionFlowColors.unionGreen : UnionFlowColors.textTertiary,
|
|
onPressed: widget.currentPage < widget.totalPages - 1
|
|
? () => widget.onPageChanged(
|
|
widget.currentPage + 1,
|
|
_searchQuery.isEmpty ? null : _searchQuery,
|
|
)
|
|
: null,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
void _showMemberDetails(Map<String, dynamic> member) {
|
|
showModalBottomSheet(
|
|
context: context,
|
|
backgroundColor: Colors.transparent,
|
|
builder: (context) => Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: const BoxDecoration(
|
|
color: UnionFlowColors.surface,
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
width: 56,
|
|
height: 56,
|
|
decoration: const BoxDecoration(gradient: UnionFlowColors.primaryGradient, shape: BoxShape.circle),
|
|
alignment: Alignment.center,
|
|
child: Text(
|
|
member['initiales'] ?? '??',
|
|
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w900, fontSize: 22),
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Text(
|
|
member['name'] ?? '',
|
|
style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w700, color: UnionFlowColors.textPrimary),
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
member['role'] ?? '',
|
|
style: const TextStyle(fontSize: 13, color: UnionFlowColors.textSecondary),
|
|
),
|
|
const SizedBox(height: 12),
|
|
_buildInfoRow(Icons.email_outlined, member['email'] ?? 'Non fourni'),
|
|
_buildInfoRow(Icons.phone_outlined, member['phone'] ?? 'Non fourni'),
|
|
_buildInfoRow(Icons.location_on_outlined, member['location'] ?? 'Non renseigné'),
|
|
_buildInfoRow(Icons.work_outline, member['department'] ?? 'Aucun département'),
|
|
const SizedBox(height: 12),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildInfoRow(IconData icon, String text) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 8),
|
|
child: Row(
|
|
children: [
|
|
Icon(icon, size: 18, color: UnionFlowColors.unionGreen),
|
|
const SizedBox(width: 12),
|
|
Expanded(child: Text(text, style: const TextStyle(fontSize: 13, color: UnionFlowColors.textPrimary))),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|