tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-03 19:29:32 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(web) add filter when viewing all people in search box (#7997)

Browse Source 
* feat(web) add filter when viewing all people in search box

* chore: svelte check

* pr feedback: fix vertical spacing to eliminate jump when filter appears

* pr feedback

* simplify filter logic

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Sam Holton 2024-03-27 15:58:38 -04:00 committed by GitHub
parent 8bf571bf48
commit 13b11a39a9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/elements/search-bar.svelte
View File

@ -23,7 +23,7 @@
? 'rounded-2xl' ? 'rounded-2xl'
: 'rounded-t-lg'} bg-gray-200 p-2 dark:bg-immich-dark-gray gap-2 place-items-center h-full" : 'rounded-t-lg'} bg-gray-200 p-2 dark:bg-immich-dark-gray gap-2 place-items-center h-full"
> >
<button on:click={() => dispatch('search', { force: true })}> <button type="button" on:click={() => dispatch('search', { force: true })}>
<div class="w-fit"> <div class="w-fit">
<Icon path={mdiMagnify} size="24" /> <Icon path={mdiMagnify} size="24" />
</div> </div>

17
web/src/lib/components/shared-components/search-bar/search-people-section.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte'; import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import Button from '$lib/components/elements/buttons/button.svelte'; import Button from '$lib/components/elements/buttons/button.svelte';
import SearchBar from '$lib/components/elements/search-bar.svelte';
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import { getPeopleThumbnailUrl } from '$lib/utils'; import { getPeopleThumbnailUrl } from '$lib/utils';
import { getAllPeople, type PersonResponseDto } from '@immich/sdk'; import { getAllPeople, type PersonResponseDto } from '@immich/sdk';
@ -12,6 +13,7 @@
let peoplePromise = getPeople(); let peoplePromise = getPeople();
let showAllPeople = false; let showAllPeople = false;
let name = '';
$: numberOfPeople = (width - 80) / 85; $: numberOfPeople = (width - 80) / 85;
function orderBySelectedPeopleFirst(people: PersonResponseDto[]) { function orderBySelectedPeopleFirst(people: PersonResponseDto[]) {
@ -38,15 +40,24 @@
} }
selectedPeople = selectedPeople; selectedPeople = selectedPeople;
} }
const filterPeople = (list: PersonResponseDto[], name: string) => {
const nameLower = name.toLowerCase();
return name ? list.filter((p) => p.name.toLowerCase().startsWith(nameLower)) : list;
};
</script> </script>
{#await peoplePromise then people} {#await peoplePromise then people}
{#if people && people.length > 0} {#if people && people.length > 0}
{@const peopleList = showAllPeople ? people : people.slice(0, numberOfPeople)} {@const peopleList = showAllPeople ? filterPeople(people, name) : people.slice(0, numberOfPeople)}
<div id="people-selection" class="-mb-4"> <div id="people-selection" class="-mb-4">
<div class="flex items-center gap-6"> <div class="flex items-center w-full justify-between gap-6">
<p class="immich-form-label">PEOPLE</p> <p class="immich-form-label py-3">PEOPLE</p>
{#if showAllPeople}
<SearchBar bind:name placeholder="Filter people" isSearching={false} />
{/if}
</div> </div>
<div class="flex -mx-1 max-h-64 gap-1 mt-2 flex-wrap overflow-y-auto immich-scrollbar"> <div class="flex -mx-1 max-h-64 gap-1 mt-2 flex-wrap overflow-y-auto immich-scrollbar">