ajout page mon compte, design boff
This commit is contained in:
166
em2rp/lib/views/widgets/user_management/user_card.dart
Normal file
166
em2rp/lib/views/widgets/user_management/user_card.dart
Normal file
@ -0,0 +1,166 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:em2rp/models/user_model.dart';
|
||||
import 'package:em2rp/utils/colors.dart';
|
||||
|
||||
class UserCard extends StatelessWidget {
|
||||
final UserModel user;
|
||||
final VoidCallback onEdit;
|
||||
final VoidCallback onDelete;
|
||||
|
||||
// Hauteurs fixes selon le device
|
||||
static const double _mobileHeight = 150;
|
||||
static const double _desktopHeight = 280;
|
||||
|
||||
const UserCard({
|
||||
Key? key,
|
||||
required this.user,
|
||||
required this.onEdit,
|
||||
required this.onDelete,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
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),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMobileRow(BuildContext context) {
|
||||
return Row(
|
||||
children: [
|
||||
_profileAvatar(48),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center, // Centré verticalement
|
||||
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)),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDesktopColumn(BuildContext context) {
|
||||
return Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween, // Écarte haut/bas
|
||||
children: [
|
||||
_profileAvatar(80),
|
||||
Column(
|
||||
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)),
|
||||
),
|
||||
),
|
||||
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)),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _profileAvatar(double size) {
|
||||
return CircleAvatar(
|
||||
radius: size / 2,
|
||||
backgroundImage: user.profilePhotoUrl.isNotEmpty
|
||||
? NetworkImage(user.profilePhotoUrl)
|
||||
: null,
|
||||
backgroundColor: Colors.grey[200],
|
||||
child: user.profilePhotoUrl.isEmpty
|
||||
? Icon(Icons.person, size: size * 0.6, color: AppColors.noir)
|
||||
: null,
|
||||
);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user