feat(web): swap between people when merging faces (#4089)

* feat: swap between people when merging faces

* rename

* fix: remove url parameter when closing

* chore: handler naming

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
martin 2023-09-18 15:24:31 +02:00 committed by GitHub
parent 49ef86173f
commit a0163d8df0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 82 additions and 48 deletions

View file

@ -12,7 +12,9 @@
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
import { handleError } from '$lib/utils/handle-error';
import { invalidateAll } from '$app/navigation';
import { goto, invalidateAll } from '$app/navigation';
import { AppRoute } from '$lib/constants';
import SwapHorizontal from 'svelte-material-icons/SwapHorizontal.svelte';
export let person: PersonResponseDto;
let people: PersonResponseDto[] = [];
@ -22,8 +24,9 @@
let dispatch = createEventDispatcher();
$: hasSelection = selectedPeople.length > 0;
$: unselectedPeople = people.filter((source) => !selectedPeople.includes(source) && source.id !== person.id);
$: unselectedPeople = people.filter(
(source) => !selectedPeople.some((selected) => selected.id === source.id) && source.id !== person.id,
);
onMount(async () => {
const { data } = await api.personApi.getAllPeople({ withHidden: false });
people = data.people;
@ -33,6 +36,11 @@
dispatch('go-back');
};
const handleSwapPeople = () => {
[person, selectedPeople[0]] = [selectedPeople[0], person];
goto(`${AppRoute.PEOPLE}/${person.id}?action=merge`);
};
const onSelect = (selected: PersonResponseDto) => {
if (selectedPeople.includes(selected)) {
selectedPeople = selectedPeople.filter((person) => person.id !== selected.id);
@ -112,7 +120,14 @@
{/each}
{#if hasSelection}
<span><CallMerge size={48} class="rotate-90 dark:text-white" /> </span>
<span class="grid grid-cols-1"
><CallMerge size={48} class="rotate-90 dark:text-white" />
{#if selectedPeople.length === 1}
<button class="flex justify-center" on:click={handleSwapPeople}
><SwapHorizontal size={24} class="dark:text-white" />
</button>
{/if}
</span>
{/if}
<FaceThumbnail {person} border circle selectable={false} thumbnailSize={180} />
</div>