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

feat(web): search albums (#7322)

Browse source 
* feat: search albums

* pr feedback

* fix: comparison

* pr feedback

* simplify

* chore: more compact album padding

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
martin 2024-02-22 15:04:43 +01:00 • committed by GitHub
parent e3cccba78c
commit 75947ab6c2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 26 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web/src/lib/components/faces-page/people-list.svelte
View file

@ -5,7 +5,7 @@
import { searchPerson, type PersonResponseDto } from '@immich/sdk';
import { createEventDispatcher } from 'svelte';
import FaceThumbnail from './face-thumbnail.svelte';
import SearchBar from './search-bar.svelte';
import SearchBar from '../elements/search-bar.svelte';
export let screenHeight: number;
export let people: PersonResponseDto[];
@ -55,7 +55,8 @@
<div class=" w-40 sm:w-48 md:w-96 h-14 mb-8">
<SearchBar
bind:name
{isSearchingPeople}
isSearching={isSearchingPeople}
placeholder="Search people"
on:reset={() => {
people = peopleCopy;
}}

44
web/src/lib/components/faces-page/search-bar.svelte
View file

@ -1,44 +0,0 @@
<script lang="ts">
import { mdiClose, mdiMagnify } from '@mdi/js';
import Icon from '../elements/icon.svelte';
import { createEventDispatcher } from 'svelte';
import type { SearchOptions } from '$lib/utils/dipatch';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
export let name: string;
export let isSearchingPeople: boolean;
const dispatch = createEventDispatcher<{ search: SearchOptions; reset: void }>();
const resetSearch = () => {
name = '';
dispatch('reset');
};
</script>
<div class="flex items-center text-sm rounded-lg bg-gray-100 p-2 dark:bg-gray-700 gap-2 place-items-center h-full">
<button on:click={() => dispatch('search', { force: true })}>
<div class="w-fit">
<Icon path={mdiMagnify} size="24" />
</div>
</button>
<!-- svelte-ignore a11y-autofocus -->
<input
autofocus
class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
type="text"
placeholder="Search names"
bind:value={name}
on:input={() => dispatch('search', { force: false })}
/>
{#if isSearchingPeople}
<div class="flex place-items-center">
<LoadingSpinner />
</div>
{/if}
{#if name}
<button on:click={resetSearch}>
<Icon path={mdiClose} />
</button>
{/if}
</div>