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

feat: Enhance container management UI with new management components and improved QR code generation flow

Browse Source
This commit is contained in:
ElPoyo
2025-10-30 20:06:13 +01:00
parent 6abb8f1d14
commit e59e3e6316
11 changed files with 815 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

489
em2rp/lib/views/container_management_page.dart
View File

@@ -5,13 +5,14 @@ import 'package:em2rp/utils/permission_gate.dart';
import 'package:em2rp/views/widgets/nav/main_drawer.dart';
import 'package:em2rp/views/widgets/nav/custom_app_bar.dart';
import 'package:em2rp/providers/container_provider.dart';
import 'package:em2rp/providers/local_user_provider.dart';
import 'package:em2rp/models/container_model.dart';
import 'package:em2rp/models/equipment_model.dart';
import 'package:em2rp/services/pdf_service.dart';
import 'package:em2rp/views/widgets/common/qr_code_dialog.dart';
import 'package:em2rp/views/widgets/common/qr_code_format_selector_dialog.dart';
import 'package:em2rp/mixins/selection_mode_mixin.dart';
import 'package:printing/printing.dart';
import 'package:pdf/pdf.dart';
import 'package:em2rp/views/widgets/management/management_search_bar.dart';
import 'package:em2rp/views/widgets/management/management_card.dart';
import 'package:em2rp/views/widgets/management/management_list.dart';
class ContainerManagementPage extends StatefulWidget {
const ContainerManagementPage({super.key});
@@ -81,7 +82,45 @@ class _ContainerManagementPageState extends State<ContainerManagementPage>
],
],
)
: const CustomAppBar(title: 'Gestion des Containers'),
: AppBar(
title: const Text('Gestion des Containers'),
backgroundColor: AppColors.rouge,
leading: IconButton(
icon: const Icon(Icons.arrow_back),
tooltip: 'Retour à la gestion des équipements',
onPressed: () => Navigator.pushReplacementNamed(context, '/equipment_management'),
),
actions: [
IconButton(
icon: const Icon(Icons.logout, color: Colors.white),
onPressed: () async {
final shouldLogout = await showDialog<bool>(
context: context,
builder: (context) => AlertDialog(
title: const Text('Déconnexion'),
content: const Text('Voulez-vous vraiment vous déconnecter ?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, false),
child: const Text('Annuler'),
),
TextButton(
onPressed: () => Navigator.pop(context, true),
child: const Text('Déconnexion'),
),
],
),
);
if (shouldLogout == true && context.mounted) {
await context.read<LocalUserProvider>().signOut();
if (context.mounted) {
Navigator.pushReplacementNamed(context, '/login');
}
}
},
),
],
),
drawer: const MainDrawer(currentPage: '/container_management'),
floatingActionButton: !isSelectionMode
? FloatingActionButton.extended(
@@ -130,50 +169,14 @@ class _ContainerManagementPageState extends State<ContainerManagementPage>
}
Widget _buildSearchBar() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
spreadRadius: 1,
blurRadius: 3,
offset: const Offset(0, 1),
),
],
),
child: Row(
children: [
Expanded(
child: TextField(
controller: _searchController,
decoration: InputDecoration(
hintText: 'Rechercher un container...',
prefixIcon: const Icon(Icons.search, color: AppColors.rouge),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.grey.shade300),
),
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
),
onChanged: (value) {
context.read<ContainerProvider>().setSearchQuery(value);
},
),
),
const SizedBox(width: 12),
if (!isSelectionMode)
IconButton(
icon: const Icon(Icons.checklist, color: AppColors.rouge),
tooltip: 'Mode sélection',
onPressed: toggleSelectionMode,
),
],
),
return ManagementSearchBar(
controller: _searchController,
hintText: 'Rechercher un container...',
onChanged: (value) {
context.read<ContainerProvider>().setSearchQuery(value);
},
onSelectionModeToggle: isSelectionMode ? null : toggleSelectionMode,
showSelectionModeButton: !isSelectionMode,
);
}
@@ -319,59 +322,15 @@ class _ContainerManagementPageState extends State<ContainerManagementPage>
Widget _buildContainerList() {
return Consumer<ContainerProvider>(
builder: (context, provider, child) {
return StreamBuilder<List<ContainerModel>>(
return ManagementList<ContainerModel>(
stream: provider.containersStream,
builder: (context, snapshot) {
// Utiliser les données en cache si disponibles pendant le rebuild
if (snapshot.hasData) {
_cachedContainers = snapshot.data;
}
// Afficher le loader seulement au premier chargement
if (snapshot.connectionState == ConnectionState.waiting && _cachedContainers == null) {
return const Center(child: CircularProgressIndicator());
}
if (snapshot.hasError) {
return Center(
child: Text('Erreur: ${snapshot.error}'),
);
}
final containers = _cachedContainers ?? snapshot.data ?? [];
if (containers.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.inventory_2_outlined,
size: 80,
color: Colors.grey.shade400,
),
const SizedBox(height: 16),
Text(
'Aucun container trouvé',
style: TextStyle(
fontSize: 18,
color: Colors.grey.shade600,
),
),
],
),
);
}
return ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: containers.length,
itemBuilder: (context, index) {
final container = containers[index];
return _buildContainerCard(container);
},
);
cachedItems: _cachedContainers,
emptyMessage: 'Aucun container trouvé',
emptyIcon: Icons.inventory_2_outlined,
onDataReceived: (items) {
_cachedContainers = items;
},
itemBuilder: (container) => _buildContainerCard(container),
);
},
);
@@ -380,192 +339,71 @@ class _ContainerManagementPageState extends State<ContainerManagementPage>
Widget _buildContainerCard(ContainerModel container) {
final isSelected = isItemSelected(container.id);
return Card(
margin: const EdgeInsets.only(bottom: 12),
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: isSelected
? const BorderSide(color: AppColors.rouge, width: 2)
: BorderSide.none,
return ManagementCard<ContainerModel>(
item: container,
getId: (c) => c.id,
getTitle: (c) => c.id,
getSubtitle: (c) => c.name,
getIcon: (c) => c.type.getIcon(
size: 40,
color: AppColors.rouge,
),
child: InkWell(
onTap: () {
if (isSelectionMode) {
toggleItemSelection(container.id);
} else {
_viewContainerDetails(container);
}
},
onLongPress: () {
if (!isSelectionMode) {
toggleSelectionMode();
toggleItemSelection(container.id);
}
},
borderRadius: BorderRadius.circular(8),
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
if (isSelectionMode)
Padding(
padding: const EdgeInsets.only(right: 16),
child: Checkbox(
value: isSelected,
onChanged: (value) {
toggleItemSelection(container.id);
},
activeColor: AppColors.rouge,
),
),
// Icône du type de container
container.type.getIcon(
size: 40,
color: AppColors.rouge,
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
container.id,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
const SizedBox(height: 4),
Text(
container.name,
style: TextStyle(
fontSize: 14,
color: Colors.grey.shade700,
),
),
const SizedBox(height: 4),
Row(
children: [
_buildInfoChip(
container.type.label,
Icons.category,
),
const SizedBox(width: 8),
_buildInfoChip(
'${container.itemCount} items',
Icons.inventory,
),
],
),
],
),
),
const SizedBox(width: 16),
// Badge de statut
_buildStatusBadge(container.status),
if (!isSelectionMode) ...[
const SizedBox(width: 8),
PopupMenuButton<String>(
icon: const Icon(Icons.more_vert),
onSelected: (value) => _handleMenuAction(value, container),
itemBuilder: (context) => [
const PopupMenuItem(
value: 'view',
child: Row(
children: [
Icon(Icons.visibility, size: 20),
SizedBox(width: 8),
Text('Voir détails'),
],
),
),
const PopupMenuItem(
value: 'edit',
child: Row(
children: [
Icon(Icons.edit, size: 20),
SizedBox(width: 8),
Text('Modifier'),
],
),
),
const PopupMenuItem(
value: 'qr',
child: Row(
children: [
Icon(Icons.qr_code, size: 20),
SizedBox(width: 8),
Text('QR Code'),
],
),
),
const PopupMenuItem(
value: 'delete',
child: Row(
children: [
Icon(Icons.delete, color: Colors.red, size: 20),
SizedBox(width: 8),
Text('Supprimer', style: TextStyle(color: Colors.red)),
],
),
),
],
),
],
],
),
getInfoChips: (c) => [
InfoChip(
label: c.type.label,
icon: Icons.category,
),
),
);
}
Widget _buildInfoChip(String label, IconData icon) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.grey.shade100,
borderRadius: BorderRadius.circular(12),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 14, color: Colors.grey.shade700),
const SizedBox(width: 4),
Text(
label,
style: TextStyle(
fontSize: 12,
color: Colors.grey.shade700,
),
),
],
),
);
}
Widget _buildStatusBadge(EquipmentStatus status) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: status.color.withOpacity(0.1),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: status.color),
),
child: Text(
status.label,
style: TextStyle(
color: status.color,
fontWeight: FontWeight.bold,
fontSize: 12,
InfoChip(
label: '${c.itemCount} items',
icon: Icons.inventory,
),
],
getStatusBadge: (c) => StatusBadge(
label: c.status.label,
color: c.status.color,
),
actions: const [
CardAction(
id: 'view',
label: 'Voir détails',
icon: Icons.visibility,
),
CardAction(
id: 'edit',
label: 'Modifier',
icon: Icons.edit,
),
CardAction(
id: 'qr',
label: 'QR Code',
icon: Icons.qr_code,
),
CardAction(
id: 'delete',
label: 'Supprimer',
icon: Icons.delete,
color: Colors.red,
),
],
onActionSelected: _handleMenuAction,
onTap: () {
if (isSelectionMode) {
toggleItemSelection(container.id);
} else {
_viewContainerDetails(container);
}
},
onLongPress: () {
if (!isSelectionMode) {
toggleSelectionMode();
toggleItemSelection(container.id);
}
},
isSelectionMode: isSelectionMode,
isSelected: isSelected,
onSelectionChanged: (value) {
toggleItemSelection(container.id);
},
);
}
@@ -579,10 +417,7 @@ class _ContainerManagementPageState extends State<ContainerManagementPage>
_editContainer(container);
break;
case 'qr':
showDialog(
context: context,
builder: (context) => QRCodeDialog.forContainer(container),
);
// Non utilisé - les QR codes multiples sont générés via _generateQRCodesForSelected
break;
case 'delete':
_deleteContainer(container);
@@ -641,73 +476,25 @@ class _ContainerManagementPageState extends State<ContainerManagementPage>
return;
}
// Afficher le dialogue de sélection de format
final format = await showDialog<QRLabelFormat>(
context: context,
builder: (context) => AlertDialog(
title: const Text('Format des étiquettes'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
leading: const Icon(Icons.qr_code_2),
title: const Text('Petits QR codes'),
subtitle: const Text('2×2 cm - QR code + ID (20 par page)'),
onTap: () => Navigator.pop(context, QRLabelFormat.small),
),
ListTile(
leading: const Icon(Icons.qr_code),
title: const Text('QR codes moyens'),
subtitle: const Text('4×4 cm - QR code + ID (6 par page)'),
onTap: () => Navigator.pop(context, QRLabelFormat.medium),
),
ListTile(
leading: const Icon(Icons.label),
title: const Text('Grandes étiquettes'),
subtitle: const Text('QR code + ID + Type + Contenu (10 par page)'),
onTap: () => Navigator.pop(context, QRLabelFormat.large),
),
],
// Afficher le dialogue de sélection de format avec le widget générique
if (mounted) {
showDialog(
context: context,
builder: (context) => QRCodeFormatSelectorDialog<ContainerModel>(
itemList: selectedContainers,
getId: (c) => c.id,
getTitle: (c) => c.name,
getDetails: (ContainerModel c) {
final equipment = containerEquipmentMap[c.id] ?? <EquipmentModel>[];
return [
'Contenu (${equipment.length}):',
...equipment.take(5).map((eq) => '- ${eq.id}'),
if (equipment.length > 5) '... +${equipment.length - 5}',
];
},
dialogTitle: 'Générer ${selectedContainers.length} QR Code(s)',
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Annuler'),
),
],
),
);
if (format == null || !mounted) return;
// Générer et afficher le PDF avec la nouvelle API optimisée
try {
final pdfBytes = await PDFService.generatePDF<ContainerModel>(
items: selectedContainers,
format: format,
getId: (c) => c.id,
getTitle: (c) => c.name,
getDetails: format == QRLabelFormat.large ? (ContainerModel c) {
final equipment = containerEquipmentMap[c.id] ?? <EquipmentModel>[];
return [
'Contenu (${equipment.length}):',
...equipment.take(5).map((eq) => '- ${eq.id}'),
if (equipment.length > 5) '... +${equipment.length - 5}',
];
} : null,
);
if (mounted) {
await Printing.layoutPdf(
onLayout: (PdfPageFormat format) async => pdfBytes,
);
}
} catch (e) {
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Erreur lors de la génération: $e')),
);
}
}
}