360 lines
12 KiB
Dart
360 lines
12 KiB
Dart
/// Cart Item Widget
|
|
///
|
|
/// Displays a single item in the cart with checkbox, image, details, and quantity controls.
|
|
library;
|
|
|
|
import 'package:cached_network_image/cached_network_image.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
|
|
import 'package:intl/intl.dart';
|
|
import 'package:worker/core/theme/colors.dart';
|
|
import 'package:worker/core/theme/typography.dart';
|
|
import 'package:worker/features/cart/presentation/providers/cart_provider.dart';
|
|
import 'package:worker/features/cart/presentation/providers/cart_state.dart';
|
|
|
|
/// Cart Item Widget
|
|
///
|
|
/// Displays:
|
|
/// - Checkbox for selection (left side, aligned to top)
|
|
/// - Product image (100x100, rounded)
|
|
/// - Product name and price
|
|
/// - Quantity controls (-, text field for input, +, unit label)
|
|
/// - Converted quantity display: "(Quy đổi: X.XX m² = Y viên)"
|
|
class CartItemWidget extends ConsumerStatefulWidget {
|
|
final CartItemData item;
|
|
|
|
const CartItemWidget({super.key, required this.item});
|
|
|
|
@override
|
|
ConsumerState<CartItemWidget> createState() => _CartItemWidgetState();
|
|
}
|
|
|
|
class _CartItemWidgetState extends ConsumerState<CartItemWidget> {
|
|
late TextEditingController _quantityController;
|
|
late FocusNode _quantityFocusNode;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_quantityController = TextEditingController(
|
|
text: widget.item.quantity.toStringAsFixed(0),
|
|
);
|
|
_quantityFocusNode = FocusNode();
|
|
}
|
|
|
|
@override
|
|
void didUpdateWidget(CartItemWidget oldWidget) {
|
|
super.didUpdateWidget(oldWidget);
|
|
// Update text field when quantity changes from outside (increment/decrement buttons)
|
|
if (widget.item.quantity != oldWidget.item.quantity) {
|
|
_quantityController.text = widget.item.quantity.toStringAsFixed(0);
|
|
}
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_quantityController.dispose();
|
|
_quantityFocusNode.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _handleQuantitySubmit(String value) {
|
|
final newQuantity = double.tryParse(value);
|
|
if (newQuantity != null && newQuantity >= 1) {
|
|
ref
|
|
.read(cartProvider.notifier)
|
|
.updateQuantity(widget.item.product.productId, newQuantity);
|
|
} else {
|
|
// Invalid input, reset to current quantity
|
|
_quantityController.text = widget.item.quantity.toStringAsFixed(0);
|
|
}
|
|
_quantityFocusNode.unfocus();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final cartState = ref.watch(cartProvider);
|
|
final isSelected =
|
|
cartState.selectedItems[widget.item.product.productId] ?? false;
|
|
|
|
final currencyFormatter = NumberFormat.currency(
|
|
locale: 'vi_VN',
|
|
symbol: 'đ',
|
|
decimalDigits: 0,
|
|
);
|
|
|
|
return Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.white,
|
|
borderRadius: BorderRadius.circular(12),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withValues(alpha: 0.05),
|
|
blurRadius: 4,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Checkbox (aligned to top, ~50px from top to match HTML)
|
|
Padding(
|
|
padding: const EdgeInsets.only(top: 34),
|
|
child: _CustomCheckbox(
|
|
value: isSelected,
|
|
onChanged: (value) {
|
|
ref
|
|
.read(cartProvider.notifier)
|
|
.toggleSelection(widget.item.product.productId);
|
|
},
|
|
),
|
|
),
|
|
|
|
const SizedBox(width: 12),
|
|
|
|
// Product Image (bigger: 100x100)
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: CachedNetworkImage(
|
|
imageUrl: widget.item.product.thumbnail,
|
|
width: 100,
|
|
height: 100,
|
|
fit: BoxFit.cover,
|
|
placeholder: (context, url) => Container(
|
|
width: 100,
|
|
height: 100,
|
|
color: AppColors.grey100,
|
|
child: const Center(
|
|
child: CircularProgressIndicator(strokeWidth: 2),
|
|
),
|
|
),
|
|
errorWidget: (context, url, error) => Container(
|
|
width: 100,
|
|
height: 100,
|
|
color: AppColors.grey100,
|
|
child: const FaIcon(
|
|
FontAwesomeIcons.image,
|
|
color: AppColors.grey500,
|
|
size: 32,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
const SizedBox(width: 12),
|
|
|
|
// Product Info
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Product Name
|
|
Text(
|
|
widget.item.product.name,
|
|
style: AppTypography.titleMedium.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 15,
|
|
),
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
|
|
const SizedBox(height: 4),
|
|
|
|
// Price
|
|
Text(
|
|
'${currencyFormatter.format(widget.item.product.basePrice)}/${widget.item.product.unit ?? 'm²'}',
|
|
style: AppTypography.titleMedium.copyWith(
|
|
color: AppColors.primaryBlue,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 16,
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 8),
|
|
|
|
// Quantity Controls
|
|
Row(
|
|
children: [
|
|
// Decrease button
|
|
_QuantityButton(
|
|
icon: FontAwesomeIcons.minus,
|
|
onPressed: () {
|
|
ref
|
|
.read(cartProvider.notifier)
|
|
.decrementQuantity(widget.item.product.productId);
|
|
},
|
|
),
|
|
|
|
const SizedBox(width: 8),
|
|
|
|
// Quantity TextField
|
|
SizedBox(
|
|
width: 50,
|
|
height: 32,
|
|
child: TextField(
|
|
controller: _quantityController,
|
|
focusNode: _quantityFocusNode,
|
|
keyboardType: TextInputType.number,
|
|
textAlign: TextAlign.center,
|
|
style: AppTypography.titleMedium.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 16,
|
|
),
|
|
decoration: InputDecoration(
|
|
contentPadding: EdgeInsets.zero,
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(6),
|
|
borderSide: const BorderSide(
|
|
color: Color(0xFFE0E0E0),
|
|
width: 1,
|
|
),
|
|
),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(6),
|
|
borderSide: const BorderSide(
|
|
color: Color(0xFFE0E0E0),
|
|
width: 1,
|
|
),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(6),
|
|
borderSide: const BorderSide(
|
|
color: AppColors.primaryBlue,
|
|
width: 2,
|
|
),
|
|
),
|
|
),
|
|
onSubmitted: _handleQuantitySubmit,
|
|
onEditingComplete: () {
|
|
_handleQuantitySubmit(_quantityController.text);
|
|
},
|
|
),
|
|
),
|
|
|
|
const SizedBox(width: 8),
|
|
|
|
// Increase button
|
|
_QuantityButton(
|
|
icon: FontAwesomeIcons.plus,
|
|
onPressed: () {
|
|
ref
|
|
.read(cartProvider.notifier)
|
|
.incrementQuantity(widget.item.product.productId);
|
|
},
|
|
),
|
|
|
|
const SizedBox(width: 8),
|
|
|
|
// Unit label
|
|
Text(
|
|
widget.item.product.unit ?? 'm²',
|
|
style: AppTypography.bodySmall.copyWith(
|
|
color: AppColors.grey500,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 4),
|
|
|
|
// Converted Quantity Display
|
|
RichText(
|
|
text: TextSpan(
|
|
style: AppTypography.bodySmall.copyWith(
|
|
color: AppColors.grey500,
|
|
fontSize: 13,
|
|
),
|
|
children: [
|
|
const TextSpan(text: '(Quy đổi: '),
|
|
TextSpan(
|
|
text:
|
|
'${widget.item.quantityConverted.toStringAsFixed(2)} ${widget.item.product.unit ?? 'm²'}',
|
|
style: const TextStyle(fontWeight: FontWeight.bold),
|
|
),
|
|
const TextSpan(text: ' = '),
|
|
TextSpan(
|
|
text: '${widget.item.boxes} viên',
|
|
style: const TextStyle(fontWeight: FontWeight.bold),
|
|
),
|
|
const TextSpan(text: ')'),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Custom Checkbox Widget
|
|
///
|
|
/// Matches HTML design with 20px size, 6px radius, blue when checked.
|
|
class _CustomCheckbox extends StatelessWidget {
|
|
final bool value;
|
|
final ValueChanged<bool?>? onChanged;
|
|
|
|
const _CustomCheckbox({required this.value, this.onChanged});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GestureDetector(
|
|
onTap: () => onChanged?.call(!value),
|
|
child: Container(
|
|
width: 20,
|
|
height: 20,
|
|
decoration: BoxDecoration(
|
|
color: value ? AppColors.primaryBlue : AppColors.white,
|
|
border: Border.all(
|
|
color: value ? AppColors.primaryBlue : const Color(0xFFCBD5E1),
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
child: value
|
|
? const Icon(
|
|
FontAwesomeIcons.check,
|
|
size: 14,
|
|
color: AppColors.white,
|
|
)
|
|
: null,
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Quantity Button
|
|
///
|
|
/// Small button for incrementing/decrementing quantity.
|
|
class _QuantityButton extends StatelessWidget {
|
|
final IconData icon;
|
|
final VoidCallback onPressed;
|
|
|
|
const _QuantityButton({required this.icon, required this.onPressed});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return InkWell(
|
|
onTap: onPressed,
|
|
borderRadius: BorderRadius.circular(6),
|
|
child: Container(
|
|
width: 32,
|
|
height: 32,
|
|
decoration: BoxDecoration(
|
|
border: Border.all(color: const Color(0xFFE0E0E0), width: 2),
|
|
borderRadius: BorderRadius.circular(6),
|
|
color: AppColors.white,
|
|
),
|
|
child: Icon(icon, size: 16, color: AppColors.grey900),
|
|
),
|
|
);
|
|
}
|
|
}
|