restore: bulk actions (#3730)

* feat: improve bulk isArchive and isFavorite updates

* chore: open api

web/src/api/open-api/api.ts

@@ -344,6 +344,31 @@ export interface AllJobStatusResponseDto {
      */
     'videoConversion': JobStatusDto;
 }
+/**
+ * 
+ * @export
+ * @interface AssetBulkUpdateDto
+ */
+export interface AssetBulkUpdateDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof AssetBulkUpdateDto
+     */
+    'ids': Array<string>;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetBulkUpdateDto
+     */
+    'isArchived'?: boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AssetBulkUpdateDto
+     */
+    'isFavorite'?: boolean;
+}
 /**
  * 
  * @export
@@ -5871,6 +5896,50 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
                 options: localVarRequestOptions,
             };
         },
+        /**
+         * 
+         * @param {AssetBulkUpdateDto} assetBulkUpdateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateAssets: async (assetBulkUpdateDto: AssetBulkUpdateDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'assetBulkUpdateDto' is not null or undefined
+            assertParamExists('updateAssets', 'assetBulkUpdateDto', assetBulkUpdateDto)
+            const localVarPath = `/asset`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(assetBulkUpdateDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
         /**
          * 
          * @param {File} assetData 
@@ -6259,6 +6328,16 @@ export const AssetApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.updateAsset(id, updateAssetDto, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
+        /**
+         * 
+         * @param {AssetBulkUpdateDto} assetBulkUpdateDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateAssets(assetBulkUpdateDto: AssetBulkUpdateDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateAssets(assetBulkUpdateDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
         /**
          * 
          * @param {File} assetData 
@@ -6495,6 +6574,15 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
         updateAsset(requestParameters: AssetApiUpdateAssetRequest, options?: AxiosRequestConfig): AxiosPromise<AssetResponseDto> {
             return localVarFp.updateAsset(requestParameters.id, requestParameters.updateAssetDto, options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @param {AssetApiUpdateAssetsRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateAssets(requestParameters: AssetApiUpdateAssetsRequest, options?: AxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.updateAssets(requestParameters.assetBulkUpdateDto, options).then((request) => request(axios, basePath));
+        },
         /**
          * 
          * @param {AssetApiUploadFileRequest} requestParameters Request parameters.
@@ -7011,6 +7099,20 @@ export interface AssetApiUpdateAssetRequest {
     readonly updateAssetDto: UpdateAssetDto
 }
 
+/**
+ * Request parameters for updateAssets operation in AssetApi.
+ * @export
+ * @interface AssetApiUpdateAssetsRequest
+ */
+export interface AssetApiUpdateAssetsRequest {
+    /**
+     * 
+     * @type {AssetBulkUpdateDto}
+     * @memberof AssetApiUpdateAssets
+     */
+    readonly assetBulkUpdateDto: AssetBulkUpdateDto
+}
+
 /**
  * Request parameters for uploadFile operation in AssetApi.
  * @export
@@ -7366,6 +7468,17 @@ export class AssetApi extends BaseAPI {
         return AssetApiFp(this.configuration).updateAsset(requestParameters.id, requestParameters.updateAssetDto, options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * 
+     * @param {AssetApiUpdateAssetsRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public updateAssets(requestParameters: AssetApiUpdateAssetsRequest, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).updateAssets(requestParameters.assetBulkUpdateDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * 
      * @param {AssetApiUploadFileRequest} requestParameters Request parameters.

web/src/lib/components/photos-page/actions/archive-action.svelte

@@ -4,15 +4,15 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
   import { api } from '@api';
   import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
   import ArchiveArrowUpOutline from 'svelte-material-icons/ArchiveArrowUpOutline.svelte';
+  import TimerSand from 'svelte-material-icons/TimerSand.svelte';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { OnAssetArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { OnArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
 
-  export let onAssetArchive: OnAssetArchive = (asset, isArchived) => {
-    asset.isArchived = isArchived;
-  };
+  export let onArchive: OnArchive | undefined = undefined;
 
   export let menuItem = false;
   export let unarchive = false;
@@ -20,32 +20,50 @@
   $: text = unarchive ? 'Unarchive' : 'Archive';
   $: logo = unarchive ? ArchiveArrowUpOutline : ArchiveArrowDownOutline;
 
+  let loading = false;
+
   const { getAssets, clearSelect } = getAssetControlContext();
 
   const handleArchive = async () => {
     const isArchived = !unarchive;
-    let cnt = 0;
+    loading = true;
 
-    for (const asset of getAssets()) {
-      if (asset.isArchived !== isArchived) {
-        api.assetApi.updateAsset({ id: asset.id, updateAssetDto: { isArchived } });
+    try {
+      const assets = Array.from(getAssets()).filter((asset) => asset.isArchived !== isArchived);
+      const ids = assets.map(({ id }) => id);
 
-        onAssetArchive(asset, isArchived);
-        cnt = cnt + 1;
+      if (ids.length > 0) {
+        await api.assetApi.updateAssets({ assetBulkUpdateDto: { ids, isArchived } });
       }
+
+      for (const asset of assets) {
+        asset.isArchived = isArchived;
+      }
+
+      onArchive?.(ids, isArchived);
+
+      notificationController.show({
+        message: `${isArchived ? 'Archived' : 'Unarchived'} ${ids.length}`,
+        type: NotificationType.Info,
+      });
+
+      clearSelect();
+    } catch (error) {
+      handleError(error, `Unable to ${isArchived ? 'archive' : 'unarchive'}`);
+    } finally {
+      loading = false;
     }
-
-    notificationController.show({
-      message: `${isArchived ? 'Archived' : 'Unarchived'} ${cnt}`,
-      type: NotificationType.Info,
-    });
-
-    clearSelect();
   };
 </script>
 
 {#if menuItem}
   <MenuOption {text} on:click={handleArchive} />
-{:else}
-  <CircleIconButton title={text} {logo} on:click={handleArchive} />
+{/if}
+
+{#if !menuItem}
+  {#if loading}
+    <CircleIconButton title="Loading" logo={TimerSand} />
+  {:else}
+    <CircleIconButton title={text} {logo} on:click={handleArchive} />
+  {/if}
 {/if}

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
   import { api } from '@api';
   import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-  import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-  import { handleError } from '../../../utils/handle-error';
+  import TimerSand from 'svelte-material-icons/TimerSand.svelte';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   export let onAssetDelete: OnAssetDelete;
   export let menuItem = false;
   const { getAssets, clearSelect } = getAssetControlContext();
 
   let isShowConfirmation = false;
+  let loading = false;
 
   const handleDelete = async () => {
+    loading = true;
+
     try {
       let count = 0;
 
@@ -44,14 +48,21 @@
       handleError(e, 'Error deleting assets');
     } finally {
       isShowConfirmation = false;
+      loading = false;
     }
   };
 </script>
 
 {#if menuItem}
   <MenuOption text="Delete" on:click={() => (isShowConfirmation = true)} />
-{:else}
-  <CircleIconButton title="Delete" logo={DeleteOutline} on:click={() => (isShowConfirmation = true)} />
+{/if}
+
+{#if !menuItem}
+  {#if loading}
+    <CircleIconButton title="Loading" logo={TimerSand} />
+  {:else}
+    <CircleIconButton title="Delete" logo={DeleteOutline} on:click={() => (isShowConfirmation = true)} />
+  {/if}
 {/if}
 
 {#if isShowConfirmation}

web/src/lib/components/photos-page/actions/favorite-action.svelte

@@ -5,14 +5,14 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
   import { api } from '@api';
   import HeartMinusOutline from 'svelte-material-icons/HeartMinusOutline.svelte';
   import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
-  import { OnAssetFavorite, getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import TimerSand from 'svelte-material-icons/TimerSand.svelte';
+  import { OnFavorite, getAssetControlContext } from '../asset-select-control-bar.svelte';
 
-  export let onAssetFavorite: OnAssetFavorite = (asset, isFavorite) => {
-    asset.isFavorite = isFavorite;
-  };
+  export let onFavorite: OnFavorite | undefined = undefined;
 
   export let menuItem = false;
   export let removeFavorite: boolean;
@@ -20,31 +20,50 @@
   $: text = removeFavorite ? 'Remove from Favorites' : 'Favorite';
   $: logo = removeFavorite ? HeartMinusOutline : HeartOutline;
 
+  let loading = false;
+
   const { getAssets, clearSelect } = getAssetControlContext();
 
-  const handleFavorite = () => {
+  const handleFavorite = async () => {
     const isFavorite = !removeFavorite;
+    loading = true;
 
-    let cnt = 0;
-    for (const asset of getAssets()) {
-      if (asset.isFavorite !== isFavorite) {
-        api.assetApi.updateAsset({ id: asset.id, updateAssetDto: { isFavorite } });
-        onAssetFavorite(asset, isFavorite);
-        cnt = cnt + 1;
+    try {
+      const assets = Array.from(getAssets()).filter((asset) => asset.isFavorite !== isFavorite);
+      const ids = assets.map(({ id }) => id);
+
+      if (ids.length > 0) {
+        await api.assetApi.updateAssets({ assetBulkUpdateDto: { ids, isFavorite } });
       }
+
+      for (const asset of assets) {
+        asset.isFavorite = isFavorite;
+      }
+
+      onFavorite?.(ids, isFavorite);
+
+      notificationController.show({
+        message: isFavorite ? `Added ${ids.length} to favorites` : `Removed ${ids.length} from favorites`,
+        type: NotificationType.Info,
+      });
+
+      clearSelect();
+    } catch (error) {
+      handleError(error, `Unable to ${isFavorite ? 'add to' : 'remove from'} favorites`);
+    } finally {
+      loading = false;
     }
-
-    notificationController.show({
-      message: isFavorite ? `Added ${cnt} to favorites` : `Removed ${cnt} from favorites`,
-      type: NotificationType.Info,
-    });
-
-    clearSelect();
   };
 </script>
 
 {#if menuItem}
   <MenuOption {text} on:click={handleFavorite} />
-{:else}
-  <CircleIconButton title={text} {logo} on:click={handleFavorite} />
+{/if}
+
+{#if !menuItem}
+  {#if loading}
+    <CircleIconButton title="Loading" logo={TimerSand} />
+  {:else}
+    <CircleIconButton title={text} {logo} on:click={handleFavorite} />
+  {/if}
 {/if}

web/src/lib/components/photos-page/asset-select-control-bar.svelte

@@ -2,8 +2,8 @@
   import { createContext } from '$lib/utils/context';
 
   export type OnAssetDelete = (assetId: string) => void;
-  export type OnAssetArchive = (asset: AssetResponseDto, archived: boolean) => void;
-  export type OnAssetFavorite = (asset: AssetResponseDto, favorite: boolean) => void;
+  export type OnArchive = (ids: string[], isArchived: boolean) => void;
+  export type OnFavorite = (ids: string[], favorite: boolean) => void;
 
   export interface AssetControlContext {
     // Wrap assets in a function, because context isn't reactive.

web/src/lib/stores/assets.store.ts

@@ -180,12 +180,19 @@ export class AssetStore {
     this.emit(false);
   }
 
-  removeAsset(assetId: string) {
+  removeAssets(ids: string[]) {
+    // TODO: this could probably be more efficient
+    for (const id of ids) {
+      this.removeAsset(id);
+    }
+  }
+
+  removeAsset(id: string) {
     for (let i = 0; i < this.buckets.length; i++) {
       const bucket = this.buckets[i];
       for (let j = 0; j < bucket.assets.length; j++) {
         const asset = bucket.assets[j];
-        if (asset.id !== assetId) {
+        if (asset.id !== id) {
           continue;
         }
 

web/src/routes/(user)/archive/+page.svelte

@@ -37,7 +37,7 @@
 
 {#if $isMultiSelectState}
   <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
-    <ArchiveAction unarchive onAssetArchive={(asset) => assetStore.removeAsset(asset.id)} />
+    <ArchiveAction unarchive onArchive={(ids) => assetStore.removeAssets(ids)} />
     <CreateSharedLink />
     <SelectAllAssets {assetStore} {assetInteractionStore} />
     <AssetSelectContextMenu icon={Plus} title="Add">

web/src/routes/(user)/favorites/+page.svelte

@@ -38,7 +38,7 @@
 <!-- Multiselection mode app bar -->
 {#if $isMultiSelectState}
   <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
-    <FavoriteAction removeFavorite onAssetFavorite={(asset) => assetStore.removeAsset(asset.id)} />
+    <FavoriteAction removeFavorite onFavorite={(ids) => assetStore.removeAssets(ids)} />
     <CreateSharedLink />
     <SelectAllAssets {assetStore} {assetInteractionStore} />
     <AssetSelectContextMenu icon={Plus} title="Add">

web/src/routes/(user)/people/[personId]/+page.svelte

@@ -202,11 +202,7 @@
       <AssetSelectContextMenu icon={DotsVertical} title="Add">
         <DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
         <FavoriteAction menuItem removeFavorite={isAllFavorite} />
-        <ArchiveAction
-          menuItem
-          unarchive={isAllArchive}
-          onAssetArchive={(asset) => $assetStore.removeAsset(asset.id)}
-        />
+        <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => $assetStore.removeAssets(ids)} />
       </AssetSelectContextMenu>
     </AssetSelectControlBar>
   {:else}

web/src/routes/(user)/photos/+page.svelte

@@ -51,7 +51,7 @@
         <AssetSelectContextMenu icon={DotsVertical} title="Menu">
           <FavoriteAction menuItem removeFavorite={isAllFavorite} />
           <DownloadAction menuItem />
-          <ArchiveAction menuItem onAssetArchive={(asset) => assetStore.removeAsset(asset.id)} />
+          <ArchiveAction menuItem onArchive={(ids) => assetStore.removeAssets(ids)} />
         </AssetSelectContextMenu>
       </AssetSelectControlBar>
     {/if}