immich/web/src/lib/components/shared-components/album-selection-modal.svelte

<script lang="ts">
	import { AlbumResponseDto, api } from '@api';
	import { createEventDispatcher, onMount } from 'svelte';
	import Plus from 'svelte-material-icons/Plus.svelte';
	import BaseModal from './base-modal.svelte';
	import AlbumListItem from '../asset-viewer/album-list-item.svelte';

	let albums: AlbumResponseDto[] = [];
	let recentAlbums: AlbumResponseDto[] = [];
	let filteredAlbums: AlbumResponseDto[] = [];
	let loading = true;
	let search = '';

	const dispatch = createEventDispatcher();

	export let shared: boolean;

	onMount(async () => {
		const { data } = await api.albumApi.getAllAlbums({ shared: shared || undefined });
		albums = data;

		recentAlbums = albums
			.sort((a, b) => (new Date(a.createdAt) > new Date(b.createdAt) ? -1 : 1))
			.slice(0, 3);

		loading = false;
	});

	$: {
		if (search.length > 0 && albums.length > 0) {
			filteredAlbums = albums.filter((album) => {
				return album.albumName.toLowerCase().includes(search.toLowerCase());
			});
		} else {
			filteredAlbums = albums;
		}
	}

	const handleSelect = (album: AlbumResponseDto) => {
		dispatch('album', { album });
	};

	const handleNew = () => {
		if (shared) {
			dispatch('newAlbum', { albumName: search.length > 0 ? search : 'Untitled' });
		} else {
			dispatch('newSharedAlbum', { albumName: search.length > 0 ? search : 'Untitled' });
		}
	};
</script>

<BaseModal on:close={() => dispatch('close')}>
	<svelte:fragment slot="title">
		<span class="flex gap-2 place-items-center">
			<p class="font-medium">
				Add to {#if shared}Shared {/if} Album
			</p>
		</span>
	</svelte:fragment>

	<div class="max-h-[400px] flex flex-col mb-2">
		{#if loading}
			{#each { length: 3 } as _}
				<div class="animate-pulse flex gap-4 px-6 py-2">
					<div class="h-12 w-12 bg-slate-200 rounded-xl" />
					<div class="flex flex-col items-start justify-center gap-2">
						<span class="animate-pulse w-36 h-4 bg-slate-200" />
						<div class="flex animate-pulse gap-1">
							<span class="w-8 h-3 bg-slate-200" />
							<span class="w-20 h-3 bg-slate-200" />
						</div>
					</div>
				</div>
			{/each}
		{:else}
			<!-- svelte-ignore a11y-autofocus -->
			<input
				class="px-6 py-2 text-2xl border-b-4 bg-immich-bg border-immich-bg focus:border-immich-primary dark:bg-immich-dark-gray dark:border-immich-dark-gray dark:focus:border-immich-dark-primary"
				placeholder="Search"
				autofocus
				bind:value={search}
			/>
			<div class="overflow-y-auto immich-scrollbar">
				<button
					on:click={handleNew}
					class="w-full flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors items-center"
				>
					<div class="h-12 w-12 flex justify-center items-center">
						<Plus size="30" />
					</div>
					<p class="">
						New {#if shared}Shared {/if}Album {#if search.length > 0}<b>{search}</b>{/if}
					</p>
				</button>
				{#if filteredAlbums.length > 0}
					{#if !shared && search.length === 0}
						<p class="text-xs px-5 py-3">RECENT</p>
						{#each recentAlbums as album (album.id)}
							<AlbumListItem variant="simple" {album} on:album={() => handleSelect(album)} />
						{/each}
					{/if}

					{#if !shared}
						<p class="text-xs px-5 py-3">
							{#if search.length === 0}ALL {/if}ALBUMS
						</p>
					{/if}
					{#each filteredAlbums as album (album.id)}
						<AlbumListItem {album} searchQuery={search} on:album={() => handleSelect(album)} />
					{/each}
				{:else if albums.length > 0}
					<p class="text-sm px-5 py-1">
						It looks like you do not have any albums with this name yet.
					</p>
				{:else}
					<p class="text-sm px-5 py-1">It looks like you do not have any albums yet.</p>
				{/if}
			</div>
		{/if}
	</div>
</BaseModal>