feat: Folksonomy Editor (updated UI, modal sheet…) (#6194)

* Taxonomy UI

* Italic hint style

* Remove dead code

Author: g123k

packages/smooth_app/lib/generic_lib/bottom_sheets/smooth_bottom_sheet.dart

@@ -15,6 +15,7 @@ Future<T?> showSmoothModalSheet<T>({
   required WidgetBuilder builder,
   double? minHeight,
   double? maxHeight,
+  bool? isScrollControlled,
   bool? useRootNavigator,
 }) {
   BoxConstraints? constraints;
@@ -37,7 +38,7 @@ Future<T?> showSmoothModalSheet<T>({
 
   return showModalBottomSheet<T>(
     constraints: constraints,
-    isScrollControlled: minHeight != null,
+    isScrollControlled: isScrollControlled ?? minHeight != null,
     context: context,
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.vertical(top: ROUNDED_RADIUS),
@@ -48,6 +49,30 @@ Future<T?> showSmoothModalSheet<T>({
   );
 }
 
+Future<T?> showSmoothModalSheetForTextField<T>({
+  required BuildContext context,
+  required SmoothModalSheetHeader header,
+  required WidgetBuilder bodyBuilder,
+}) {
+  return showSmoothModalSheet<T>(
+    context: context,
+    builder: (BuildContext context) => SizedBox(
+      width: double.infinity,
+      child: ClipRRect(
+        borderRadius: const BorderRadius.vertical(top: ROUNDED_RADIUS),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            header,
+            bodyBuilder(context),
+          ],
+        ),
+      ),
+    ),
+    isScrollControlled: true,
+  );
+}
+
 Future<T?> showSmoothDraggableModalSheet<T>({
   required BuildContext context,
   required SmoothModalSheetHeader header,

packages/smooth_app/lib/l10n/app_en.arb

@@ -884,18 +884,31 @@
     "@product_tags_title": {
         "description": "The title for showing product properties, aka folksonomy data"
     },
-    "no_product_tags_found_message": "No product properties found. Properties can be used to describe products in more details, in a flexible way. Tap to add.",
+    "no_product_tags_found_message": "No product properties found. Properties can be used to describe products in more details, in a flexible way.",
     "@no_product_tags_found_message": {
         "description": "Message to show if there are no product properties found"
     },
-    "add_tag": "Add property",
+    "add_tag": "Add a property",
+    "add_tags": "Add properties",
+    "add_edit_tags": "Add or edit properties",
     "edit_tag": "Edit property",
     "remove_tag": "Remove property",
     "tag_key": "Property",
+    "tag_key_uneditable": "Property (uneditable)",
+    "tag_key_input_hint": "Input a property",
     "tag_value": "Value",
-    "invalid_key_format": "Invalid property format. It must be lowercase and without any spaces.",
-    "@invalid_key_format": {
-        "description": "Message to show if the property's value for a new product property is invalid. This logic is identical to whats being validated in the Folksonomy API"
+    "tag_value_input_hint": "Input a value",
+    "tag_key_item": "Property:",
+    "tag_value_item": "Value:",
+    "tag_key_explanations": "A key must be lowercase and without any spaces.",
+    "tag_key_already_exists": "A tag with a property {property} already exists!",
+    "@tag_key_already_exists": {
+        "placeholders": {
+            "property": {
+                "type": "String",
+                "description": "The property name"
+            }
+        }
     },
     "product_internet_error": "Impossible to fetch information about this product due to a network error.",
     "cached_results_from": "Show results from:",

packages/smooth_app/lib/l10n/app_fr.arb

@@ -884,7 +884,7 @@
     "@product_tags_title": {
         "description": "The title for showing product properties, aka folksonomy data"
     },
-    "no_product_tags_found_message": "Aucune propriété de produit trouvée. Les propriétés peuvent être utilisées pour décrire les produits de manière plus détaillée et flexible. Appuyez pour ajouter.",
+    "no_product_tags_found_message": "Aucune propriété de produit trouvée. Les propriétés peuvent être utilisées pour décrire les produits de manière plus détaillée et flexible.",
     "@no_product_tags_found_message": {
         "description": "Message to show if there are no product properties found"
     },

packages/smooth_app/lib/pages/folksonomy/folksonomy_card.dart

@@ -8,119 +8,199 @@ import 'package:smooth_app/pages/folksonomy/folksonomy_page.dart';
 import 'package:smooth_app/pages/folksonomy/folksonomy_provider.dart';
 import 'package:smooth_app/pages/folksonomy/tag.dart';
 import 'package:smooth_app/pages/product/common/product_refresher.dart';
-import 'package:smooth_app/themes/constant_icons.dart';
+import 'package:smooth_app/resources/app_icons.dart' as icons;
 
 class FolksonomyCard extends StatelessWidget {
   const FolksonomyCard(this.product);
+
   final Product product;
 
   @override
   Widget build(BuildContext context) {
     return ChangeNotifierProvider<FolksonomyProvider>(
       create: (_) => FolksonomyProvider(product.barcode!),
-      child: _FolksonomyCard(product),
+      child: Provider<Product>.value(
+        value: product,
+        child: const _FolksonomyCard(),
+      ),
     );
   }
 }
 
 class _FolksonomyCard extends StatelessWidget {
-  const _FolksonomyCard(this.product);
-  final Product product;
+  const _FolksonomyCard();
 
   @override
   Widget build(BuildContext context) {
     final AppLocalizations appLocalizations = AppLocalizations.of(context);
 
-    return InkWell(
-      onTap: () async {
-        if (!await ProductRefresher().checkIfLoggedIn(
-          context,
-          isLoggedInMandatory: true,
-        )) {
-          return;
-        }
-        if (!context.mounted) {
-          return;
-        }
+    return Padding(
+      padding: const EdgeInsetsDirectional.only(
+        top: LARGE_SPACE,
+        start: SMALL_SPACE,
+        end: SMALL_SPACE,
+      ),
+      child: buildProductSmoothCard(
+        margin: EdgeInsets.zero,
+        padding: EdgeInsets.zero,
+        titlePadding: const EdgeInsetsDirectional.symmetric(
+          horizontal: SMALL_SPACE,
+        ),
+        title: Row(
+          children: <Widget>[
+            Expanded(child: Text(appLocalizations.product_tags_title)),
+            IconButton(
+              onPressed: () => _openFolksonomyPage(
+                context,
+                context.read<Product>(),
+              ),
+              icon: Consumer<FolksonomyProvider>(
+                builder: (
+                  BuildContext context,
+                  FolksonomyProvider provider,
+                  _,
+                ) {
+                  Widget getIcon(List<ProductTag> tags) {
+                    if (tags.isNotEmpty == true) {
+                      return Tooltip(
+                        message: appLocalizations.add_edit_tags,
+                        child: const icons.Edit(size: 15.0),
+                      );
+                    } else {
+                      return Tooltip(
+                        message: appLocalizations.add_tags,
+                        child: const icons.Add(),
+                      );
+                    }
+                  }
 
-        await Navigator.of(context).push(
-          MaterialPageRoute<void>(
-            builder: (BuildContext context) => FolksonomyPage(product),
-          ),
-        );
-        if (context.mounted) {
-          await Provider.of<FolksonomyProvider>(context, listen: false)
-              .fetchProductTags();
-        }
-      },
-      child: Padding(
-        padding: const EdgeInsets.only(top: LARGE_SPACE),
-        child: buildProductSmoothCard(
-          title: Center(child: Text(appLocalizations.product_tags_title)),
-          body: Container(
-            width: double.infinity,
-            padding: const EdgeInsetsDirectional.all(LARGE_SPACE),
-            child: _FolksonomyCardList(),
+                  return switch (provider.value) {
+                    FolksonomyStateError(action: final FolksonomyAction? action)
+                        when action == null =>
+                      EMPTY_WIDGET,
+                    FolksonomyStateError(
+                      tags: final List<ProductTag> tags,
+                    ) =>
+                      getIcon(tags),
+                    FolksonomyStateLoaded(
+                      tags: final List<ProductTag> tags,
+                    ) =>
+                      getIcon(tags),
+                    FolksonomyStateAddedItem(
+                      tags: final List<ProductTag> tags
+                    ) =>
+                      getIcon(tags),
+                    FolksonomyStateRemovedItem(
+                      tags: final List<ProductTag> tags
+                    ) =>
+                      getIcon(tags),
+                    _ => EMPTY_WIDGET,
+                  };
+                },
+              ),
+            ),
+          ],
+        ),
+        body: Container(
+          width: double.infinity,
+          padding: const EdgeInsetsDirectional.all(LARGE_SPACE),
+          child: _FolksonomyCardBody(
+            onEmptyPageTag: () => _openFolksonomyPage(
+              context,
+              context.read<Product>(),
+            ),
           ),
         ),
       ),
     );
   }
+
+  Future<void> _openFolksonomyPage(
+    BuildContext context,
+    Product product,
+  ) async {
+    if (!await ProductRefresher().checkIfLoggedIn(
+      context,
+      isLoggedInMandatory: true,
+    )) {
+      return;
+    }
+    if (!context.mounted) {
+      return;
+    }
+
+    await Navigator.of(context).push(
+      MaterialPageRoute<void>(
+        builder: (BuildContext lContext) => FolksonomyPage(
+          product: product,
+          provider: context.read<FolksonomyProvider>(),
+        ),
+      ),
+    );
+    if (context.mounted) {
+      await context.read<FolksonomyProvider>().fetchProductTags();
+    }
+  }
 }
 
-class _FolksonomyCardList extends StatelessWidget {
+class _FolksonomyCardBody extends StatelessWidget {
+  const _FolksonomyCardBody({
+    required this.onEmptyPageTag,
+  });
+
+  final VoidCallback onEmptyPageTag;
+
   @override
   Widget build(BuildContext context) {
     final AppLocalizations appLocalizations = AppLocalizations.of(context);
-    final FolksonomyProvider provider = context.watch<FolksonomyProvider>();
 
-    if (provider.isLoading) {
-      return const Center(child: CircularProgressIndicator.adaptive());
-    } else if (!provider.tagsExist) {
-      return Center(
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            Expanded(
+    return Consumer<FolksonomyProvider>(
+      builder: (
+        BuildContext context,
+        FolksonomyProvider provider,
+        _,
+      ) {
+        if (provider.value is FolksonomyStateLoading) {
+          return const Center(
+            child: CircularProgressIndicator.adaptive(),
+          );
+        } else if (provider.value.tags?.isNotEmpty != true) {
+          return InkWell(
+            onTap: onEmptyPageTag,
+            child: Center(
               child: Text(
                 appLocalizations.no_product_tags_found_message,
                 textAlign: TextAlign.center,
               ),
             ),
-            Icon(ConstantIcons.forwardIcon),
-          ],
-        ),
-      );
-    } else {
-      final Map<String, ProductTag> tags = provider.productTags!;
-      final Iterable<MapEntry<String, ProductTag>> displayTags =
-          tags.entries.toList(growable: false).take(5);
+          );
+        } else {
+          final Iterable<ProductTag> displayTags = provider.value.tags!.take(5);
 
-      return Padding(
-        padding: const EdgeInsetsDirectional.only(
-          top: VERY_SMALL_SPACE,
-          bottom: VERY_SMALL_SPACE,
-        ),
-        child: Row(
-          children: <Widget>[
-            Expanded(
-              child: Padding(
-                padding: const EdgeInsets.all(SMALL_SPACE),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children:
-                      displayTags.map((MapEntry<String, ProductTag> entry) {
-                    return Tag(
-                        text:
-                            '${entry.key}${appLocalizations.sep}: ${entry.value.value}');
-                  }).toList(growable: false),
+          return Padding(
+            padding: const EdgeInsetsDirectional.only(
+              top: VERY_SMALL_SPACE,
+              bottom: VERY_SMALL_SPACE,
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: <Widget>[
+                Padding(
+                  padding: const EdgeInsets.all(SMALL_SPACE),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: displayTags.map((ProductTag tag) {
+                      return Tag(
+                          text:
+                              '${tag.key}${appLocalizations.sep}: ${tag.value}');
+                    }).toList(growable: false),
+                  ),
                 ),
-              ),
+              ],
             ),
-            Icon(ConstantIcons.forwardIcon),
-          ],
-        ),
-      );
-    }
+          );
+        }
+      },
+    );
   }
 }