mirror of https://github.com/immich-app/immich.git
Implemented multi select interaction (#13)
Alex
GitHub
parent
6ad77e9434
commit
328f382f86
@ -0,0 +1,66 @@
|
||||
import 'dart:convert';
|
||||
|
||||
import 'package:collection/collection.dart';
|
||||
|
||||
import 'package:immich_mobile/shared/models/immich_asset.model.dart';
|
||||
|
||||
class HomePageState {
|
||||
final bool isMultiSelectEnable;
|
||||
final Set<ImmichAsset> selectedItems;
|
||||
final Set<String> selectedDateGroup;
|
||||
HomePageState({
|
||||
required this.isMultiSelectEnable,
|
||||
required this.selectedItems,
|
||||
required this.selectedDateGroup,
|
||||
});
|
||||
|
||||
HomePageState copyWith({
|
||||
bool? isMultiSelectEnable,
|
||||
Set<ImmichAsset>? selectedItems,
|
||||
Set<String>? selectedDateGroup,
|
||||
}) {
|
||||
return HomePageState(
|
||||
isMultiSelectEnable: isMultiSelectEnable ?? this.isMultiSelectEnable,
|
||||
selectedItems: selectedItems ?? this.selectedItems,
|
||||
selectedDateGroup: selectedDateGroup ?? this.selectedDateGroup,
|
||||
);
|
||||
}
|
||||
|
||||
Map<String, dynamic> toMap() {
|
||||
return {
|
||||
'isMultiSelectEnable': isMultiSelectEnable,
|
||||
'selectedItems': selectedItems.map((x) => x.toMap()).toList(),
|
||||
'selectedDateGroup': selectedDateGroup.toList(),
|
||||
};
|
||||
}
|
||||
|
||||
factory HomePageState.fromMap(Map<String, dynamic> map) {
|
||||
return HomePageState(
|
||||
isMultiSelectEnable: map['isMultiSelectEnable'] ?? false,
|
||||
selectedItems: Set<ImmichAsset>.from(map['selectedItems']?.map((x) => ImmichAsset.fromMap(x))),
|
||||
selectedDateGroup: Set<String>.from(map['selectedDateGroup']),
|
||||
);
|
||||
}
|
||||
|
||||
String toJson() => json.encode(toMap());
|
||||
|
||||
factory HomePageState.fromJson(String source) => HomePageState.fromMap(json.decode(source));
|
||||
|
||||
@override
|
||||
String toString() =>
|
||||
'HomePageState(isMultiSelectEnable: $isMultiSelectEnable, selectedItems: $selectedItems, selectedDateGroup: $selectedDateGroup)';
|
||||
|
||||
@override
|
||||
bool operator ==(Object other) {
|
||||
if (identical(this, other)) return true;
|
||||
final setEquals = const DeepCollectionEquality().equals;
|
||||
|
||||
return other is HomePageState &&
|
||||
other.isMultiSelectEnable == isMultiSelectEnable &&
|
||||
setEquals(other.selectedItems, selectedItems) &&
|
||||
setEquals(other.selectedDateGroup, selectedDateGroup);
|
||||
}
|
||||
|
||||
@override
|
||||
int get hashCode => isMultiSelectEnable.hashCode ^ selectedItems.hashCode ^ selectedDateGroup.hashCode;
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
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: {},
|
||||
selectedDateGroup: {},
|
||||
),
|
||||
);
|
||||
|
||||
void addSelectedDateGroup(String dateGroupTitle) {
|
||||
state = state.copyWith(selectedDateGroup: {...state.selectedDateGroup, dateGroupTitle});
|
||||
}
|
||||
|
||||
void removeSelectedDateGroup(String dateGroupTitle) {
|
||||
var currentDateGroup = state.selectedDateGroup;
|
||||
|
||||
currentDateGroup.removeWhere((e) => e == dateGroupTitle);
|
||||
|
||||
state = state.copyWith(selectedDateGroup: currentDateGroup);
|
||||
}
|
||||
|
||||
void enableMultiSelect(Set<ImmichAsset> selectedItems) {
|
||||
state = state.copyWith(isMultiSelectEnable: true, selectedItems: selectedItems);
|
||||
}
|
||||
|
||||
void disableMultiSelect() {
|
||||
state = state.copyWith(isMultiSelectEnable: false, selectedItems: {}, selectedDateGroup: {});
|
||||
}
|
||||
|
||||
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) {
|
||||
Set<ImmichAsset> currentList = state.selectedItems;
|
||||
|
||||
currentList.removeWhere((e) => e.id == asset.id);
|
||||
|
||||
state = state.copyWith(selectedItems: currentList);
|
||||
}
|
||||
|
||||
void removeMultipleSelectedItem(List<ImmichAsset> assets) {
|
||||
Set<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()));
|
||||
@ -0,0 +1,75 @@
|
||||
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;
|
||||
var selectedDateGroup = ref.watch(homePageStateProvider).selectedDateGroup;
|
||||
var selectedItems = ref.watch(homePageStateProvider).selectedItems;
|
||||
|
||||
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 &&
|
||||
selectedDateGroup.contains(dateText) &&
|
||||
selectedDateGroup.length == 1 &&
|
||||
selectedItems.length == assetGroup.length) {
|
||||
ref.watch(homePageStateProvider.notifier).disableMultiSelect();
|
||||
} else if (isMultiSelectEnable &&
|
||||
selectedDateGroup.contains(dateText) &&
|
||||
selectedItems.length != assetGroup.length) {
|
||||
ref.watch(homePageStateProvider.notifier).removeSelectedDateGroup(dateText);
|
||||
ref.watch(homePageStateProvider.notifier).removeMultipleSelectedItem(assetGroup);
|
||||
} else if (isMultiSelectEnable &&
|
||||
selectedDateGroup.contains(dateText) &&
|
||||
selectedDateGroup.length > 1) {
|
||||
ref.watch(homePageStateProvider.notifier).removeSelectedDateGroup(dateText);
|
||||
ref.watch(homePageStateProvider.notifier).removeMultipleSelectedItem(assetGroup);
|
||||
} else if (isMultiSelectEnable && !selectedDateGroup.contains(dateText)) {
|
||||
ref.watch(homePageStateProvider.notifier).addSelectedDateGroup(dateText);
|
||||
ref.watch(homePageStateProvider.notifier).addMultipleSelectedItems(assetGroup);
|
||||
} else {
|
||||
ref.watch(homePageStateProvider.notifier).enableMultiSelect(assetGroup.toSet());
|
||||
ref.watch(homePageStateProvider.notifier).addSelectedDateGroup(dateText);
|
||||
}
|
||||
},
|
||||
child: isMultiSelectEnable && selectedDateGroup.contains(dateText)
|
||||
? const Icon(Icons.check_circle_rounded)
|
||||
: const Icon(Icons.check_circle_outline_rounded),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue