feat: openfoodfacts#2380 - autocompletion for emb codes, labels, cate…

…gories and countries (openfoodfacts#2506)

New file:
* `autocomplete.dart`: The default Material-style Autocomplete options.

Impacted files:
* `simple_input_page.dart`: now using an autocomplete widget for whoever supports it.
* `simple_input_page_helpers.dart`: new method in order to get the `TagType` for autocompletion.

packages/smooth_app/lib/pages/product/autocomplete.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+
+/// The default Material-style Autocomplete options.
+///
+/// Was copied from material/autocomplete.dart as they were not kind enough
+/// to make it public.
+/// Inspiration was found in https://stackoverflow.com/questions/66935362
+class AutocompleteOptions<T extends Object> extends StatelessWidget {
+  const AutocompleteOptions({
+    Key? key,
+    required this.displayStringForOption,
+    required this.onSelected,
+    required this.options,
+    required this.maxOptionsHeight,
+  }) : super(key: key);
+
+  final AutocompleteOptionToString<T> displayStringForOption;
+
+  final AutocompleteOnSelected<T> onSelected;
+
+  final Iterable<T> options;
+  final double maxOptionsHeight;
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+      alignment: Alignment.topLeft,
+      child: Material(
+        elevation: 4.0,
+        child: ConstrainedBox(
+          constraints: BoxConstraints(maxHeight: maxOptionsHeight),
+          child: ListView.builder(
+            padding: EdgeInsets.zero,
+            shrinkWrap: true,
+            itemCount: options.length,
+            itemBuilder: (BuildContext context, int index) {
+              final T option = options.elementAt(index);
+              return InkWell(
+                onTap: () {
+                  onSelected(option);
+                },
+                child: Builder(builder: (BuildContext context) {
+                  final bool highlight =
+                      AutocompleteHighlightedOption.of(context) == index;
+                  if (highlight) {
+                    SchedulerBinding.instance
+                        .addPostFrameCallback((Duration timeStamp) {
+                      Scrollable.ensureVisible(context, alignment: 0.5);
+                    });
+                  }
+                  return Container(
+                    color: highlight ? Theme.of(context).focusColor : null,
+                    padding: const EdgeInsets.all(16.0),
+                    child: Text(displayStringForOption(option)),
+                  );
+                }),
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}

packages/smooth_app/lib/pages/product/simple_input_page.dart

@@ -2,13 +2,16 @@ import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:openfoodfacts/openfoodfacts.dart';
+import 'package:openfoodfacts/utils/TagType.dart';
 import 'package:provider/provider.dart';
 import 'package:smooth_app/database/local_database.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/generic_lib/dialogs/smooth_alert_dialog.dart';
 import 'package:smooth_app/helpers/product_cards_helper.dart';
+import 'package:smooth_app/pages/product/autocomplete.dart';
 import 'package:smooth_app/pages/product/common/product_refresher.dart';
 import 'package:smooth_app/pages/product/simple_input_page_helpers.dart';
+import 'package:smooth_app/query/product_query.dart';
 import 'package:smooth_app/widgets/smooth_scaffold.dart';
 
 /// Simple input page: we have a list of terms, we add, we remove, we save.
@@ -27,6 +30,8 @@ class SimpleInputPage extends StatefulWidget {
 
 class _SimpleInputPageState extends State<SimpleInputPage> {
   final TextEditingController _controller = TextEditingController();
+  final FocusNode _focusNode = FocusNode();
+  final GlobalKey _autocompleteKey = GlobalKey();
 
   @override
   void initState() {
@@ -66,20 +71,70 @@ class _SimpleInputPageState extends State<SimpleInputPage> {
                     ListTile(
                       onTap: () => _addItemsFromController(),
                       trailing: const Icon(Icons.add_circle),
-                      title: TextField(
-                        decoration: InputDecoration(
-                          filled: true,
-                          border: const OutlineInputBorder(
-                            borderRadius: CIRCULAR_BORDER_RADIUS,
-                            borderSide: BorderSide.none,
-                          ),
-                          contentPadding: const EdgeInsets.symmetric(
-                            horizontal: SMALL_SPACE,
-                            vertical: SMALL_SPACE,
+                      title: RawAutocomplete<String>(
+                        key: _autocompleteKey,
+                        focusNode: _focusNode,
+                        textEditingController: _controller,
+                        optionsBuilder: (final TextEditingValue value) async {
+                          final List<String> result = <String>[];
+                          final String input = value.text.trim();
+                          if (input.isEmpty) {
+                            return result;
+                          }
+                          final TagType? tagType = widget.helper.getTagType();
+                          if (tagType == null) {
+                            return result;
+                          }
+                          // TODO(monsieurtanuki): ask off-dart to return Strings instead of dynamic?
+                          final List<dynamic> data = await OpenFoodAPIClient
+                              .getAutocompletedSuggestions(
+                            tagType,
+                            language: ProductQuery.getLanguage()!,
+                            limit:
+                                1000000, // lower max count on the server anyway
+                            input: value.text.trim(),
+                          );
+                          for (final dynamic item in data) {
+                            result.add(item.toString());
+                          }
+                          result.sort();
+                          return result;
+                        },
+                        fieldViewBuilder: (BuildContext context,
+                                TextEditingController textEditingController,
+                                FocusNode focusNode,
+                                VoidCallback onFieldSubmitted) =>
+                            TextField(
+                          controller: textEditingController,
+                          decoration: InputDecoration(
+                            filled: true,
+                            border: const OutlineInputBorder(
+                              borderRadius: CIRCULAR_BORDER_RADIUS,
+                              borderSide: BorderSide.none,
+                            ),
+                            contentPadding: const EdgeInsets.symmetric(
+                              horizontal: SMALL_SPACE,
+                              vertical: SMALL_SPACE,
+                            ),
+                            hintText:
+                                widget.helper.getAddHint(appLocalizations),
                           ),
-                          hintText: widget.helper.getAddHint(appLocalizations),
+                          autofocus: true,
+                          focusNode: focusNode,
+                        ),
+                        optionsViewBuilder: (
+                          BuildContext context,
+                          AutocompleteOnSelected<String> onSelected,
+                          Iterable<String> options,
+                        ) =>
+                            AutocompleteOptions<String>(
+                          displayStringForOption:
+                              RawAutocomplete.defaultStringForOption,
+                          onSelected: onSelected,
+                          options: options,
+                          maxOptionsHeight:
+                              MediaQuery.of(context).size.height / 2,
                         ),
-                        controller: _controller,
                       ),
                     ),
                     if (widget.helper.getAddExplanations(appLocalizations) !=

packages/smooth_app/lib/pages/product/simple_input_page_helpers.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:openfoodfacts/openfoodfacts.dart';
+import 'package:openfoodfacts/utils/TagType.dart';
 import 'package:smooth_app/query/product_query.dart';
 
 /// Abstract helper for Simple Input Page.
@@ -76,6 +77,9 @@ abstract class AbstractSimpleInputPageHelper {
   @protected
   void changeProduct(final Product changedProduct);
 
+  /// Returns the tag type for autocomplete suggestions.
+  TagType? getTagType();
+
   /// Returns null is no change was made, or a Product to be saved on the BE.
   Product? getChangedProduct() {
     if (!_changed) {
@@ -115,6 +119,9 @@ class SimpleInputPageStoreHelper extends AbstractSimpleInputPageHelper {
   @override
   String getAddHint(final AppLocalizations appLocalizations) =>
       appLocalizations.edit_product_form_item_stores_hint;
+
+  @override
+  TagType? getTagType() => null;
 }
 
 /// Implementation for "Emb Code" of an [AbstractSimpleInputPageHelper].
@@ -137,6 +144,9 @@ class SimpleInputPageEmbCodeHelper extends AbstractSimpleInputPageHelper {
   @override
   String getAddExplanations(final AppLocalizations appLocalizations) =>
       appLocalizations.edit_product_form_item_emb_codes_explanations;
+
+  @override
+  TagType? getTagType() => TagType.EMB_CODES;
 }
 
 /// Abstraction, for "in language" field, of an [AbstractSimpleInputPageHelper].
@@ -222,6 +232,9 @@ class SimpleInputPageLabelHelper
   @override
   String getAddHint(final AppLocalizations appLocalizations) =>
       appLocalizations.edit_product_form_item_labels_hint;
+
+  @override
+  TagType? getTagType() => TagType.LABELS;
 }
 
 /// Implementation for "Categories" of an [AbstractSimpleInputPageHelper].
@@ -245,6 +258,9 @@ class SimpleInputPageCategoryHelper
   @override
   String getAddHint(final AppLocalizations appLocalizations) =>
       appLocalizations.edit_product_form_item_categories_hint;
+
+  @override
+  TagType? getTagType() => TagType.CATEGORIES;
 }
 
 /// Implementation for "Countries" of an [AbstractSimpleInputPageHelper].
@@ -272,4 +288,7 @@ class SimpleInputPageCountryHelper
   @override
   String getAddExplanations(final AppLocalizations appLocalizations) =>
       appLocalizations.edit_product_form_item_countries_explanations;
+
+  @override
+  TagType? getTagType() => TagType.COUNTRIES;
 }