fix(web): multiple fixes for people (#9343)

fix: multiple fixes for people

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -30,9 +30,7 @@
   }>();
 
   $: hasSelection = selectedPeople.length > 0;
-  $: unselectedPeople = people.filter(
-    (source) => !selectedPeople.some((selected) => selected.id === source.id) && source.id !== person.id,
-  );
+  $: peopleToNotShow = [...selectedPeople, person];
 
   onMount(async () => {
     const data = await getAllPeople({ withHidden: false });
@@ -150,13 +148,7 @@
         </div>
       </div>
 
-      <PeopleList
-        people={unselectedPeople}
-        peopleCopy={unselectedPeople}
-        unselectedPeople={selectedPeople}
-        {screenHeight}
-        on:select={({ detail }) => onSelect(detail)}
-      />
+      <PeopleList {people} {peopleToNotShow} {screenHeight} on:select={({ detail }) => onSelect(detail)} />
     </section>
 
     {#if isShowConfirmation}

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

@@ -6,8 +6,8 @@
 
   export let screenHeight: number;
   export let people: PersonResponseDto[];
-  export let peopleCopy: PersonResponseDto[];
-  export let unselectedPeople: PersonResponseDto[];
+  export let peopleToNotShow: PersonResponseDto[];
+  let searchedPeopleLocal: PersonResponseDto[] = [];
 
   let name = '';
   let showPeople: PersonResponseDto[];
@@ -17,20 +17,15 @@
   }>();
 
   $: {
-    showPeople = people.filter(
-      (person) => !unselectedPeople.some((unselectedPerson) => unselectedPerson.id === person.id),
+    showPeople = name ? searchedPeopleLocal : people;
+    showPeople = showPeople.filter(
+      (person) => !peopleToNotShow.some((unselectedPerson) => unselectedPerson.id === person.id),
     );
   }
 </script>
 
 <div class=" w-40 sm:w-48 md:w-96 h-14 mb-8">
-  <SearchPeople
-    type="searchBar"
-    placeholder="Search people"
-    bind:searchName={name}
-    bind:searchedPeopleLocal={people}
-    onReset={() => (people = peopleCopy)}
-  />
+  <SearchPeople type="searchBar" placeholder="Search people" bind:searchName={name} bind:searchedPeopleLocal />
 </div>
 
 <div

web/src/lib/components/faces-page/unmerge-face-selector.svelte

@@ -31,9 +31,7 @@
   let hasSelection = false;
   let screenHeight: number;
 
-  $: unselectedPeople = selectedPerson
-    ? people.filter((person) => selectedPerson && person.id !== selectedPerson.id && personAssets.id !== person.id)
-    : people;
+  $: peopleToNotShow = selectedPerson ? [personAssets, selectedPerson] : [personAssets];
 
   let dispatch = createEventDispatcher<{
     confirm: void;
@@ -178,13 +176,7 @@
           </div>
         </div>
       {/if}
-      <PeopleList
-        people={unselectedPeople}
-        peopleCopy={unselectedPeople}
-        unselectedPeople={selectedPerson ? [selectedPerson, personAssets] : [personAssets]}
-        {screenHeight}
-        on:select={({ detail }) => handleSelectedPerson(detail)}
-      />
+      <PeopleList {people} {peopleToNotShow} {screenHeight} on:select={({ detail }) => handleSelectedPerson(detail)} />
     </section>
   </section>
 </section>

web/src/routes/(user)/people/+page.svelte

@@ -60,14 +60,23 @@
   let edittingPerson: PersonResponseDto | null = null;
   let searchedPeopleLocal: PersonResponseDto[] = [];
   let handleSearchPeople: (force?: boolean, name?: string) => Promise<void>;
+  let showPeople: PersonResponseDto[] = [];
+  let countVisiblePeople: number;
 
   let innerHeight: number;
 
   for (const person of people) {
     initialHiddenValues[person.id] = person.isHidden;
   }
-  $: showPeople = searchName ? searchedPeopleLocal : people.filter((person) => !person.isHidden);
-  $: countVisiblePeople = countTotalPeople - countHiddenPeople;
+  $: {
+    if (searchName) {
+      showPeople = searchedPeopleLocal;
+      countVisiblePeople = searchedPeopleLocal.length;
+    } else {
+      showPeople = people.filter((person) => !person.isHidden);
+      countVisiblePeople = countTotalPeople - countHiddenPeople;
+    }
+  }
 
   onMount(async () => {
     const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
@@ -382,7 +391,7 @@
 
 <UserPageLayout
   title="People"
-  description={countVisiblePeople === 0 ? undefined : `(${countVisiblePeople.toLocaleString($locale)})`}
+  description={countVisiblePeople === 0 && !searchName ? undefined : `(${countVisiblePeople.toLocaleString($locale)})`}
 >
   <svelte:fragment slot="buttons">
     {#if countTotalPeople > 0}

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -31,7 +31,7 @@
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { AssetStore } from '$lib/stores/assets.store';
   import { websocketEvents } from '$lib/stores/websocket';
-  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { clickOutside } from '$lib/utils/click-outside';
   import { handleError } from '$lib/utils/handle-error';
   import { isExternalUrl } from '$lib/utils/navigation';
@@ -137,12 +137,23 @@
       return;
     }
   };
+
+  const updateAssetCount = async () => {
+    try {
+      const { assets } = await getPersonStatistics({ id: data.person.id });
+      numberOfAssets = assets;
+    } catch (error) {
+      handleError(error, "Can't update the asset count");
+    }
+  };
+
   afterNavigate(({ from }) => {
     // Prevent setting previousRoute to the current page.
     if (from && from.route.id !== $page.route.id) {
       previousRoute = from.url.href;
     }
     if (previousPersonId !== data.person.id) {
+      handlePromiseError(updateAssetCount());
       assetStore = new AssetStore({
         isArchived: false,
         personId: data.person.id,
@@ -182,8 +193,7 @@
   };
 
   const handleMerge = async (person: PersonResponseDto) => {
-    const { assets } = await getPersonStatistics({ id: person.id });
-    numberOfAssets = assets;
+    await updateAssetCount();
     await handleGoBack();
 
     data.person = person;
@@ -204,15 +214,6 @@
     viewMode = ViewMode.VIEW_ASSETS;
   };
 
-  const updateAssetCount = async () => {
-    try {
-      const { assets } = await getPersonStatistics({ id: data.person.id });
-      numberOfAssets = assets;
-    } catch (error) {
-      handleError(error, "Can't update the asset count");
-    }
-  };
-
   const handleMergeSamePerson = async (response: [PersonResponseDto, PersonResponseDto]) => {
     const [personToMerge, personToBeMergedIn] = response;
     viewMode = ViewMode.VIEW_ASSETS;