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é"));
}
// 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(

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

@ -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),
),
),
),
);
}