ElPoyo/EM2_ERP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better layout for user card and user management page

Browse Source
This commit is contained in:
PC-PAUL\paulf
2025-05-05 20:08:01 +02:00
parent 4c7ce27a0c
commit 94337581d8
2 changed files with 181 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
em2rp/lib/views/user_management_page.dart
View File

@ -40,33 +40,32 @@ class _UserManagementPageState extends State<UserManagementPage> {
return const Center(child: Text("Aucun utilisateur trouvé")); return const Center(child: Text("Aucun utilisateur trouvé"));
} }
// Détermine le nombre de colonnes selon la largeur
final width = MediaQuery.of(context).size.width; final width = MediaQuery.of(context).size.width;
int crossAxisCount = 1; int crossAxisCount;
if (width > 1200)
// Ajustement du nombre de colonnes selon la taille d'écran
if (width > 1200) {
crossAxisCount = 4; crossAxisCount = 4;
else if (width > 800) } else if (width > 800) {
crossAxisCount = 3; crossAxisCount = 3;
else if (width > 600) crossAxisCount = 2; } else if (width > 600) {
crossAxisCount = 2;
} else {
crossAxisCount = 1;
}
return Padding( return Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: GridView.builder( child: GridView.builder(
itemCount: users.length, itemCount: users.length,
// Dans GridView.builder
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: width > 1200 crossAxisCount: crossAxisCount,
? 4
: width > 800
? 3
: width > 600
? 2
: 1,
crossAxisSpacing: 16, crossAxisSpacing: 16,
mainAxisSpacing: 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) { itemBuilder: (context, i) {
final user = users[i]; final user = users[i];
return UserCard( return UserCard(

226
em2rp/lib/views/widgets/user_management/user_card.dart
View File

@ -7,9 +7,7 @@ class UserCard extends StatelessWidget {
final VoidCallback onEdit; final VoidCallback onEdit;
final VoidCallback onDelete; final VoidCallback onDelete;
// Hauteurs fixes selon le device static const double _desktopMaxWidth = 280;
static const double _mobileHeight = 150;
static const double _desktopHeight = 280;
const UserCard({ const UserCard({
Key? key, Key? key,
@ -22,19 +20,18 @@ class UserCard extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width; final width = MediaQuery.of(context).size.width;
final isMobile = width < 600; final isMobile = width < 600;
final cardHeight = isMobile ? _mobileHeight : _desktopHeight;
return SizedBox( return Card(
height: cardHeight, // Hauteur fixe margin: EdgeInsets.zero,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
elevation: 3, elevation: 3,
child: Padding( child: Container(
padding: const EdgeInsets.all(12), constraints: BoxConstraints(
child: isMobile maxWidth: isMobile ? double.infinity : _desktopMaxWidth,
? _buildMobileRow(context)
: _buildDesktopColumn(context),
), ),
padding: const EdgeInsets.all(12),
child:
isMobile ? _buildMobileRow(context) : _buildDesktopColumn(context),
), ),
); );
} }
@ -42,112 +39,181 @@ class UserCard extends StatelessWidget {
Widget _buildMobileRow(BuildContext context) { Widget _buildMobileRow(BuildContext context) {
return Row( return Row(
children: [ children: [
_profileAvatar(48), _profileAvatar(40),
const SizedBox(width: 12), const SizedBox(width: 12),
Expanded( Expanded(
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, // Centré verticalement mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text("${user.firstName} ${user.lastName}", Text(
style: Theme.of(context).textTheme.titleSmall), "${user.firstName} ${user.lastName}",
Text(user.email, style: Theme.of(context).textTheme.bodySmall), style: Theme.of(context).textTheme.titleSmall,
const SizedBox(height: 8), overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 2),
Text(
user.email,
style: Theme.of(context).textTheme.bodySmall,
overflow: TextOverflow.ellipsis,
),
],
),
),
Row( Row(
mainAxisSize: MainAxisSize.min,
children: [ children: [
Flexible( IconButton(
child: ElevatedButton.icon( icon: const Icon(Icons.edit, size: 20),
icon: const Icon(Icons.edit, size: 14),
label: const Text("Modifier"),
onPressed: onEdit, onPressed: onEdit,
style: ElevatedButton.styleFrom( color: AppColors.rouge,
backgroundColor: AppColors.rouge, padding: const EdgeInsets.all(8),
foregroundColor: AppColors.blanc, constraints: const BoxConstraints(
padding: const EdgeInsets.symmetric( minWidth: 32,
horizontal: 8, vertical: 4), minHeight: 32,
textStyle: const TextStyle(fontSize: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6)),
), ),
), ),
), IconButton(
const SizedBox(width: 8), icon: const Icon(Icons.delete, size: 20),
Flexible(
child: ElevatedButton.icon(
icon: const Icon(Icons.delete, size: 14),
label: const Text("Supprimer"),
onPressed: onDelete, onPressed: onDelete,
style: ElevatedButton.styleFrom( color: AppColors.gris,
backgroundColor: AppColors.gris, padding: const EdgeInsets.all(8),
foregroundColor: AppColors.blanc, constraints: const BoxConstraints(
padding: const EdgeInsets.symmetric( minWidth: 32,
horizontal: 8, vertical: 4), minHeight: 32,
textStyle: const TextStyle(fontSize: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6)),
),
), ),
), ),
], ],
), ),
], ],
),
),
],
); );
} }
Widget _buildDesktopColumn(BuildContext context) { Widget _buildDesktopColumn(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
final isNarrow = constraints.maxWidth < 200;
return Column( return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween, // Écarte haut/bas mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
_profileAvatar(80),
Column( Column(
mainAxisSize: MainAxisSize.min,
children: [ children: [
Text("${user.firstName} ${user.lastName}", _profileAvatar(48),
style: Theme.of(context).textTheme.titleSmall), 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), const SizedBox(height: 4),
Text(user.email, style: Theme.of(context).textTheme.bodySmall), Text(
user.email,
style: Theme.of(context).textTheme.bodySmall,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
),
if (user.role.isNotEmpty) ...[
const SizedBox(height: 4), const SizedBox(height: 4),
Text(user.role, Text(
style: Theme.of(context) user.role,
.textTheme style: Theme.of(context).textTheme.bodySmall!.copyWith(
.bodySmall! color: AppColors.gris,
.copyWith(color: AppColors.gris)), fontSize: 11,
),
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
),
],
], ],
), ),
Row( ],
mainAxisAlignment: MainAxisAlignment.spaceEvenly, ),
Padding(
padding: const EdgeInsets.only(bottom: 4),
child: isNarrow
? Column(
mainAxisSize: MainAxisSize.min,
children: [ children: [
ElevatedButton.icon( _buildButton(
icon: const Icon(Icons.edit, size: 18), icon: Icons.edit,
label: const Text("Modifier"), label: "Modifier",
onPressed: onEdit, onPressed: onEdit,
style: ElevatedButton.styleFrom( color: AppColors.rouge,
backgroundColor: AppColors.rouge, isNarrow: true,
foregroundColor: AppColors.blanc,
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
), ),
), const SizedBox(height: 4),
ElevatedButton.icon( _buildButton(
icon: const Icon(Icons.delete, size: 18), icon: Icons.delete,
label: const Text("Supprimer"), label: "Supprimer",
onPressed: onDelete, 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( style: ElevatedButton.styleFrom(
backgroundColor: AppColors.gris, backgroundColor: color,
foregroundColor: AppColors.blanc, foregroundColor: AppColors.blanc,
padding: padding: EdgeInsets.symmetric(
const EdgeInsets.symmetric(horizontal: 12, vertical: 8), horizontal: isNarrow ? 4 : 8,
vertical: 0,
),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)), borderRadius: BorderRadius.circular(6),
), ),
), ),
],
), ),
],
); );
} }