feat: Enhance trip management features and improve UI responsiveness

- Implemented AutomaticKeepAliveClientMixin in HomeContent to maintain state during navigation.
- Modified trip loading logic to trigger after the first frame for better performance.
- Updated trip loading events to use LoadTripsByUserId for consistency.
- Added temporary success messages for trip creation and operations.
- Improved UI elements for better user experience, including updated text styles and spacing.
- Refactored trip model to support Firestore timestamps and improved error handling during parsing.
- Streamlined trip repository methods for better clarity and performance.
- Enhanced trip service methods to ensure correct mapping from Firestore documents.
- Removed unnecessary trip reset logic on logout.
This commit is contained in:
Dayron
2025-10-20 14:31:41 +02:00
parent af93ac54ff
commit d0a76b5043
12 changed files with 863 additions and 756 deletions

View File

@@ -16,23 +16,31 @@ class HomeContent extends StatefulWidget {
State<HomeContent> createState() => _HomeContentState();
}
class _HomeContentState extends State<HomeContent> {
class _HomeContentState extends State<HomeContent> with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true;
@override
void initState() {
super.initState();
// Charger les trips quand le widget est initialisé
_loadTripsIfUserLoaded();
// MODIFIÉ : Attendre un frame avant de charger
WidgetsBinding.instance.addPostFrameCallback((_) {
_loadTripsIfUserLoaded();
});
}
void _loadTripsIfUserLoaded() {
final userState = context.read<UserBloc>().state;
if (userState is UserLoaded) {
context.read<TripBloc>().add(TripLoadRequested(userId: userState.user.id));
print('🚀 Chargement initial des trips pour ${userState.user.id}');
context.read<TripBloc>().add(LoadTripsByUserId(userId: userState.user.id));
}
}
@override
Widget build(BuildContext context) {
super.build(context); // Important pour AutomaticKeepAliveClientMixin
return BlocBuilder<UserBloc, UserState>(
builder: (context, userState) {
if (userState is UserLoading) {
@@ -42,7 +50,7 @@ class _HomeContentState extends State<HomeContent> {
),
);
}
if (userState is UserError) {
return Scaffold(
body: Center(
@@ -57,7 +65,7 @@ class _HomeContentState extends State<HomeContent> {
),
);
}
if (userState is! UserLoaded) {
return Scaffold(
body: Center(
@@ -65,14 +73,9 @@ class _HomeContentState extends State<HomeContent> {
),
);
}
final user = userState.user;
// Charger les trips si ce n'est pas déjà fait
if (context.read<TripBloc>().state is TripInitial) {
context.read<TripBloc>().add(TripLoadRequested(userId: user.id));
}
return BlocConsumer<TripBloc, TripState>(
listener: (context, tripState) {
if (tripState is TripOperationSuccess) {
@@ -82,8 +85,6 @@ class _HomeContentState extends State<HomeContent> {
backgroundColor: Colors.green,
),
);
// Recharger les trips après une opération réussie
context.read<TripBloc>().add(TripLoadRequested(userId: user.id));
} else if (tripState is TripError) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
@@ -91,62 +92,70 @@ class _HomeContentState extends State<HomeContent> {
backgroundColor: Colors.red,
),
);
} else if (tripState is TripCreated) {
// Afficher un message de succès temporaire
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Voyage en cours de création...'),
backgroundColor: Colors.blue,
duration: Duration(seconds: 1),
),
);
}
},
builder: (context, tripState) {
return Scaffold(
body: RefreshIndicator(
onRefresh: () async {
context.read<TripBloc>().add(TripLoadRequested(userId: user.id));
print('🔄 Pull to refresh');
context.read<TripBloc>().add(LoadTripsByUserId(userId: user.id));
// Attendre que le chargement soit terminé
await Future.delayed(Duration(milliseconds: 500));
},
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header de bienvenue
Text(
'Bonjour ${user.prenom} !',
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
SizedBox(height: 8),
const SizedBox(height: 8),
Text(
'Vos voyages',
style: TextStyle(fontSize: 16, color: Colors.grey[600]),
),
SizedBox(height: 20),
const SizedBox(height: 20),
// Contenu principal basé sur l'état du TripBloc
if (tripState is TripLoading)
if (tripState is TripLoading || tripState is TripCreated)
_buildLoadingState()
else if (tripState is TripError)
_buildErrorState(tripState.message, user.id)
else if (tripState is TripLoaded)
tripState.trips.isEmpty
? _buildEmptyState()
: _buildTripsList(tripState.trips)
tripState.trips.isEmpty
? _buildEmptyState()
: _buildTripsList(tripState.trips)
else
_buildEmptyState(),
// Espacement en bas pour éviter que le FAB cache le contenu
const SizedBox(height: 80),
],
),
),
),
// FloatingActionButton
floatingActionButton: FloatingActionButton(
onPressed: () async {
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => CreateTripContent()),
MaterialPageRoute(builder: (context) => const CreateTripContent()),
);
if (result == true) {
// Recharger les trips
context.read<TripBloc>().add(TripLoadRequested(userId: user.id));
// AJOUTÉ : Recharger manuellement après retour
if (result == true && mounted) {
print('🔄 Retour de création, rechargement...');
context.read<TripBloc>().add(LoadTripsByUserId(userId: user.id));
}
},
backgroundColor: Theme.of(context).colorScheme.primary,
@@ -189,7 +198,7 @@ class _HomeContentState extends State<HomeContent> {
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
context.read<TripBloc>().add(TripLoadRequested(userId: userId));
context.read<TripBloc>().add(LoadTripsByUserId(userId: userId));
},
child: Text('Réessayer'),
),
@@ -205,28 +214,17 @@ class _HomeContentState extends State<HomeContent> {
padding: EdgeInsets.all(32),
child: Column(
children: [
Icon(
Icons.travel_explore,
size: 64,
color: Colors.grey[400],
),
Icon(Icons.travel_explore, size: 80, color: Colors.grey[400]),
SizedBox(height: 16),
Text(
'Aucun voyage pour le moment',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
'Aucun voyage',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
SizedBox(height: 8),
Text(
'Créez votre premier voyage en appuyant sur le bouton +',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: Colors.grey[500],
),
style: TextStyle(fontSize: 14, color: Colors.grey[600]),
),
],
),
@@ -236,205 +234,127 @@ class _HomeContentState extends State<HomeContent> {
Widget _buildTripsList(List<Trip> trips) {
return Column(
children: trips.map((trip) => _buildTravelCard(trip)).toList(),
children: trips.map((trip) => _buildTripCard(trip)).toList(),
);
}
Widget _buildTravelCard(Trip trip) {
final colors = [Colors.blue, Colors.orange, Colors.green, Colors.purple, Colors.red];
final color = colors[trip.title.hashCode.abs() % colors.length];
Widget _buildTripCard(Trip trip) {
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
final secondaryTextColor = isDarkMode ? Colors.white70 : Colors.grey[700];
final iconColor = isDarkMode ? Colors.white70 : Colors.grey[600];
final textColor = isDarkMode ? Colors.white : Colors.black;
final subtextColor = isDarkMode ? Colors.white70 : Colors.grey[600];
return Card(
elevation: 4,
margin: const EdgeInsets.only(bottom: 16),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
margin: EdgeInsets.only(bottom: 12),
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: InkWell(
onTap: () {
Navigator.push(
onTap: () async {
// AJOUTÉ : Recharger après retour des détails
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => ShowTripDetailsContent(trip: trip)),
MaterialPageRoute(
builder: (context) => ShowTripDetailsContent(trip: trip),
),
);
if (result == true && mounted) {
final userState = context.read<UserBloc>().state;
if (userState is UserLoaded) {
print('🔄 Retour des détails, rechargement...');
context.read<TripBloc>().add(LoadTripsByUserId(userId: userState.user.id));
}
}
},
borderRadius: BorderRadius.circular(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Image d'en-tête avec titre overlay
Container(
height: 150,
decoration: BoxDecoration(
borderRadius: const BorderRadius.vertical(top: Radius.circular(12)),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
color.withValues(alpha: 0.7),
color.withValues(alpha: 0.9),
],
),
),
child: Stack(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
borderRadius: const BorderRadius.vertical(
top: Radius.circular(12),
),
color: color.withValues(alpha: 0.3),
),
),
Positioned(
bottom: 16,
left: 16,
right: 16,
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
trip.title,
style: const TextStyle(
fontSize: 20,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
color: textColor,
),
),
const SizedBox(height: 4),
SizedBox(height: 4),
Row(
children: [
const Icon(
Icons.location_on,
color: Colors.white,
size: 16,
),
const SizedBox(width: 4),
Expanded(
child: Text(
trip.location,
style: const TextStyle(
fontSize: 14,
color: Colors.white,
),
overflow: TextOverflow.ellipsis,
),
Icon(Icons.location_on, size: 16, color: subtextColor),
SizedBox(width: 4),
Text(
trip.location,
style: TextStyle(color: subtextColor),
),
],
),
],
),
),
],
),
),
// Contenu de la carte
Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Description
if (trip.description.isNotEmpty) ...[
Text(
trip.description,
style: TextStyle(
fontSize: 14,
color: secondaryTextColor,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
Container(
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: _getStatusColor(trip).withOpacity(0.2),
borderRadius: BorderRadius.circular(12),
),
SizedBox(height: 12),
],
// Dates
Row(
children: [
Icon(
Icons.calendar_today,
size: 16,
color: iconColor,
child: Text(
_getStatusText(trip),
style: TextStyle(
color: _getStatusColor(trip),
fontWeight: FontWeight.bold,
fontSize: 12,
),
SizedBox(width: 8),
Text(
'${trip.startDate.day}/${trip.startDate.month}/${trip.startDate.year} - ${trip.endDate.day}/${trip.endDate.month}/${trip.endDate.year}',
style: TextStyle(
fontSize: 14,
color: iconColor,
fontWeight: FontWeight.w500,
),
),
],
),
SizedBox(height: 12),
// Participants
Row(
children: [
Icon(Icons.group, size: 16, color: iconColor),
SizedBox(width: 8),
Text(
'${trip.participants.length} participant${trip.participants.length > 1 ? 's' : ''}',
style: TextStyle(
fontSize: 14,
color: iconColor,
fontWeight: FontWeight.w500,
),
),
],
),
SizedBox(height: 12),
// Budget et statut
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (trip.budget! > 0)
Row(
children: [
Icon(Icons.euro, size: 16, color: iconColor),
SizedBox(width: 8),
Text(
'Budget: ${trip.budget!.toStringAsFixed(2)}',
style: TextStyle(
fontSize: 14,
color: iconColor,
fontWeight: FontWeight.w500,
),
),
],
),
Container(
padding: EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: _getStatusColor(trip).withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(12),
),
child: Text(
_getStatusText(trip),
style: TextStyle(
fontSize: 12,
color: _getStatusColor(trip),
fontWeight: FontWeight.w500,
),
),
),
],
),
),
],
),
),
],
SizedBox(height: 12),
Row(
children: [
Icon(Icons.calendar_today, size: 16, color: subtextColor),
SizedBox(width: 4),
Text(
'${_formatDate(trip.startDate)} - ${_formatDate(trip.endDate)}',
style: TextStyle(fontSize: 14, color: subtextColor),
),
],
),
if (trip.budget != null) ...[
SizedBox(height: 8),
Row(
children: [
Icon(Icons.euro, size: 16, color: subtextColor),
SizedBox(width: 4),
Text(
'${trip.budget!.toStringAsFixed(2)}',
style: TextStyle(fontSize: 14, color: subtextColor),
),
],
),
],
SizedBox(height: 8),
Row(
children: [
Icon(Icons.people, size: 16, color: subtextColor),
SizedBox(width: 4),
Text(
'${trip.participants.length} participant${trip.participants.length > 1 ? 's' : ''}',
style: TextStyle(fontSize: 14, color: subtextColor),
),
],
),
],
),
),
),
);
@@ -442,23 +362,27 @@ class _HomeContentState extends State<HomeContent> {
Color _getStatusColor(Trip trip) {
final now = DateTime.now();
if (trip.endDate.isBefore(now)) {
return Colors.grey;
} else if (trip.startDate.isBefore(now) && trip.endDate.isAfter(now)) {
return Colors.green;
} else {
if (now.isBefore(trip.startDate)) {
return Colors.blue;
} else if (now.isAfter(trip.endDate)) {
return Colors.grey;
} else {
return Colors.green;
}
}
String _getStatusText(Trip trip) {
final now = DateTime.now();
if (trip.endDate.isBefore(now)) {
return 'Terminé';
} else if (trip.startDate.isBefore(now) && trip.endDate.isAfter(now)) {
return 'En cours';
} else {
if (now.isBefore(trip.startDate)) {
return 'À venir';
} else if (now.isAfter(trip.endDate)) {
return 'Terminé';
} else {
return 'En cours';
}
}
}
String _formatDate(DateTime date) {
return '${date.day}/${date.month}/${date.year}';
}
}