feat(app): move filters to main page

hpi-dhc · Sep 7, 2024 · be3404f · be3404f
1 parent 94c7056
commit be3404f
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 339 deletions.
diff --git a/app/generate_screendocs/sequence_utils.dart b/app/generate_screendocs/sequence_utils.dart
@@ -226,10 +226,6 @@ Future<void> tapDrugSearchTooltip(WidgetTester tester) async {
   ).first);
 }
 
-Future<void> openDrugFilters(WidgetTester tester) async {
-  await tester.tap(find.byType(FilterButton).first);
-}
-
 Future<void> closeDrugFilters(WidgetTester tester) async {
   await tester.tap(find.byKey(Key('close-filter-drawer-button')).first);
 }

diff --git a/app/lib/common/widgets/drug_search/builder.dart b/app/lib/common/widgets/drug_search/builder.dart
@@ -4,6 +4,43 @@ import 'package:flutter/cupertino.dart';
 import '../../../../common/module.dart';
 import '../../../drug/widgets/tooltip_icon.dart';
 
+class _FilterChip extends StatelessWidget {
+  const _FilterChip({
+    required this.onPressed,
+    required this.label,
+    required this.color,
+    required this.borderColor,
+  });
+
+  final void Function()? onPressed;
+  final Widget label;
+  final Color color;
+  final Color borderColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onPressed,
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          color: color,
+          border: Border.all(color: borderColor),
+          borderRadius: BorderRadius.all(
+              Radius.circular(PharMeTheme.outerCardRadius)
+            ),
+        ),
+        child: Padding(
+          padding: EdgeInsets.symmetric(
+            horizontal: PharMeTheme.mediumSpace * 0.5,
+            vertical: PharMeTheme.mediumSpace * 0.4,
+          ),
+          child: label,
+        ),
+      ),
+    );
+  }
+}
+
 class DrugSearch extends HookWidget {
   const DrugSearch({
     super.key,
@@ -28,6 +65,99 @@ class DrugSearch extends HookWidget {
   final DrugListState state;
   final ActiveDrugs activeDrugs;
 
+  int _getFilteredNumber({
+    required FilterState itemFilter,
+    required List<Drug> drugs,
+  }) {
+    return itemFilter
+      .filter(drugs, activeDrugs, searchForDrugClass: searchForDrugClass)
+      .length;
+  }
+
+  bool _filterIsEnabled({
+    required FilterState itemFilter,
+    required List<Drug> drugs,
+  }) => _getFilteredNumber(itemFilter: itemFilter, drugs: drugs) > 0;
+
+  Widget _getFilterText(
+    BuildContext context,
+    WarningLevel warningLevel, {
+    required FilterState itemFilter,
+    required List<Drug> drugs,
+    bool enabled = true,
+    bool showText = true,
+  }) {
+    final numberTextColor = darkenColor(PharMeTheme.onSurfaceText, -0.2);
+    final disabledTextColor = darkenColor(numberTextColor, -0.2);
+    return Text.rich(
+      TextSpan(children: [
+        WidgetSpan(
+          child: Icon(
+          enabled ? warningLevel.icon : warningLevel.outlinedIcon,
+          color: PharMeTheme.onSurfaceText,
+          size: PharMeTheme.textTheme.labelMedium!.fontSize,
+        )),
+        if (showText) ...[
+          TextSpan(text: ' '),
+          TextSpan(
+            text: warningLevel.getLabel(context),
+            style: PharMeTheme.textTheme.labelSmall!.copyWith(
+              color: enabled
+                ? PharMeTheme.textTheme.labelSmall!.color
+                : disabledTextColor,
+            ),
+          ),
+        ],
+        TextSpan(
+          text: ' (${
+            _getFilteredNumber(itemFilter: itemFilter, drugs: drugs)
+          })',
+          style: PharMeTheme.textTheme.labelSmall!.copyWith(
+            color: enabled ? numberTextColor : disabledTextColor,
+          ),
+        ),
+      ]),
+    );
+  }
+
+  List<Widget> _buildWarningLevelFilters(
+    BuildContext context,
+    List<Drug> drugs,
+    FilterState filter,
+  ) {
+    FilterState warningLevelFilter(WarningLevel warningLevel) {
+      final currentFilter = FilterState.from(filter);
+      currentFilter.showWarningLevel.forEach(
+          (currentWarningLevel, currentValue) =>
+              currentFilter.showWarningLevel[currentWarningLevel] =
+                  currentWarningLevel == warningLevel);
+      return currentFilter;
+    }
+    Widget buildWarningLevelItem(WarningLevel warningLevel) {
+      final value = filter.showWarningLevel[warningLevel]!;
+      final itemFilter = warningLevelFilter(warningLevel);
+      final enabled = _filterIsEnabled(itemFilter: itemFilter, drugs: drugs);
+      return _FilterChip(
+        onPressed: enabled ? () => cubit.search(
+          showWarningLevel: {warningLevel: !value},
+        ) : null,
+        label: _getFilterText(
+          context,
+          warningLevel,
+          itemFilter: itemFilter,
+          drugs: drugs,
+          enabled: value && enabled,
+          showText: false,
+        ),
+        color: value && enabled ? warningLevel.color : Colors.transparent,
+        borderColor: value && enabled
+          ? warningLevel.color
+          : PharMeTheme.onSurfaceColor,
+      );
+    }
+    return WarningLevel.values.map(buildWarningLevelItem).toList();
+  }
+
   @override
   Widget build(BuildContext context) {
     final searchController = useTextEditingController();
@@ -39,15 +169,30 @@ class DrugSearch extends HookWidget {
             right: PharMeTheme.smallSpace,
             bottom: PharMeTheme.smallSpace,
           ),
-          child: Row(
-            crossAxisAlignment: CrossAxisAlignment.center,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              ..._buildSearchBarItems(context, searchController),
-              if (showFilter) FilterButton(
-                state,
-                activeDrugs,
-                searchForDrugClass: searchForDrugClass,
+              Row(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: _buildSearchBarItems(context, searchController),
               ),
+              if (showFilter) state.whenOrNull(
+                loaded: (allDrugs, filter) => Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    SizedBox(height: PharMeTheme.smallSpace),
+                    Wrap(
+                      spacing: PharMeTheme.smallSpace,
+                      runSpacing: PharMeTheme.smallSpace,
+                      runAlignment: WrapAlignment.center,
+                      alignment: WrapAlignment.start,
+                      children: [
+                        ..._buildWarningLevelFilters(context, allDrugs, filter),
+                      ],
+                    ),
+                  ],
+                )
+              ) ?? SizedBox.shrink(),
             ],
           ),
         ),

diff --git a/app/lib/common/widgets/drug_search/filter_button.dart b/app/lib/common/widgets/drug_search/filter_button.dart