diff --git a/em2rp/lib/views/user_management_page.dart b/em2rp/lib/views/user_management_page.dart index 8c422ea..464e936 100644 --- a/em2rp/lib/views/user_management_page.dart +++ b/em2rp/lib/views/user_management_page.dart @@ -40,33 +40,32 @@ class _UserManagementPageState extends State { return const Center(child: Text("Aucun utilisateur trouvé")); } - // Détermine le nombre de colonnes selon la largeur final width = MediaQuery.of(context).size.width; - int crossAxisCount = 1; - if (width > 1200) + int crossAxisCount; + + // Ajustement du nombre de colonnes selon la taille d'écran + if (width > 1200) { crossAxisCount = 4; - else if (width > 800) + } else if (width > 800) { crossAxisCount = 3; - else if (width > 600) crossAxisCount = 2; + } else if (width > 600) { + crossAxisCount = 2; + } else { + crossAxisCount = 1; + } return Padding( padding: const EdgeInsets.all(16), child: GridView.builder( itemCount: users.length, - // Dans GridView.builder gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: width > 1200 - ? 4 - : width > 800 - ? 3 - : width > 600 - ? 2 - : 1, + crossAxisCount: crossAxisCount, crossAxisSpacing: 16, mainAxisSpacing: 16, - // childAspectRatio fixé pour desktop ; mobile ignore car row layout + mainAxisExtent: width < 600 + ? 80 + : 180, // Augmenté de 170 à 180 pour le desktop ), - itemBuilder: (context, i) { final user = users[i]; return UserCard( diff --git a/em2rp/lib/views/widgets/user_management/user_card.dart b/em2rp/lib/views/widgets/user_management/user_card.dart index 7a65eba..a742382 100644 --- a/em2rp/lib/views/widgets/user_management/user_card.dart +++ b/em2rp/lib/views/widgets/user_management/user_card.dart @@ -7,9 +7,7 @@ class UserCard extends StatelessWidget { final VoidCallback onEdit; final VoidCallback onDelete; - // Hauteurs fixes selon le device - static const double _mobileHeight = 150; - static const double _desktopHeight = 280; + static const double _desktopMaxWidth = 280; const UserCard({ Key? key, @@ -22,19 +20,18 @@ class UserCard extends StatelessWidget { Widget build(BuildContext context) { final width = MediaQuery.of(context).size.width; final isMobile = width < 600; - final cardHeight = isMobile ? _mobileHeight : _desktopHeight; - return SizedBox( - height: cardHeight, // Hauteur fixe - child: Card( - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), - elevation: 3, - child: Padding( - padding: const EdgeInsets.all(12), - child: isMobile - ? _buildMobileRow(context) - : _buildDesktopColumn(context), + return Card( + margin: EdgeInsets.zero, + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), + elevation: 3, + child: Container( + constraints: BoxConstraints( + maxWidth: isMobile ? double.infinity : _desktopMaxWidth, ), + padding: const EdgeInsets.all(12), + child: + isMobile ? _buildMobileRow(context) : _buildDesktopColumn(context), ), ); } @@ -42,112 +39,181 @@ class UserCard extends StatelessWidget { Widget _buildMobileRow(BuildContext context) { return Row( children: [ - _profileAvatar(48), + _profileAvatar(40), const SizedBox(width: 12), Expanded( child: Column( - mainAxisAlignment: MainAxisAlignment.center, // Centré verticalement + mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text("${user.firstName} ${user.lastName}", - style: Theme.of(context).textTheme.titleSmall), - Text(user.email, style: Theme.of(context).textTheme.bodySmall), - const SizedBox(height: 8), - Row( - children: [ - Flexible( - child: ElevatedButton.icon( - icon: const Icon(Icons.edit, size: 14), - label: const Text("Modifier"), - onPressed: onEdit, - style: ElevatedButton.styleFrom( - backgroundColor: AppColors.rouge, - foregroundColor: AppColors.blanc, - padding: const EdgeInsets.symmetric( - horizontal: 8, vertical: 4), - textStyle: const TextStyle(fontSize: 12), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(6)), - ), - ), - ), - const SizedBox(width: 8), - Flexible( - child: ElevatedButton.icon( - icon: const Icon(Icons.delete, size: 14), - label: const Text("Supprimer"), - onPressed: onDelete, - style: ElevatedButton.styleFrom( - backgroundColor: AppColors.gris, - foregroundColor: AppColors.blanc, - padding: const EdgeInsets.symmetric( - horizontal: 8, vertical: 4), - textStyle: const TextStyle(fontSize: 12), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(6)), - ), - ), - ), - ], + Text( + "${user.firstName} ${user.lastName}", + style: Theme.of(context).textTheme.titleSmall, + overflow: TextOverflow.ellipsis, + ), + const SizedBox(height: 2), + Text( + user.email, + style: Theme.of(context).textTheme.bodySmall, + overflow: TextOverflow.ellipsis, ), ], ), ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + IconButton( + icon: const Icon(Icons.edit, size: 20), + onPressed: onEdit, + color: AppColors.rouge, + padding: const EdgeInsets.all(8), + constraints: const BoxConstraints( + minWidth: 32, + minHeight: 32, + ), + ), + IconButton( + icon: const Icon(Icons.delete, size: 20), + onPressed: onDelete, + color: AppColors.gris, + padding: const EdgeInsets.all(8), + constraints: const BoxConstraints( + minWidth: 32, + minHeight: 32, + ), + ), + ], + ), ], ); } Widget _buildDesktopColumn(BuildContext context) { - return Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, // Écarte haut/bas - children: [ - _profileAvatar(80), - Column( + return LayoutBuilder( + builder: (context, constraints) { + final isNarrow = constraints.maxWidth < 200; + + return Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Text("${user.firstName} ${user.lastName}", - style: Theme.of(context).textTheme.titleSmall), - const SizedBox(height: 4), - Text(user.email, style: Theme.of(context).textTheme.bodySmall), - const SizedBox(height: 4), - Text(user.role, - style: Theme.of(context) - .textTheme - .bodySmall! - .copyWith(color: AppColors.gris)), - ], - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - ElevatedButton.icon( - icon: const Icon(Icons.edit, size: 18), - label: const Text("Modifier"), - onPressed: onEdit, - style: ElevatedButton.styleFrom( - backgroundColor: AppColors.rouge, - foregroundColor: AppColors.blanc, - padding: - const EdgeInsets.symmetric(horizontal: 12, vertical: 8), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8)), - ), + Column( + mainAxisSize: MainAxisSize.min, + children: [ + _profileAvatar(48), + const SizedBox(height: 12), + Column( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + "${user.firstName} ${user.lastName}", + style: Theme.of(context).textTheme.titleSmall, + textAlign: TextAlign.center, + overflow: TextOverflow.ellipsis, + ), + const SizedBox(height: 4), + Text( + user.email, + style: Theme.of(context).textTheme.bodySmall, + textAlign: TextAlign.center, + overflow: TextOverflow.ellipsis, + ), + if (user.role.isNotEmpty) ...[ + const SizedBox(height: 4), + Text( + user.role, + style: Theme.of(context).textTheme.bodySmall!.copyWith( + color: AppColors.gris, + fontSize: 11, + ), + textAlign: TextAlign.center, + overflow: TextOverflow.ellipsis, + ), + ], + ], + ), + ], ), - ElevatedButton.icon( - icon: const Icon(Icons.delete, size: 18), - label: const Text("Supprimer"), - onPressed: onDelete, - style: ElevatedButton.styleFrom( - backgroundColor: AppColors.gris, - foregroundColor: AppColors.blanc, - padding: - const EdgeInsets.symmetric(horizontal: 12, vertical: 8), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8)), - ), + Padding( + padding: const EdgeInsets.only(bottom: 4), + child: isNarrow + ? Column( + mainAxisSize: MainAxisSize.min, + children: [ + _buildButton( + icon: Icons.edit, + label: "Modifier", + onPressed: onEdit, + color: AppColors.rouge, + isNarrow: true, + ), + const SizedBox(height: 4), + _buildButton( + icon: Icons.delete, + label: "Supprimer", + onPressed: onDelete, + color: AppColors.gris, + isNarrow: true, + ), + ], + ) + : Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + _buildButton( + icon: Icons.edit, + label: "Modifier", + onPressed: onEdit, + color: AppColors.rouge, + isNarrow: false, + ), + const SizedBox(width: 8), + _buildButton( + icon: Icons.delete, + label: "Supprimer", + onPressed: onDelete, + color: AppColors.gris, + isNarrow: false, + ), + ], + ), ), ], + ); + }, + ); + } + + Widget _buildButton({ + required IconData icon, + required String label, + required VoidCallback onPressed, + required Color color, + required bool isNarrow, + }) { + return SizedBox( + height: 26, + width: isNarrow ? double.infinity : null, + child: ElevatedButton.icon( + icon: Icon(icon, size: 14), + label: Text( + label, + style: const TextStyle(fontSize: 11), + overflow: TextOverflow.ellipsis, ), - ], + onPressed: onPressed, + style: ElevatedButton.styleFrom( + backgroundColor: color, + foregroundColor: AppColors.blanc, + padding: EdgeInsets.symmetric( + horizontal: isNarrow ? 4 : 8, + vertical: 0, + ), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(6), + ), + ), + ), ); }