335 lines
14 KiB
Dart
335 lines
14 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/customer_response_model.dart';
|
|
import 'package:enaklo_pos/data/models/response/table_model.dart';
|
|
import 'package:enaklo_pos/presentation/home/bloc/get_table_status/get_table_status_bloc.dart';
|
|
import 'package:enaklo_pos/presentation/home/bloc/order_form/order_form_bloc.dart';
|
|
import 'package:enaklo_pos/presentation/home/models/order_type.dart';
|
|
import 'package:enaklo_pos/presentation/home/models/product_quantity.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 PaymentSaveDialog extends StatefulWidget {
|
|
final TableModel? selectedTable;
|
|
final String customerName;
|
|
final OrderType orderType;
|
|
final List<ProductQuantity> items;
|
|
final Customer? customer;
|
|
const PaymentSaveDialog({
|
|
super.key,
|
|
required this.selectedTable,
|
|
required this.customerName,
|
|
required this.orderType,
|
|
required this.items,
|
|
required this.customer,
|
|
});
|
|
|
|
@override
|
|
State<PaymentSaveDialog> createState() => _PaymentSaveDialogState();
|
|
}
|
|
|
|
class _PaymentSaveDialogState extends State<PaymentSaveDialog> {
|
|
TableModel? selectTable;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
context
|
|
.read<GetTableStatusBloc>()
|
|
.add(GetTableStatusEvent.getTablesStatus('available'));
|
|
if (widget.selectedTable != null) {
|
|
selectTable = widget.selectedTable;
|
|
}
|
|
}
|
|
|
|
@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',
|
|
style: TextStyle(
|
|
color: AppColors.black,
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SpaceHeight(6.0),
|
|
BlocBuilder<GetTableStatusBloc, GetTableStatusState>(
|
|
builder: (context, state) {
|
|
return state.maybeWhen(
|
|
orElse: () =>
|
|
Center(child: const CircularProgressIndicator()),
|
|
loading: () =>
|
|
Center(child: const CircularProgressIndicator()),
|
|
success: (tables) {
|
|
final availableTables = tables;
|
|
|
|
if (selectTable == null && availableTables.isNotEmpty) {
|
|
selectTable = availableTables.first;
|
|
}
|
|
|
|
if (availableTables.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<TableModel>(
|
|
items: tables,
|
|
selectedItem: selectTable,
|
|
|
|
// 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, category, 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(
|
|
category.tableName ?? "",
|
|
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: (TableModel table) => table.tableName ?? "",
|
|
|
|
// Comparison function
|
|
compareFn: (TableModel? item1, TableModel? item2) {
|
|
return item1?.id == item2?.id;
|
|
},
|
|
|
|
// On changed callback
|
|
onChanged: (TableModel? selectedTable) {
|
|
if (selectedTable != null) {
|
|
setState(() {
|
|
selectTable = selectedTable;
|
|
});
|
|
log("selectTable: ${selectTable!.tableName}");
|
|
}
|
|
},
|
|
|
|
// Validator (optional)
|
|
validator: (TableModel? value) {
|
|
if (value == null) {
|
|
return "Meja harus dipilih";
|
|
}
|
|
return null;
|
|
},
|
|
);
|
|
},
|
|
);
|
|
}),
|
|
],
|
|
),
|
|
SpaceHeight(24),
|
|
BlocListener<OrderFormBloc, OrderFormState>(
|
|
listener: (context, state) {
|
|
state.maybeWhen(
|
|
orElse: () {},
|
|
success: (data) {
|
|
context.pushReplacement(SuccessSaveOrderPage(
|
|
productQuantity: widget.items,
|
|
orderId: data.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.create(
|
|
items: widget.items,
|
|
customerName: widget.customerName,
|
|
orderType: widget.orderType,
|
|
table: selectTable!,
|
|
customer: widget.customer,
|
|
),
|
|
);
|
|
},
|
|
label: "Simpan",
|
|
),
|
|
loading: () => Center(
|
|
child: const CircularProgressIndicator(),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|