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

feat(web,server): search people (#5703)

Browse Source 
* feat: search peoples

* fix: responsive design

* use existing count

* generate sql file

* fix: tests

* remove visible people

* fix: merge, hide...

* use component

* fix: linter

* chore: regenerate api

* fix: change name when searching for a face

* save search

* remove duplicate

* use enums for query parameters

* fix: increase to 20 for the local search

* use constants

* simplify

* fix: number of people more visible

* fix: merge

* fix: search

* fix: loading spinner position

* pr feedback
This commit is contained in:
martin
2024-01-28 01:54:31 +01:00
committed by GitHub
parent 2249f7d42a
commit fa0913120d
37 changed files with 286 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/(user)/people/+page.svelte
+93 -27
View File
@@ -6,7 +6,13 @@
import Button from '$lib/components/elements/buttons/button.svelte';
import { api, type PeopleUpdateItem, type PersonResponseDto } from '@api';
import { goto } from '$app/navigation';
import { AppRoute } from '$lib/constants';
import {
ActionQueryParameterValue,
AppRoute,
QueryParameter,
maximumLengthSearchPeople,
timeBeforeShowLoadingSpinner,
} from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
import {
NotificationType,
@@ -22,16 +28,23 @@
import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
import Icon from '$lib/components/elements/icon.svelte';
import { searchNameLocal } from '$lib/utils/person';
import SearchBar from '$lib/components/faces-page/search-bar.svelte';
import { page } from '$app/stores';
export let data: PageData;
let selectHidden = false;
let initialHiddenValues: Record<string, boolean> = {};
let eyeColorMap: Record<string, 'black' | 'white'> = {};
let people = data.people.people;
let countTotalPeople = data.people.total;
let countVisiblePeople = data.people.visible;
let selectHidden = false;
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;
@@ -47,14 +60,23 @@
let innerHeight: number;
people.forEach((person: PersonResponseDto) => {
for (const person of people) {
initialHiddenValues[person.id] = person.isHidden;
});
}
$: searchedPeopleLocal = searchName ? searchNameLocal(searchName, searchedPeople, maximumLengthSearchPeople) : [];
$: countVisiblePeople = people.filter((person) => !person.isHidden).length;
const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
onMount(() => {
document.addEventListener('keydown', onKeyboardPress);
const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
if (getSearchedPeople) {
searchName = getSearchedPeople;
searchPeople(true);
}
});
onDestroy(() => {
@@ -74,6 +96,12 @@
}
};
const handleSearch = (force: boolean) => {
$page.url.searchParams.set(QueryParameter.SEARCHED_PEOPLE, searchName);
goto($page.url);
searchPeople(force);
};
const handleCloseClick = () => {
for (const person of people) {
person.isHidden = initialHiddenValues[person.id];
@@ -117,9 +145,6 @@
// Update the initial hidden values
initialHiddenValues[person.id] = person.isHidden;
// Update the count of hidden/visible people
countVisiblePeople += person.isHidden ? -1 : 1;
}
}
@@ -188,6 +213,7 @@
*/
try {
await api.personApi.updatePerson({ id: personToBeMergedIn.id, personUpdateDto: { name: personName } });
for (const person of people) {
if (person.id === personToBeMergedIn.id) {
person.name = personName;
@@ -233,11 +259,9 @@
return person;
});
people.forEach((person: PersonResponseDto) => {
for (const person of people) {
initialHiddenValues[person.id] = person.isHidden;
});
countVisiblePeople--;
}
showChangeNameModal = false;
@@ -251,7 +275,38 @@
};
const handleMergePeople = (detail: PersonResponseDto) => {
goto(`${AppRoute.PEOPLE}/${detail.id}?action=merge&previousRoute=${AppRoute.PEOPLE}`);
goto(
`${AppRoute.PEOPLE}/${detail.id}?${QueryParameter.ACTION}=${ActionQueryParameterValue.MERGE}&${QueryParameter.PREVIOUS_ROUTE}=${AppRoute.PEOPLE}`,
);
};
const searchPeople = async (force: boolean) => {
if (searchName === '') {
if ($page.url.searchParams.has(QueryParameter.SEARCHED_PEOPLE)) {
$page.url.searchParams.delete(QueryParameter.SEARCHED_PEOPLE);
goto($page.url);
}
return;
}
if (!force) {
if (people.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) {
return;
}
}
const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
try {
const { data } = await api.searchApi.searchPerson({ name: searchName, withHidden: false });
searchedPeople = data;
searchWord = searchName;
} catch (error) {
handleError(error, "Can't search people");
} finally {
clearTimeout(timeout);
}
isSearchingPeople = false;
};
const submitNameChange = async () => {
@@ -310,7 +365,6 @@
}
return person;
});
notificationController.show({
message: 'Date of birth saved succesfully',
type: NotificationType.Info,
@@ -332,14 +386,12 @@
id: edittingPerson.id,
personUpdateDto: { name: personName },
});
people = people.map((person: PersonResponseDto) => {
if (person.id === updatedPerson.id) {
return updatedPerson;
}
return person;
});
notificationController.show({
message: 'Change name succesfully',
type: NotificationType.Info,
@@ -365,22 +417,36 @@
</FullScreenModal>
{/if}
<UserPageLayout title="People">
<UserPageLayout title="People" description={countTotalPeople !== 0 ? `(${countTotalPeople.toString()})` : undefined}>
<svelte:fragment slot="buttons">
{#if countTotalPeople > 0}
<IconButton on:click={() => (selectHidden = !selectHidden)}>
<div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
<Icon path={mdiEyeOutline} size="18" />
<p class="ml-2">Show & hide people</p>
<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}
{isSearchingPeople}
on:reset={() => {
searchedPeople = [];
}}
on:search={({ detail }) => handleSearch(detail.force ?? false)}
/>
</div>
</div>
</IconButton>
<IconButton on:click={() => (selectHidden = !selectHidden)}>
<div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
<Icon path={mdiEyeOutline} size="18" />
<p class="ml-2">Show & hide people</p>
</div>
</IconButton>
</div>
{/if}
</svelte:fragment>
{#if countVisiblePeople > 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">
{#each people as person, idx (person.id)}
{#if !person.isHidden}
{#if !person.isHidden && (searchName ? searchedPeopleLocal.some((searchedPerson) => searchedPerson.id === person.id) : true)}
<PeopleCard
{person}
preload={idx < 20}
@@ -461,7 +527,7 @@
on:mouseleave={() => (eyeColorMap[person.id] = 'white')}
>
<ImageThumbnail
preload={idx < 20}
preload={searchName !== '' || idx < 20}
bind:hidden={person.isHidden}
shadow
url={api.getPeopleThumbnailUrl(person.id)}
web/src/routes/(user)/people/[personId]/+page.svelte
+7 -7
View File
@@ -25,7 +25,7 @@
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
import { AppRoute, QueryParameter, maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { AssetStore } from '$lib/stores/assets.store';
import { websocketStore } from '$lib/stores/websocket';
@@ -90,10 +90,10 @@
let isSearchingPeople = false;
const searchPeople = async () => {
if ((people.length < 20 && name.startsWith(searchWord)) || name === '') {
if ((people.length < maximumLengthSearchPeople && name.startsWith(searchWord)) || name === '') {
return;
}
const timeout = setTimeout(() => (isSearchingPeople = true), 100);
const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
try {
const { data } = await api.searchApi.searchPerson({ name });
people = data;
@@ -120,8 +120,8 @@
}
onMount(() => {
const action = $page.url.searchParams.get('action');
const getPreviousRoute = $page.url.searchParams.get('previousRoute');
const action = $page.url.searchParams.get(QueryParameter.ACTION);
const getPreviousRoute = $page.url.searchParams.get(QueryParameter.PREVIOUS_ROUTE);
if (getPreviousRoute && !isExternalUrl(getPreviousRoute)) {
previousRoute = getPreviousRoute;
}
@@ -343,8 +343,8 @@
const handleGoBack = () => {
viewMode = ViewMode.VIEW_ASSETS;
if ($page.url.searchParams.has('action')) {
$page.url.searchParams.delete('action');
if ($page.url.searchParams.has(QueryParameter.ACTION)) {
$page.url.searchParams.delete(QueryParameter.ACTION);
goto($page.url);
}
};
web/src/routes/(user)/search/+page.svelte
+3 -3
View File
@@ -18,7 +18,7 @@
import type { PageData } from './$types';
import Icon from '$lib/components/elements/icon.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { AppRoute } from '$lib/constants';
import { AppRoute, QueryParameter } from '$lib/constants';
import AlbumCard from '$lib/components/album-page/album-card.svelte';
import { flip } from 'svelte/animate';
import { onDestroy, onMount } from 'svelte';
@@ -86,8 +86,8 @@
});
$: term = (() => {
let term = $page.url.searchParams.get('q') || data.term || '';
const isMetadataSearch = $page.url.searchParams.get('clip') === 'false';
let term = $page.url.searchParams.get(QueryParameter.SEARCH_TERM) || data.term || '';
const isMetadataSearch = $page.url.searchParams.get(QueryParameter.CLIP) === 'false';
if (isMetadataSearch && term !== '') {
term = `m:${term}`;
}
web/src/routes/(user)/search/+page.ts
+3 -1
View File
@@ -1,11 +1,13 @@
import { authenticate } from '$lib/utils/auth';
import { type SearchResponseDto, api } from '@api';
import type { PageLoad } from './$types';
import { QueryParameter } from '$lib/constants';
export const load = (async (data) => {
await authenticate();
const url = new URL(data.url.href);
const term = url.searchParams.get('q') || url.searchParams.get('query') || undefined;
const term =
url.searchParams.get(QueryParameter.SEARCH_TERM) || url.searchParams.get(QueryParameter.QUERY) || undefined;
let results: SearchResponseDto | null = null;
if (term) {
const { data } = await api.searchApi.search({}, { params: url.searchParams });
web/src/routes/(user)/share/[key]/photos/[assetId]/+page.svelte
+2 -1
View File
@@ -2,6 +2,7 @@
import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
import type { PageData } from './$types';
import { goto } from '$app/navigation';
import { AppRoute } from '$lib/constants';
export let data: PageData;
</script>
@@ -11,6 +12,6 @@
showNavigation={false}
on:previous={() => null}
on:next={() => null}
on:close={() => goto(`/share/${data.key}`)}
on:close={() => goto(`${AppRoute.SHARE}/${data.key}`)}
/>
{/if}
web/src/routes/auth/onboarding/+page.svelte
+3 -3
View File
@@ -4,7 +4,7 @@
import OnboadingStorageTemplate from '$lib/components/onboarding-page/onboarding-storage-template.svelte';
import { api } from '@api';
import { goto } from '$app/navigation';
import { AppRoute } from '$lib/constants';
import { AppRoute, QueryParameter } from '$lib/constants';
import { page } from '$app/stores';
let index = 0;
@@ -32,14 +32,14 @@
goto(AppRoute.PHOTOS);
} else {
index++;
goto(`${AppRoute.AUTH_ONBOARDING}?step=${onboardingSteps[index].name}`);
goto(`${AppRoute.AUTH_ONBOARDING}?${QueryParameter.ONBOARDING_STEP}=${onboardingSteps[index].name}`);
}
};
const handlePrevious = () => {
if (index >= 1) {
index--;
goto(`${AppRoute.AUTH_ONBOARDING}?step=${onboardingSteps[index].name}`);
goto(`${AppRoute.AUTH_ONBOARDING}?${QueryParameter.ONBOARDING_STEP}=${onboardingSteps[index].name}`);
}
};
</script>