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

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