Agrego frontend app
This commit is contained in:
@@ -0,0 +1,457 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:gimnasio_soma/core/theme/soma_colors.dart';
|
||||
import 'package:gimnasio_soma/core/widgets/soma_header_help.dart';
|
||||
import 'package:gimnasio_soma/core/widgets/soma_toast.dart';
|
||||
import 'package:gimnasio_soma/features/pagos/domain/entities/metodo_pago.dart';
|
||||
import 'package:gimnasio_soma/features/pagos/presentation/providers/pagos_provider.dart';
|
||||
|
||||
class MetodosPagoScreen extends ConsumerWidget {
|
||||
const MetodosPagoScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final state = ref.watch(metodosPagoProvider);
|
||||
final isWide = MediaQuery.of(context).size.width >= 800;
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
isWide ? 32 : 16,
|
||||
isWide ? 28 : 16,
|
||||
isWide ? 32 : 16,
|
||||
12,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
const Text(
|
||||
'Métodos de pago',
|
||||
style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700),
|
||||
),
|
||||
const SomaHeaderHelp(
|
||||
items: [
|
||||
SomaHelpItem(
|
||||
icon: Icons.touch_app_outlined,
|
||||
text: 'Tocá un método para activarlo, desactivarlo o '
|
||||
'cambiarle el ícono.',
|
||||
),
|
||||
SomaHelpItem(
|
||||
icon: Icons.refresh,
|
||||
text: 'Recarga la lista de métodos de pago.',
|
||||
),
|
||||
],
|
||||
),
|
||||
const Spacer(),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh, size: 20),
|
||||
tooltip: 'Recargar',
|
||||
onPressed: () =>
|
||||
ref.read(metodosPagoProvider.notifier).load(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: state.when(
|
||||
loading: () => const Center(
|
||||
child: CircularProgressIndicator(color: SomaColors.primary),
|
||||
),
|
||||
error: (e, _) => Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(Icons.error_outline,
|
||||
size: 48,
|
||||
color: theme.colorScheme.onSurface.withAlpha(100)),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
e.toString().replaceFirst('Exception: ', ''),
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
color: theme.colorScheme.onSurface.withAlpha(153),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
TextButton.icon(
|
||||
onPressed: () =>
|
||||
ref.read(metodosPagoProvider.notifier).load(),
|
||||
icon: const Icon(Icons.refresh, size: 18),
|
||||
label: const Text('Reintentar'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
data: (metodos) {
|
||||
if (metodos.isEmpty) {
|
||||
return Center(
|
||||
child: Text(
|
||||
'No hay métodos de pago',
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
color: theme.colorScheme.onSurface.withAlpha(130),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return ListView.separated(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
isWide ? 32 : 16, 4, isWide ? 32 : 16, 80,
|
||||
),
|
||||
itemCount: metodos.length,
|
||||
separatorBuilder: (_, _) => const SizedBox(height: 8),
|
||||
itemBuilder: (context, index) {
|
||||
return _MetodoCard(metodo: metodos[index]);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MetodoCard extends ConsumerWidget {
|
||||
final MetodoPago metodo;
|
||||
const _MetodoCard({required this.metodo});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final theme = Theme.of(context);
|
||||
final railColor = metodo.activo
|
||||
? SomaColors.success.withAlpha(180)
|
||||
: theme.colorScheme.surfaceContainerHighest;
|
||||
|
||||
final card = InkWell(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
onTap: () => _showEditDialog(context, ref),
|
||||
child: Container(
|
||||
clipBehavior: Clip.antiAlias,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
color: theme.colorScheme.surface,
|
||||
border: Border.all(
|
||||
color: theme.colorScheme.surfaceContainerHighest,
|
||||
width: 0.5,
|
||||
),
|
||||
),
|
||||
child: IntrinsicHeight(
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Rail de estado
|
||||
Container(width: 4, color: railColor),
|
||||
|
||||
// Contenido
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(14, 11, 8, 11),
|
||||
child: Row(
|
||||
children: [
|
||||
// Ícono
|
||||
Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: metodo.activo
|
||||
? SomaColors.primary.withAlpha(20)
|
||||
: theme.colorScheme.onSurface.withAlpha(12),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Icon(
|
||||
_iconForMetodo(metodo.icono),
|
||||
size: 20,
|
||||
color: metodo.activo
|
||||
? SomaColors.primary
|
||||
: theme.colorScheme.onSurface.withAlpha(80),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
|
||||
// Descripción + badge
|
||||
Expanded(
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
metodo.descripcion,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: theme.colorScheme.onSurface,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
_EstadoBadge(activo: metodo.activo),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(width: 4),
|
||||
|
||||
// Toggle activo
|
||||
Switch(
|
||||
value: metodo.activo,
|
||||
activeTrackColor: SomaColors.success,
|
||||
activeThumbColor: Colors.white,
|
||||
onChanged: (value) async {
|
||||
final error =
|
||||
await ref.read(metodosPagoProvider.notifier).update({
|
||||
'id': metodo.id,
|
||||
'activo': value,
|
||||
});
|
||||
if (!context.mounted) return;
|
||||
if (error != null) {
|
||||
SomaToast.show(context,
|
||||
message: error, type: ToastType.error);
|
||||
}
|
||||
},
|
||||
),
|
||||
|
||||
// Edit
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.edit_outlined,
|
||||
size: 18,
|
||||
color: theme.colorScheme.onSurface.withAlpha(130),
|
||||
),
|
||||
tooltip: 'Editar',
|
||||
onPressed: () => _showEditDialog(context, ref),
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(
|
||||
minWidth: 34,
|
||||
minHeight: 34,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
if (!metodo.activo) {
|
||||
return Opacity(opacity: 0.6, child: card);
|
||||
}
|
||||
return card;
|
||||
}
|
||||
|
||||
static const _iconOptions = [
|
||||
(null, Icons.payment_outlined, 'Sin ícono'),
|
||||
('efectivo', Icons.payments_outlined, 'Efectivo'),
|
||||
('transferencia', Icons.account_balance_outlined, 'Transferencia'),
|
||||
('tarjeta', Icons.credit_card_outlined, 'Tarjeta'),
|
||||
('qr', Icons.qr_code, 'QR'),
|
||||
];
|
||||
|
||||
Future<void> _showEditDialog(BuildContext context, WidgetRef ref) async {
|
||||
final ctrl = TextEditingController(text: metodo.descripcion);
|
||||
String? selectedIcon = metodo.icono;
|
||||
|
||||
final result = await showDialog<({String descripcion, String? icono})>(
|
||||
context: context,
|
||||
builder: (ctx) => StatefulBuilder(
|
||||
builder: (ctx, setLocal) {
|
||||
final theme = Theme.of(ctx);
|
||||
return AlertDialog(
|
||||
title: const Text('Editar método de pago'),
|
||||
content: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
TextField(
|
||||
controller: ctrl,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Descripción',
|
||||
contentPadding:
|
||||
EdgeInsets.symmetric(horizontal: 12, vertical: 14),
|
||||
),
|
||||
autofocus: true,
|
||||
maxLength: 50,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Ícono',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: theme.colorScheme.onSurface.withAlpha(150),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: _iconOptions.map((opt) {
|
||||
final (key, icon, label) = opt;
|
||||
final isSelected = selectedIcon == key;
|
||||
return GestureDetector(
|
||||
onTap: () => setLocal(() => selectedIcon = key),
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 120),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 10, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected
|
||||
? SomaColors.primary.withAlpha(22)
|
||||
: theme.colorScheme.surfaceContainerHighest
|
||||
.withAlpha(80),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(
|
||||
color: isSelected
|
||||
? SomaColors.primary
|
||||
: theme.colorScheme.surfaceContainerHighest,
|
||||
width: isSelected ? 1.5 : 0.8,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
icon,
|
||||
size: 16,
|
||||
color: isSelected
|
||||
? SomaColors.primary
|
||||
: theme.colorScheme.onSurface.withAlpha(150),
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: isSelected
|
||||
? FontWeight.w600
|
||||
: FontWeight.normal,
|
||||
color: isSelected
|
||||
? SomaColors.primary
|
||||
: theme.colorScheme.onSurface
|
||||
.withAlpha(150),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
],
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(ctx).pop(),
|
||||
child: Text(
|
||||
'Cancelar',
|
||||
style: TextStyle(
|
||||
color: theme.colorScheme.onSurface.withAlpha(178),
|
||||
),
|
||||
),
|
||||
),
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
final text = ctrl.text.trim();
|
||||
if (text.isNotEmpty) {
|
||||
Navigator.of(ctx)
|
||||
.pop((descripcion: text, icono: selectedIcon));
|
||||
}
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
minimumSize: const Size(0, 40),
|
||||
),
|
||||
child: const Text('Guardar'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
ctrl.dispose();
|
||||
if (result == null || !context.mounted) return;
|
||||
|
||||
final changed = result.descripcion != metodo.descripcion ||
|
||||
result.icono != metodo.icono;
|
||||
if (!changed) return;
|
||||
|
||||
final error = await ref.read(metodosPagoProvider.notifier).update({
|
||||
'id': metodo.id,
|
||||
'descripcion': result.descripcion,
|
||||
'icono': result.icono,
|
||||
});
|
||||
if (!context.mounted) return;
|
||||
if (error != null) {
|
||||
SomaToast.show(context, message: error, type: ToastType.error);
|
||||
} else {
|
||||
SomaToast.show(context,
|
||||
message: 'Método actualizado', type: ToastType.success);
|
||||
}
|
||||
}
|
||||
|
||||
IconData _iconForMetodo(String? icono) {
|
||||
switch (icono) {
|
||||
case 'efectivo':
|
||||
case 'cash':
|
||||
return Icons.payments_outlined;
|
||||
case 'transferencia':
|
||||
case 'transfer':
|
||||
return Icons.account_balance_outlined;
|
||||
case 'tarjeta':
|
||||
case 'card':
|
||||
return Icons.credit_card_outlined;
|
||||
case 'qr':
|
||||
return Icons.qr_code;
|
||||
default:
|
||||
return Icons.payment_outlined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class _EstadoBadge extends StatelessWidget {
|
||||
final bool activo;
|
||||
const _EstadoBadge({required this.activo});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final color = activo ? SomaColors.success : SomaColors.error;
|
||||
final label = activo ? 'Activo' : 'Inactivo';
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 3),
|
||||
decoration: BoxDecoration(
|
||||
color: color.withAlpha(18),
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
border: Border.all(color: color.withAlpha(60), width: 0.5),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: 5,
|
||||
height: 5,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: color,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: color,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user