mah....volare

This commit is contained in:
2026-06-03 19:16:15 +02:00
parent f27ede7625
commit 01515910b6
7 changed files with 560 additions and 243 deletions

View File

@@ -1,6 +1,8 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flux/core/routes/routes.dart';
import 'package:flux/core/widgets/staff_selector_modal.dart';
import 'package:flux/features/master_data/staff/models/staff_member_model.dart';
import 'package:flux/features/operations/blocs/operation_list_cubit.dart';
import 'package:flux/features/operations/models/operation_model.dart';
import 'package:go_router/go_router.dart';
@@ -14,20 +16,39 @@ class OperationListScreen extends StatefulWidget {
class _OperationListScreenState extends State<OperationListScreen> {
final ScrollController _scrollController = ScrollController();
final TextEditingController _searchController = TextEditingController();
// 🥷 1. LO STATO PER LE BULK ACTIONS
// Set per gestire le Bulk Actions (Selezione multipla)
final Set<String> _selectedOperationIds = {};
bool get _isSelectionMode => _selectedOperationIds.isNotEmpty;
// Flag per mostrare/nascondere la barra di ricerca integrata nell'AppBar
bool _showSearchBar = false;
@override
void initState() {
super.initState();
_scrollController.addListener(_onScroll);
// Primo caricamento: partiamo da pagina 1
// (Il Cubit deciderà se fare il boot iniziale o se c'era già roba in cache)
WidgetsBinding.instance.addPostFrameCallback((_) {
final isDesktop = MediaQuery.sizeOf(context).width >= 900;
if (isDesktop) {
context.read<OperationListCubit>().loadSpecificPageDesktop(1);
} else {
context.read<OperationListCubit>().loadNextPageMobile(refresh: true);
}
});
}
void _onScroll() {
final isDesktop = MediaQuery.sizeOf(context).width >= 900;
// 🥷 COMPORTAMENTO IBRIDO: Lo scroll infinito si attiva SOLO su mobile
if (isDesktop) return;
if (_isBottom) {
context.read<OperationListCubit>().loadOperations();
context.read<OperationListCubit>().loadNextPageMobile();
}
}
@@ -41,6 +62,7 @@ class _OperationListScreenState extends State<OperationListScreen> {
@override
void dispose() {
_scrollController.dispose();
_searchController.dispose();
super.dispose();
}
@@ -62,8 +84,10 @@ class _OperationListScreenState extends State<OperationListScreen> {
@override
Widget build(BuildContext context) {
final isDesktop = MediaQuery.sizeOf(context).width >= 900;
return Scaffold(
// 🥷 2. APPBAR DINAMICA (Standard o Modalità Selezione)
// --- APP BAR DINAMICA E INTEGRATA ---
appBar: _isSelectionMode
? AppBar(
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
@@ -77,24 +101,53 @@ class _OperationListScreenState extends State<OperationListScreen> {
icon: const Icon(Icons.edit_note),
tooltip: 'Cambia Stato Massivo',
onPressed: () {
// TODO: Apri BottomSheet per cambiare stato a tutte le selezionate
// TODO: Integrare bottom sheet per azioni massive
},
),
],
)
: AppBar(
title: const Text("Gestione Servizi"),
title: _showSearchBar
? TextField(
controller: _searchController,
autofocus: true,
decoration: const InputDecoration(
hintText: 'Cerca per cliente, nota o riferimento...',
border: InputBorder.none,
),
style: const TextStyle(fontSize: 16),
onChanged: (text) {
context.read<OperationListCubit>().updateFilters(
text: text,
);
},
)
: const Text("Gestione Servizi"),
elevation: 0,
actions: [
IconButton(
icon: const Icon(Icons.filter_list),
icon: Icon(_showSearchBar ? Icons.close : Icons.search),
onPressed: () {
// TODO: Apri drawer laterale o modal per i filtri avanzati
setState(() {
_showSearchBar = !_showSearchBar;
if (!_showSearchBar) {
_searchController.clear();
context.read<OperationListCubit>().clearFilters();
}
});
},
),
IconButton(icon: const Icon(Icons.search), onPressed: () {}),
if (!isDesktop) // Il pull-to-refresh c'è già su mobile, su desktop mettiamo un tasto manuale
IconButton(
icon: const Icon(Icons.filter_list),
onPressed: () {
// TODO: Bottone Filtri Avanzati (es. DateRange Picker)
},
),
],
),
// --- CORPO RESPONSIVO ---
body: BlocBuilder<OperationListCubit, OperationListState>(
builder: (context, state) {
if (state.status == OperationListStatus.loading &&
@@ -103,83 +156,216 @@ class _OperationListScreenState extends State<OperationListScreen> {
}
if (state.operations.isEmpty) {
return const Center(child: Text("Nessuna pratica trovata."));
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("Nessuna pratica trovata."),
const SizedBox(height: 12),
ElevatedButton(
onPressed: () => isDesktop
? context
.read<OperationListCubit>()
.loadSpecificPageDesktop(1)
: context.read<OperationListCubit>().loadNextPageMobile(
refresh: true,
),
child: const Text("Ricarica"),
),
],
),
);
}
// 🥷 3. IL MOTORE RESPONSIVO
return RefreshIndicator(
onRefresh: () => context.read<OperationListCubit>().loadOperations(
refresh: true,
),
child: LayoutBuilder(
builder: (context, constraints) {
// Se lo schermo è largo (Desktop/Tablet), usiamo la griglia
final isDesktop = constraints.maxWidth > 700;
return GridView.builder(
controller: _scrollController,
padding: const EdgeInsets.all(12).copyWith(bottom: 80),
// Magia della griglia: si adatta!
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent:
450, // Larghezza massima della singola card
mainAxisExtent:
180, // Altezza fissa della card (da aggiustare in base ai tuoi font)
crossAxisSpacing: 12,
mainAxisSpacing: 12,
// 🥷 SCENARIO DESKTOP: Griglia + Barra di Paginazione Gmail-Style
if (isDesktop) {
return Column(
children: [
Expanded(
child: GridView.builder(
controller: _scrollController,
padding: const EdgeInsets.all(16),
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent:
420, // Larghezza bilanciata per le card su desktop
mainAxisExtent:
175, // Altezza controllata per evitare buchi bianchi
crossAxisSpacing: 16,
mainAxisSpacing: 16,
),
itemCount: state.operations.length,
itemBuilder: (context, index) {
final operation = state.operations[index];
return _buildResponsiveCard(operation);
},
),
itemCount: state.hasReachedMax
? state.operations.length
: state.operations.length + 1,
itemBuilder: (context, index) {
if (index >= state.operations.length) {
return const Center(
child: CircularProgressIndicator(strokeWidth: 2),
);
}
),
_buildDesktopPaginationFooter(
state,
), // La barra in fondo stile Gmail
],
);
}
final operation = state.operations[index];
final isSelected = _selectedOperationIds.contains(
operation.id,
);
// 🥷 SCENARIO MOBILE: ListView con Infinite Scroll e Pull-to-Refresh
return RefreshIndicator(
onRefresh: () => context
.read<OperationListCubit>()
.loadNextPageMobile(refresh: true),
child: ListView.builder(
controller: _scrollController,
padding: const EdgeInsets.only(
bottom: 80,
left: 8,
right: 8,
top: 8,
),
itemCount: state.hasReachedMax
? state.operations.length
: state.operations.length + 1,
itemBuilder: (context, index) {
if (index >= state.operations.length) {
return const Center(
child: Padding(
padding: EdgeInsets.all(16.0),
child: CircularProgressIndicator(strokeWidth: 2),
),
);
}
return _RichOperationCard(
operation: operation,
isSelected: isSelected,
isSelectionMode: _isSelectionMode,
onTap: () {
if (_isSelectionMode) {
_toggleSelection(operation.id!);
} else {
context.pushNamed(
Routes.operationForm,
extra: (createdBy: null, operation: operation),
pathParameters: {'id': operation.id!},
);
}
},
onLongPress: () => _toggleSelection(operation.id!),
);
},
final operation = state.operations[index];
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: _buildResponsiveCard(operation),
);
},
),
);
},
),
floatingActionButton: _isSelectionMode
? null // Nascondi il FAB se stai selezionando
? null
: FloatingActionButton(
onPressed: () {
/* Tuo codice per nuova operazione */
onPressed: () async {
StaffMemberModel? createdBy = await getStaffMember(context);
if (createdBy == null || !context.mounted) return;
context.pushNamed(
Routes.operationForm,
pathParameters: {'id': 'new'},
extra: (createdBy: createdBy, operation: null),
);
},
child: const Icon(Icons.add),
),
);
}
// --- COSTRUZIONE DELLA COMPONENTISTICA DETTAGLIATA ---
Widget _buildResponsiveCard(OperationModel operation) {
final isSelected = _selectedOperationIds.contains(operation.id);
return _RichOperationCard(
operation: operation,
isSelected: isSelected,
isSelectionMode: _isSelectionMode,
onTap: () {
if (_isSelectionMode) {
_toggleSelection(operation.id!);
} else {
context.pushNamed(
Routes.operationForm,
extra: (createdBy: null, operation: operation),
pathParameters: {'id': operation.id!},
);
}
},
onLongPress: () => _toggleSelection(operation.id!),
);
}
// 🥷 LA BARRA DI PAGINAZIONE DESKTOP (Stile Gmail / Typesense)
Widget _buildDesktopPaginationFooter(OperationListState state) {
final theme = Theme.of(context);
final cubit = context.read<OperationListCubit>();
// Calcolo intervallo visualizzato (es. 1-25 di 140)
final fromItem = ((state.currentPage - 1) * state.itemsPerPage) + 1;
final toItem =
DateUtils.isSameDay(DateTime.now(), DateTime.now()) // segnaposto logico
? (fromItem + state.operations.length - 1)
: fromItem;
return Container(
height: 56,
padding: const EdgeInsets.symmetric(horizontal: 24),
decoration: BoxDecoration(
color: theme.colorScheme.surface,
border: Border(top: BorderSide(color: theme.dividerColor, width: 0.5)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Info totali a sinistra
Text(
"$fromItem-$toItem di ${state.totalItems} pratiche totali",
style: theme.textTheme.bodyMedium?.copyWith(
color: Colors.grey[700],
),
),
// Controlli di navigazione a destra
Row(
children: [
// Prima Pagina
IconButton(
icon: const Icon(Icons.first_page),
onPressed: state.currentPage > 1
? () => cubit.loadSpecificPageDesktop(1)
: null,
),
// Pagina Precedente
IconButton(
icon: const Icon(Icons.chevron_left),
onPressed: state.currentPage > 1
? () => cubit.loadSpecificPageDesktop(state.currentPage - 1)
: null,
),
// Indicatore numerico centrale impacchettato
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
"Pagina ${state.currentPage} di ${state.totalPages}",
style: const TextStyle(fontWeight: FontWeight.bold),
),
),
// Pagina Successiva
IconButton(
icon: const Icon(Icons.chevron_right),
onPressed: state.currentPage < state.totalPages
? () => cubit.loadSpecificPageDesktop(state.currentPage + 1)
: null,
),
// Ultima Pagina
IconButton(
icon: const Icon(Icons.last_page),
onPressed: state.currentPage < state.totalPages
? () => cubit.loadSpecificPageDesktop(state.totalPages)
: null,
),
],
),
],
),
);
}
}
// 🥷 4. LA SUPER CARD ESTRATTA
// =========================================================================
// 🥷 3. LA CARD RICCA, REATTIVA E DEFINITIVA (Quella revisionata insieme)
// =========================================================================
class _RichOperationCard extends StatelessWidget {
final OperationModel operation;
final bool isSelected;
@@ -195,7 +381,6 @@ class _RichOperationCard extends StatelessWidget {
required this.onLongPress,
});
// 🥷 1. IL COLORE DELLO STATO: Centralizzato per usarlo ovunque
Color _getStatusColor(OperationStatus status) {
switch (status) {
case OperationStatus.success:
@@ -206,11 +391,10 @@ class _RichOperationCard extends StatelessWidget {
case OperationStatus.waitingForSupport:
return Colors.blue;
case OperationStatus.failure:
return Colors.grey.shade800; // O Colors.red se preferisci
return Colors.grey.shade800;
}
}
// 🥷 2. IL COLORE DEL TIPO: Per farlo risaltare
Color _getTypeColor(String type) {
switch (type) {
case 'FIN':
@@ -239,6 +423,7 @@ class _RichOperationCard extends StatelessWidget {
final typeColor = _getTypeColor(operation.type);
return Card(
margin: EdgeInsets.zero, // Gestito dai margini dei padri (griglia/lista)
elevation: isSelected ? 4 : 1,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
@@ -256,32 +441,35 @@ class _RichOperationCard extends StatelessWidget {
child: Container(
decoration: BoxDecoration(
color: isSelected
? theme.colorScheme.primaryContainer.withValues(alpha: 0.2)
? theme.colorScheme.primaryContainer.withValues(alpha: 0.15)
: null,
// BANDA LATERALE LEGATA ALLO STATO (Stilosissima)
// 🥷 COERENZA 100%: Banda laterale legata allo status per eliminare i malintesi cromatici
border: Border(left: BorderSide(color: statusColor, width: 6)),
),
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// --- HEADER ---
// --- LINEA HEADER ---
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (isSelectionMode)
SizedBox(
height: 24,
width: 24,
child: Checkbox(
value: isSelected,
onChanged: (_) => onTap(),
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: SizedBox(
height: 18,
width: 18,
child: Checkbox(
value: isSelected,
onChanged: (_) => onTap(),
),
),
),
Expanded(
child: Text(
operation.reference.isEmpty
? 'Nessuna Riferimento'
(operation.reference.isEmpty)
? 'Senza Riferimento'
: operation.reference,
style: theme.textTheme.labelSmall?.copyWith(
color: Colors.grey[600],
@@ -291,7 +479,9 @@ class _RichOperationCard extends StatelessWidget {
),
),
Text(
"${operation.createdAt?.day.toString().padLeft(2, '0')}/${operation.createdAt?.month.toString().padLeft(2, '0')}/${operation.createdAt?.year}",
operation.createdAt != null
? "${operation.createdAt!.day.toString().padLeft(2, '0')}/${operation.createdAt!.month.toString().padLeft(2, '0')}/${operation.createdAt!.year}"
: '',
style: theme.textTheme.labelSmall?.copyWith(
color: Colors.grey[600],
),
@@ -300,7 +490,7 @@ class _RichOperationCard extends StatelessWidget {
),
const SizedBox(height: 8),
// --- CLIENTE E TIPO OPERAZIONE ---
// --- LINEA CENTRALE: CLIENTE + INSERTO OPERATIVO ---
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -309,24 +499,25 @@ class _RichOperationCard extends StatelessWidget {
operation.customer?.name ?? "Cliente sconosciuto",
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
fontSize: 15,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(width: 8),
// IL TIPO DI OPERAZIONE CHE SPICCA
// 🥷 IL RE DEL SERVICE: Il tipo operazione svetta con box e contrasto ad hoc
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 6,
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: typeColor.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(8),
color: typeColor.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(6),
border: Border.all(
color: typeColor.withValues(alpha: 0.3),
color: typeColor.withValues(alpha: 0.25),
),
),
child: Row(
@@ -342,19 +533,20 @@ class _RichOperationCard extends StatelessWidget {
operation.type,
operation.subType,
),
size: 14,
size: 13,
color: typeColor,
),
const SizedBox(width: 4),
],
Text(
operation.subType?.isNotEmpty == true
(operation.subType != null &&
operation.subType!.isNotEmpty)
? operation.subType!
: operation.type,
style: TextStyle(
color: typeColor,
fontWeight: FontWeight.bold,
fontSize: 12,
fontSize: 11,
),
),
],
@@ -362,14 +554,14 @@ class _RichOperationCard extends StatelessWidget {
),
],
),
const SizedBox(height: 12),
const SizedBox(height: 10),
// --- I TAG COMPATTI (Business/Privato, Provider, Device) ---
// --- LINEA DEI TAG TECNICI ---
Wrap(
spacing: 6,
runSpacing: 6,
runSpacing: 4,
children: [
// Espanso in "Business" e "Privato"
// Tag Target Espanso (Privato / Business)
_MiniChip(
label: operation.isBusiness ? 'Business' : 'Privato',
icon: operation.isBusiness
@@ -378,17 +570,18 @@ class _RichOperationCard extends StatelessWidget {
color: operation.isBusiness ? Colors.indigo : Colors.teal,
),
// Tag Provider con il suo colore personalizzato dal DB
// Tag Gestore (Agganciato dinamicamente al displayColor generato dall'esadecimale del DB!)
if (operation.providerId != null)
_MiniChip(
label: operation.providerDisplayName ?? 'Gestore',
// Se hai popolato il campo colorHex, qui puoi usare: operation.provider?.displayColor ?? Colors.grey
color: Colors.redAccent,
label: operation.provider?.name ?? 'Gestore',
color:
operation.provider?.displayColor ?? Colors.blueGrey,
),
// Specifiche addizionali del Finanziamento
if (operation.type == 'Fin' && operation.modelId != null)
_MiniChip(
label: operation.modelDisplayName ?? 'Modello',
label: operation.modelDisplayName ?? 'Prodotto',
icon: Icons.devices,
color: Colors.deepPurple,
),
@@ -397,7 +590,7 @@ class _RichOperationCard extends StatelessWidget {
const Spacer(),
// --- FOOTER: Staff e Stato ---
// --- FOOTER CARD: AGENTE + CHIP STATO ---
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@@ -410,14 +603,31 @@ class _RichOperationCard extends StatelessWidget {
),
const SizedBox(width: 4),
Text(
operation.staffDisplayName ?? 'Staff',
operation.staffDisplayName ?? 'Assegnato',
style: theme.textTheme.labelSmall?.copyWith(
color: Colors.grey[700],
),
),
],
),
_buildOperationStatus(operation.status, statusColor),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: statusColor,
borderRadius: BorderRadius.circular(6),
),
child: Text(
operation.status.displayName,
style: const TextStyle(
fontSize: 10,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
],
),
],
@@ -435,26 +645,9 @@ class _RichOperationCard extends StatelessWidget {
}
return null;
}
Widget _buildOperationStatus(OperationStatus status, Color statusColor) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: statusColor,
borderRadius: BorderRadius.circular(8),
),
child: Text(
status.displayName,
style: const TextStyle(
fontSize: 10,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
);
}
}
// Micro Widget di supporto per i tag interni
class _MiniChip extends StatelessWidget {
final String label;
final IconData? icon;
@@ -465,23 +658,23 @@ class _MiniChip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.1),
border: Border.all(color: color.withValues(alpha: 0.3)),
borderRadius: BorderRadius.circular(6),
color: color.withValues(alpha: 0.08),
border: Border.all(color: color.withValues(alpha: 0.25)),
borderRadius: BorderRadius.circular(4),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (icon != null) ...[
Icon(icon, size: 12, color: color),
Icon(icon, size: 11, color: color),
const SizedBox(width: 4),
],
Text(
label,
style: TextStyle(
fontSize: 11,
fontSize: 10,
color: color,
fontWeight: FontWeight.bold,
),