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

<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';
	import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
	import { handleError } from '../../../utils/handle-error';

	export let onAssetDelete: OnAssetDelete;
	const { getAssets, clearSelect } = getAssetControlContext();

	let isShowConfirmation = false;

	const handleDelete = async () => {
		try {
			let count = 0;

			const { data: deletedAssets } = await api.assetApi.deleteAsset({
				deleteAssetDto: {
					ids: Array.from(getAssets()).map((a) => a.id)
				}
			});

			for (const asset of deletedAssets) {
				if (asset.status === 'SUCCESS') {
					onAssetDelete(asset.id);
					count++;
				}
			}

			notificationController.show({
				message: `Deleted ${count}`,
				type: NotificationType.Info
			});

			clearSelect();
		} catch (e) {
			handleError(e, 'Error deleting assets');
		} finally {
			isShowConfirmation = false;
		}
	};
</script>

<CircleIconButton
	title="Delete"
	logo={DeleteOutline}
	on:click={() => (isShowConfirmation = true)}
/>

{#if isShowConfirmation}
	<ConfirmDialogue
		title="Delete Asset{getAssets().size > 1 ? 's' : ''}"
		confirmText="Delete"
		on:confirm={handleDelete}
		on:cancel={() => (isShowConfirmation = false)}
	>
		<svelte:fragment slot="prompt">
			<p>
				Are you sure you want to delete
				{#if getAssets().size > 1}
					these <b>{getAssets().size}</b> assets? This will also remove them from their album(s).
				{:else}
					this asset? This will also remove it from its album(s).
				{/if}
			</p>
			<p><b>You cannot undo this action!</b></p>
		</svelte:fragment>
	</ConfirmDialogue>
{/if}