feat: Editable brands (#6203)

g123k · web-flow · commit ed9ee6bf0390 · 2025-01-15T19:08:10.000+01:00
* Brands are editable

* Animation

* Reverse duration
diff --git a/packages/smooth_app/lib/l10n/app_en.arb b/packages/smooth_app/lib/l10n/app_en.arb
@@ -1608,6 +1608,14 @@
     "edit_product_form_item_add_valid_item_tooltip": "Add",
     "edit_product_form_item_add_invalid_item_tooltip": "Please enter a text first",
     "edit_product_form_item_remove_item_tooltip": "Remove",
+    "edit_product_form_item_save_edit_item_tooltip": "Save your edit",
+    "@edit_product_form_item_save_edit_item_tooltip": {
+        "description": "The user can edit an existing item. This action will save the change."
+    },
+    "edit_product_form_item_cancel_edit_item_tooltip": "Cancel your edit",
+    "@edit_product_form_item_cancel_edit_item_tooltip": {
+        "description": "The user can edit an existing item. This action will cancel the change (and return to the initial value)."
+    },
     "edit_product_form_item_packaging_title": "Recycling instructions photo",
     "@edit_product_form_item_packaging_title": {
         "description": "Product edition - Packaging - Title"
diff --git a/packages/smooth_app/lib/l10n/app_fr.arb b/packages/smooth_app/lib/l10n/app_fr.arb
@@ -1600,6 +1600,14 @@
     "edit_product_form_item_add_valid_item_tooltip": "Ajouter",
     "edit_product_form_item_add_invalid_item_tooltip": "Veuillez d'abord saisir un texte",
     "edit_product_form_item_remove_item_tooltip": "Retirer",
+    "edit_product_form_item_save_edit_item_tooltip": "Enregistrer votre modification",
+    "@edit_product_form_item_save_edit_item_tooltip": {
+        "description": "The user can edit an existing item. This action will save the change."
+    },
+    "edit_product_form_item_cancel_edit_item_tooltip": "Annuler votre modification",
+    "@edit_product_form_item_cancel_edit_item_tooltip": {
+        "description": "The user can edit an existing item. This action will cancel the change (and return to the initial value)."
+    },
     "edit_product_form_item_packaging_title": "Photo des informations de recyclage",
     "@edit_product_form_item_packaging_title": {
         "description": "Product edition - Packaging - Title"
diff --git a/packages/smooth_app/lib/pages/product/simple_input_page_helpers.dart b/packages/smooth_app/lib/pages/product/simple_input_page_helpers.dart
@@ -38,6 +38,9 @@ abstract class AbstractSimpleInputPageHelper extends ChangeNotifier {
   /// Is the list of terms reorderable?
   bool get reorderable => false;
 
+  /// Are items editable?
+  bool get editable => false;
+
   /// Returns the terms as they were initially in the product.
   ///
   /// WARNING: this list must be copied; if not you may alter the product.
@@ -212,6 +215,12 @@ abstract class AbstractSimpleInputPageHelper extends ChangeNotifier {
     notifyListeners();
   }
 
+  void replaceItem(int position, String term) {
+    _terms[position] = term;
+    _changed = true;
+    notifyListeners();
+  }
+
   /// Returns the enum to be used for matomo analytics.
   AnalyticsEditEvents getAnalyticsEditEvent();
 
@@ -227,6 +236,9 @@ class SimpleInputPageBrandsHelper extends AbstractSimpleInputPageHelper {
   @override
   bool get reorderable => true;
 
+  @override
+  bool get editable => true;
+
   @override
   List<String> initTerms(final Product product) => splitString(product.brands);
 
@@ -250,7 +262,7 @@ class SimpleInputPageBrandsHelper extends AbstractSimpleInputPageHelper {
 
   @override
   String getTypeLabel(AppLocalizations appLocalizations) =>
-      appLocalizations.brand_names;
+      appLocalizations.brand_name;
 
   @override
   TagType? getTagType() => null;
diff --git a/packages/smooth_app/lib/pages/product/simple_input_widget.dart b/packages/smooth_app/lib/pages/product/simple_input_widget.dart
@@ -5,6 +5,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:openfoodfacts/openfoodfacts.dart';
 import 'package:smooth_app/generic_lib/bottom_sheets/smooth_bottom_sheet.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
+import 'package:smooth_app/generic_lib/duration_constants.dart';
 import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
 import 'package:smooth_app/generic_lib/widgets/smooth_snackbar.dart';
 import 'package:smooth_app/helpers/collections_helper.dart';
@@ -13,7 +14,10 @@ import 'package:smooth_app/pages/product/explanation_widget.dart';
 import 'package:smooth_app/pages/product/owner_field_info.dart';
 import 'package:smooth_app/pages/product/simple_input_page_helpers.dart';
 import 'package:smooth_app/pages/product/simple_input_text_field.dart';
+import 'package:smooth_app/pages/text_field_helper.dart';
 import 'package:smooth_app/resources/app_icons.dart' as icons;
+import 'package:smooth_app/themes/smooth_theme.dart';
+import 'package:smooth_app/themes/smooth_theme_colors.dart';
 import 'package:smooth_app/themes/theme_provider.dart';
 
 /// Simple input widget: we have a list of terms, we add, we remove.
@@ -271,34 +275,15 @@ class _SimpleInputWidgetState extends State<SimpleInputWidget> {
     BuildContext context,
     int position,
   ) {
-    final AppLocalizations appLocalizations = AppLocalizations.of(context);
-
-    final String term = _localTerms[position];
-    final Text child = Text(term);
-
-    return ListTile(
-      leading: widget.helper.reorderable
-          ? ReorderableDelayedDragStartListener(
-              index: position,
-              child: const icons.Menu.hamburger(),
-            )
-          : null,
-      trailing: Tooltip(
-        message: appLocalizations.edit_product_form_item_remove_item_tooltip,
-        child: InkWell(
-          customBorder: const CircleBorder(),
-          onTap: () => _onRemoveItem(term, child),
-          child: const Padding(
-            padding: EdgeInsets.all(SMALL_SPACE),
-            child: Icon(Icons.delete),
-          ),
-        ),
-      ),
-      contentPadding: const EdgeInsetsDirectional.only(
-        start: LARGE_SPACE,
-      ),
-      minTileHeight: 48.0,
-      title: child,
+    return _SimpleInputListItem(
+      term: _localTerms[position],
+      reorderable: widget.helper.reorderable,
+      editable: widget.helper.editable,
+      position: position,
+      onChanged: (int position, String term) {
+        widget.helper.replaceItem(position, term);
+      },
+      onRemoveItem: _onRemoveItem,
     );
   }
 
@@ -412,3 +397,258 @@ class ExplanationTitleIcon extends StatelessWidget {
     );
   }
 }
+
+class _SimpleInputListItem extends StatefulWidget {
+  const _SimpleInputListItem({
+    required this.term,
+    required this.reorderable,
+    required this.editable,
+    required this.position,
+    required this.onChanged,
+    required this.onRemoveItem,
+  });
+
+  final String term;
+  final bool reorderable;
+  final bool editable;
+  final int position;
+  final Function(int position, String term) onChanged;
+  final Function(String term, Widget child) onRemoveItem;
+
+  @override
+  State<_SimpleInputListItem> createState() => _SimpleInputListItemState();
+}
+
+class _SimpleInputListItemState extends State<_SimpleInputListItem> {
+  late final TextEditingControllerWithHistory _controller;
+  late final FocusNode _focusNode;
+
+  bool _isEditing = false;
+
+  @override
+  void initState() {
+    super.initState();
+
+    if (widget.editable) {
+      _controller = TextEditingControllerWithHistory(text: widget.term);
+      _focusNode = FocusNode()..addListener(_onFocus);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final AppLocalizations appLocalizations = AppLocalizations.of(context);
+    final SmoothColorsThemeExtension extension =
+        context.extension<SmoothColorsThemeExtension>();
+
+    Widget child;
+    if (widget.editable) {
+      child = _getEditableItem();
+    } else {
+      child = _getItem();
+    }
+
+    child = ListTile(
+      leading: widget.reorderable
+          ? ReorderableDelayedDragStartListener(
+              index: widget.position,
+              child: const icons.Menu.hamburger(),
+            )
+          : null,
+      trailing: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          if (widget.editable) ...<Widget>[
+            _SimpleInputListItemAction(
+              tooltip: appLocalizations
+                  .edit_product_form_item_save_edit_item_tooltip,
+              icon: Icon(
+                Icons.check_circle_rounded,
+                color: extension.success,
+              ),
+              visible: _isEditing,
+              onTap: _saveEdit,
+            ),
+            _SimpleInputListItemAction(
+              tooltip: appLocalizations
+                  .edit_product_form_item_cancel_edit_item_tooltip,
+              icon: Icon(
+                Icons.cancel,
+                color: extension.error,
+              ),
+              visible: _isEditing,
+              onTap: _cancelEdit,
+            )
+          ],
+          _SimpleInputListItemAction(
+            tooltip:
+                appLocalizations.edit_product_form_item_remove_item_tooltip,
+            icon: const Icon(Icons.delete),
+            onTap: () => widget.onRemoveItem(widget.term, child),
+            visible: !_isEditing,
+          ),
+        ],
+      ),
+      contentPadding: const EdgeInsetsDirectional.only(
+        start: LARGE_SPACE,
+      ),
+      minTileHeight: 48.0,
+      title: child,
+    );
+
+    if (widget.editable) {
+      return ClipRRect(child: child);
+    } else {
+      return child;
+    }
+  }
+
+  Widget _getItem() {
+    return Text(widget.term);
+  }
+
+  Widget _getEditableItem() {
+    return TextField(
+      controller: _controller,
+      focusNode: _focusNode,
+      style: TextTheme.of(context).bodyLarge,
+      decoration: const InputDecoration(
+        isDense: true,
+        border: InputBorder.none,
+        contentPadding: EdgeInsets.zero,
+      ),
+      maxLines: 1,
+      onEditingComplete: _saveEdit,
+    );
+  }
+
+  void _saveEdit() {
+    if (_controller.text.trim().isEmpty) {
+      widget.onRemoveItem(widget.term, _getItem());
+    } else {
+      widget.onChanged(widget.position, _controller.text);
+    }
+
+    setState(() => _isEditing = false);
+    _focusNode.unfocus();
+  }
+
+  void _cancelEdit() {
+    _controller.resetToInitialValue();
+    _focusNode.unfocus();
+    setState(() => _isEditing = false);
+  }
+
+  void _onFocus() {
+    if (_focusNode.hasFocus && !_isEditing) {
+      setState(() => _isEditing = true);
+    } else if (!_focusNode.hasFocus && _isEditing) {
+      _cancelEdit();
+    }
+  }
+
+  @override
+  void dispose() {
+    if (widget.editable) {
+      _controller.dispose();
+    }
+    super.dispose();
+  }
+}
+
+class _SimpleInputListItemAction extends StatefulWidget {
+  const _SimpleInputListItemAction({
+    required this.onTap,
+    required this.icon,
+    required this.tooltip,
+    this.visible = true,
+  });
+
+  final VoidCallback onTap;
+  final Widget icon;
+  final String tooltip;
+  final bool visible;
+
+  @override
+  State<_SimpleInputListItemAction> createState() =>
+      _SimpleInputListItemActionState();
+}
+
+class _SimpleInputListItemActionState extends State<_SimpleInputListItemAction>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _opacityAnimation;
+  late Animation<double> _sizeAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+      vsync: this,
+      duration: SmoothAnimationsDuration.medium,
+      reverseDuration: SmoothAnimationsDuration.short,
+    )..addListener(() => setState(() {}));
+
+    if (widget.visible) {
+      _controller.forward(from: 1.0);
+    }
+
+    _opacityAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
+      CurvedAnimation(
+        parent: _controller,
+        curve: Curves.easeInOut,
+      ),
+    );
+
+    _sizeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
+      CurvedAnimation(
+        parent: _controller,
+        curve: const Interval(0.2, 0.8, curve: Curves.easeInOut),
+      ),
+    );
+  }
+
+  @override
+  void didUpdateWidget(_SimpleInputListItemAction oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    if (widget.visible != oldWidget.visible) {
+      if (widget.visible) {
+        _controller.forward(from: 0.0);
+      } else {
+        _controller.reverse(from: 1.0);
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Offstage(
+      offstage: _controller.value == 0.0,
+      child: Opacity(
+        opacity: _opacityAnimation.value,
+        child: SizedBox(
+          width: _sizeAnimation.value * (SMALL_SPACE * 2 + 24.0),
+          child: Tooltip(
+            message: widget.tooltip,
+            child: InkWell(
+              customBorder: const CircleBorder(),
+              onTap: widget.onTap,
+              child: Padding(
+                padding: const EdgeInsets.all(SMALL_SPACE),
+                child: widget.icon,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+}
diff --git a/packages/smooth_app/lib/pages/text_field_helper.dart b/packages/smooth_app/lib/pages/text_field_helper.dart
