From 883a831acc9bfc3c82f863e32f890cb4a86f2f05 Mon Sep 17 00:00:00 2001
From: Tamara Slosarek <tamara.slosarek@hpi.de>
Date: Fri, 23 Feb 2024 20:08:53 +0100
Subject: [PATCH] feat(#691): add active filter indicator to button

---
 .../common/widgets/drug_search/builder.dart   |  6 ++-
 .../widgets/drug_search/filter_button.dart    | 54 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 2 deletions(-)

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,
+      ),
+    );
+  }
 }