checkout page

lib/presentation/components/field/customer_autocomplete.dart

@@ -0,0 +1,107 @@
+part of 'field.dart';
+
+class CustomerAutocomplete extends StatefulWidget {
+  final TextEditingController controller;
+  final Customer? selectedCustomer;
+  final ValueChanged<Customer?>? onSelected;
+
+  const CustomerAutocomplete({
+    super.key,
+    required this.controller,
+    this.selectedCustomer,
+    this.onSelected,
+  });
+
+  @override
+  State<CustomerAutocomplete> createState() => _CustomerAutocompleteState();
+}
+
+class _CustomerAutocompleteState extends State<CustomerAutocomplete> {
+  final FocusNode _focusNode = FocusNode();
+  @override
+  void initState() {
+    super.initState();
+    context.read<CustomerLoaderBloc>().add(CustomerLoaderEvent.fetched());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          'Pelanggan',
+          style: AppStyle.lg.copyWith(
+            color: AppColor.black,
+            fontWeight: FontWeight.w600,
+          ),
+        ),
+        const SpaceHeight(6.0),
+        BlocBuilder<CustomerLoaderBloc, CustomerLoaderState>(
+          builder: (context, state) {
+            return RawAutocomplete<Customer>(
+              textEditingController: widget.controller,
+              focusNode: _focusNode,
+              optionsBuilder: (TextEditingValue textEditingValue) {
+                if (textEditingValue.text.isEmpty) {
+                  return const Iterable<Customer>.empty();
+                }
+                return state.customers.where((Customer customer) {
+                  return customer.name.toLowerCase().contains(
+                    textEditingValue.text.toLowerCase(),
+                  );
+                });
+              },
+              displayStringForOption: (Customer option) => option.name,
+              onSelected: (Customer selection) {
+                widget.controller.text = selection.name;
+                if (widget.onSelected != null) {
+                  widget.onSelected!(selection);
+                }
+              },
+              fieldViewBuilder:
+                  (context, controller, focusNode, onFieldSubmitted) {
+                    return TextFormField(
+                      controller: controller,
+                      focusNode: focusNode,
+                      decoration: const InputDecoration(
+                        hintText: 'Nama Pelanggan',
+                      ),
+                      onChanged: (value) {
+                        if (widget.onSelected != null) {
+                          widget.onSelected!(null); // reset jika ketik manual
+                        }
+                      },
+                    );
+                  },
+              optionsViewBuilder: (context, onSelected, options) {
+                return Material(
+                  elevation: 1,
+                  borderRadius: BorderRadius.circular(8),
+                  color: Colors.white,
+                  child: SizedBox(
+                    height: context.deviceHeight * 0.4,
+                    child: ListView.separated(
+                      padding: EdgeInsets.zero,
+                      itemCount: options.length,
+                      separatorBuilder: (_, __) => const Divider(height: 1),
+                      itemBuilder: (BuildContext context, int index) {
+                        final Customer option = options.elementAt(index);
+                        return ListTile(
+                          title: Text(option.name),
+                          onTap: () {
+                            onSelected(option);
+                          },
+                        );
+                      },
+                    ),
+                  ),
+                );
+              },
+            );
+          },
+        ),
+      ],
+    );
+  }
+}

lib/presentation/components/field/field.dart

@@ -1,8 +1,13 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 
+import '../../../application/customer/customer_loader/customer_loader_bloc.dart';
+import '../../../common/extension/extension.dart';
 import '../../../common/theme/theme.dart';
+import '../../../domain/customer/customer.dart';
 import '../spaces/space.dart';
 
 part 'password_text_field.dart';
 part 'text_field.dart';
 part 'search_text_field.dart';
+part 'customer_autocomplete.dart';