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

refactor(web): show & hide people (#10933)

Browse Source
This commit is contained in:
Michel Heusschen
2024-07-08 03:33:59 +02:00
committed by GitHub
parent cb40db9555
commit e9683b326a
6 changed files with 312 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,14 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import ManagePeopleVisibility from '$lib/components/faces-page/manage-people-visibility.svelte';
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
import PeopleCard from '$lib/components/faces-page/people-card.svelte';
import SearchPeople from '$lib/components/faces-page/people-search.svelte';
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
import ShowHide, { ToggleVisibilty } from '$lib/components/faces-page/show-hide.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import {
@@ -15,43 +16,28 @@
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
import { locale } from '$lib/stores/preferences.store';
import { websocketEvents } from '$lib/stores/websocket';
import { handlePromiseError } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { shortcut } from '$lib/actions/shortcut';
import {
getPerson,
mergePerson,
searchPerson,
updatePeople,
updatePerson,
type PeopleUpdateItem,
type PersonResponseDto,
} from '@immich/sdk';
import { clearQueryParam } from '$lib/utils/navigation';
import { getPerson, mergePerson, searchPerson, updatePerson, type PersonResponseDto } from '@immich/sdk';
import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
import { onMount } from 'svelte';
import type { PageData } from './$types';
import { locale } from '$lib/stores/preferences.store';
import { clearQueryParam } from '$lib/utils/navigation';
import SearchPeople from '$lib/components/faces-page/people-search.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import { t } from 'svelte-i18n';
import { websocketEvents } from '$lib/stores/websocket';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import type { PageData } from './$types';
export let data: PageData;
let people = data.people.people;
let countTotalPeople = data.people.total;
let countHiddenPeople = data.people.hidden;
$: people = data.people.people;
$: visiblePeople = people.filter((people) => !people.isHidden);
$: countVisiblePeople = searchName ? searchedPeopleLocal.length : visiblePeople.length;
$: showPeople = searchName ? searchedPeopleLocal : visiblePeople;
let selectHidden = false;
let initialHiddenValues: Record<string, boolean> = {};
let eyeColorMap: Record<string, 'black' | 'white'> = {};
let searchName = '';
let showLoadingSpinner = false;
let toggleVisibility: ToggleVisibilty = ToggleVisibilty.VIEW_ALL;
let showChangeNameModal = false;
let showSetBirthDateModal = false;
let showMergeModal = false;
@@ -62,24 +48,9 @@
let edittingPerson: PersonResponseDto | null = null;
let searchedPeopleLocal: PersonResponseDto[] = [];
let handleSearchPeople: (force?: boolean, name?: string) => Promise<void>;
let showPeople: PersonResponseDto[] = [];
let countVisiblePeople: number;
let changeNameInputEl: HTMLInputElement | null;
let innerHeight: number;
for (const person of people) {
initialHiddenValues[person.id] = person.isHidden;
}
$: {
if (searchName) {
showPeople = searchedPeopleLocal;
countVisiblePeople = searchedPeopleLocal.length;
} else {
showPeople = people.filter((person) => !person.isHidden);
countVisiblePeople = countTotalPeople - countHiddenPeople;
}
}
onMount(() => {
const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
if (getSearchedPeople) {
@@ -87,11 +58,12 @@
handlePromiseError(handleSearchPeople(true, searchName));
}
return websocketEvents.on('on_person_thumbnail', (personId: string) => {
people.map((person) => {
for (const person of people) {
if (person.id === personId) {
person.updatedAt = Date.now().toString();
person.updatedAt = new Date().toISOString();
}
});
}
// trigger reactivity
people = people;
});
@@ -105,89 +77,6 @@
}
};
const handleCloseClick = () => {
for (const person of people) {
person.isHidden = initialHiddenValues[person.id];
}
// trigger reactivity
people = people;
// Reset variables used on the "Show & hide people" modal
showLoadingSpinner = false;
selectHidden = false;
toggleVisibility = ToggleVisibilty.VIEW_ALL;
};
const handleResetVisibility = () => {
for (const person of people) {
person.isHidden = initialHiddenValues[person.id];
}
// trigger reactivity
people = people;
};
const handleToggleVisibility = (toggleVisibility: ToggleVisibilty) => {
for (const person of people) {
if (toggleVisibility == ToggleVisibilty.HIDE_ALL) {
person.isHidden = true;
}
if (toggleVisibility == ToggleVisibilty.VIEW_ALL) {
person.isHidden = false;
}
if (toggleVisibility == ToggleVisibilty.HIDE_UNNANEMD && !person.name) {
person.isHidden = true;
}
}
// trigger reactivity
people = people;
};
const handleDoneClick = async () => {
showLoadingSpinner = true;
let changed: PeopleUpdateItem[] = [];
try {
// Check if the visibility for each person has been changed
for (const person of people) {
if (person.isHidden !== initialHiddenValues[person.id]) {
changed.push({ id: person.id, isHidden: person.isHidden });
if (person.isHidden) {
countHiddenPeople++;
} else {
countHiddenPeople--;
}
// Update the initial hidden values
initialHiddenValues[person.id] = person.isHidden;
}
}
if (changed.length > 0) {
const results = await updatePeople({
peopleUpdateDto: { people: changed },
});
const count = results.filter(({ success }) => success).length;
if (results.length - count > 0) {
notificationController.show({
type: NotificationType.Error,
message: $t('errors.unable_to_change_visibility', { values: { count: results.length - count } }),
});
}
notificationController.show({
type: NotificationType.Info,
message: $t('visibility_changed', { values: { count: count } }),
});
}
} catch (error) {
handleError(error, $t('errors.unable_to_change_visibility', { values: { count: changed.length } }));
}
// Reset variables used on the "Show & hide people" modal
showLoadingSpinner = false;
selectHidden = false;
toggleVisibility = ToggleVisibilty.VIEW_ALL;
};
const handleMergeSamePerson = async (response: [PersonResponseDto, PersonResponseDto]) => {
const [personToMerge, personToBeMergedIn] = response;
showMergeModal = false;
@@ -205,10 +94,6 @@
people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
people = people.map((person: PersonResponseDto) => (person.id === personToBeMergedIn.id ? mergedPerson : person));
if (personToMerge.isHidden) {
countHiddenPeople--;
}
countTotalPeople--;
notificationController.show({
message: $t('merge_people_successfully'),
type: NotificationType.Info,
@@ -273,12 +158,7 @@
return person;
});
for (const person of people) {
initialHiddenValues[person.id] = person.isHidden;
}
showChangeNameModal = false;
countHiddenPeople++;
notificationController.show({
message: $t('changed_visibility_successfully'),
type: NotificationType.Info,
@@ -391,7 +271,7 @@
};
</script>
<svelte:window bind:innerHeight use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: handleCloseClick }} />
<svelte:window bind:innerHeight />
{#if showMergeModal}
<MergeSuggestionModal
@@ -409,7 +289,7 @@
description={countVisiblePeople === 0 && !searchName ? undefined : `(${countVisiblePeople.toLocaleString($locale)})`}
>
<svelte:fragment slot="buttons">
{#if countTotalPeople > 0}
{#if people.length > 0}
<div class="flex gap-2 items-center justify-center">
<div class="hidden sm:block">
<div class="w-40 lg:w-80 h-10">
@@ -494,42 +374,13 @@
/>
{/if}
</UserPageLayout>
{#if selectHidden}
<ShowHide
onDone={handleDoneClick}
onClose={handleCloseClick}
onReset={handleResetVisibility}
onChange={handleToggleVisibility}
bind:showLoadingSpinner
bind:toggleVisibility
{countTotalPeople}
screenHeight={innerHeight}
<!-- TODO: Add focus trap -->
<section
transition:fly={{ y: innerHeight, duration: 150, easing: quintOut, opacity: 0 }}
class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
>
<div class="w-full 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, index (person.id)}
<button
type="button"
class="relative"
on:click={() => (person.isHidden = !person.isHidden)}
on:mouseenter={() => (eyeColorMap[person.id] = 'black')}
on:mouseleave={() => (eyeColorMap[person.id] = 'white')}
>
<ImageThumbnail
preload={searchName !== '' || index < 20}
bind:hidden={person.isHidden}
shadow
url={getPeopleThumbnailUrl(person)}
altText={person.name}
widthStyle="100%"
bind:eyeColor={eyeColorMap[person.id]}
/>
{#if person.name}
<span class="absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white">
{person.name}
</span>
{/if}
</button>
{/each}
</div>
</ShowHide>
<ManagePeopleVisibility bind:people onClose={() => (selectHidden = false)} />
</section>
{/if}