Add filter to people_picker.dart

immich-app · Jan 29, 2025 · 51a06b5 · 51a06b5
1 parent cc0cbd7
commit 51a06b5
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 45 deletions.
diff --git a/mobile/assets/i18n/en-US.json b/mobile/assets/i18n/en-US.json
@@ -476,6 +476,7 @@
   "search_filter_media_type_video": "Video",
   "search_filter_people": "People",
   "search_filter_people_title": "Select people",
+  "search_filter_people_hint": "Filter people",
   "search_page_categories": "Categories",
   "search_page_favorites": "Favorites",
   "search_page_motion_photos": "Motion Photos",

diff --git a/mobile/lib/widgets/search/search_filter/people_picker.dart b/mobile/lib/widgets/search/search_filter/people_picker.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
@@ -17,62 +18,86 @@ class PeoplePicker extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     var imageSize = 45.0;
+    final searchQuery = useState('');
     final people = ref.watch(getAllPeopleProvider);
     final headers = ApiService.getRequestHeaders();
     final selectedPeople = useState<Set<Person>>(filter ?? {});
 
-    return people.widgetWhen(
-      onData: (people) {
-        return ListView.builder(
-          shrinkWrap: true,
-          itemCount: people.length,
-          padding: const EdgeInsets.all(8),
-          itemBuilder: (context, index) {
-            final person = people[index];
-            return Card(
-              elevation: 0,
-              shape: const RoundedRectangleBorder(
-                borderRadius: BorderRadius.all(Radius.circular(15)),
+    return Column(
+      children: [
+        Padding(
+          padding: const EdgeInsets.all(16),
+          child: TextField(
+            onChanged: (value) => searchQuery.value = value,
+            decoration: InputDecoration(
+              border: OutlineInputBorder(
+                borderRadius: BorderRadius.circular(25),
               ),
-              child: ListTile(
-                title: Text(
-                  person.name,
-                  style: context.textTheme.bodyLarge,
+              prefixIcon: const Icon(Icons.search_rounded),
+              hintText: 'search_filter_people_hint'.tr(),
+            ),
+          ),
+        ),
+        Expanded(child: people.widgetWhen(onData: (people) {
+          return ListView.builder(
+            shrinkWrap: true,
+            itemCount: people
+                .where((person) => person.name
+                    .toLowerCase()
+                    .contains(searchQuery.value.toLowerCase()))
+                .length,
+            padding: const EdgeInsets.all(8),
+            itemBuilder: (context, index) {
+              final person = people
+                  .where((person) => person.name
+                      .toLowerCase()
+                      .contains(searchQuery.value.toLowerCase()))
+                  .toList()[index];
+              return Card(
+                elevation: 0,
+                shape: const RoundedRectangleBorder(
+                  borderRadius: BorderRadius.all(Radius.circular(15)),
                 ),
-                leading: SizedBox(
-                  height: imageSize,
-                  child: Material(
-                    shape: const CircleBorder(side: BorderSide.none),
-                    elevation: 3,
-                    child: CircleAvatar(
-                      maxRadius: imageSize / 2,
-                      backgroundImage: NetworkImage(
-                        getFaceThumbnailUrl(person.id),
-                        headers: headers,
+                child: ListTile(
+                  title: Text(
+                    person.name,
+                    style: context.textTheme.bodyLarge,
+                  ),
+                  leading: SizedBox(
+                    height: imageSize,
+                    child: Material(
+                      shape: const CircleBorder(side: BorderSide.none),
+                      elevation: 3,
+                      child: CircleAvatar(
+                        maxRadius: imageSize / 2,
+                        backgroundImage: NetworkImage(
+                          getFaceThumbnailUrl(person.id),
+                          headers: headers,
+                        ),
                       ),
                     ),
                   ),
-                ),
-                onTap: () {
-                  if (selectedPeople.value.contains(person)) {
-                    selectedPeople.value.remove(person);
-                  } else {
-                    selectedPeople.value.add(person);
-                  }
+                  onTap: () {
+                    if (selectedPeople.value.contains(person)) {
+                      selectedPeople.value.remove(person);
+                    } else {
+                      selectedPeople.value.add(person);
+                    }
 
-                  selectedPeople.value = {...selectedPeople.value};
-                  onSelect(selectedPeople.value);
-                },
-                selected: selectedPeople.value.contains(person),
-                selectedTileColor: context.primaryColor.withOpacity(0.2),
-                shape: const RoundedRectangleBorder(
-                  borderRadius: BorderRadius.all(Radius.circular(15)),
+                    selectedPeople.value = {...selectedPeople.value};
+                    onSelect(selectedPeople.value);
+                  },
+                  selected: selectedPeople.value.contains(person),
+                  selectedTileColor: context.primaryColor.withOpacity(0.2),
+                  shape: const RoundedRectangleBorder(
+                    borderRadius: BorderRadius.all(Radius.circular(15)),
+                  ),
                 ),
-              ),
-            );
-          },
-        );
-      },
+              );
+            },
+          );
+        }))
+      ],
     );
   }
 }