Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(mobile): Add filter to people_picker.dart #15771

Merged
merged 3 commits into from
Jan 29, 2025
Merged

feat(mobile): Add filter to people_picker.dart #15771

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
51a06b5
Add filter to people_picker.dart
jforseth210 Jan 29, 2025
4e661a2
Merge branch 'main' into filter-people-mobile
jforseth210 Jan 29, 2025
87c07e5
feat: styling
alextran1502 Jan 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions mobile/assets/i18n/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 8 additions & 2 deletions mobile/lib/pages/common/large_leading_tile.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ class LargeLeadingTile extends StatelessWidget {
this.trailing,
this.selected = false,
this.disabled = false,
this.selectedTileColor,
this.tileColor,
});

final Widget leading;
Expand All @@ -27,6 +29,9 @@ class LargeLeadingTile extends StatelessWidget {
final Widget? trailing;
final bool selected;
final bool disabled;
final Color? selectedTileColor;
final Color? tileColor;

@override
Widget build(BuildContext context) {
return InkWell(
Expand All @@ -35,8 +40,9 @@ class LargeLeadingTile extends StatelessWidget {
child: Container(
decoration: BoxDecoration(
color: selected
? Theme.of(context).primaryColor.withAlpha(30)
: Colors.transparent,
? selectedTileColor ??
Theme.of(context).primaryColor.withAlpha(30)
: tileColor ?? Colors.transparent,
borderRadius: BorderRadius.circular(borderRadius),
),
child: Row(
Expand Down
172 changes: 125 additions & 47 deletions mobile/lib/widgets/search/search_filter/people_picker.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
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';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/extensions/theme_extensions.dart';
import 'package:immich_mobile/interfaces/person_api.interface.dart';
import 'package:immich_mobile/pages/common/large_leading_tile.dart';
import 'package:immich_mobile/providers/search/people.provider.dart';
import 'package:immich_mobile/services/api.service.dart';
import 'package:immich_mobile/utils/image_url_builder.dart';
Expand All @@ -16,63 +19,138 @@ class PeoplePicker extends HookConsumerWidget {

@override
Widget build(BuildContext context, WidgetRef ref) {
var imageSize = 45.0;
final formFocus = useFocusNode();
final imageSize = 75.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,
return Column(
children: [
Padding(
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)),
child: TextField(
focusNode: formFocus,
onChanged: (value) => searchQuery.value = value,
onTapOutside: (_) => formFocus.unfocus(),
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(left: 24),
filled: true,
fillColor: context.primaryColor.withOpacity(0.1),
hintStyle: context.textTheme.bodyLarge?.copyWith(
color: context.themeData.colorScheme.onSurfaceSecondary,
),
child: ListTile(
title: Text(
person.name,
style: context.textTheme.bodyLarge,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: BorderSide(
color: context.colorScheme.surfaceContainerHighest,
),
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,
),
),
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: BorderSide(
color: context.colorScheme.surfaceContainerHighest,
),
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)),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: BorderSide(
color: context.colorScheme.surfaceContainerHighest,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
borderSide: BorderSide(
color: context.colorScheme.primary.withAlpha(150),
),
),
);
},
);
},
prefixIcon: Icon(
Icons.search_rounded,
color: context.colorScheme.primary,
),
hintText: 'search_filter_people_hint'.tr(),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 16.0, right: 16.0, bottom: 0),
child: Divider(
color: context.colorScheme.surfaceContainerHighest,
thickness: 1,
),
),
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];
final isSelected = selectedPeople.value.contains(person);

return Padding(
padding: const EdgeInsets.only(bottom: 2.0),
child: LargeLeadingTile(
title: Text(
person.name,
style: context.textTheme.bodyLarge?.copyWith(
fontSize: 20,
fontWeight: FontWeight.w500,
color: isSelected
? context.colorScheme.onPrimary
: context.colorScheme.onSurface,
),
),
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);
}

selectedPeople.value = {...selectedPeople.value};
onSelect(selectedPeople.value);
},
selected: isSelected,
selectedTileColor: context.primaryColor,
tileColor: context.primaryColor.withAlpha(25),
),
);
},
);
},
),
),
],
);
}
}
Loading