1
0
mirror of https://github.com/immich-app/immich.git synced 2024-12-12 11:45:38 +02:00
immich/mobile/lib/modules/search/views/search_result_page.dart

232 lines
7.2 KiB
Dart
Raw Normal View History

2022-03-03 00:44:24 +02:00
import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
2022-03-03 00:44:24 +02:00
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
2022-03-03 00:44:24 +02:00
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/modules/home/ui/daily_title_text.dart';
import 'package:immich_mobile/modules/home/ui/draggable_scrollbar.dart';
import 'package:immich_mobile/modules/home/ui/image_grid.dart';
import 'package:immich_mobile/modules/home/ui/monthly_title_text.dart';
import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
import 'package:immich_mobile/modules/search/providers/search_result_page.provider.dart';
2022-03-03 00:44:24 +02:00
import 'package:immich_mobile/modules/search/ui/search_suggestion_list.dart';
import 'package:openapi/api.dart';
2022-03-03 00:44:24 +02:00
class SearchResultPage extends HookConsumerWidget {
const SearchResultPage({Key? key, required this.searchTerm})
: super(key: key);
2022-03-03 00:44:24 +02:00
final String searchTerm;
@override
Widget build(BuildContext context, WidgetRef ref) {
ScrollController scrollController = useScrollController();
2022-03-03 00:44:24 +02:00
final searchTermController = useTextEditingController(text: "");
final isNewSearch = useState(false);
final currentSearchTerm = useState(searchTerm);
final List<Widget> imageGridGroup = [];
FocusNode? searchFocusNode;
List<AssetResponseDto> sortedAssetList = [];
2022-03-03 00:44:24 +02:00
useEffect(
() {
searchFocusNode = FocusNode();
Future.delayed(
Duration.zero,
() => ref.read(searchResultPageProvider.notifier).search(searchTerm),
);
return () => searchFocusNode?.dispose();
},
[],
);
2022-03-03 00:44:24 +02:00
_onSearchSubmitted(String newSearchTerm) {
debugPrint("Re-Search with $newSearchTerm");
searchFocusNode?.unfocus();
2022-03-03 00:44:24 +02:00
isNewSearch.value = false;
currentSearchTerm.value = newSearchTerm;
ref.watch(searchResultPageProvider.notifier).search(newSearchTerm);
2022-03-03 00:44:24 +02:00
}
_buildTextField() {
return TextField(
controller: searchTermController,
focusNode: searchFocusNode,
autofocus: false,
onTap: () {
searchTermController.clear();
ref.watch(searchPageStateProvider.notifier).setSearchTerm("");
searchFocusNode?.requestFocus();
2022-03-03 00:44:24 +02:00
},
textInputAction: TextInputAction.search,
onSubmitted: (searchTerm) {
if (searchTerm.isNotEmpty) {
searchTermController.clear();
_onSearchSubmitted(searchTerm);
} else {
isNewSearch.value = false;
}
},
onChanged: (value) {
ref.watch(searchPageStateProvider.notifier).setSearchTerm(value);
},
decoration: InputDecoration(
hintText: 'search_result_page_new_search_hint'.tr(),
enabledBorder: const UnderlineInputBorder(
2022-03-03 00:44:24 +02:00
borderSide: BorderSide(color: Colors.transparent),
),
focusedBorder: const UnderlineInputBorder(
2022-03-03 00:44:24 +02:00
borderSide: BorderSide(color: Colors.transparent),
),
),
);
}
_buildChip() {
return Chip(
label: Wrap(
spacing: 5,
runAlignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
alignment: WrapAlignment.center,
2022-03-03 00:44:24 +02:00
children: [
Text(
currentSearchTerm.value,
style: TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 13,
fontWeight: FontWeight.bold,
),
maxLines: 1,
2022-03-03 00:44:24 +02:00
),
Icon(
Icons.close_rounded,
color: Theme.of(context).primaryColor,
size: 20,
),
],
),
backgroundColor: Theme.of(context).primaryColor.withAlpha(50),
);
}
_buildSearchResult() {
var searchResultPageState = ref.watch(searchResultPageProvider);
2022-03-03 00:44:24 +02:00
var assetGroupByDateTime = ref.watch(searchResultGroupByDateTimeProvider);
if (searchResultPageState.isError) {
return const Text("Error");
}
if (searchResultPageState.isLoading) {
return Center(
child: SpinKitDancingSquare(
color: Theme.of(context).primaryColor,
),
);
2022-03-03 00:44:24 +02:00
}
if (searchResultPageState.isSuccess) {
if (searchResultPageState.searchResult.isNotEmpty) {
int? lastMonth;
// set sorted List
for (var group in assetGroupByDateTime.values) {
for (var value in group) {
sortedAssetList.add(value);
}
}
2022-03-03 00:44:24 +02:00
assetGroupByDateTime.forEach((dateGroup, immichAssetList) {
DateTime parseDateGroup = DateTime.parse(dateGroup);
int currentMonth = parseDateGroup.month;
if (lastMonth != null) {
if (currentMonth - lastMonth! != 0) {
imageGridGroup.add(
2022-03-03 00:44:24 +02:00
MonthlyTitleText(
isoDate: dateGroup,
),
);
}
}
imageGridGroup.add(
2022-03-03 00:44:24 +02:00
DailyTitleText(
isoDate: dateGroup,
assetGroup: immichAssetList,
),
);
imageGridGroup.add(
ImageGrid(
assetGroup: immichAssetList,
sortedAssetGroup: sortedAssetList,
),
2022-03-03 00:44:24 +02:00
);
lastMonth = currentMonth;
});
return DraggableScrollbar.semicircle(
backgroundColor: Theme.of(context).hintColor,
controller: scrollController,
2022-03-03 00:44:24 +02:00
heightScrollThumb: 48.0,
child: CustomScrollView(
controller: scrollController,
slivers: [...imageGridGroup],
2022-03-03 00:44:24 +02:00
),
);
} else {
return const Text("No assets found");
}
}
return const SizedBox();
2022-03-03 00:44:24 +02:00
}
return Scaffold(
appBar: AppBar(
leading: IconButton(
splashRadius: 20,
onPressed: () {
if (isNewSearch.value) {
isNewSearch.value = false;
} else {
AutoRouter.of(context).pop(true);
}
},
icon: const Icon(Icons.arrow_back_ios_rounded),
),
title: GestureDetector(
onTap: () {
isNewSearch.value = true;
searchFocusNode?.requestFocus();
},
child: isNewSearch.value ? _buildTextField() : _buildChip(),
),
2022-03-03 00:44:24 +02:00
centerTitle: false,
),
body: GestureDetector(
onTap: () {
if (searchFocusNode != null) {
searchFocusNode?.unfocus();
}
2022-03-03 00:44:24 +02:00
ref.watch(searchPageStateProvider.notifier).disableSearch();
},
child: Stack(
children: [
_buildSearchResult(),
if (isNewSearch.value)
SearchSuggestionList(onSubmitted: _onSearchSubmitted),
2022-03-03 00:44:24 +02:00
],
),
),
);
}
}