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

* 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
2025-12-19 01:11:07 +03:00 · 2024-01-28 01:54:31 +01:00
parent 2249f7d42a
commit fa0913120d
37 changed files with 286 additions and 148 deletions
--- a/web/src/lib/components/faces-page/assign-face-side-panel.svelte
+++ b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
@@ -10,6 +10,7 @@
  import { getPersonNameWithHiddenValue, searchNameLocal } from '$lib/utils/person';
  import { handleError } from '$lib/utils/handle-error';
  import { photoViewer } from '$lib/stores/assets.store';
+  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';

  export let peopleWithFaces: AssetFaceResponseDto[];
  export let allPeople: PersonResponseDto[];
@@ -90,7 +91,7 @@
  };

  const handleCreatePerson = async () => {
-    const timeout = setTimeout(() => (isShowLoadingNewPerson = true), 100);
+    const timeout = setTimeout(() => (isShowLoadingNewPerson = true), timeBeforeShowLoadingSpinner);
    const personToUpdate = peopleWithFaces.find((person) => person.id === peopleWithFaces[editedPersonIndex].id);

    const newFeaturePhoto = personToUpdate ? await zoomImageToBase64(personToUpdate) : null;
@@ -103,10 +104,10 @@
  };

  const searchPeople = async () => {
-    if ((searchedPeople.length < 20 && searchName.startsWith(searchWord)) || searchName === '') {
+    if ((searchedPeople.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) || searchName === '') {
      return;
    }
-    const timeout = setTimeout(() => (isShowLoadingSearch = true), 100);
+    const timeout = setTimeout(() => (isShowLoadingSearch = true), timeBeforeShowLoadingSpinner);
    try {
      const { data } = await api.searchApi.searchPerson({ name: searchName });
      searchedPeople = data;
@@ -122,7 +123,7 @@
  };

  $: {
-    searchedPeople = searchNameLocal(searchName, searchedPeopleCopy, 10);
+    searchedPeople = searchNameLocal(searchName, searchedPeopleCopy, 20);
  }

  const initInput = (element: HTMLInputElement) => {
--- a/web/src/lib/components/faces-page/merge-face-selector.svelte
+++ b/web/src/lib/components/faces-page/merge-face-selector.svelte
@@ -11,7 +11,7 @@
  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
  import { handleError } from '$lib/utils/handle-error';
  import { goto } from '$app/navigation';
-  import { AppRoute } from '$lib/constants';
+  import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
  import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
  import Icon from '$lib/components/elements/icon.svelte';
  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
@@ -45,7 +45,7 @@

  const handleSwapPeople = () => {
    [person, selectedPeople[0]] = [selectedPeople[0], person];
-    $page.url.searchParams.set('action', 'merge');
+    $page.url.searchParams.set(QueryParameter.ACTION, ActionQueryParameterValue.MERGE);
    goto(`${AppRoute.PEOPLE}/${person.id}?${$page.url.searchParams.toString()}`);
  };

--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/web/src/lib/components/faces-page/people-card.svelte
@@ -7,7 +7,7 @@
  import MenuOption from '../shared-components/context-menu/menu-option.svelte';
  import Portal from '../shared-components/portal/portal.svelte';
  import { createEventDispatcher } from 'svelte';
-  import { AppRoute } from '$lib/constants';
+  import { AppRoute, QueryParameter } from '$lib/constants';
  import { mdiDotsVertical } from '@mdi/js';
  import Icon from '$lib/components/elements/icon.svelte';

@@ -45,7 +45,7 @@
  on:mouseleave={() => (showVerticalDots = false)}
  role="group"
 >
-  <a href="{AppRoute.PEOPLE}/{person.id}?previousRoute={AppRoute.PEOPLE}" draggable="false">
+  <a href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={AppRoute.PEOPLE}" draggable="false">
    <div class="w-full h-full rounded-xl brightness-95 filter">
      <ImageThumbnail
        shadow
--- a/web/src/lib/components/faces-page/people-list.svelte
+++ b/web/src/lib/components/faces-page/people-list.svelte
@@ -2,11 +2,10 @@
  import { api, type PersonResponseDto } from '@api';
  import FaceThumbnail from './face-thumbnail.svelte';
  import { createEventDispatcher } from 'svelte';
-  import Icon from '../elements/icon.svelte';
-  import { mdiClose, mdiMagnify } from '@mdi/js';
  import { handleError } from '$lib/utils/handle-error';
-  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
  import { searchNameLocal } from '$lib/utils/person';
+  import SearchBar from './search-bar.svelte';
+  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';

  export let screenHeight: number;
  export let people: PersonResponseDto[];
@@ -21,17 +20,12 @@
    select: PersonResponseDto;
  }>();

-  const resetSearch = () => {
-    name = '';
-    people = peopleCopy;
-  };
-
  $: {
    people = peopleCopy.filter(
      (person) => !unselectedPeople.some((unselectedPerson) => unselectedPerson.id === person.id),
    );
    if (name) {
-      people = searchNameLocal(name, people, 10);
+      people = searchNameLocal(name, people, maximumLengthSearchPeople);
    }
  }

@@ -41,12 +35,12 @@
      return;
    }
    if (!force) {
-      if (people.length < 20 && name.startsWith(searchWord)) {
+      if (people.length < maximumLengthSearchPeople && name.startsWith(searchWord)) {
        return;
      }
    }

-    const timeout = setTimeout(() => (isSearchingPeople = true), 100);
+    const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
    try {
      const { data } = await api.searchApi.searchPerson({ name });
      people = data;
@@ -61,31 +55,15 @@
  };
 </script>

-<div class="flex w-40 sm:w-48 md:w-96 h-14 rounded-lg bg-gray-100 p-2 dark:bg-gray-700 mb-8 gap-2 place-items-center">
-  <button on:click={() => searchPeople(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={() => searchPeople(false)}
+<div class=" w-40 sm:w-48 md:w-96 h-14 mb-8">
+  <SearchBar
+    bind:name
+    {isSearchingPeople}
+    on:reset={() => {
+      people = peopleCopy;
+    }}
+    on:search={({ detail }) => searchPeople(detail.force ?? false)}
  />
-  {#if name}
-    <button on:click={resetSearch}>
-      <Icon path={mdiClose} />
-    </button>
-  {/if}
-  {#if isSearchingPeople}
-    <div class="flex place-items-center">
-      <LoadingSpinner />
-    </div>
-  {/if}
 </div>

 <div
--- a/web/src/lib/components/faces-page/person-side-panel.svelte
+++ b/web/src/lib/components/faces-page/person-side-panel.svelte
@@ -13,6 +13,7 @@
  import { websocketStore } from '$lib/stores/websocket';
  import AssignFaceSidePanel from './assign-face-side-panel.svelte';
  import { getPersonNameWithHiddenValue } from '$lib/utils/person';
+  import { timeBeforeShowLoadingSpinner } from '$lib/constants';

  export let assetId: string;
  export let assetType: AssetTypeEnum;
@@ -65,7 +66,7 @@
  }

  onMount(async () => {
-    const timeout = setTimeout(() => (isShowLoadingPeople = true), 100);
+    const timeout = setTimeout(() => (isShowLoadingPeople = true), timeBeforeShowLoadingSpinner);
    try {
      const { data } = await api.personApi.getAllPeople({ withHidden: true });
      allPeople = data.people;
@@ -99,7 +100,7 @@
  };

  const handleEditFaces = async () => {
-    loaderLoadingDoneTimeout = setTimeout(() => (isShowLoadingDone = true), 100);
+    loaderLoadingDoneTimeout = setTimeout(() => (isShowLoadingDone = true), timeBeforeShowLoadingSpinner);
    const numberOfChanges =
      selectedPersonToCreate.filter((person) => person !== null).length +
      selectedPersonToReassign.filter((person) => person !== null).length;
--- a/web/src/lib/components/faces-page/search-bar.svelte
+++ b/web/src/lib/components/faces-page/search-bar.svelte
@@ -0,0 +1,44 @@
+<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>
--- a/web/src/lib/components/faces-page/show-hide.svelte
+++ b/web/src/lib/components/faces-page/show-hide.svelte
@@ -24,7 +24,7 @@
  class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
 >
  <div
-    class="sticky top-0 z-10 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
+    class="fixed top-0 z-10 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
  >
    <div class="flex items-center">
      <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
@@ -47,7 +47,7 @@
    </div>
  </div>

-  <div class="flex w-full flex-wrap gap-1 bg-immich-bg p-2 pb-8 dark:bg-immich-dark-bg md:px-8 md:pt-4">
+  <div class="flex w-full flex-wrap gap-1 bg-immich-bg p-2 pb-8 dark:bg-immich-dark-bg md:px-8 mt-16">
    <slot />
  </div>
 </section>
--- a/web/src/lib/components/faces-page/unmerge-face-selector.svelte
+++ b/web/src/lib/components/faces-page/unmerge-face-selector.svelte
@@ -12,6 +12,7 @@
  import { notificationController, NotificationType } from '../shared-components/notification/notification';
  import PeopleList from './people-list.svelte';
  import Icon from '$lib/components/elements/icon.svelte';
+  import { timeBeforeShowLoadingSpinner } from '$lib/constants';

  export let assetIds: string[];
  export let personAssets: PersonResponseDto;
@@ -63,7 +64,7 @@
  };

  const handleCreate = async () => {
-    const timeout = setTimeout(() => (showLoadingSpinnerCreate = true), 100);
+    const timeout = setTimeout(() => (showLoadingSpinnerCreate = true), timeBeforeShowLoadingSpinner);

    try {
      disableButtons = true;
@@ -88,7 +89,7 @@
  };

  const handleReassign = async () => {
-    const timeout = setTimeout(() => (showLoadingSpinnerReassign = true), 100);
+    const timeout = setTimeout(() => (showLoadingSpinnerReassign = true), timeBeforeShowLoadingSpinner);
    try {
      disableButtons = true;
      if (selectedPerson) {