diff --git a/i18n/en.json b/i18n/en.json index 644b74e715..6117e30106 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -1197,6 +1197,8 @@ "import_path": "Import path", "in_albums": "In {count, plural, one {# album} other {# albums}}", "in_archive": "In archive", + "in_year": "In {year}", + "in_year_selector": "In", "include_archived": "Include archived", "include_shared_albums": "Include shared albums", "include_shared_partner_assets": "Include shared partner assets", @@ -1233,6 +1235,7 @@ "language_setting_description": "Select your preferred language", "large_files": "Large Files", "last": "Last", + "last_months": "{count, plural, one {Last month} other {Last # months}}", "last_seen": "Last seen", "latest_version": "Latest Version", "latitude": "Latitude", @@ -1554,6 +1557,8 @@ "photos_count": "{count, plural, one {{count, number} Photo} other {{count, number} Photos}}", "photos_from_previous_years": "Photos from previous years", "pick_a_location": "Pick a location", + "pick_custom_range": "Custom range", + "pick_date_range": "Select a date range", "pin_code_changed_successfully": "Successfully changed PIN code", "pin_code_reset_successfully": "Successfully reset PIN code", "pin_code_setup_successfully": "Successfully setup a PIN code", diff --git a/mobile/lib/presentation/pages/search/drift_search.page.dart b/mobile/lib/presentation/pages/search/drift_search.page.dart index 5ded685e21..58ca892f5f 100644 --- a/mobile/lib/presentation/pages/search/drift_search.page.dart +++ b/mobile/lib/presentation/pages/search/drift_search.page.dart @@ -15,6 +15,7 @@ import 'package:immich_mobile/extensions/translate_extensions.dart'; import 'package:immich_mobile/models/search/search_filter.model.dart'; import 'package:immich_mobile/presentation/pages/search/paginated_search.provider.dart'; import 'package:immich_mobile/presentation/widgets/bottom_sheet/general_bottom_sheet.widget.dart'; +import 'package:immich_mobile/presentation/widgets/search/quick_date_picker.dart'; import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart'; import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart'; import 'package:immich_mobile/providers/search/search_input_focus.provider.dart'; @@ -54,6 +55,7 @@ class DriftSearchPage extends HookConsumerWidget { ); final previousFilter = useState(null); + final dateInputFilter = useState(null); final peopleCurrentFilterWidget = useState(null); final dateRangeCurrentFilterWidget = useState(null); @@ -245,19 +247,54 @@ class DriftSearchPage extends HookConsumerWidget { ); } + datePicked(DateFilterInputModel? selectedDate) { + dateInputFilter.value = selectedDate; + if (selectedDate == null) { + filter.value = filter.value.copyWith(date: SearchDateFilter()); + + dateRangeCurrentFilterWidget.value = null; + unawaited(search()); + return; + } + + final date = selectedDate.asDateTimeRange(); + + filter.value = filter.value.copyWith( + date: SearchDateFilter( + takenAfter: date.start, + takenBefore: date.end.add(const Duration(hours: 23, minutes: 59, seconds: 59)), + ), + ); + + dateRangeCurrentFilterWidget.value = Text( + selectedDate.asHumanReadable(context), + style: context.textTheme.labelLarge, + ); + + unawaited(search()); + } + showDatePicker() async { final firstDate = DateTime(1900); final lastDate = DateTime.now(); + var dateRange = DateTimeRange( + start: filter.value.date.takenAfter ?? lastDate, + end: filter.value.date.takenBefore ?? lastDate, + ); + + // datePicked() may increase the date, this will make the date picker fail an assertion + // Fixup the end date to be at most now. + if (dateRange.end.isAfter(lastDate)) { + dateRange = DateTimeRange(start: dateRange.start, end: lastDate); + } + final date = await showDateRangePicker( context: context, firstDate: firstDate, lastDate: lastDate, currentDate: DateTime.now(), - initialDateRange: DateTimeRange( - start: filter.value.date.takenAfter ?? lastDate, - end: filter.value.date.takenBefore ?? lastDate, - ), + initialDateRange: dateRange, helpText: 'search_filter_date_title'.t(context: context), cancelText: 'cancel'.t(context: context), confirmText: 'select'.t(context: context), @@ -271,40 +308,32 @@ class DriftSearchPage extends HookConsumerWidget { ); if (date == null) { - filter.value = filter.value.copyWith(date: SearchDateFilter()); - - dateRangeCurrentFilterWidget.value = null; - unawaited(search()); - return; - } - - filter.value = filter.value.copyWith( - date: SearchDateFilter( - takenAfter: date.start, - takenBefore: date.end.add(const Duration(hours: 23, minutes: 59, seconds: 59)), - ), - ); - - // If date range is less than 24 hours, set the end date to the end of the day - if (date.end.difference(date.start).inHours < 24) { - dateRangeCurrentFilterWidget.value = Text( - DateFormat.yMMMd().format(date.start.toLocal()), - style: context.textTheme.labelLarge, - ); + datePicked(null); } else { - dateRangeCurrentFilterWidget.value = Text( - 'search_filter_date_interval'.t( - context: context, - args: { - "start": DateFormat.yMMMd().format(date.start.toLocal()), - "end": DateFormat.yMMMd().format(date.end.toLocal()), + datePicked(CustomDateFilter.fromRange(date)); + } + } + + showQuickDatePicker() { + showFilterBottomSheet( + context: context, + child: FilterBottomSheetScaffold( + title: "pick_date_range".tr(), + expanded: true, + onClear: () => datePicked(null), + child: QuickDatePicker( + currentInput: dateInputFilter.value, + onRequestPicker: () { + context.pop(); + showDatePicker(); + }, + onSelect: (date) { + context.pop(); + datePicked(date); }, ), - style: context.textTheme.labelLarge, - ); - } - - unawaited(search()); + ), + ); } // MEDIA PICKER @@ -589,7 +618,7 @@ class DriftSearchPage extends HookConsumerWidget { ), SearchFilterChip( icon: Icons.date_range_outlined, - onTap: showDatePicker, + onTap: showQuickDatePicker, label: 'search_filter_date'.t(context: context), currentFilter: dateRangeCurrentFilterWidget.value, ), diff --git a/mobile/lib/presentation/widgets/search/quick_date_picker.dart b/mobile/lib/presentation/widgets/search/quick_date_picker.dart new file mode 100644 index 0000000000..09b1cee700 --- /dev/null +++ b/mobile/lib/presentation/widgets/search/quick_date_picker.dart @@ -0,0 +1,208 @@ +import 'package:easy_localization/easy_localization.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_hooks/flutter_hooks.dart'; +import 'package:immich_mobile/extensions/translate_extensions.dart'; + +sealed class DateFilterInputModel { + DateTimeRange asDateTimeRange(); + + String asHumanReadable(BuildContext context) { + // General implementation for arbitrary date and time ranges + // If date range is less than 24 hours, set the end date to the end of the day + final date = asDateTimeRange(); + if (date.end.difference(date.start).inHours < 24) { + return DateFormat.yMMMd().format(date.start.toLocal()); + } else { + return 'search_filter_date_interval'.t( + context: context, + args: { + "start": DateFormat.yMMMd().format(date.start.toLocal()), + "end": DateFormat.yMMMd().format(date.end.toLocal()), + }, + ); + } + } +} + +class RecentMonthRangeFilter extends DateFilterInputModel { + final int monthDelta; + RecentMonthRangeFilter(this.monthDelta); + + @override + DateTimeRange asDateTimeRange() { + final now = DateTime.now(); + // Note that DateTime's constructor properly handles month overflow. + final from = DateTime(now.year, now.month - monthDelta, 1); + return DateTimeRange(start: from, end: now); + } + + @override + String asHumanReadable(BuildContext context) { + return 'last_months'.t(context: context, args: {"count": monthDelta.toString()}); + } +} + +class YearFilter extends DateFilterInputModel { + final int year; + YearFilter(this.year); + + @override + DateTimeRange asDateTimeRange() { + final now = DateTime.now(); + final from = DateTime(year, 1, 1); + + if (now.year == year) { + // To not go beyond today if the user picks the current year + return DateTimeRange(start: from, end: now); + } + + final to = DateTime(year, 12, 31, 23, 59, 59); + return DateTimeRange(start: from, end: to); + } + + @override + String asHumanReadable(BuildContext context) { + return 'in_year'.tr(namedArgs: {"year": year.toString()}); + } +} + +class CustomDateFilter extends DateFilterInputModel { + final DateTime start; + final DateTime end; + + CustomDateFilter(this.start, this.end); + + factory CustomDateFilter.fromRange(DateTimeRange range) { + return CustomDateFilter(range.start, range.end); + } + + @override + DateTimeRange asDateTimeRange() { + return DateTimeRange(start: start, end: end); + } +} + +enum _QuickPickerType { last1Month, last3Months, last9Months, year, custom } + +class QuickDatePicker extends HookWidget { + QuickDatePicker({super.key, required this.currentInput, required this.onSelect, required this.onRequestPicker}) + : _selection = _selectionFromModel(currentInput), + _initialYear = _initialYearFromModel(currentInput); + + final Function() onRequestPicker; + final Function(DateFilterInputModel range) onSelect; + + final DateFilterInputModel? currentInput; + final _QuickPickerType? _selection; + final int _initialYear; + + // Generate a list of recent years from 2000 to the current year (including the current one) + final List _recentYears = List.generate(1 + DateTime.now().year - 2000, (index) { + return index + 2000; + }); + + static int _initialYearFromModel(DateFilterInputModel? model) { + return model?.asDateTimeRange().start.year ?? DateTime.now().year; + } + + static _QuickPickerType? _selectionFromModel(DateFilterInputModel? model) { + if (model is RecentMonthRangeFilter) { + return switch (model.monthDelta) { + 1 => _QuickPickerType.last1Month, + 3 => _QuickPickerType.last3Months, + 9 => _QuickPickerType.last9Months, + _ => _QuickPickerType.custom, + }; + } else if (model is YearFilter) { + return _QuickPickerType.year; + } else if (model is CustomDateFilter) { + return _QuickPickerType.custom; + } + return null; + } + + Text _monthLabel(BuildContext context, int monthsFromNow) => + const Text('last_months').t(context: context, args: {"count": monthsFromNow.toString()}); + + Widget _yearPicker(BuildContext context) { + final size = MediaQuery.of(context).size; + return Row( + children: [ + const Text("in_year_selector").tr(), + const SizedBox(width: 15), + Expanded( + child: DropdownMenu( + initialSelection: _initialYear, + menuStyle: MenuStyle(maximumSize: WidgetStateProperty.all(Size(size.width, size.height * 0.5))), + dropdownMenuEntries: _recentYears.map((e) => DropdownMenuEntry(value: e, label: e.toString())).toList(), + onSelected: (year) { + if (year == null) return; + onSelect(YearFilter(year)); + }, + ), + ), + ], + ); + } + + // We want the exact date picker to always be selectable. + // Even if it's already toggled it should always open the full date picker, RadioListTiles don't do that by default + // so we wrap it in a InkWell + Widget _exactPicker(BuildContext context) { + final hasPreviousInput = currentInput != null && currentInput is CustomDateFilter; + + return InkWell( + onTap: onRequestPicker, + child: IgnorePointer( + ignoring: true, + child: RadioListTile( + title: const Text('pick_custom_range').tr(), + subtitle: hasPreviousInput ? Text(currentInput!.asHumanReadable(context)) : null, + secondary: hasPreviousInput ? const Icon(Icons.edit) : null, + value: _QuickPickerType.custom, + toggleable: true, + ), + ), + ); + } + + @override + Widget build(BuildContext context) { + return Padding( + padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom), + child: Scrollbar( + // Depending on the screen size the last option might get cut off + // Add a clear visual cue that there are more options when scrolling + // When the screen size is large enough the scrollbar is hidden automatically + trackVisibility: true, + thumbVisibility: true, + child: SingleChildScrollView( + child: RadioGroup( + onChanged: (value) { + if (value == null) return; + final _ = switch (value) { + _QuickPickerType.custom => onRequestPicker(), + _QuickPickerType.last1Month => onSelect(RecentMonthRangeFilter(1)), + _QuickPickerType.last3Months => onSelect(RecentMonthRangeFilter(3)), + _QuickPickerType.last9Months => onSelect(RecentMonthRangeFilter(9)), + // When a year is selected the combobox triggers onSelect() on its own. + // Here we handle the radio button being selected which can only ever be the initial year + _QuickPickerType.year => onSelect(YearFilter(_initialYear)), + }; + }, + groupValue: _selection, + child: Column( + children: [ + RadioListTile(title: _monthLabel(context, 1), value: _QuickPickerType.last1Month, toggleable: true), + RadioListTile(title: _monthLabel(context, 3), value: _QuickPickerType.last3Months, toggleable: true), + RadioListTile(title: _monthLabel(context, 9), value: _QuickPickerType.last9Months, toggleable: true), + RadioListTile(title: _yearPicker(context), value: _QuickPickerType.year, toggleable: true), + _exactPicker(context), + ], + ), + ), + ), + ), + ); + } +} diff --git a/mobile/lib/widgets/search/search_filter/filter_bottom_sheet_scaffold.dart b/mobile/lib/widgets/search/search_filter/filter_bottom_sheet_scaffold.dart index e8226b5b3a..dee42ec5a0 100644 --- a/mobile/lib/widgets/search/search_filter/filter_bottom_sheet_scaffold.dart +++ b/mobile/lib/widgets/search/search_filter/filter_bottom_sheet_scaffold.dart @@ -6,7 +6,7 @@ class FilterBottomSheetScaffold extends StatelessWidget { const FilterBottomSheetScaffold({ super.key, required this.child, - required this.onSearch, + this.onSearch, required this.onClear, required this.title, this.expanded, @@ -15,7 +15,7 @@ class FilterBottomSheetScaffold extends StatelessWidget { final bool? expanded; final String title; final Widget child; - final Function() onSearch; + final Function()? onSearch; final Function() onClear; @override @@ -48,15 +48,16 @@ class FilterBottomSheetScaffold extends StatelessWidget { }, child: const Text('clear').tr(), ), - const SizedBox(width: 8), - ElevatedButton( - key: const Key('search_filter_apply'), - onPressed: () { - onSearch(); - context.pop(); - }, - child: const Text('search_filter_apply').tr(), - ), + if (onSearch != null) const SizedBox(width: 8), + if (onSearch != null) + ElevatedButton( + key: const Key('search_filter_apply'), + onPressed: () { + onSearch!(); + context.pop(); + }, + child: const Text('search_filter_apply').tr(), + ), ], ), ),