refactor(web): asset select actions (#2444)

* refactor(web): asset select actions

* remaining pages/components + data flow changes

* fix check

web/src/lib/components/photos-page/actions/create-shared-link.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+	import { SharedLinkType } from '@api';
+	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
+	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	let showModal = false;
+	const { getAssets, clearSelect } = getAssetControlContext();
+</script>
+
+<CircleIconButton title="Share" logo={ShareVariantOutline} on:click={() => (showModal = true)} />
+
+{#if showModal}
+	<CreateSharedLinkModal
+		sharedAssets={Array.from(getAssets())}
+		shareType={SharedLinkType.Individual}
+		on:close={() => {
+			showModal = false;
+			clearSelect();
+		}}
+	/>
+{/if}

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import {
+		NotificationType,
+		notificationController
+	} from '$lib/components/shared-components/notification/notification';
+	import { api } from '@api';
+	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let onAssetDelete: OnAssetDelete;
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const deleteSelectedAssetHandler = async () => {
+		try {
+			if (
+				window.confirm(
+					`Caution! Are you sure you want to delete ${
+						getAssets().size
+					} assets? This step also deletes assets in the album(s) to which they belong. You can not undo this action!`
+				)
+			) {
+				const { data: deletedAssets } = await api.assetApi.deleteAsset({
+					ids: Array.from(getAssets()).map((a) => a.id)
+				});
+
+				for (const asset of deletedAssets) {
+					if (asset.status === 'SUCCESS') {
+						onAssetDelete(asset.id);
+					}
+				}
+
+				clearSelect();
+			}
+		} catch (e) {
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error deleting assets, check console for more details'
+			});
+			console.error('Error deleteSelectedAssetHandler', e);
+		}
+	};
+</script>
+
+<CircleIconButton title="Delete" logo={DeleteOutline} on:click={deleteSelectedAssetHandler} />

web/src/lib/components/photos-page/actions/download-files.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import { bulkDownload } from '$lib/utils/asset-utils';
+	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
+	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let filename = 'immich';
+	export let sharedLinkKey: string | undefined = undefined;
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const handleDownloadFiles = async () => {
+		await bulkDownload(filename, Array.from(getAssets()), clearSelect, sharedLinkKey);
+	};
+</script>
+
+<CircleIconButton title="Download" logo={CloudDownloadOutline} on:click={handleDownloadFiles} />

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import {
+		NotificationType,
+		notificationController
+	} from '$lib/components/shared-components/notification/notification';
+	import { api } from '@api';
+	import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
+	import { OnAssetArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let onAssetArchive: OnAssetArchive = (asset, archive) => {
+		asset.isArchived = archive;
+	};
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const handleArchive = async () => {
+		let cnt = 0;
+
+		for (const asset of getAssets()) {
+			if (!asset.isArchived) {
+				api.assetApi.updateAsset(asset.id, {
+					isArchived: true
+				});
+
+				onAssetArchive(asset, true);
+				cnt = cnt + 1;
+			}
+		}
+
+		notificationController.show({
+			message: `Archived ${cnt}`,
+			type: NotificationType.Info
+		});
+
+		clearSelect();
+	};
+</script>
+
+<CircleIconButton title="Archive" logo={ArchiveArrowDownOutline} on:click={handleArchive} />

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import { handleError } from '$lib/utils/handle-error';
+	import { api } from '@api';
+	import HeartMinusOutline from 'svelte-material-icons/HeartMinusOutline.svelte';
+	import { getAssetControlContext, OnAssetFavorite } from '../asset-select-control-bar.svelte';
+
+	export let onAssetFavorite: OnAssetFavorite = (asset, favorite) => {
+		asset.isFavorite = favorite;
+	};
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const handleRemoveFavorite = async () => {
+		for (const asset of getAssets()) {
+			try {
+				await api.assetApi.updateAsset(asset.id, {
+					isFavorite: false
+				});
+				onAssetFavorite(asset, false);
+			} catch {
+				handleError(Error, 'Error updating asset favorite state');
+			}
+		}
+
+		clearSelect();
+	};
+</script>
+
+<slot {handleRemoveFavorite}>
+	<CircleIconButton
+		title="Remove Favorite"
+		logo={HeartMinusOutline}
+		on:click={handleRemoveFavorite}
+	/>
+</slot>

web/src/lib/components/photos-page/actions/remove-from-album.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import {
+		NotificationType,
+		notificationController
+	} from '$lib/components/shared-components/notification/notification';
+	import { AlbumResponseDto, api } from '@api';
+	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let album: AlbumResponseDto;
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const handleRemoveFromAlbum = async () => {
+		if (window.confirm('Do you want to remove selected assets from the album?')) {
+			try {
+				const { data } = await api.albumApi.removeAssetFromAlbum(album.id, {
+					assetIds: Array.from(getAssets()).map((a) => a.id)
+				});
+
+				album = data;
+				clearSelect();
+			} catch (e) {
+				console.error('Error [album-viewer] [removeAssetFromAlbum]', e);
+				notificationController.show({
+					type: NotificationType.Error,
+					message: 'Error removing assets from album, check console for more details'
+				});
+			}
+		}
+	};
+</script>
+
+<CircleIconButton title="Remove from album" on:click={handleRemoveFromAlbum} logo={DeleteOutline} />

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import {
+		NotificationType,
+		notificationController
+	} from '$lib/components/shared-components/notification/notification';
+	import { api } from '@api';
+	import ArchiveArrowUpOutline from 'svelte-material-icons/ArchiveArrowUpOutline.svelte';
+	import { OnAssetArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let onAssetArchive: OnAssetArchive = (asset, archived) => {
+		asset.isArchived = archived;
+	};
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const handleUnarchive = async () => {
+		let cnt = 0;
+		for (const asset of getAssets()) {
+			if (asset.isArchived) {
+				api.assetApi.updateAsset(asset.id, {
+					isArchived: false
+				});
+
+				onAssetArchive(asset, false);
+				cnt = cnt + 1;
+			}
+		}
+
+		notificationController.show({
+			message: `Removed ${cnt} from archive`,
+			type: NotificationType.Info
+		});
+
+		clearSelect();
+	};
+</script>
+
+<CircleIconButton title="Unarchive" logo={ArchiveArrowUpOutline} on:click={handleUnarchive} />

web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import { AssetResponseDto, SharedLinkResponseDto, api } from '@api';
+	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let sharedLink: SharedLinkResponseDto;
+	export let allAssets: AssetResponseDto[];
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const handleRemoveAssetsFromSharedLink = async () => {
+		if (window.confirm('Do you want to remove selected assets from the shared link?')) {
+			// TODO: Rename API method or change functionality. The assetIds passed
+			// in are kept instead of removed.
+			const assetsToKeep = allAssets.filter((a) => !getAssets().has(a));
+			await api.assetApi.removeAssetsFromSharedLink(
+				{
+					assetIds: assetsToKeep.map((a) => a.id)
+				},
+				sharedLink?.key
+			);
+
+			sharedLink.assets = assetsToKeep;
+			clearSelect();
+		}
+	};
+</script>
+
+<CircleIconButton
+	title="Remove from album"
+	on:click={handleRemoveAssetsFromSharedLink}
+	logo={DeleteOutline}
+/>