helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(web) Add search functionality to add photo to album modal (#1273)

Browse source
This commit is contained in:
Krisjanis Lejejs 2023-01-09 22:24:07 +02:00 • committed by GitHub
parent 10789503c1
commit e4e040f14b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 74 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

75
web/src/lib/components/shared-components/album-selection-modal.svelte
View file

@ -7,7 +7,9 @@
let albums: AlbumResponseDto[] = [];
let recentAlbums: AlbumResponseDto[] = [];
let filteredAlbums: AlbumResponseDto[] = [];
let loading = true;
let search = '';
const dispatch = createEventDispatcher();
@ -32,15 +34,25 @@
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');
dispatch('newAlbum', { albumName: search.length > 0 ? search : 'Untitled' });
} else {
dispatch('newSharedAlbum');
dispatch('newSharedAlbum', { albumName: search.length > 0 ? search : 'Untitled' });
}
};
</script>
@ -54,35 +66,42 @@
</span>
</svelte:fragment>
<div class=" max-h-[400px] overflow-y-auto immich-scrollba pb-10">
<div class="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 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>
{/each}
{:else}
</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="flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors items-center"
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
New {#if shared}Shared {/if}Album {#if search.length > 0}<b>{search}</b>{/if}
</p>
</button>
{#if albums.length > 0}
{#if !shared}
{#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)} />
@ -90,15 +109,21 @@
{/if}
{#if !shared}
<p class="text-xs px-5 py-3">ALL ALBUMS</p>
<p class="text-xs px-5 py-3">
{#if search.length === 0}ALL {/if}ALBUMS
</p>
{/if}
{#each albums as album (album.id)}
<AlbumListItem {album} on:album={() => handleSelect(album)} />
{#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}
{/if}
</div>
</div>
{/if}
</div>
</BaseModal>