Implemented multi select interaction (#13)

2025-11-13 04:02:35 +09:00 · 2022-02-08 11:24:49 -06:00
parent 6ad77e9434
commit 328f382f86
7 changed files with 343 additions and 124 deletions
--- a/mobile/lib/modules/home/ui/daily_title_text.dart
+++ b/mobile/lib/modules/home/ui/daily_title_text.dart
@@ -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),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/home/ui/monthly_title_text.dart
+++ b/mobile/lib/modules/home/ui/monthly_title_text.dart
@@ -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,
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/home/ui/thumbnail_image.dart
+++ b/mobile/lib/modules/home/ui/thumbnail_image.dart
@@ -1,66 +1,121 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hive_flutter/hive_flutter.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.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:immich_mobile/routing/router.dart';

-class ThumbnailImage extends HookWidget {
+class ThumbnailImage extends HookConsumerWidget {
  final ImmichAsset asset;

  const ThumbnailImage({Key? key, required this.asset}) : super(key: key);

  @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
    final cacheKey = useState(1);

    var box = Hive.box(userInfoBox);
    var thumbnailRequestUrl =
        '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=true';
+
+    var selectedAsset = ref.watch(homePageStateProvider).selectedItems;
+    var isMultiSelectEnable = ref.watch(homePageStateProvider).isMultiSelectEnable;
+
+    Widget _buildSelectionIcon(ImmichAsset asset) {
+      if (selectedAsset.contains(asset)) {
+        return Icon(
+          Icons.check_circle,
+          color: Theme.of(context).primaryColor,
+        );
+      } else {
+        return const Icon(
+          Icons.circle_outlined,
+          color: Colors.white,
+        );
+      }
+    }
+
    return GestureDetector(
      onTap: () {
-        if (asset.type == 'IMAGE') {
-          AutoRouter.of(context).push(
-            ImageViewerRoute(
-              imageUrl:
-                  '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false',
-              heroTag: asset.id,
-              thumbnailUrl: thumbnailRequestUrl,
-            ),
-          );
+        if (isMultiSelectEnable && selectedAsset.contains(asset) && selectedAsset.length == 1) {
+          ref.watch(homePageStateProvider.notifier).disableMultiSelect();
+        } else if (isMultiSelectEnable && selectedAsset.contains(asset) && selectedAsset.length > 1) {
+          ref.watch(homePageStateProvider.notifier).removeSingleSelectedItem(asset);
+        } else if (isMultiSelectEnable && !selectedAsset.contains(asset)) {
+          ref.watch(homePageStateProvider.notifier).addSingleSelectedItem(asset);
        } else {
-          debugPrint("Navigate to video player");
+          if (asset.type == 'IMAGE') {
+            AutoRouter.of(context).push(
+              ImageViewerRoute(
+                imageUrl:
+                    '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false',
+                heroTag: asset.id,
+                thumbnailUrl: thumbnailRequestUrl,
+              ),
+            );
+          } else {
+            debugPrint("Navigate to video player");

-          AutoRouter.of(context).push(
-            VideoViewerRoute(
-              videoUrl: '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}',
-            ),
-          );
+            AutoRouter.of(context).push(
+              VideoViewerRoute(
+                videoUrl: '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}',
+              ),
+            );
+          }
        }
      },
-      onLongPress: () {},
+      onLongPress: () {
+        // Enable multi selecte function
+        ref.watch(homePageStateProvider.notifier).enableMultiSelect({asset});
+        HapticFeedback.heavyImpact();
+      },
      child: Hero(
        tag: asset.id,
-        child: CachedNetworkImage(
-          cacheKey: "${asset.id}-${cacheKey.value}",
-          width: 300,
-          height: 300,
-          memCacheHeight: asset.type == 'IMAGE' ? 250 : 400,
-          fit: BoxFit.cover,
-          imageUrl: thumbnailRequestUrl,
-          httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
-          fadeInDuration: const Duration(milliseconds: 250),
-          progressIndicatorBuilder: (context, url, downloadProgress) => Transform.scale(
-            scale: 0.2,
-            child: CircularProgressIndicator(value: downloadProgress.progress),
-          ),
-          errorWidget: (context, url, error) {
-            debugPrint("Error Loading Thumbnail Widget $error");
-            cacheKey.value += 1;
-            return const Icon(Icons.error);
-          },
+        child: Stack(
+          children: [
+            Container(
+              decoration: BoxDecoration(
+                border: isMultiSelectEnable && selectedAsset.contains(asset)
+                    ? Border.all(color: Theme.of(context).primaryColorLight, width: 10)
+                    : const Border(),
+              ),
+              child: CachedNetworkImage(
+                cacheKey: "${asset.id}-${cacheKey.value}",
+                width: 300,
+                height: 300,
+                memCacheHeight: asset.type == 'IMAGE' ? 250 : 400,
+                fit: BoxFit.cover,
+                imageUrl: thumbnailRequestUrl,
+                httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+                fadeInDuration: const Duration(milliseconds: 250),
+                progressIndicatorBuilder: (context, url, downloadProgress) => Transform.scale(
+                  scale: 0.2,
+                  child: CircularProgressIndicator(value: downloadProgress.progress),
+                ),
+                errorWidget: (context, url, error) {
+                  debugPrint("Error Loading Thumbnail Widget $error");
+                  cacheKey.value += 1;
+                  return const Icon(Icons.error);
+                },
+              ),
+            ),
+            Container(
+              child: isMultiSelectEnable
+                  ? Padding(
+                      padding: const EdgeInsets.all(3.0),
+                      child: Align(
+                        alignment: Alignment.topLeft,
+                        child: _buildSelectionIcon(asset),
+                      ),
+                    )
+                  : Container(),
+            ),
+          ],
        ),
      ),
    );