0ct0pu5/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added icon to toggle group selection on day title text

Browse source
This commit is contained in:
Alex Tran 2022-02-08 01:22:27 -06:00
parent 6ad77e9434
commit 7ee49b152c
5 changed files with 211 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
mobile/lib/modules/home/models/home_page_state.model.dart Normal file
View file

@ -0,0 +1,59 @@
import 'dart:convert';
import 'package:collection/collection.dart';
import 'package:immich_mobile/shared/models/immich_asset.model.dart';
class HomePageState {
final bool isMultiSelectEnable;
final List<ImmichAsset> selectedItems;
HomePageState({
required this.isMultiSelectEnable,
required this.selectedItems,
});
HomePageState copyWith({
bool? isMultiSelectEnable,
List<ImmichAsset>? selectedItems,
}) {
return HomePageState(
isMultiSelectEnable: isMultiSelectEnable ?? this.isMultiSelectEnable,
selectedItems: selectedItems ?? this.selectedItems,
);
}
Map<String, dynamic> toMap() {
return {
'isMultiSelectEnable': isMultiSelectEnable,
'selectedItems': selectedItems.map((x) => x.toMap()).toList(),
};
}
factory HomePageState.fromMap(Map<String, dynamic> map) {
return HomePageState(
isMultiSelectEnable: map['isMultiSelectEnable'] ?? false,
selectedItems: List<ImmichAsset>.from(map['selectedItems']?.map((x) => ImmichAsset.fromMap(x))),
);
}
String toJson() => json.encode(toMap());
factory HomePageState.fromJson(String source) => HomePageState.fromMap(json.decode(source));
@override
String toString() => 'HomePageState(isMultiSelectEnable: $isMultiSelectEnable, selectedItems: $selectedItems)';
@override
bool operator ==(Object other) {
if (identical(this, other)) return true;
final listEquals = const DeepCollectionEquality().equals;
return other is HomePageState &&
other.isMultiSelectEnable == isMultiSelectEnable &&
listEquals(other.selectedItems, selectedItems);
}
@override
int get hashCode => isMultiSelectEnable.hashCode ^ selectedItems.hashCode;
}

50
mobile/lib/modules/home/providers/home_page_state.provider.dart Normal file
View file

@ -0,0 +1,50 @@
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/modules/home/models/home_page_state.model.dart';
import 'package:immich_mobile/shared/models/immich_asset.model.dart';
class HomePageStateNotifier extends StateNotifier<HomePageState> {
HomePageStateNotifier()
: super(
HomePageState(
isMultiSelectEnable: false,
selectedItems: [],
),
);
void enableMultiSelect(List<ImmichAsset> selectedItems) {
state = state.copyWith(isMultiSelectEnable: true, selectedItems: selectedItems);
}
void disableMultiSelect() {
state = state.copyWith(isMultiSelectEnable: false, selectedItems: []);
}
void addSingleSelectedItem(ImmichAsset asset) {
state = state.copyWith(selectedItems: [...state.selectedItems, asset]);
}
void addMultipleSelectedItems(List<ImmichAsset> assets) {
state = state.copyWith(selectedItems: [...state.selectedItems, ...assets]);
}
void removeSingleSelectedItem(ImmichAsset asset) {
List<ImmichAsset> currentList = state.selectedItems;
currentList.removeWhere((e) => e.id == asset.id);
state = state.copyWith(selectedItems: currentList);
}
void removeMultipleSelectedItem(List<ImmichAsset> assets) {
List<ImmichAsset> currentList = state.selectedItems;
for (ImmichAsset asset in assets) {
currentList.removeWhere((e) => e.id == asset.id);
}
state = state.copyWith(selectedItems: currentList);
}
}
final homePageStateProvider =
StateNotifierProvider<HomePageStateNotifier, HomePageState>(((ref) => HomePageStateNotifier()));

57
mobile/lib/modules/home/ui/daily_title_text.dart Normal file
View file

@ -0,0 +1,57 @@
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/modules/home/providers/home_page_state.provider.dart';
import 'package:immich_mobile/shared/models/immich_asset.model.dart';
import 'package:intl/intl.dart';
class DailyTitleText extends ConsumerWidget {
const DailyTitleText({
Key? key,
required this.isoDate,
required this.assetGroup,
}) : super(key: key);
final String isoDate;
final List<ImmichAsset> assetGroup;
@override
Widget build(BuildContext context, WidgetRef ref) {
var currentYear = DateTime.now().year;
var groupYear = DateTime.parse(isoDate).year;
var formatDateTemplate = currentYear == groupYear ? 'E, MMM dd' : 'E, MMM dd, yyyy';
var dateText = DateFormat(formatDateTemplate).format(DateTime.parse(isoDate));
var isMultiSelectEnable = ref.watch(homePageStateProvider).isMultiSelectEnable;
return SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(top: 29.0, bottom: 29.0, left: 12.0, right: 12.0),
child: Row(
children: [
Text(
dateText,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
const Spacer(),
GestureDetector(
onTap: () {
if (!isMultiSelectEnable) {
ref.watch(homePageStateProvider.notifier).enableMultiSelect(assetGroup);
} else {
ref.watch(homePageStateProvider.notifier).disableMultiSelect();
}
print(ref.watch(homePageStateProvider).selectedItems.length);
},
child: isMultiSelectEnable
? const Icon(Icons.check_circle_rounded)
: const Icon(Icons.check_circle_outline_rounded),
)
],
),
),
);
}
}

30
mobile/lib/modules/home/ui/monthly_title_text.dart Normal file
View file

@ -0,0 +1,30 @@
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class MonthlyTitleText extends StatelessWidget {
const MonthlyTitleText({
Key? key,
required this.isoDate,
}) : super(key: key);
final String isoDate;
@override
Widget build(BuildContext context) {
var monthTitleText = DateFormat('MMMM y').format(DateTime.parse(isoDate));
return SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(left: 12.0, top: 32),
child: Text(
monthTitleText,
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryColor,
),
),
),
);
}
}

103
mobile/lib/modules/home/views/home_page.dart
View file

@ -1,24 +1,23 @@
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
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/immich_sliver_appbar.dart';
import 'package:immich_mobile/modules/home/ui/monthly_title_text.dart';
import 'package:immich_mobile/modules/home/ui/profile_drawer.dart';
import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart';
import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
import 'package:intl/intl.dart';
class HomePage extends HookConsumerWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final ValueNotifier<bool> _showBackToTopBtn = useState(false);
ScrollController _scrollController = useScrollController();
List<ImmichAssetGroupByDate> assetGroup = ref.watch(assetProvider);
List<Widget> imageGridGroup = [];
List<ImmichAssetGroupByDate> _assetGroup = ref.watch(assetProvider);
List<Widget> _imageGridGroup = [];
_scrollControllerCallback() {
var endOfPage = _scrollController.position.maxScrollExtent;
@ -26,12 +25,6 @@ class HomePage extends HookConsumerWidget {
if (_scrollController.offset >= endOfPage - (endOfPage * 0.1) && !_scrollController.position.outOfRange) {
ref.read(assetProvider.notifier).getOlderAsset();
}
if (_scrollController.offset >= 400) {
_showBackToTopBtn.value = true;
} else {
_showBackToTopBtn.value = false;
}
}
useEffect(() {
@ -49,18 +42,18 @@ class HomePage extends HookConsumerWidget {
// Remove and force getting new widget again if there is not many widget on screen.
// Otherwise do nothing.
if (imageGridGroup.isNotEmpty && imageGridGroup.length < 20) {
if (_imageGridGroup.isNotEmpty && _imageGridGroup.length < 20) {
ref.read(assetProvider.notifier).getOlderAsset();
} else if (imageGridGroup.isEmpty) {
} else if (_imageGridGroup.isEmpty) {
ref.read(assetProvider.notifier).getImmichAssets();
}
}
Widget _buildBody() {
if (assetGroup.isNotEmpty) {
String lastGroupDate = assetGroup[0].date;
if (_assetGroup.isNotEmpty) {
String lastGroupDate = _assetGroup[0].date;
for (var group in assetGroup) {
for (var group in _assetGroup) {
var dateTitle = group.date;
var assetGroup = group.assets;
@ -71,19 +64,19 @@ class HomePage extends HookConsumerWidget {
if (currentMonth != null && previousMonth != null) {
if ((currentMonth - previousMonth) != 0) {
imageGridGroup.add(
_imageGridGroup.add(
MonthlyTitleText(isoDate: dateTitle),
);
}
}
// Add Daily Title Group
imageGridGroup.add(
DailyTitleText(isoDate: dateTitle),
_imageGridGroup.add(
DailyTitleText(isoDate: dateTitle, assetGroup: assetGroup),
);
// Add Image Group
imageGridGroup.add(
_imageGridGroup.add(
ImageGrid(assetGroup: assetGroup),
);
//
@ -100,10 +93,10 @@ class HomePage extends HookConsumerWidget {
controller: _scrollController,
slivers: [
ImmichSliverAppBar(
imageGridGroup: imageGridGroup,
imageGridGroup: _imageGridGroup,
onPopBack: onPopBackFromBackupPage,
),
...imageGridGroup,
..._imageGridGroup,
],
),
),
@ -116,69 +109,3 @@ class HomePage extends HookConsumerWidget {
);
}
}
class MonthlyTitleText extends StatelessWidget {
const MonthlyTitleText({
Key? key,
required this.isoDate,
}) : super(key: key);
final String isoDate;
@override
Widget build(BuildContext context) {
var monthTitleText = DateFormat('MMMM, y').format(DateTime.parse(isoDate));
return SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, top: 32),
child: Text(
monthTitleText,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryColor,
),
),
),
);
}
}
class DailyTitleText extends StatelessWidget {
const DailyTitleText({
Key? key,
required this.isoDate,
}) : super(key: key);
final String isoDate;
@override
Widget build(BuildContext context) {
var currentYear = DateTime.now().year;
var groupYear = DateTime.parse(isoDate).year;
var formatDateTemplate = currentYear == groupYear ? 'E, MMM dd' : 'E, MMM dd, yyyy';
var dateText = DateFormat(formatDateTemplate).format(DateTime.parse(isoDate));
return SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(top: 24.0, bottom: 24.0, left: 3.0),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 8.0, bottom: 5.0, top: 5.0),
child: Text(
dateText,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
),
],
),
),
);
}
}