fdsg
This commit is contained in:
106
lib/features/tickets/ui/widgets/ticket_list.dart
Normal file
106
lib/features/tickets/ui/widgets/ticket_list.dart
Normal file
@@ -0,0 +1,106 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:flux/features/tickets/blocs/ticket_list_cubit.dart';
|
||||
import 'package:flux/features/tickets/blocs/ticket_list_state.dart';
|
||||
import 'package:flux/features/tickets/ui/widgets/ticket_list_card.dart';
|
||||
|
||||
class TicketList extends StatelessWidget {
|
||||
final ScrollController scrollController;
|
||||
final TicketListState state;
|
||||
|
||||
const TicketList({
|
||||
super.key,
|
||||
required this.scrollController,
|
||||
required this.state,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
children: [
|
||||
ListView.builder(
|
||||
controller: scrollController,
|
||||
itemCount: state.hasReachedMax
|
||||
? state.tickets.length
|
||||
: state.tickets.length + 1,
|
||||
itemBuilder: (context, index) {
|
||||
// Se siamo all'ultimo elemento e non abbiamo raggiunto il max, mostriamo il loader
|
||||
if (index >= state.tickets.length) {
|
||||
return const Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(16.0),
|
||||
child: CircularProgressIndicator(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
final ticket = state.tickets[index];
|
||||
final isSelected = state.selectedTicketIds.contains(ticket.id);
|
||||
final isSelectionMode = state.selectedTicketIds.isNotEmpty;
|
||||
|
||||
// Per Desktop mostriamo la checkbox vera e propria
|
||||
final isDesktop = MediaQuery.of(context).size.width > 800;
|
||||
return TicketListCard(
|
||||
ticket: ticket,
|
||||
isSelected: isSelected,
|
||||
isSelectionMode: isSelectionMode,
|
||||
isDesktop: isDesktop,
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
// 2. LA BARRA DELLE AZIONI BULK (Appare magicamente dal basso)
|
||||
AnimatedPositioned(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
curve: Curves.easeInOut,
|
||||
bottom: state.selectedTicketIds.isNotEmpty
|
||||
? 90
|
||||
: -100, // Nasconde o mostra
|
||||
left: 16,
|
||||
right: 16,
|
||||
child: Card(
|
||||
elevation: 8,
|
||||
color: Theme.of(context).colorScheme.inverseSurface,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16.0,
|
||||
vertical: 8.0,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.close),
|
||||
onPressed: () =>
|
||||
context.read<TicketListCubit>().clearSelection(),
|
||||
),
|
||||
Text(
|
||||
'${state.selectedTicketIds.length} selezionati',
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
|
||||
// IL NOSTRO FAMOSO BOTTONE SPEDISCI
|
||||
FilledButton.icon(
|
||||
onPressed: () {
|
||||
// Qui lanceremo la modale per creare il DDT
|
||||
// passando la lista: state.selectedTicketIds.toList()
|
||||
print("Spedisco i ticket: ${state.selectedTicketIds}");
|
||||
},
|
||||
icon: const Icon(Icons.local_shipping),
|
||||
label: const Text('Spedisci'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
198
lib/features/tickets/ui/widgets/ticket_list_card.dart
Normal file
198
lib/features/tickets/ui/widgets/ticket_list_card.dart
Normal file
@@ -0,0 +1,198 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:flux/core/routes/routes.dart';
|
||||
import 'package:flux/features/tickets/blocs/ticket_list_cubit.dart';
|
||||
import 'package:flux/features/tickets/models/ticket_model.dart';
|
||||
import 'package:flux/features/tickets/models/ticket_status_extension.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
class TicketListCard extends StatelessWidget {
|
||||
final TicketModel ticket;
|
||||
final bool isSelected;
|
||||
final bool isSelectionMode;
|
||||
final bool isDesktop;
|
||||
|
||||
const TicketListCard({
|
||||
super.key, // <-- Buona pratica aggiungere il super.key
|
||||
required this.ticket,
|
||||
required this.isSelected,
|
||||
required this.isSelectionMode,
|
||||
required this.isDesktop,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final statusColor = ticket.ticketStatus.color;
|
||||
final statusIcon = ticket.ticketStatus.icon;
|
||||
|
||||
// Tocco Ninja: Ricaviamo l'iniziale del cliente per l'avatar!
|
||||
final customerName = ticket.customer?.name ?? '?';
|
||||
final initial = customerName.isNotEmpty
|
||||
? customerName[0].toUpperCase()
|
||||
: '?';
|
||||
|
||||
return Card(
|
||||
// 1. Sfondo leggermente colorato se selezionato
|
||||
color: isSelected ? Colors.blue.withValues(alpha: 0.1) : null,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: IntrinsicHeight(
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// LA STRISCIA COLORATA LATERALE (Intoccabile, è bellissima)
|
||||
Container(width: 6, color: statusColor),
|
||||
Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 16.0),
|
||||
child: isDesktop
|
||||
? Checkbox(
|
||||
value: isSelected,
|
||||
onChanged: (_) {
|
||||
if (ticket.id != null) {
|
||||
context
|
||||
.read<TicketListCubit>()
|
||||
.toggleTicketSelection(ticket.id!);
|
||||
}
|
||||
},
|
||||
)
|
||||
: GestureDetector(
|
||||
onTap: () {
|
||||
if (ticket.id != null) {
|
||||
context
|
||||
.read<TicketListCubit>()
|
||||
.toggleTicketSelection(ticket.id!);
|
||||
}
|
||||
},
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
transitionBuilder: (child, animation) =>
|
||||
ScaleTransition(scale: animation, child: child),
|
||||
child: isSelected
|
||||
? const CircleAvatar(
|
||||
key: ValueKey('selected'),
|
||||
backgroundColor: Colors.blue,
|
||||
child: Icon(Icons.check, color: Colors.white),
|
||||
)
|
||||
: CircleAvatar(
|
||||
key: const ValueKey('unselected'),
|
||||
backgroundColor: Colors.grey.shade200,
|
||||
child: Text(
|
||||
initial, // L'iniziale del cliente!
|
||||
style: TextStyle(
|
||||
color: Colors.grey.shade700,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: ListTile(
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 16.0,
|
||||
vertical: 8.0,
|
||||
),
|
||||
|
||||
// ----------------------------------------
|
||||
title: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
ticket.customer?.name ?? 'Cliente Sconosciuto',
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 16,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
// IL BADGE DELLO STATO
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: statusColor.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: statusColor.withValues(alpha: 0.5),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(statusIcon, size: 14, color: statusColor),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
ticket.ticketStatus.displayValue,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: statusColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
subtitle: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
ticket.targetModelName ?? ticket.ticketType.displayValue,
|
||||
style: const TextStyle(fontWeight: FontWeight.w500),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
ticket.createdAt != null
|
||||
? 'Creato il: ${ticket.createdAt!.day}/${ticket.createdAt!.month}/${ticket.createdAt!.year}'
|
||||
: '',
|
||||
style: TextStyle(
|
||||
color: Colors.grey.shade600,
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// --- 3. GESTIONE DEI TAP PER LA SELEZIONE ---
|
||||
onTap: () {
|
||||
if (isSelectionMode) {
|
||||
// Modalità selezione attiva: un tap normale seleziona/deseleziona
|
||||
if (ticket.id != null) {
|
||||
context.read<TicketListCubit>().toggleTicketSelection(
|
||||
ticket.id!,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// Modalità normale: entra nel dettaglio del ticket
|
||||
context.pushNamed(
|
||||
Routes.ticketForm,
|
||||
pathParameters: {'id': ticket.id!},
|
||||
extra: (ticket: ticket, createdBy: null),
|
||||
);
|
||||
}
|
||||
},
|
||||
onLongPress: () {
|
||||
// Pressione lunga: forza la selezione (utile per iniziare il workflow)
|
||||
if (!isSelectionMode && ticket.id != null) {
|
||||
context.read<TicketListCubit>().toggleTicketSelection(
|
||||
ticket.id!,
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user