first commit
This commit is contained in:
DahoudG
@@ -0,0 +1,627 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import '../../../../shared/theme/app_theme.dart';
|
||||
import '../../../../core/utils/responsive_utils.dart';
|
||||
import '../widgets/sophisticated_member_card.dart';
|
||||
import '../widgets/members_search_bar.dart';
|
||||
import '../widgets/members_filter_sheet.dart';
|
||||
|
||||
class MembersListPage extends StatefulWidget {
|
||||
const MembersListPage({super.key});
|
||||
|
||||
@override
|
||||
State<MembersListPage> createState() => _MembersListPageState();
|
||||
}
|
||||
|
||||
class _MembersListPageState extends State<MembersListPage>
|
||||
with TickerProviderStateMixin {
|
||||
late TabController _tabController;
|
||||
final TextEditingController _searchController = TextEditingController();
|
||||
final ScrollController _scrollController = ScrollController();
|
||||
|
||||
String _searchQuery = '';
|
||||
String _selectedFilter = 'Tous';
|
||||
bool _isSearchActive = false;
|
||||
|
||||
final List<Map<String, dynamic>> _members = [
|
||||
{
|
||||
'id': '1',
|
||||
'firstName': 'Jean',
|
||||
'lastName': 'Dupont',
|
||||
'email': 'jean.dupont@email.com',
|
||||
'phone': '+33 6 12 34 56 78',
|
||||
'role': 'Président',
|
||||
'status': 'Actif',
|
||||
'joinDate': '2022-01-15',
|
||||
'lastActivity': '2024-08-15',
|
||||
'cotisationStatus': 'À jour',
|
||||
'avatar': null,
|
||||
'category': 'Bureau',
|
||||
},
|
||||
{
|
||||
'id': '2',
|
||||
'firstName': 'Marie',
|
||||
'lastName': 'Martin',
|
||||
'email': 'marie.martin@email.com',
|
||||
'phone': '+33 6 98 76 54 32',
|
||||
'role': 'Secrétaire',
|
||||
'status': 'Actif',
|
||||
'joinDate': '2022-03-20',
|
||||
'lastActivity': '2024-08-14',
|
||||
'cotisationStatus': 'À jour',
|
||||
'avatar': null,
|
||||
'category': 'Bureau',
|
||||
},
|
||||
{
|
||||
'id': '3',
|
||||
'firstName': 'Pierre',
|
||||
'lastName': 'Dubois',
|
||||
'email': 'pierre.dubois@email.com',
|
||||
'phone': '+33 6 55 44 33 22',
|
||||
'role': 'Trésorier',
|
||||
'status': 'Actif',
|
||||
'joinDate': '2022-02-10',
|
||||
'lastActivity': '2024-08-13',
|
||||
'cotisationStatus': 'En retard',
|
||||
'avatar': null,
|
||||
'category': 'Bureau',
|
||||
},
|
||||
{
|
||||
'id': '4',
|
||||
'firstName': 'Sophie',
|
||||
'lastName': 'Leroy',
|
||||
'email': 'sophie.leroy@email.com',
|
||||
'phone': '+33 6 11 22 33 44',
|
||||
'role': 'Membre',
|
||||
'status': 'Actif',
|
||||
'joinDate': '2023-05-12',
|
||||
'lastActivity': '2024-08-12',
|
||||
'cotisationStatus': 'À jour',
|
||||
'avatar': null,
|
||||
'category': 'Membres',
|
||||
},
|
||||
{
|
||||
'id': '5',
|
||||
'firstName': 'Thomas',
|
||||
'lastName': 'Roux',
|
||||
'email': 'thomas.roux@email.com',
|
||||
'phone': '+33 6 77 88 99 00',
|
||||
'role': 'Membre',
|
||||
'status': 'Inactif',
|
||||
'joinDate': '2021-09-08',
|
||||
'lastActivity': '2024-07-20',
|
||||
'cotisationStatus': 'En retard',
|
||||
'avatar': null,
|
||||
'category': 'Membres',
|
||||
},
|
||||
{
|
||||
'id': '6',
|
||||
'firstName': 'Emma',
|
||||
'lastName': 'Moreau',
|
||||
'email': 'emma.moreau@email.com',
|
||||
'phone': '+33 6 66 77 88 99',
|
||||
'role': 'Responsable événements',
|
||||
'status': 'Actif',
|
||||
'joinDate': '2023-01-25',
|
||||
'lastActivity': '2024-08-16',
|
||||
'cotisationStatus': 'À jour',
|
||||
'avatar': null,
|
||||
'category': 'Responsables',
|
||||
},
|
||||
];
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_tabController = TabController(length: 4, vsync: this);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_tabController.dispose();
|
||||
_searchController.dispose();
|
||||
_scrollController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
List<Map<String, dynamic>> get _filteredMembers {
|
||||
return _members.where((member) {
|
||||
final matchesSearch = _searchQuery.isEmpty ||
|
||||
member['firstName'].toLowerCase().contains(_searchQuery.toLowerCase()) ||
|
||||
member['lastName'].toLowerCase().contains(_searchQuery.toLowerCase()) ||
|
||||
member['email'].toLowerCase().contains(_searchQuery.toLowerCase()) ||
|
||||
member['role'].toLowerCase().contains(_searchQuery.toLowerCase());
|
||||
|
||||
final matchesFilter = _selectedFilter == 'Tous' ||
|
||||
(_selectedFilter == 'Actifs' && member['status'] == 'Actif') ||
|
||||
(_selectedFilter == 'Inactifs' && member['status'] == 'Inactif') ||
|
||||
(_selectedFilter == 'Bureau' && member['category'] == 'Bureau') ||
|
||||
(_selectedFilter == 'En retard' && member['cotisationStatus'] == 'En retard');
|
||||
|
||||
return matchesSearch && matchesFilter;
|
||||
}).toList();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
ResponsiveUtils.init(context);
|
||||
return Scaffold(
|
||||
backgroundColor: AppTheme.backgroundLight,
|
||||
body: NestedScrollView(
|
||||
controller: _scrollController,
|
||||
headerSliverBuilder: (context, innerBoxIsScrolled) {
|
||||
return [
|
||||
_buildAppBar(innerBoxIsScrolled),
|
||||
_buildTabBar(),
|
||||
];
|
||||
},
|
||||
body: TabBarView(
|
||||
controller: _tabController,
|
||||
children: [
|
||||
_buildMembersList(),
|
||||
_buildMembersList(filter: 'Bureau'),
|
||||
_buildMembersList(filter: 'Responsables'),
|
||||
_buildMembersList(filter: 'Membres'),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAppBar(bool innerBoxIsScrolled) {
|
||||
return SliverAppBar(
|
||||
expandedHeight: _isSearchActive ? 250 : 180,
|
||||
floating: false,
|
||||
pinned: true,
|
||||
backgroundColor: AppTheme.secondaryColor,
|
||||
flexibleSpace: FlexibleSpaceBar(
|
||||
title: AnimatedOpacity(
|
||||
opacity: innerBoxIsScrolled ? 1.0 : 0.0,
|
||||
duration: const Duration(milliseconds: 200),
|
||||
child: const Text(
|
||||
'Membres',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
background: Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [AppTheme.secondaryColor, AppTheme.secondaryColor.withOpacity(0.8)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
),
|
||||
child: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
// Titre principal quand l'AppBar est étendu
|
||||
if (!innerBoxIsScrolled)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 60),
|
||||
child: Text(
|
||||
'Membres',
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Contenu principal
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: ResponsiveUtils.paddingOnly(
|
||||
left: 4,
|
||||
top: 2,
|
||||
right: 4,
|
||||
bottom: 2,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (_isSearchActive) ...[
|
||||
Flexible(
|
||||
child: MembersSearchBar(
|
||||
controller: _searchController,
|
||||
onChanged: (value) {
|
||||
setState(() {
|
||||
_searchQuery = value;
|
||||
});
|
||||
},
|
||||
onClear: () {
|
||||
setState(() {
|
||||
_searchQuery = '';
|
||||
_searchController.clear();
|
||||
});
|
||||
},
|
||||
),
|
||||
),
|
||||
SizedBox(height: 2.hp),
|
||||
],
|
||||
Flexible(
|
||||
child: _buildStatsRow(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: Icon(_isSearchActive ? Icons.search_off : Icons.search),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_isSearchActive = !_isSearchActive;
|
||||
if (!_isSearchActive) {
|
||||
_searchController.clear();
|
||||
_searchQuery = '';
|
||||
}
|
||||
});
|
||||
},
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.filter_list),
|
||||
onPressed: _showFilterSheet,
|
||||
),
|
||||
PopupMenuButton<String>(
|
||||
icon: const Icon(Icons.more_vert),
|
||||
onSelected: _handleMenuSelection,
|
||||
itemBuilder: (context) => [
|
||||
const PopupMenuItem(
|
||||
value: 'export',
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.download),
|
||||
SizedBox(width: 8),
|
||||
Text('Exporter'),
|
||||
],
|
||||
),
|
||||
),
|
||||
const PopupMenuItem(
|
||||
value: 'import',
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.upload),
|
||||
SizedBox(width: 8),
|
||||
Text('Importer'),
|
||||
],
|
||||
),
|
||||
),
|
||||
const PopupMenuItem(
|
||||
value: 'stats',
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.analytics),
|
||||
SizedBox(width: 8),
|
||||
Text('Statistiques'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTabBar() {
|
||||
return SliverPersistentHeader(
|
||||
delegate: _TabBarDelegate(
|
||||
TabBar(
|
||||
controller: _tabController,
|
||||
labelColor: AppTheme.secondaryColor,
|
||||
unselectedLabelColor: AppTheme.textSecondary,
|
||||
indicatorColor: AppTheme.secondaryColor,
|
||||
indicatorWeight: 3,
|
||||
labelStyle: const TextStyle(fontWeight: FontWeight.w600),
|
||||
tabs: const [
|
||||
Tab(text: 'Tous'),
|
||||
Tab(text: 'Bureau'),
|
||||
Tab(text: 'Responsables'),
|
||||
Tab(text: 'Membres'),
|
||||
],
|
||||
),
|
||||
),
|
||||
pinned: true,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatsRow() {
|
||||
final activeCount = _members.where((m) => m['status'] == 'Actif').length;
|
||||
final latePayments = _members.where((m) => m['cotisationStatus'] == 'En retard').length;
|
||||
|
||||
return Row(
|
||||
children: [
|
||||
_buildStatCard(
|
||||
title: 'Total',
|
||||
value: '${_members.length}',
|
||||
icon: Icons.people,
|
||||
color: Colors.white,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
_buildStatCard(
|
||||
title: 'Actifs',
|
||||
value: '$activeCount',
|
||||
icon: Icons.check_circle,
|
||||
color: AppTheme.successColor,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
_buildStatCard(
|
||||
title: 'En retard',
|
||||
value: '$latePayments',
|
||||
icon: Icons.warning,
|
||||
color: AppTheme.warningColor,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatCard({
|
||||
required String title,
|
||||
required String value,
|
||||
required IconData icon,
|
||||
required Color color,
|
||||
}) {
|
||||
return Expanded(
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withOpacity(0.2),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(
|
||||
color: Colors.white.withOpacity(0.3),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
icon,
|
||||
color: color,
|
||||
size: ResponsiveUtils.iconSize(4),
|
||||
),
|
||||
SizedBox(width: 1.5.wp),
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Text(
|
||||
value,
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: ResponsiveUtils.adaptive(
|
||||
small: 3.5.fs,
|
||||
medium: 3.2.fs,
|
||||
large: 3.fs,
|
||||
),
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
Flexible(
|
||||
child: Text(
|
||||
title,
|
||||
style: TextStyle(
|
||||
color: Colors.white.withOpacity(0.9),
|
||||
fontSize: ResponsiveUtils.adaptive(
|
||||
small: 2.8.fs,
|
||||
medium: 2.6.fs,
|
||||
large: 2.4.fs,
|
||||
),
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMembersList({String? filter}) {
|
||||
List<Map<String, dynamic>> members = _filteredMembers;
|
||||
|
||||
if (filter != null) {
|
||||
members = members.where((member) => member['category'] == filter).toList();
|
||||
}
|
||||
|
||||
if (members.isEmpty) {
|
||||
return _buildEmptyState();
|
||||
}
|
||||
|
||||
return RefreshIndicator(
|
||||
onRefresh: _refreshMembers,
|
||||
color: AppTheme.secondaryColor,
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.all(16),
|
||||
itemCount: members.length,
|
||||
itemBuilder: (context, index) {
|
||||
final member = members[index];
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: SophisticatedMemberCard(
|
||||
member: member,
|
||||
onTap: () => _showMemberDetails(member),
|
||||
onEdit: () => _editMember(member),
|
||||
compact: false,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEmptyState() {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.people_outline,
|
||||
size: 80,
|
||||
color: AppTheme.textHint,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const Text(
|
||||
'Aucun membre trouvé',
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
'Modifiez vos critères de recherche ou ajoutez de nouveaux membres',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: AppTheme.textHint,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
ElevatedButton.icon(
|
||||
onPressed: _addMember,
|
||||
icon: const Icon(Icons.person_add),
|
||||
label: const Text('Ajouter un membre'),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppTheme.secondaryColor,
|
||||
foregroundColor: Colors.white,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
void _showFilterSheet() {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
backgroundColor: Colors.transparent,
|
||||
builder: (context) => MembersFilterSheet(
|
||||
selectedFilter: _selectedFilter,
|
||||
onFilterChanged: (filter) {
|
||||
setState(() {
|
||||
_selectedFilter = filter;
|
||||
});
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _handleMenuSelection(String value) {
|
||||
switch (value) {
|
||||
case 'export':
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Export des membres - En développement'),
|
||||
backgroundColor: AppTheme.secondaryColor,
|
||||
),
|
||||
);
|
||||
break;
|
||||
case 'import':
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Import des membres - En développement'),
|
||||
backgroundColor: AppTheme.secondaryColor,
|
||||
),
|
||||
);
|
||||
break;
|
||||
case 'stats':
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Statistiques détaillées - En développement'),
|
||||
backgroundColor: AppTheme.secondaryColor,
|
||||
),
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _refreshMembers() async {
|
||||
await Future.delayed(const Duration(seconds: 1));
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Liste des membres actualisée'),
|
||||
backgroundColor: AppTheme.successColor,
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _showMemberDetails(Map<String, dynamic> member) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text('Détails de ${member['firstName']} ${member['lastName']} - En développement'),
|
||||
backgroundColor: AppTheme.secondaryColor,
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _editMember(Map<String, dynamic> member) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text('Édition de ${member['firstName']} ${member['lastName']} - En développement'),
|
||||
backgroundColor: AppTheme.accentColor,
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _addMember() {
|
||||
HapticFeedback.lightImpact();
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Ajouter un membre - En développement'),
|
||||
backgroundColor: AppTheme.secondaryColor,
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TabBarDelegate extends SliverPersistentHeaderDelegate {
|
||||
final TabBar tabBar;
|
||||
|
||||
_TabBarDelegate(this.tabBar);
|
||||
|
||||
@override
|
||||
double get minExtent => tabBar.preferredSize.height;
|
||||
|
||||
@override
|
||||
double get maxExtent => tabBar.preferredSize.height;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
|
||||
return Container(
|
||||
color: Colors.white,
|
||||
child: tabBar,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRebuild(_TabBarDelegate oldDelegate) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user