From 565cac16d7fbb68356dac2b00c6965c5c4eda0e6 Mon Sep 17 00:00:00 2001 From: martabal <74269598+martabal@users.noreply.github.com> Date: Sun, 10 Dec 2023 02:51:48 +0100 Subject: [PATCH] simplify --- .../components/elements/buttons/button.svelte | 3 +- .../faces-page/assign-face-side-panel.svelte | 60 ++++++++++--------- .../faces-page/person-side-panel.svelte | 48 ++++++++------- .../unassigned-faces-side-pannel.svelte | 4 +- 4 files changed, 64 insertions(+), 51 deletions(-) diff --git a/web/src/lib/components/elements/buttons/button.svelte b/web/src/lib/components/elements/buttons/button.svelte index bc46fea0c1..5b6d9ec7ec 100644 --- a/web/src/lib/components/elements/buttons/button.svelte +++ b/web/src/lib/components/elements/buttons/button.svelte @@ -11,7 +11,7 @@ | 'transparent-gray' | 'dark-gray' | 'overlay-primary'; - export type Size = 'tiny' | 'icon' | 'link' | 'sm' | 'base' | 'lg'; + export type Size = 'tiny' | 'xs' | 'icon' | 'link' | 'sm' | 'base' | 'lg'; export type Rounded = 'lg' | '3xl' | 'full' | false; export type Shadow = 'md' | false; @@ -47,6 +47,7 @@ const sizeClasses: Record = { tiny: 'p-0 ml-2 mr-0 align-top', + xs: 'p-2', icon: 'p-2.5', link: 'p-2 font-medium', sm: 'px-4 py-2 text-sm font-medium', diff --git a/web/src/lib/components/faces-page/assign-face-side-panel.svelte b/web/src/lib/components/faces-page/assign-face-side-panel.svelte index f1ec6ffe9f..6b807e9838 100644 --- a/web/src/lib/components/faces-page/assign-face-side-panel.svelte +++ b/web/src/lib/components/faces-page/assign-face-side-panel.svelte @@ -22,9 +22,19 @@ let searchedPeople: PersonResponseDto[] = []; let searchedPeopleCopy: PersonResponseDto[] = []; let searchWord: string; - let searchFaces = false; + let isSearchingPerson = false; let searchName = ''; + $: { + searchedPeople = searchedPeopleCopy.filter( + (person) => personWithFace.person && personWithFace.person.id !== person.id, + ); + + if (searchName) { + searchedPeople = searchNameLocal(searchName, searchedPeople, 10); + } + } + const dispatch = createEventDispatcher(); const handleBackButton = () => { dispatch('close'); @@ -63,10 +73,6 @@ isShowLoadingSearch = false; }; - $: { - searchedPeople = searchNameLocal(searchName, searchedPeopleCopy, 10); - } - const initInput = (element: HTMLInputElement) => { element.focus(); }; @@ -77,7 +83,7 @@ class="absolute top-0 z-[2002] h-full w-[360px] overflow-x-hidden p-2 bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg" >
- {#if !searchFaces} + {#if !isSearchingPerson}
-
- {/if} +
+ +
{/each} {/if}
diff --git a/web/src/lib/components/faces-page/person-side-panel.svelte b/web/src/lib/components/faces-page/person-side-panel.svelte index acf2956a3c..20277a696e 100644 --- a/web/src/lib/components/faces-page/person-side-panel.svelte +++ b/web/src/lib/components/faces-page/person-side-panel.svelte @@ -16,6 +16,7 @@ import { currentAsset, photoViewer } from '$lib/stores/assets.store'; import UnassignedFacesSidePannel from './unassigned-faces-side-pannel.svelte'; import type { FaceWithGeneretedThumbnail } from '$lib/utils/people-utils'; + import Button from '../elements/buttons/button.svelte'; // keep track of the changes let idsOfPersonToCreate: string[] = []; @@ -28,7 +29,7 @@ let selectedPersonToAdd: FaceWithGeneretedThumbnail[] = []; let selectedPersonToUnassign: FaceWithGeneretedThumbnail[] = []; let selectedPersonToRemove: boolean[] = []; - let unassignedFaces: (FaceWithGeneretedThumbnail | null)[] = []; + let unassignedFaces: FaceWithGeneretedThumbnail[] = []; let editedPersonIndex: number; let shouldRefresh: boolean = false; @@ -83,16 +84,18 @@ selectedPersonToCreate = new Array(peopleWithFaces.length); selectedPersonToReassign = new Array(peopleWithFaces.length); selectedPersonToRemove = new Array(peopleWithFaces.length); - unassignedFaces = await Promise.all( - peopleWithFaces.map(async (personWithFace) => { - if (personWithFace.person || $currentAsset === null) { - return null; - } else { - const image = await zoomImageToBase64(personWithFace, $photoViewer, $currentAsset.type, $currentAsset.id); - return image ? { ...personWithFace, customThumbnail: image } : null; - } - }), - ); + unassignedFaces = ( + await Promise.all( + peopleWithFaces.map(async (personWithFace) => { + if (personWithFace.person || $currentAsset === null) { + return null; + } else { + const image = await zoomImageToBase64(personWithFace, $photoViewer, $currentAsset.type, $currentAsset.id); + return image ? { ...personWithFace, customThumbnail: image } : null; + } + }), + ) + ).filter((item): item is FaceWithGeneretedThumbnail => item !== null); } catch (error) { handleError(error, "Can't get faces"); } finally { @@ -149,9 +152,10 @@ const handleAddRemovedFace = (indexToRemove: number) => { $boundingBoxesArray = []; - unassignedFaces = unassignedFaces.map((obj) => - obj && obj.id === selectedPersonToUnassign[indexToRemove].id ? null : obj, - ); + unassignedFaces = unassignedFaces + .map((obj) => (obj && obj.id === selectedPersonToUnassign[indexToRemove].id ? null : obj)) + .filter((item): item is FaceWithGeneretedThumbnail => item !== null) as FaceWithGeneretedThumbnail[]; + selectedPersonToUnassign = selectedPersonToUnassign.filter((_, index) => index !== indexToRemove); }; @@ -343,16 +347,20 @@ {:else} -
Visible faces
+
Faces visible
{/if} {#if isSelectingFaces && selectedPersonToRemove && selectedPersonToRemove.filter((value) => value).length > 0} - + Unassign Faces + {/if}
@@ -362,7 +370,7 @@
{:else} {#each peopleWithFaces as face, index} - {#if face.person && unassignedFaces[index] === null && !selectedPersonToUnassign.some((unassignedFace) => unassignedFace.id === face.id)} + {#if face.person && !unassignedFaces.some((unassignedFace) => unassignedFace.id === face.id) && !selectedPersonToUnassign.some((unassignedFace) => unassignedFace.id === face.id)}
{#each unassignedFaces as face, index} - {#if face && !selectedPersonToAdd.some((faceToAdd) => face && faceToAdd.id === face.id)} + {#if !selectedPersonToAdd.some((faceToAdd) => face && faceToAdd.id === face.id)}