diff --git a/app/lib/common/widgets/drug_search/builder.dart b/app/lib/common/widgets/drug_search/builder.dart index c2bf2f3f..8a13d328 100644 --- a/app/lib/common/widgets/drug_search/builder.dart +++ b/app/lib/common/widgets/drug_search/builder.dart @@ -50,7 +50,11 @@ class DrugSearch extends HookWidget { crossAxisAlignment: CrossAxisAlignment.center, children: [ ..._buildSearchBarItems(context, searchController), - if (showFilter) FilterButton(), + if (showFilter) FilterButton( + state, + activeDrugs, + useDrugClass: useDrugClass, + ), ], ), ), diff --git a/app/lib/common/widgets/drug_search/filter_button.dart b/app/lib/common/widgets/drug_search/filter_button.dart index 7cc80c87..885cf13e 100644 --- a/app/lib/common/widgets/drug_search/filter_button.dart +++ b/app/lib/common/widgets/drug_search/filter_button.dart @@ -1,12 +1,64 @@ import '../../module.dart'; class FilterButton extends StatelessWidget { + const FilterButton( + this.state, + this.activeDrugs, + { + required this.useDrugClass, + } + ); + + final DrugListState state; + final ActiveDrugs activeDrugs; + final bool useDrugClass; + @override Widget build(BuildContext context) { return IconButton( - icon: Icon(Icons.filter_list), + icon: Stack( + children: [ + Icon(Icons.filter_list), + if (_showActiveIndicator()) _buildActiveIndicator(context), + ], + ), color: PharMeTheme.iconColor, onPressed: Scaffold.of(context).openDrawer, ); } + + bool _showActiveIndicator() { + final itemsAreFiltered = state.whenOrNull( + loaded: (allDrugs, filter) { + final totalNumberOfDrugs = allDrugs.length; + final currentNumberOfDrugs = filter.filter( + allDrugs, + activeDrugs, + useDrugClass: useDrugClass, + ).length; + return totalNumberOfDrugs != currentNumberOfDrugs; + }, + ); + return itemsAreFiltered ?? false; + } + + Widget _buildActiveIndicator(BuildContext context) { + const indicatorSize = PharMeTheme.smallToMediumSpace; + return Positioned( + right: 0, + bottom: 0, + child: Container( + decoration: BoxDecoration( + shape: BoxShape.circle, + color: PharMeTheme.sinaiPurple, + border: Border.all( + color: PharMeTheme.surfaceColor, + width: indicatorSize / 8, + ), + ), + width: indicatorSize, + height: indicatorSize, + ), + ); + } }