feat(app): add helper text if other medications not expanded

hpi-dhc · Nov 28, 2024 · 59b4b47 · 59b4b47
1 parent 9ee018a
commit 59b4b47
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 16 deletions.
diff --git a/app/lib/common/theme.dart b/app/lib/common/theme.dart
@@ -84,6 +84,7 @@ class PharMeTheme {
   static const errorColor = Color(0xccf52a2a);
   static final borderColor = Colors.black.withOpacity(.2);
   static final iconColor = darkenColor(PharMeTheme.onSurfaceText, -0.1);
+  static final subheaderColor = Colors.grey[600];
 
   static const smallSpace = 8.0;
   static const defaultPagePadding = smallSpace;

diff --git a/app/lib/common/widgets/drug_list/builder.dart b/app/lib/common/widgets/drug_list/builder.dart
@@ -9,7 +9,7 @@ typedef DrugItemBuilder = List<Widget> Function(
   }
 );
 
-class DrugList extends StatelessWidget {
+class DrugList extends HookWidget {
   const DrugList({
     super.key,
     required this.state,
@@ -38,6 +38,7 @@ class DrugList extends StatelessWidget {
     BuildContext context,
     List<Drug> drugs,
     FilterState filter,
+    ValueNotifier<bool?> otherDrugsExpanded,
   ) {
     final filteredDrugs = filter.filter(
       drugs,
@@ -66,7 +67,7 @@ class DrugList extends StatelessWidget {
     final otherDrugs = drugActivityChangeable
       ? filteredDrugs
       : filteredDrugs.filter((drug) => !drug.isActive).toList();
-    final otherDrugsHeader = drugActivityChangeable
+    final otherDrugsHeaderText = drugActivityChangeable
       ? context.l10n.drug_list_subheader_all_drugs
       : context.l10n.drug_list_subheader_other_drugs;
     final allDrugsList = buildDrugItems(
@@ -75,12 +76,19 @@ class DrugList extends StatelessWidget {
       showDrugInteractionIndicator: showDrugInteractionIndicator,
       keyPrefix: 'other-',
     );
+    final otherDrugsHeader = SubheaderDivider(
+      text: '$otherDrugsHeaderText (${allDrugsList.length})',
+      key: Key('header-other'),
+      useLine: false,
+    );
+    final currentlyExpanded = otherDrugsExpanded.value ?? false;
     final drugLists = [
       if (activeDrugsList != null) ...[
         ListTile(
           key: Key('header-active'),
           title: SubheaderDivider(
-            text: context.l10n.drug_list_subheader_active_drugs,
+            text: '${context.l10n.drug_list_subheader_active_drugs} '
+              '(${activeDrugsList.length})',
             useLine: false,
           ),
           trailing: drugActivityChangeable
@@ -99,18 +107,31 @@ class DrugList extends StatelessWidget {
         ...activeDrugsList,
       ],
       if (activeDrugsList != null && allDrugsList.isNotEmpty)
-        PrettyExpansionTile(
-          title: SubheaderDivider(
-            text: otherDrugsHeader,
-            key: Key('header-other'),
-            useLine: false,
+        ...[
+          PrettyExpansionTile(
+            title: otherDrugsHeader,
+            enabled: filter.query.isBlank,
+            initiallyExpanded: currentlyExpanded || !filter.query.isBlank,
+            onExpansionChanged: (value) => otherDrugsExpanded.value = value,
+            visualDensity: VisualDensity.compact,
+            titlePadding: EdgeInsets.zero,
+            childrenPadding: EdgeInsets.zero,
+            children: allDrugsList,
           ),
-          initiallyExpanded: drugActivityChangeable || filter.query.isNotBlank,
-          visualDensity: VisualDensity.compact,
-          titlePadding: EdgeInsets.zero,
-          childrenPadding: EdgeInsets.zero,
-          children: allDrugsList,
-        ),
+          if (!currentlyExpanded) Padding(
+            key: Key('other-hidden-instruction'),
+            padding: EdgeInsets.symmetric(horizontal: PharMeTheme.smallSpace),
+            child: Text(
+              context.l10n.search_page_expand_help(
+                otherDrugsHeaderText.toLowerCase(),
+              ),
+              style: PharMeTheme.textTheme.bodySmall!.copyWith(
+                fontStyle: FontStyle.italic,
+                color: PharMeTheme.subheaderColor,
+              ),
+            ),
+          ),
+        ],
       if (activeDrugsList == null) ...allDrugsList,
     ];
     return (buildContainer != null)
@@ -120,10 +141,14 @@ class DrugList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final otherDrugsExpanded = useState<bool?>(null);
     return state.when(
       initial: SizedBox.shrink,
       error: () => errorIndicator(context.l10n.err_generic),
-      loaded: (allDrugs, filter) => _buildDrugList(context, allDrugs, filter),
+      loaded: (allDrugs, filter) {
+        otherDrugsExpanded.value ??= drugActivityChangeable;
+        return _buildDrugList(context, allDrugs, filter, otherDrugsExpanded);
+      },
       loading: loadingIndicator,
    );
   }

diff --git a/app/lib/common/widgets/pretty_expansion_tile.dart b/app/lib/common/widgets/pretty_expansion_tile.dart
@@ -10,6 +10,7 @@ class PrettyExpansionTile extends StatelessWidget {
     this.titlePadding,
     this.childrenPadding,
     this.initiallyExpanded = false,
+    this.enabled = true,
   });
 
   final Widget title;
@@ -20,6 +21,7 @@ class PrettyExpansionTile extends StatelessWidget {
   final EdgeInsets? titlePadding;
   final EdgeInsets? childrenPadding;
   final bool initiallyExpanded;
+  final bool enabled;
 
   @override
   Widget build(BuildContext context) {
@@ -29,6 +31,7 @@ class PrettyExpansionTile extends StatelessWidget {
       ),
       child: ExpansionTile(
         key: GlobalKey(), // force to rebuild
+        enabled: enabled,
         initiallyExpanded: initiallyExpanded,
         title: title,
         iconColor: PharMeTheme.iconColor,

diff --git a/app/lib/common/widgets/subheader_divider.dart b/app/lib/common/widgets/subheader_divider.dart
@@ -16,7 +16,7 @@ class SubheaderDivider extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final widgetColor = color ?? Colors.grey[600];
+    final widgetColor = color ?? PharMeTheme.subheaderColor;
     return Padding(
       padding: EdgeInsets.all(padding ?? PharMeTheme.smallSpace),
       child: Column(

diff --git a/app/lib/l10n/app_en.arb b/app/lib/l10n/app_en.arb
@@ -105,6 +105,15 @@
   "@search_page_tooltip_search_no_class": {},
   "search_page_filter_label": "Filter by guideline result",
   "@search_page_filter_label": {},
+  "search_page_expand_help": "Expand list to view {listName}.",
+  "@search_page_expand_help": {
+    "placeholders": {
+      "listName": {
+        "type": "String",
+        "example": "other medications"
+      }
+    }
+  },
   "search_page_indicator_explanation": "Taking medications with an {indicatorName} ({indicator}) can interact with your results for other medications",
   "@search_page_indicator_explanation": {
     "placeholders": {