Merge pull request #347 from sudhar08/feat-Add-a-search/filter-for-collection-pane-#305-

feat: Add a search/filter for collection pane

Author: animator

lib/providers/ui_providers.dart

@@ -23,3 +23,5 @@ final nameTextFieldFocusNodeProvider =
   });
   return focusNode;
 });
+
+final searchQueryProvider = StateProvider<String>((ref) => '');

lib/screens/home_page/collection_pane.dart

@@ -69,7 +69,39 @@ class CollectionPane extends ConsumerWidget {
               ],
             ),
           ),
-          kVSpacer8,
+          kVSpacer10,
+          Container(
+            height: 30,
+            margin: const EdgeInsets.only(right: 8),
+            decoration: BoxDecoration(
+              borderRadius: kBorderRadius8,
+              border: Border.all(
+                color: Theme.of(context).colorScheme.surfaceVariant,
+              ),
+            ),
+            child: Row(
+              children: [
+                kHSpacer5,
+                Icon(
+                  Icons.filter_alt,
+                  size: 18,
+                  color: Theme.of(context).colorScheme.secondary,
+                ),
+                kHSpacer5,
+                Expanded(
+                  child: RawTextField(
+                    style: Theme.of(context).textTheme.bodyMedium,
+                    hintText: "Filter by name or URL",
+                    onChanged: (value) {
+                      ref.read(searchQueryProvider.notifier).state =
+                          value.toLowerCase();
+                    },
+                  ),
+                ),
+              ],
+            ),
+          ),
+          kVSpacer10,
           const Expanded(
             child: RequestList(),
           ),
@@ -109,41 +141,61 @@ class _RequestListState extends ConsumerState<RequestList> {
     final requestItems = ref.watch(collectionStateNotifierProvider)!;
     final alwaysShowCollectionPaneScrollbar = ref.watch(settingsProvider
         .select((value) => value.alwaysShowCollectionPaneScrollbar));
+    final filterQuery = ref.watch(searchQueryProvider).trim();
 
     return Scrollbar(
       controller: controller,
       thumbVisibility: alwaysShowCollectionPaneScrollbar ? true : null,
       radius: const Radius.circular(12),
-      child: ReorderableListView.builder(
-        padding: kPe8,
-        scrollController: controller,
-        buildDefaultDragHandles: false,
-        itemCount: requestSequence.length,
-        onReorder: (int oldIndex, int newIndex) {
-          if (oldIndex < newIndex) {
-            newIndex -= 1;
-          }
-          if (oldIndex != newIndex) {
-            ref
-                .read(collectionStateNotifierProvider.notifier)
-                .reorder(oldIndex, newIndex);
-          }
-        },
-        itemBuilder: (context, index) {
-          var id = requestSequence[index];
-          return ReorderableDragStartListener(
-            key: ValueKey(id),
-            index: index,
-            child: Padding(
-              padding: kP1,
-              child: RequestItem(
-                id: id,
-                requestModel: requestItems[id]!,
-              ),
+      child: filterQuery.isEmpty
+          ? ReorderableListView.builder(
+              padding: kPe8,
+              scrollController: controller,
+              buildDefaultDragHandles: false,
+              itemCount: requestSequence.length,
+              onReorder: (int oldIndex, int newIndex) {
+                if (oldIndex < newIndex) {
+                  newIndex -= 1;
+                }
+                if (oldIndex != newIndex) {
+                  ref
+                      .read(collectionStateNotifierProvider.notifier)
+                      .reorder(oldIndex, newIndex);
+                }
+              },
+              itemBuilder: (context, index) {
+                var id = requestSequence[index];
+                return ReorderableDragStartListener(
+                  key: ValueKey(id),
+                  index: index,
+                  child: Padding(
+                    padding: kP1,
+                    child: RequestItem(
+                      id: id,
+                      requestModel: requestItems[id]!,
+                    ),
+                  ),
+                );
+              },
+            )
+          : ListView(
+              padding: kPe8,
+              controller: controller,
+              children: requestSequence.map((id) {
+                var item = requestItems[id]!;
+                if (item.url.toLowerCase().contains(filterQuery) ||
+                    item.name.toLowerCase().contains(filterQuery)) {
+                  return Padding(
+                    padding: kP1,
+                    child: RequestItem(
+                      id: id,
+                      requestModel: item,
+                    ),
+                  );
+                }
+                return const SizedBox();
+              }).toList(),
             ),
-          );
-        },
-      ),
     );
   }
 }

lib/widgets/textfields.dart

@@ -94,14 +94,39 @@ class JsonSearchField extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return TextField(
+    return RawTextField(
       controller: controller,
       onChanged: onChanged,
       style: kCodeStyle,
-      decoration: const InputDecoration(
+      hintText: 'Search..',
+    );
+  }
+}
+
+class RawTextField extends StatelessWidget {
+  const RawTextField({
+    super.key,
+    this.onChanged,
+    this.controller,
+    this.hintText,
+    this.style,
+  });
+
+  final void Function(String)? onChanged;
+  final TextEditingController? controller;
+  final String? hintText;
+  final TextStyle? style;
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      controller: controller,
+      onChanged: onChanged,
+      style: style,
+      decoration: InputDecoration(
         isDense: true,
         border: InputBorder.none,
-        hintText: 'Search..',
+        hintText: hintText,
       ),
     );
   }

test/providers/ui_providers_test.dart

@@ -214,13 +214,13 @@ void main() {
   });
 
   group("Testing selectedIdEditStateProvider", () {
-    testWidgets(
-        'selectedIdEditStateProvider should have an initial value of null',
-        (tester) async {
+    testWidgets('It should have an initial value of null', (tester) async {
       await tester.pumpWidget(
         const ProviderScope(
           child: MaterialApp(
-            home: CollectionPane(),
+            home: Scaffold(
+              body: CollectionPane(),
+            ),
           ),
         ),
       );
@@ -237,7 +237,9 @@ void main() {
       await tester.pumpWidget(
         const ProviderScope(
           child: MaterialApp(
-            home: CollectionPane(),
+            home: Scaffold(
+              body: CollectionPane(),
+            ),
           ),
         ),
       );
@@ -267,7 +269,9 @@ void main() {
       await tester.pumpWidget(
         const ProviderScope(
           child: MaterialApp(
-            home: CollectionPane(),
+            home: Scaffold(
+              body: CollectionPane(),
+            ),
           ),
         ),
       );
@@ -303,7 +307,9 @@ void main() {
       await tester.pumpWidget(
         const ProviderScope(
           child: MaterialApp(
-            home: CollectionPane(),
+            home: Scaffold(
+              body: CollectionPane(),
+            ),
           ),
         ),
       );