2022-03-03 00:44:24 +02:00
|
|
|
import 'package:auto_route/auto_route.dart';
|
2022-07-07 20:40:54 +02:00
|
|
|
import 'package:easy_localization/easy_localization.dart';
|
2022-02-27 20:45:12 +02:00
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
2022-03-16 17:19:31 +02:00
|
|
|
import 'package:hive_flutter/hive_flutter.dart';
|
2022-02-27 20:45:12 +02:00
|
|
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
2022-03-16 17:19:31 +02:00
|
|
|
import 'package:immich_mobile/constants/hive_box.dart';
|
2022-02-27 20:45:12 +02:00
|
|
|
import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
|
|
|
|
import 'package:immich_mobile/modules/search/ui/search_bar.dart';
|
|
|
|
import 'package:immich_mobile/modules/search/ui/search_suggestion_list.dart';
|
2022-04-02 19:31:53 +02:00
|
|
|
import 'package:immich_mobile/modules/search/ui/thumbnail_with_info.dart';
|
2022-03-03 00:44:24 +02:00
|
|
|
import 'package:immich_mobile/routing/router.dart';
|
2022-04-24 04:08:45 +02:00
|
|
|
import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
|
2022-03-27 21:58:54 +02:00
|
|
|
import 'package:immich_mobile/utils/capitalize_first_letter.dart';
|
2022-07-13 14:23:48 +02:00
|
|
|
import 'package:openapi/api.dart';
|
2022-02-27 20:45:12 +02:00
|
|
|
|
|
|
|
// ignore: must_be_immutable
|
|
|
|
class SearchPage extends HookConsumerWidget {
|
|
|
|
SearchPage({Key? key}) : super(key: key);
|
|
|
|
|
2022-06-25 20:46:51 +02:00
|
|
|
FocusNode searchFocusNode = FocusNode();
|
2022-02-27 20:45:12 +02:00
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
2022-03-16 17:19:31 +02:00
|
|
|
var box = Hive.box(userInfoBox);
|
2022-02-27 20:45:12 +02:00
|
|
|
final isSearchEnabled = ref.watch(searchPageStateProvider).isSearchEnabled;
|
2022-07-13 14:23:48 +02:00
|
|
|
AsyncValue<List<CuratedLocationsResponseDto>> curatedLocation =
|
2022-04-24 04:08:45 +02:00
|
|
|
ref.watch(getCuratedLocationProvider);
|
2022-07-13 14:23:48 +02:00
|
|
|
AsyncValue<List<CuratedObjectsResponseDto>> curatedObjects =
|
2022-04-24 04:08:45 +02:00
|
|
|
ref.watch(getCuratedObjectProvider);
|
2022-02-27 20:45:12 +02:00
|
|
|
|
2022-08-16 01:53:30 +02:00
|
|
|
double imageSize = MediaQuery.of(context).size.width / 3;
|
|
|
|
|
2022-07-13 14:23:48 +02:00
|
|
|
useEffect(
|
|
|
|
() {
|
|
|
|
searchFocusNode = FocusNode();
|
|
|
|
return () => searchFocusNode.dispose();
|
|
|
|
},
|
|
|
|
[],
|
|
|
|
);
|
2022-02-27 20:45:12 +02:00
|
|
|
|
2022-11-21 14:13:14 +02:00
|
|
|
onSearchSubmitted(String searchTerm) async {
|
2022-03-03 00:44:24 +02:00
|
|
|
searchFocusNode.unfocus();
|
|
|
|
ref.watch(searchPageStateProvider.notifier).disableSearch();
|
|
|
|
|
|
|
|
AutoRouter.of(context).push(SearchResultRoute(searchTerm: searchTerm));
|
|
|
|
}
|
|
|
|
|
2022-11-21 14:13:14 +02:00
|
|
|
buildPlaces() {
|
2022-03-16 17:19:31 +02:00
|
|
|
return curatedLocation.when(
|
2022-08-16 01:53:30 +02:00
|
|
|
loading: () => SizedBox(
|
|
|
|
height: imageSize,
|
|
|
|
child: const Center(child: ImmichLoadingIndicator()),
|
2022-04-24 04:08:45 +02:00
|
|
|
),
|
2022-03-16 17:19:31 +02:00
|
|
|
error: (err, stack) => Text('Error: $err'),
|
|
|
|
data: (curatedLocations) {
|
|
|
|
return curatedLocations.isNotEmpty
|
|
|
|
? SizedBox(
|
2022-08-16 01:53:30 +02:00
|
|
|
height: imageSize,
|
2022-03-16 17:19:31 +02:00
|
|
|
child: ListView.builder(
|
|
|
|
padding: const EdgeInsets.only(left: 16),
|
|
|
|
scrollDirection: Axis.horizontal,
|
|
|
|
itemCount: curatedLocation.value?.length,
|
|
|
|
itemBuilder: ((context, index) {
|
2022-07-13 14:23:48 +02:00
|
|
|
var locationInfo = curatedLocations[index];
|
2022-03-16 17:19:31 +02:00
|
|
|
var thumbnailRequestUrl =
|
2022-07-13 14:23:48 +02:00
|
|
|
'${box.get(serverEndpointKey)}/asset/thumbnail/${locationInfo.id}';
|
2022-03-16 17:19:31 +02:00
|
|
|
return ThumbnailWithInfo(
|
|
|
|
imageUrl: thumbnailRequestUrl,
|
|
|
|
textInfo: locationInfo.city,
|
|
|
|
onTap: () {
|
2022-04-24 04:08:45 +02:00
|
|
|
AutoRouter.of(context).push(
|
2022-07-13 14:23:48 +02:00
|
|
|
SearchResultRoute(searchTerm: locationInfo.city),
|
|
|
|
);
|
2022-03-16 17:19:31 +02:00
|
|
|
},
|
|
|
|
);
|
|
|
|
}),
|
|
|
|
),
|
|
|
|
)
|
|
|
|
: SizedBox(
|
2022-08-16 01:53:30 +02:00
|
|
|
height: imageSize,
|
2022-03-16 17:19:31 +02:00
|
|
|
child: ListView.builder(
|
|
|
|
padding: const EdgeInsets.only(left: 16),
|
|
|
|
scrollDirection: Axis.horizontal,
|
|
|
|
itemCount: 1,
|
|
|
|
itemBuilder: ((context, index) {
|
|
|
|
return ThumbnailWithInfo(
|
|
|
|
imageUrl:
|
|
|
|
'https://images.unsplash.com/photo-1612178537253-bccd437b730e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Ymxhbmt8ZW58MHx8MHx8&auto=format&fit=crop&w=700&q=60',
|
2022-07-07 20:40:54 +02:00
|
|
|
textInfo: 'search_page_no_places'.tr(),
|
2022-03-16 17:19:31 +02:00
|
|
|
onTap: () {},
|
|
|
|
);
|
|
|
|
}),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
},
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-11-21 14:13:14 +02:00
|
|
|
buildThings() {
|
2022-03-27 21:58:54 +02:00
|
|
|
return curatedObjects.when(
|
2022-09-19 18:03:51 +02:00
|
|
|
loading: () => SizedBox(
|
|
|
|
height: imageSize,
|
|
|
|
child: const Center(child: ImmichLoadingIndicator()),
|
2022-04-24 04:08:45 +02:00
|
|
|
),
|
2022-03-27 21:58:54 +02:00
|
|
|
error: (err, stack) => Text('Error: $err'),
|
|
|
|
data: (objects) {
|
|
|
|
return objects.isNotEmpty
|
|
|
|
? SizedBox(
|
2022-08-16 01:53:30 +02:00
|
|
|
height: imageSize,
|
2022-03-27 21:58:54 +02:00
|
|
|
child: ListView.builder(
|
|
|
|
padding: const EdgeInsets.only(left: 16),
|
|
|
|
scrollDirection: Axis.horizontal,
|
|
|
|
itemCount: curatedObjects.value?.length,
|
|
|
|
itemBuilder: ((context, index) {
|
2022-07-13 14:23:48 +02:00
|
|
|
var curatedObjectInfo = objects[index];
|
2022-03-27 21:58:54 +02:00
|
|
|
var thumbnailRequestUrl =
|
2022-08-16 01:53:30 +02:00
|
|
|
'${box.get(serverEndpointKey)}/asset/thumbnail/${curatedObjectInfo.id}';
|
2022-03-27 21:58:54 +02:00
|
|
|
|
|
|
|
return ThumbnailWithInfo(
|
|
|
|
imageUrl: thumbnailRequestUrl,
|
|
|
|
textInfo: curatedObjectInfo.object,
|
|
|
|
onTap: () {
|
2022-07-13 14:23:48 +02:00
|
|
|
AutoRouter.of(context).push(
|
|
|
|
SearchResultRoute(
|
2022-04-24 04:08:45 +02:00
|
|
|
searchTerm: curatedObjectInfo.object
|
2022-07-13 14:23:48 +02:00
|
|
|
.capitalizeFirstLetter(),
|
|
|
|
),
|
|
|
|
);
|
2022-03-27 21:58:54 +02:00
|
|
|
},
|
|
|
|
);
|
|
|
|
}),
|
|
|
|
),
|
|
|
|
)
|
|
|
|
: SizedBox(
|
2022-09-19 18:03:51 +02:00
|
|
|
height: imageSize,
|
2022-03-27 21:58:54 +02:00
|
|
|
child: ListView.builder(
|
|
|
|
padding: const EdgeInsets.only(left: 16),
|
|
|
|
scrollDirection: Axis.horizontal,
|
|
|
|
itemCount: 1,
|
|
|
|
itemBuilder: ((context, index) {
|
|
|
|
return ThumbnailWithInfo(
|
|
|
|
imageUrl:
|
|
|
|
'https://images.unsplash.com/photo-1612178537253-bccd437b730e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Ymxhbmt8ZW58MHx8MHx8&auto=format&fit=crop&w=700&q=60',
|
2022-07-14 03:46:28 +02:00
|
|
|
textInfo: 'search_page_no_objects'.tr(),
|
2022-03-27 21:58:54 +02:00
|
|
|
onTap: () {},
|
|
|
|
);
|
|
|
|
}),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
},
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-02-27 20:45:12 +02:00
|
|
|
return Scaffold(
|
2022-03-03 00:44:24 +02:00
|
|
|
appBar: SearchBar(
|
|
|
|
searchFocusNode: searchFocusNode,
|
2022-11-21 14:13:14 +02:00
|
|
|
onSubmitted: onSearchSubmitted,
|
2022-03-03 00:44:24 +02:00
|
|
|
),
|
2022-02-27 20:45:12 +02:00
|
|
|
body: GestureDetector(
|
|
|
|
onTap: () {
|
|
|
|
searchFocusNode.unfocus();
|
|
|
|
ref.watch(searchPageStateProvider.notifier).disableSearch();
|
|
|
|
},
|
|
|
|
child: Stack(
|
|
|
|
children: [
|
|
|
|
ListView(
|
2022-08-16 01:53:30 +02:00
|
|
|
shrinkWrap: true,
|
2022-03-16 17:19:31 +02:00
|
|
|
children: [
|
2022-07-07 20:40:54 +02:00
|
|
|
Padding(
|
2022-07-13 14:23:48 +02:00
|
|
|
padding: const EdgeInsets.all(16.0),
|
2022-07-07 20:40:54 +02:00
|
|
|
child: const Text(
|
|
|
|
"search_page_places",
|
2022-08-16 01:53:30 +02:00
|
|
|
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
|
2022-07-07 20:40:54 +02:00
|
|
|
).tr(),
|
2022-03-16 17:19:31 +02:00
|
|
|
),
|
2022-11-21 14:13:14 +02:00
|
|
|
buildPlaces(),
|
2022-07-07 20:40:54 +02:00
|
|
|
Padding(
|
2022-07-13 14:23:48 +02:00
|
|
|
padding: const EdgeInsets.all(16.0),
|
|
|
|
child: const Text(
|
2022-07-07 20:40:54 +02:00
|
|
|
"search_page_things",
|
2022-08-16 01:53:30 +02:00
|
|
|
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
|
2022-07-07 20:40:54 +02:00
|
|
|
).tr(),
|
2022-03-27 21:58:54 +02:00
|
|
|
),
|
2022-11-21 14:13:14 +02:00
|
|
|
buildThings()
|
2022-03-16 17:19:31 +02:00
|
|
|
],
|
2022-02-27 20:45:12 +02:00
|
|
|
),
|
2022-07-01 03:08:49 +02:00
|
|
|
if (isSearchEnabled)
|
2022-11-21 14:13:14 +02:00
|
|
|
SearchSuggestionList(onSubmitted: onSearchSubmitted),
|
2022-02-27 20:45:12 +02:00
|
|
|
],
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|