From 9de557916be23b686439092bd25a277eecee3ea5 Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Mon, 1 Jan 2024 17:18:22 +0100
Subject: [PATCH] fix(web): cancel select all (#6047)

* fix: cancel select all

* rename var
---
 .../photos-page/actions/select-all-assets.svelte          | 6 +++++-
 .../components/shared-components/control-app-bar.svelte   | 8 +++++++-
 web/src/lib/stores/assets.store.ts                        | 2 ++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/photos-page/actions/select-all-assets.svelte b/web/src/lib/components/photos-page/actions/select-all-assets.svelte
index f06f499a2a..1cd3e0abab 100644
--- a/web/src/lib/components/photos-page/actions/select-all-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/select-all-assets.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
-  import { BucketPosition, type AssetStore } from '$lib/stores/assets.store';
+  import { BucketPosition, type AssetStore, isSelectAllCancelled } from '$lib/stores/assets.store';
   import { handleError } from '$lib/utils/handle-error';
   import { get } from 'svelte/store';
   import { mdiTimerSand, mdiSelectAll } from '@mdi/js';
@@ -13,10 +13,14 @@
 
   const handleSelectAll = async () => {
     try {
+      $isSelectAllCancelled = false;
       selecting = true;
 
       const assetGridState = get(assetStore);
       for (const bucket of assetGridState.buckets) {
+        if ($isSelectAllCancelled) {
+          break;
+        }
         await assetStore.loadBucket(bucket.bucketDate, BucketPosition.Unknown);
         for (const asset of bucket.assets) {
           assetInteractionStore.selectAsset(asset);
diff --git a/web/src/lib/components/shared-components/control-app-bar.svelte b/web/src/lib/components/shared-components/control-app-bar.svelte
index 967b217170..e8d56b742c 100644
--- a/web/src/lib/components/shared-components/control-app-bar.svelte
+++ b/web/src/lib/components/shared-components/control-app-bar.svelte
@@ -5,6 +5,7 @@
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import { fly } from 'svelte/transition';
   import { mdiClose } from '@mdi/js';
+  import { isSelectAllCancelled } from '$lib/stores/assets.store';
 
   export let showBackButton = true;
   export let backIcon = mdiClose;
@@ -29,6 +30,11 @@
     }
   };
 
+  const handleClose = () => {
+    $isSelectAllCancelled = true;
+    dispatch('close');
+  };
+
   onMount(() => {
     if (browser) {
       document.addEventListener('scroll', onScroll);
@@ -52,7 +58,7 @@
     <div class="flex place-items-center gap-6 justify-self-start dark:text-immich-dark-fg">
       {#if showBackButton}
         <CircleIconButton
-          on:click={() => dispatch('close')}
+          on:click={handleClose}
           icon={backIcon}
           backgroundColor={'transparent'}
           hoverColor={'#e2e7e9'}
diff --git a/web/src/lib/stores/assets.store.ts b/web/src/lib/stores/assets.store.ts
index 7b1ff8f7a1..d0d0e7d7da 100644
--- a/web/src/lib/stores/assets.store.ts
+++ b/web/src/lib/stores/assets.store.ts
@@ -438,3 +438,5 @@ export class AssetStore {
     this.store$.update(() => this);
   }
 }
+
+export const isSelectAllCancelled = writable(false);