mirror of
https://github.com/immich-app/immich.git
synced 2024-12-29 11:24:37 +02:00
feat(web) Add search functionality to add photo to album modal (#1273)
This commit is contained in:
Krisjanis Lejejs
GitHub
parent
10789503c1
commit
e4e040f14b
@ -6,11 +6,26 @@
|
||||
|
||||
export let album: AlbumResponseDto;
|
||||
export let variant: 'simple' | 'full' = 'full';
|
||||
export let searchQuery: string = '';
|
||||
let albumNameArray: string[] = ['', '', ''];
|
||||
|
||||
// This part of the code is responsible for splitting album name into 3 parts where part 2 is the search query
|
||||
// It is used to highlight the search query in the album name
|
||||
$: {
|
||||
let { albumName } = album;
|
||||
let findIndex = albumName.toLowerCase().indexOf(searchQuery.toLowerCase());
|
||||
let findLength = searchQuery.length;
|
||||
albumNameArray = [
|
||||
albumName.slice(0, findIndex),
|
||||
albumName.slice(findIndex, findIndex + findLength),
|
||||
albumName.slice(findIndex + findLength)
|
||||
];
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
on:click={() => dispatcher('album')}
|
||||
class="flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
|
||||
class="w-full flex gap-4 px-6 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<div class="h-12 w-12">
|
||||
<img
|
||||
@ -21,7 +36,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="h-12 flex flex-col items-start justify-center">
|
||||
<span>{album.albumName}</span>
|
||||
<span>{albumNameArray[0]}<b>{albumNameArray[1]}</b>{albumNameArray[2]}</span>
|
||||
<span class="flex gap-1 text-sm">
|
||||
{#if variant === 'simple'}
|
||||
<span
|
||||
|
||||
@ -210,9 +210,11 @@
|
||||
addToSharedAlbum = shared;
|
||||
};
|
||||
|
||||
const handleAddToNewAlbum = () => {
|
||||
const handleAddToNewAlbum = (event: CustomEvent) => {
|
||||
isShowAlbumPicker = false;
|
||||
api.albumApi.createAlbum({ albumName: 'Untitled', assetIds: [asset.id] }).then((response) => {
|
||||
|
||||
const { albumName }: { albumName: string } = event.detail;
|
||||
api.albumApi.createAlbum({ albumName, assetIds: [asset.id] }).then((response) => {
|
||||
const album = response.data;
|
||||
goto('/albums/' + album.id);
|
||||
});
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -79,11 +79,12 @@
|
||||
addToSharedAlbum = shared;
|
||||
};
|
||||
|
||||
const handleAddToNewAlbum = () => {
|
||||
const handleAddToNewAlbum = (event: CustomEvent) => {
|
||||
isShowAlbumPicker = false;
|
||||
|
||||
const { albumName }: { albumName: string } = event.detail;
|
||||
const assetIds = Array.from($selectedAssets).map((asset) => asset.id);
|
||||
api.albumApi.createAlbum({ albumName: 'Untitled', assetIds }).then((response) => {
|
||||
api.albumApi.createAlbum({ albumName, assetIds }).then((response) => {
|
||||
const { id, albumName } = response.data;
|
||||
|
||||
notificationController.show({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user