330 lines
13 KiB
Dart
330 lines
13 KiB
Dart
import 'dart:developer';
|
|
|
|
import 'package:dropdown_search/dropdown_search.dart';
|
|
import 'package:enaklo_pos/core/components/buttons.dart';
|
|
import 'package:enaklo_pos/core/components/custom_modal_dialog.dart';
|
|
import 'package:enaklo_pos/core/components/flushbar.dart';
|
|
import 'package:enaklo_pos/core/components/spaces.dart';
|
|
import 'package:enaklo_pos/core/constants/colors.dart';
|
|
import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
|
|
import 'package:enaklo_pos/data/models/response/order_response_model.dart';
|
|
import 'package:enaklo_pos/presentation/home/bloc/order_form/order_form_bloc.dart';
|
|
import 'package:enaklo_pos/presentation/home/models/product_quantity.dart';
|
|
import 'package:enaklo_pos/presentation/sales/blocs/order_loader/order_loader_bloc.dart';
|
|
import 'package:enaklo_pos/presentation/success/pages/success_save_order_page.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
|
|
class PaymentAddOrderDialog extends StatefulWidget {
|
|
final List<ProductQuantity> items;
|
|
const PaymentAddOrderDialog({super.key, required this.items});
|
|
|
|
@override
|
|
State<PaymentAddOrderDialog> createState() => _PaymentAddOrderDialogState();
|
|
}
|
|
|
|
class _PaymentAddOrderDialogState extends State<PaymentAddOrderDialog> {
|
|
Order? selectOrder;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
context.read<OrderLoaderBloc>().add(
|
|
OrderLoaderEvent.getByStatus(
|
|
'pending',
|
|
dateFrom: DateTime.now(),
|
|
dateTo: DateTime.now(),
|
|
limit: 20,
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return CustomModalDialog(
|
|
title: 'Bayar Nanti',
|
|
subtitle: 'Simpan pesanan dan bayar nanti',
|
|
contentPadding:
|
|
const EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0),
|
|
minWidth: context.deviceWidth * 0.4,
|
|
minHeight: context.deviceHeight * 0.4,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'Pilih Meja yang sudah dipesan',
|
|
style: TextStyle(
|
|
color: AppColors.black,
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SpaceHeight(6.0),
|
|
BlocBuilder<OrderLoaderBloc, OrderLoaderState>(
|
|
builder: (context, state) {
|
|
return state.maybeWhen(
|
|
orElse: () =>
|
|
Center(child: const CircularProgressIndicator()),
|
|
loading: () =>
|
|
Center(child: const CircularProgressIndicator()),
|
|
loaded: (
|
|
orders,
|
|
totalOrder,
|
|
_,
|
|
__,
|
|
___,
|
|
) {
|
|
final availableOrders = orders;
|
|
|
|
if (selectOrder == null && availableOrders.isNotEmpty) {
|
|
selectOrder = availableOrders.first;
|
|
}
|
|
|
|
if (availableOrders.isEmpty) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: Colors.orange[50],
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(
|
|
color: Colors.orange,
|
|
width: 1,
|
|
),
|
|
),
|
|
child: const Text(
|
|
'Tidak ada meja yang tersedia. Silakan pilih opsi lain.',
|
|
style: TextStyle(color: Colors.orange),
|
|
),
|
|
);
|
|
}
|
|
|
|
return DropdownSearch<Order>(
|
|
items: orders,
|
|
selectedItem: selectOrder,
|
|
|
|
// Dropdown properties
|
|
dropdownDecoratorProps: DropDownDecoratorProps(
|
|
dropdownSearchDecoration: InputDecoration(
|
|
hintText: "Pilih Meja",
|
|
hintStyle: TextStyle(
|
|
color: Colors.grey.shade600,
|
|
fontSize: 14,
|
|
),
|
|
prefixIcon: Icon(
|
|
Icons.category_outlined,
|
|
color: Colors.grey.shade500,
|
|
size: 20,
|
|
),
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: BorderSide(
|
|
color: Colors.grey.shade300,
|
|
width: 1.5,
|
|
),
|
|
),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: BorderSide(
|
|
color: Colors.grey.shade300,
|
|
width: 1.5,
|
|
),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: BorderSide(
|
|
color: Colors.blue.shade400,
|
|
width: 2,
|
|
),
|
|
),
|
|
filled: true,
|
|
fillColor: Colors.white,
|
|
contentPadding: const EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 16,
|
|
),
|
|
),
|
|
),
|
|
|
|
// Popup properties
|
|
popupProps: PopupProps.menu(
|
|
showSearchBox: true,
|
|
searchFieldProps: TextFieldProps(
|
|
decoration: InputDecoration(
|
|
hintText: "Cari meja...",
|
|
prefixIcon: const Icon(Icons.search),
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
contentPadding: const EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 12,
|
|
),
|
|
),
|
|
),
|
|
menuProps: MenuProps(
|
|
backgroundColor: Colors.white,
|
|
elevation: 8,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
itemBuilder: (context, order, isSelected) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 12,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: isSelected
|
|
? Colors.blue.shade50
|
|
: Colors.transparent,
|
|
border: Border(
|
|
bottom: BorderSide(
|
|
color: Colors.grey.shade100,
|
|
width: 0.5,
|
|
),
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 8,
|
|
height: 8,
|
|
decoration: BoxDecoration(
|
|
color: isSelected
|
|
? Colors.blue.shade600
|
|
: Colors.grey.shade400,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Text(
|
|
"${order.tableNumber ?? ""} - ${order.metadata?['customer_name']}",
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: isSelected
|
|
? FontWeight.w600
|
|
: FontWeight.w500,
|
|
color: isSelected
|
|
? Colors.blue.shade700
|
|
: Colors.black87,
|
|
),
|
|
),
|
|
),
|
|
if (isSelected)
|
|
Icon(
|
|
Icons.check,
|
|
color: Colors.blue.shade600,
|
|
size: 18,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
emptyBuilder: (context, searchEntry) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(20),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
Icons.search_off,
|
|
color: Colors.grey.shade400,
|
|
size: 48,
|
|
),
|
|
const SizedBox(height: 12),
|
|
Text(
|
|
searchEntry.isEmpty
|
|
? "Tidak ada meja tersedia"
|
|
: "Tidak ditemukan meja dengan '${searchEntry}'",
|
|
style: TextStyle(
|
|
color: Colors.grey.shade600,
|
|
fontSize: 14,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
|
|
// Item as string (for search functionality)
|
|
itemAsString: (Order order) => order.tableNumber ?? "",
|
|
|
|
// Comparison function
|
|
compareFn: (Order? item1, Order? item2) {
|
|
return item1?.id == item2?.id;
|
|
},
|
|
|
|
// On changed callback
|
|
onChanged: (Order? selectedOrder) {
|
|
if (selectedOrder != null) {
|
|
setState(() {
|
|
selectOrder = selectedOrder;
|
|
});
|
|
log("selectOrder: ${selectOrder!.tableNumber}");
|
|
}
|
|
},
|
|
|
|
// Validator (optional)
|
|
validator: (Order? value) {
|
|
if (value == null) {
|
|
return "Meja harus dipilih";
|
|
}
|
|
return null;
|
|
},
|
|
);
|
|
},
|
|
);
|
|
}),
|
|
],
|
|
),
|
|
SpaceHeight(24),
|
|
BlocListener<OrderFormBloc, OrderFormState>(
|
|
listener: (context, state) {
|
|
state.maybeWhen(
|
|
orElse: () {},
|
|
success: (data) {
|
|
context.pop();
|
|
context.pushReplacement(
|
|
SuccessSaveOrderPage(
|
|
productQuantity: widget.items,
|
|
orderId: selectOrder?.id ?? "",
|
|
),
|
|
);
|
|
},
|
|
error: (message) => AppFlushbar.showError(context, message),
|
|
);
|
|
},
|
|
child: BlocBuilder<OrderFormBloc, OrderFormState>(
|
|
builder: (context, state) {
|
|
return state.maybeWhen(
|
|
orElse: () => Button.filled(
|
|
onPressed: () {
|
|
context
|
|
.read<OrderFormBloc>()
|
|
.add(OrderFormEvent.addToOrder(
|
|
items: widget.items,
|
|
orderId: selectOrder?.id ?? "",
|
|
));
|
|
},
|
|
label: "Simpan",
|
|
),
|
|
loading: () => Center(
|
|
child: const CircularProgressIndicator(),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|