cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): search people (#9082)

Browse Source 
* refactor: search people

* fix: test

* fix: timeout

* fix: callbacks

* fix: simplify

* remove unused var

* refactor: rename file

* fix: focus when deleting last character

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
martin
2024-04-29 23:38:15 +02:00
committed by GitHub
parent 72ce81f0c2
commit 5722c830ff
12 changed files with 207 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/(user)/albums/+page.svelte
+1 -1
View File
@@ -29,7 +29,7 @@
/>
</div>
<div class="w-60">
<SearchBar placeholder="Search albums" bind:name={searchQuery} isSearching={false} />
<SearchBar placeholder="Search albums" bind:name={searchQuery} showLoadingSpinner={false} />
</div>
</div>
web/src/routes/(user)/people/+page.svelte
+29 -73
View File
@@ -6,7 +6,6 @@
import Icon from '$lib/components/elements/icon.svelte';
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
import PeopleCard from '$lib/components/faces-page/people-card.svelte';
import SearchBar from '$lib/components/elements/search-bar.svelte';
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
import ShowHide from '$lib/components/faces-page/show-hide.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
@@ -15,16 +14,9 @@
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import {
ActionQueryParameterValue,
AppRoute,
maximumLengthSearchPeople,
QueryParameter,
timeBeforeShowLoadingSpinner,
} from '$lib/constants';
import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
import { getPeopleThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { searchNameLocal } from '$lib/utils/person';
import { shortcut } from '$lib/utils/shortcut';
import {
getPerson,
@@ -40,6 +32,7 @@
import type { PageData } from './$types';
import { locale } from '$lib/stores/preferences.store';
import { clearQueryParam } from '$lib/utils/navigation';
import SearchPeople from '$lib/components/faces-page/people-search.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
export let data: PageData;
@@ -52,10 +45,7 @@
let initialHiddenValues: Record<string, boolean> = {};
let eyeColorMap: Record<string, 'black' | 'white'> = {};
let searchedPeople: PersonResponseDto[] = [];
let searchName = '';
let searchWord: string;
let isSearchingPeople = false;
let showLoadingSpinner = false;
let toggleVisibility = false;
@@ -68,29 +58,31 @@
let personMerge2: PersonResponseDto;
let potentialMergePeople: PersonResponseDto[] = [];
let edittingPerson: PersonResponseDto | null = null;
let searchedPeopleLocal: PersonResponseDto[] = [];
let handleSearchPeople: (force?: boolean, name?: string) => Promise<void>;
let innerHeight: number;
for (const person of people) {
initialHiddenValues[person.id] = person.isHidden;
}
$: searchedPeopleLocal = searchName ? searchNameLocal(searchName, searchedPeople, maximumLengthSearchPeople) : [];
$: showPeople = searchName ? searchedPeopleLocal : people.filter((person) => !person.isHidden);
$: countVisiblePeople = countTotalPeople - countHiddenPeople;
onMount(async () => {
const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
if (getSearchedPeople) {
searchName = getSearchedPeople;
await handleSearchPeople(true);
await handleSearchPeople(true, searchName);
}
});
const handleSearch = async (force: boolean) => {
$page.url.searchParams.set(QueryParameter.SEARCHED_PEOPLE, searchName);
await goto($page.url, { keepFocus: true });
await handleSearchPeople(force);
const handleSearch = async () => {
const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
if (getSearchedPeople !== searchName) {
$page.url.searchParams.set(QueryParameter.SEARCHED_PEOPLE, searchName);
await goto($page.url, { keepFocus: true });
}
};
const handleCloseClick = () => {
@@ -278,28 +270,6 @@
);
};
const handleSearchPeople = async (force: boolean) => {
if (searchName === '') {
await clearQueryParam(QueryParameter.SEARCHED_PEOPLE, $page.url);
return;
}
if (!force && people.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) {
return;
}
const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
try {
searchedPeople = await searchPerson({ name: searchName, withHidden: false });
searchWord = searchName;
} catch (error) {
handleError(error, "Can't search people");
} finally {
clearTimeout(timeout);
}
isSearchingPeople = false;
};
const submitNameChange = async () => {
potentialMergePeople = [];
showChangeNameModal = false;
@@ -393,7 +363,6 @@
};
const onResetSearchBar = async () => {
searchedPeople = [];
await clearQueryParam(QueryParameter.SEARCHED_PEOPLE, $page.url);
};
</script>
@@ -420,12 +389,14 @@
<div class="flex gap-2 items-center justify-center">
<div class="hidden sm:block">
<div class="w-40 lg:w-80 h-10">
<SearchBar
bind:name={searchName}
isSearching={isSearchingPeople}
<SearchPeople
type="searchBar"
placeholder="Search people"
on:reset={onResetSearchBar}
on:search={({ detail }) => handleSearch(detail.force ?? false)}
onReset={onResetSearchBar}
onSearch={handleSearch}
bind:searchName
bind:searchedPeopleLocal
bind:handleSearch={handleSearchPeople}
/>
</div>
</div>
@@ -441,31 +412,16 @@
{#if countVisiblePeople > 0 && (!searchName || searchedPeopleLocal.length > 0)}
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
{#if searchName}
{#each searchedPeopleLocal as person, index (person.id)}
<PeopleCard
{person}
preload={index < 20}
on:change-name={() => handleChangeName(person)}
on:set-birth-date={() => handleSetBirthDate(person)}
on:merge-people={() => handleMergePeople(person)}
on:hide-person={() => handleHidePerson(person)}
/>
{/each}
{:else}
{#each people as person, index (person.id)}
{#if !person.isHidden}
<PeopleCard
{person}
preload={index < 20}
on:change-name={() => handleChangeName(person)}
on:set-birth-date={() => handleSetBirthDate(person)}
on:merge-people={() => handleMergePeople(person)}
on:hide-person={() => handleHidePerson(person)}
/>
{/if}
{/each}
{/if}
{#each showPeople as person, index (person.id)}
<PeopleCard
{person}
preload={index < 20}
on:change-name={() => handleChangeName(person)}
on:set-birth-date={() => handleSetBirthDate(person)}
on:merge-people={() => handleMergePeople(person)}
on:hide-person={() => handleHidePerson(person)}
/>
{/each}
</div>
{:else}
<div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+3 -29
View File
@@ -26,7 +26,7 @@
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AppRoute, QueryParameter, maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
import { AppRoute, QueryParameter } from '$lib/constants';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { AssetStore } from '$lib/stores/assets.store';
@@ -35,7 +35,6 @@
import { clickOutside } from '$lib/utils/click-outside';
import { handleError } from '$lib/utils/handle-error';
import { isExternalUrl } from '$lib/utils/navigation';
import { searchNameLocal } from '$lib/utils/person';
import {
getPersonStatistics,
mergePerson,
@@ -103,37 +102,12 @@
* However, it needs to make a new api request if searching 'r' returns 20 names (arbitrary value, the limit sent back by the server).
* or if the new search word starts with another word / letter
**/
let searchWord: string;
let isSearchingPeople = false;
let suggestionContainer: HTMLDivElement;
const searchPeople = async () => {
if ((people.length < maximumLengthSearchPeople && name.startsWith(searchWord)) || name === '') {
return;
}
const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
try {
people = await searchPerson({ name });
searchWord = name;
} catch (error) {
people = [];
handleError(error, "Can't search people");
} finally {
clearTimeout(timeout);
}
isSearchingPeople = false;
};
$: isAllArchive = [...$selectedAssets].every((asset) => asset.isArchived);
$: isAllFavorite = [...$selectedAssets].every((asset) => asset.isFavorite);
$: {
if (people) {
suggestedPeople = name ? searchNameLocal(name, people, 5, data.person.id) : [];
}
}
onMount(() => {
const action = $page.url.searchParams.get(QueryParameter.ACTION);
const getPreviousRoute = $page.url.searchParams.get(QueryParameter.PREVIOUS_ROUTE);
@@ -480,10 +454,10 @@
{#if isEditingName}
<EditNameInput
person={data.person}
suggestedPeople={suggestedPeople.length > 0 || isSearchingPeople}
bind:suggestedPeople
bind:name
bind:isSearchingPeople
on:change={(event) => handleNameChange(event.detail)}
on:input={searchPeople}
{thumbnailData}
/>
{:else}