feat: Make attributes clickable (without Provider) (#1666)

* feat: Make attributes clickable * feat: Make ScoreCard clickable * fix: Imports * Applied review * Update summary_card.dart * simplification after query merge * Format
openfoodfacts · Apr 29, 2022 · bcb3b0e · bcb3b0e
1 parent df3b8a1
commit bcb3b0e
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 35 deletions.
diff --git a/packages/smooth_app/analysis_options.yaml b/packages/smooth_app/analysis_options.yaml
@@ -28,6 +28,7 @@ linter:
     always_put_control_body_on_new_line: true
     always_require_non_null_named_parameters: true
     always_specify_types: true
+    always_use_package_imports: true
     annotate_overrides: true
     avoid_bool_literals_in_conditional_expressions: true
     avoid_classes_with_only_static_members: true

diff --git a/packages/smooth_app/lib/cards/product_cards/knowledge_panels/knowledge_panel_card.dart b/packages/smooth_app/lib/cards/product_cards/knowledge_panels/knowledge_panel_card.dart
@@ -2,11 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:openfoodfacts/model/KnowledgePanel.dart';
 import 'package:openfoodfacts/model/KnowledgePanels.dart';
 import 'package:smooth_app/cards/product_cards/knowledge_panels/knowledge_panel_expanded_card.dart';
+import 'package:smooth_app/cards/product_cards/knowledge_panels/knowledge_panel_page.dart';
 import 'package:smooth_app/cards/product_cards/knowledge_panels/knowledge_panel_summary_card.dart';
-import 'package:smooth_app/generic_lib/design_constants.dart';
-import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
 import 'package:smooth_app/helpers/analytics_helper.dart';
-import 'package:smooth_app/themes/smooth_theme.dart';
 
 class KnowledgePanelCard extends StatelessWidget {
   const KnowledgePanelCard({
@@ -19,7 +17,6 @@ class KnowledgePanelCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final ThemeData themeData = Theme.of(context);
     // If [expanded] = true, render all panel elements (including summary), otherwise just renders panel summary.
     if (panel.expanded ?? false) {
       return KnowledgePanelExpandedCard(
@@ -36,24 +33,9 @@ class KnowledgePanelCard extends StatelessWidget {
         Navigator.push<Widget>(
           context,
           MaterialPageRoute<Widget>(
-            builder: (BuildContext context) => Scaffold(
-              backgroundColor: SmoothTheme.getColor(
-                themeData.colorScheme,
-                SmoothTheme.getMaterialColor(context),
-                ColorDestination.SURFACE_BACKGROUND,
-              ),
-              appBar: AppBar(),
-              body: SingleChildScrollView(
-                child: SmoothCard(
-                  padding: const EdgeInsets.all(
-                    SMALL_SPACE,
-                  ),
-                  child: KnowledgePanelExpandedCard(
-                    panel: panel,
-                    allPanels: allPanels,
-                  ),
-                ),
-              ),
+            builder: (BuildContext context) => KnowledgePanelPage(
+              panel: panel,
+              allPanels: allPanels,
             ),
           ),
         );

diff --git a/packages/smooth_app/lib/cards/product_cards/knowledge_panels/knowledge_panel_page.dart b/packages/smooth_app/lib/cards/product_cards/knowledge_panels/knowledge_panel_page.dart
@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:openfoodfacts/model/KnowledgePanel.dart';
+import 'package:openfoodfacts/model/KnowledgePanels.dart';
+import 'package:smooth_app/cards/product_cards/knowledge_panels/knowledge_panel_expanded_card.dart';
+import 'package:smooth_app/generic_lib/design_constants.dart';
+import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
+import 'package:smooth_app/themes/smooth_theme.dart';
+
+class KnowledgePanelPage extends StatelessWidget {
+  const KnowledgePanelPage({
+    required this.panel,
+    required this.allPanels,
+  });
+
+  final KnowledgePanel panel;
+  final KnowledgePanels allPanels;
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData themeData = Theme.of(context);
+    return Scaffold(
+      backgroundColor: SmoothTheme.getColor(
+        themeData.colorScheme,
+        SmoothTheme.getMaterialColor(context),
+        ColorDestination.SURFACE_BACKGROUND,
+      ),
+      appBar: AppBar(
+        title: Text(panel.titleElement!.title),
+      ),
+      body: SingleChildScrollView(
+        child: SmoothCard(
+          padding: const EdgeInsets.all(
+            SMALL_SPACE,
+          ),
+          child: KnowledgePanelExpandedCard(
+            panel: panel,
+            allPanels: allPanels,
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/smooth_app/lib/helpers/smooth_matched_product.dart b/packages/smooth_app/lib/helpers/smooth_matched_product.dart
@@ -4,8 +4,8 @@ import 'package:openfoodfacts/model/Product.dart';
 import 'package:openfoodfacts/personalized_search/preference_importance.dart';
 import 'package:openfoodfacts/personalized_search/product_preferences_manager.dart';
 import 'package:smooth_app/data_models/user_preferences.dart';
+import 'package:smooth_app/helpers/attributes_card_helper.dart';
 import 'package:smooth_app/pages/user_preferences_dev_mode.dart';
-import 'attributes_card_helper.dart';
 
 /// Match and score of a [Product] vs. Preferences
 ///

diff --git a/packages/smooth_app/lib/pages/product/new_product_page.dart b/packages/smooth_app/lib/pages/product/new_product_page.dart
@@ -37,8 +37,6 @@ class ProductPage extends StatefulWidget {
   State<ProductPage> createState() => _ProductPageState();
 }
 
-enum ProductPageMenuItem { WEB, REFRESH }
-
 class _ProductPageState extends State<ProductPage> {
   late Product _product;
   late ProductPreferences _productPreferences;

diff --git a/packages/smooth_app/lib/pages/product/summary_card.dart b/packages/smooth_app/lib/pages/product/summary_card.dart
@@ -2,10 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:openfoodfacts/model/Attribute.dart';
 import 'package:openfoodfacts/model/AttributeGroup.dart';
+import 'package:openfoodfacts/model/KnowledgePanel.dart';
 import 'package:openfoodfacts/openfoodfacts.dart';
 import 'package:openfoodfacts/personalized_search/preference_importance.dart';
 import 'package:provider/provider.dart';
 import 'package:smooth_app/cards/data_cards/score_card.dart';
+import 'package:smooth_app/cards/product_cards/knowledge_panels/knowledge_panel_page.dart';
 import 'package:smooth_app/cards/product_cards/product_title_card.dart';
 import 'package:smooth_app/data_models/product_preferences.dart';
 import 'package:smooth_app/data_models/user_preferences.dart';
@@ -294,11 +296,16 @@ class _SummaryCardState extends State<SummaryCard> {
       children: <Widget>[
         ProductTitleCard(widget._product, widget.isFullVersion),
         for (final Attribute attribute in scoreAttributes)
-          ScoreCard(
-            iconUrl: attribute.iconUrl,
-            description:
-                attribute.descriptionShort ?? attribute.description ?? '',
-            cardEvaluation: getCardEvaluationFromAttribute(attribute),
+          InkWell(
+            onTap: () async => openFullKnowledgePanel(
+              attribute: attribute,
+            ),
+            child: ScoreCard(
+              iconUrl: attribute.iconUrl,
+              description:
+                  attribute.descriptionShort ?? attribute.description ?? '',
+              cardEvaluation: getCardEvaluationFromAttribute(attribute),
+            ),
           ),
         if (widget.isFullVersion) _buildProductQuestionsWidget(),
         attributesContainer,
@@ -403,17 +410,26 @@ class _SummaryCardState extends State<SummaryCard> {
       return null;
     }
     return LayoutBuilder(
-        builder: (BuildContext context, BoxConstraints constraints) {
-      return SizedBox(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        return SizedBox(
           width: constraints.maxWidth / 2,
-          child: Row(
+          child: InkWell(
+            enableFeedback: allowAttributeOpening(attribute),
+            onTap: () async => openFullKnowledgePanel(
+              attribute: attribute,
+            ),
+            child: Row(
               mainAxisAlignment: MainAxisAlignment.start,
               crossAxisAlignment: CrossAxisAlignment.start,
               children: <Widget>[
                 attributeIcon,
                 Expanded(child: Text(attributeDisplayTitle).selectable()),
-              ]));
-    });
+              ],
+            ),
+          ),
+        );
+      },
+    );
   }
 
   /// Returns the mandatory attributes, ordered by attribute group order
@@ -432,6 +448,7 @@ class _SummaryCardState extends State<SummaryCard> {
         PreferenceImportance.ID_MANDATORY,
       );
     }
+
     // now ordering by attribute group order
     for (final String attributeGroupId in _ATTRIBUTE_GROUP_ORDER) {
       final List<Attribute>? attributes =
@@ -567,4 +584,34 @@ class _SummaryCardState extends State<SummaryCard> {
       ),
     );
   }
+
+  bool allowAttributeOpening(Attribute attribute) =>
+      widget.isFullVersion &&
+      widget._product.knowledgePanels != null &&
+      attribute.panelId != null;
+
+  Future<void> openFullKnowledgePanel({
+    required final Attribute attribute,
+  }) async {
+    if (!allowAttributeOpening(attribute)) {
+      return;
+    }
+
+    final KnowledgePanel? knowledgePanel =
+        widget._product.knowledgePanels?.panelIdToPanelMap[attribute.panelId];
+
+    if (knowledgePanel == null) {
+      return;
+    }
+
+    Navigator.push<Widget>(
+      context,
+      MaterialPageRoute<Widget>(
+        builder: (BuildContext context) => KnowledgePanelPage(
+          panel: knowledgePanel,
+          allPanels: widget._product.knowledgePanels!,
+        ),
+      ),
+    );
+  }
 }