immich/web/src/lib/components/photos-page/actions/add-to-album.svelte

<script lang="ts">
  import { goto } from '$app/navigation';
  import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
  import {
    NotificationType,
    notificationController,
  } from '$lib/components/shared-components/notification/notification';
  import { AppRoute } from '$lib/constants';
  import { addAssetsToAlbum } from '$lib/utils/asset-utils';
  import { createAlbum, type AlbumResponseDto } from '@immich/sdk';
  import { getMenuContext } from '../asset-select-context-menu.svelte';
  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
  import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';

  export let shared = false;
  let showAlbumPicker = false;

  const { getAssets, clearSelect } = getAssetControlContext();
  const closeMenu = getMenuContext();

  const handleHideAlbumPicker = () => {
    showAlbumPicker = false;
    closeMenu();
  };

  const handleAddToNewAlbum = (albumName: string) => {
    showAlbumPicker = false;

    const assetIds = [...getAssets()].map((asset) => asset.id);
    createAlbum({ createAlbumDto: { albumName, assetIds } })
      .then(async (response) => {
        const { id, albumName } = response;

        notificationController.show({
          message: `Added ${assetIds.length} to ${albumName}`,
          type: NotificationType.Info,
        });

        clearSelect();

        await goto(`${AppRoute.ALBUMS}/${id}`);
      })
      .catch((error) => {
        console.error(`[add-to-album.svelte]:handleAddToNewAlbum ${error}`, error);
      });
  };

  const handleAddToAlbum = async (album: AlbumResponseDto) => {
    showAlbumPicker = false;
    const assetIds = [...getAssets()].map((asset) => asset.id);
    await addAssetsToAlbum(album.id, assetIds);
    clearSelect();
  };
</script>

<MenuOption
  on:click={() => (showAlbumPicker = true)}
  text={shared ? 'Add to shared album' : 'Add to album'}
  icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
/>

{#if showAlbumPicker}
  <AlbumSelectionModal
    {shared}
    on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
    on:album={({ detail }) => handleAddToAlbum(detail)}
    on:close={handleHideAlbumPicker}
  />
{/if}