update cart
This commit is contained in:
Phuoc Nguyen
@@ -1,6 +1,6 @@
|
||||
/// Cart Item Widget
|
||||
///
|
||||
/// Displays a single item in the cart with image, details, and quantity controls.
|
||||
/// Displays a single item in the cart with checkbox, image, details, and quantity controls.
|
||||
library;
|
||||
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
@@ -15,17 +15,68 @@ import 'package:worker/features/cart/presentation/providers/cart_state.dart';
|
||||
/// Cart Item Widget
|
||||
///
|
||||
/// Displays:
|
||||
/// - Product image (80x80, rounded)
|
||||
/// - Product name and SKU
|
||||
/// - Price per unit
|
||||
/// - Quantity controls (-, value, +, unit label)
|
||||
class CartItemWidget extends ConsumerWidget {
|
||||
/// - 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
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
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: 'đ',
|
||||
@@ -33,8 +84,8 @@ class CartItemWidget extends ConsumerWidget {
|
||||
);
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
padding: const EdgeInsets.all(12),
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
@@ -49,29 +100,45 @@ class CartItemWidget extends ConsumerWidget {
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Product Image
|
||||
// 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: item.product.imageUrl,
|
||||
width: 80,
|
||||
height: 80,
|
||||
imageUrl: widget.item.product.thumbnail,
|
||||
width: 100,
|
||||
height: 100,
|
||||
fit: BoxFit.cover,
|
||||
placeholder: (context, url) => Container(
|
||||
width: 80,
|
||||
height: 80,
|
||||
width: 100,
|
||||
height: 100,
|
||||
color: AppColors.grey100,
|
||||
child: const Center(
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
),
|
||||
),
|
||||
errorWidget: (context, url, error) => Container(
|
||||
width: 80,
|
||||
height: 80,
|
||||
width: 100,
|
||||
height: 100,
|
||||
color: AppColors.grey100,
|
||||
child: const Icon(
|
||||
Icons.image_not_supported,
|
||||
color: AppColors.grey500,
|
||||
size: 32,
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -86,9 +153,10 @@ class CartItemWidget extends ConsumerWidget {
|
||||
children: [
|
||||
// Product Name
|
||||
Text(
|
||||
item.product.name,
|
||||
widget.item.product.name,
|
||||
style: AppTypography.titleMedium.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 15,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
@@ -96,27 +164,18 @@ class CartItemWidget extends ConsumerWidget {
|
||||
|
||||
const SizedBox(height: 4),
|
||||
|
||||
// SKU
|
||||
// Price
|
||||
Text(
|
||||
'Mã: ${item.product.erpnextItemCode ?? item.product.productId}',
|
||||
style: AppTypography.bodySmall.copyWith(
|
||||
color: AppColors.grey500,
|
||||
'${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),
|
||||
|
||||
// Price
|
||||
Text(
|
||||
'${currencyFormatter.format(item.product.basePrice)}/${item.product.unit ?? 'm²'}',
|
||||
style: AppTypography.titleMedium.copyWith(
|
||||
color: AppColors.primaryBlue,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 12),
|
||||
|
||||
// Quantity Controls
|
||||
Row(
|
||||
children: [
|
||||
@@ -126,21 +185,57 @@ class CartItemWidget extends ConsumerWidget {
|
||||
onPressed: () {
|
||||
ref
|
||||
.read(cartProvider.notifier)
|
||||
.decrementQuantity(item.product.productId);
|
||||
.decrementQuantity(widget.item.product.productId);
|
||||
},
|
||||
),
|
||||
|
||||
const SizedBox(width: 12),
|
||||
const SizedBox(width: 8),
|
||||
|
||||
// Quantity value
|
||||
Text(
|
||||
item.quantity.toStringAsFixed(0),
|
||||
style: AppTypography.titleMedium.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
// 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: 12),
|
||||
const SizedBox(width: 8),
|
||||
|
||||
// Increase button
|
||||
_QuantityButton(
|
||||
@@ -148,7 +243,7 @@ class CartItemWidget extends ConsumerWidget {
|
||||
onPressed: () {
|
||||
ref
|
||||
.read(cartProvider.notifier)
|
||||
.incrementQuantity(item.product.productId);
|
||||
.incrementQuantity(widget.item.product.productId);
|
||||
},
|
||||
),
|
||||
|
||||
@@ -156,13 +251,39 @@ class CartItemWidget extends ConsumerWidget {
|
||||
|
||||
// Unit label
|
||||
Text(
|
||||
item.product.unit ?? 'm²',
|
||||
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: ')'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -172,9 +293,45 @@ class CartItemWidget extends ConsumerWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// 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(
|
||||
Icons.check,
|
||||
size: 14,
|
||||
color: AppColors.white,
|
||||
)
|
||||
: null,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Quantity Button
|
||||
///
|
||||
/// Small circular button for incrementing/decrementing quantity.
|
||||
/// Small button for incrementing/decrementing quantity.
|
||||
class _QuantityButton extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final VoidCallback onPressed;
|
||||
@@ -185,15 +342,16 @@ class _QuantityButton extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return InkWell(
|
||||
onTap: onPressed,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
child: Container(
|
||||
width: 32,
|
||||
height: 32,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.grey100,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(color: const Color(0xFFE0E0E0), width: 2),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
color: AppColors.white,
|
||||
),
|
||||
child: Icon(icon, size: 18, color: AppColors.grey900),
|
||||
child: Icon(icon, size: 16, color: AppColors.grey900),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user