Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-11-03 19:17:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): allow hiding all unnamed faces and reset hidden faces (#9378)

Browse Source 
* feat: hide all unnamed

* feat: remove dispatch event

* pr feedback
This commit is contained in:
martin 2024-05-13 12:17:52 +02:00 committed by GitHub
parent 2ae44022c2
commit aa1dc68867
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 55 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/src/lib/components/faces-page/show-hide.svelte
View File

@ -1,24 +1,46 @@
<script lang="ts" context="module">
export enum ToggleVisibilty {
HIDE_ALL = 'hide-all',
HIDE_UNNANEMD = 'hide-unnamed',
VIEW_ALL = 'view-all',
}
</script>
<script lang="ts">
import { fly } from 'svelte/transition';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import { quintOut } from 'svelte/easing';
import { createEventDispatcher } from 'svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { mdiClose, mdiEye, mdiEyeOff, mdiRestart } from '@mdi/js';
import { mdiClose, mdiEye, mdiEyeOff, mdiEyeSettings, mdiRestart } from '@mdi/js';
import { locale } from '$lib/stores/preferences.store';
import Button from '$lib/components/elements/buttons/button.svelte';
const dispatch = createEventDispatcher<{
close: void;
reset: void;
change: void;
done: void;
}>();
export let showLoadingSpinner: boolean;
export let toggleVisibility: boolean;
export let toggleVisibility: ToggleVisibilty = ToggleVisibilty.VIEW_ALL;
export let screenHeight: number;
export let countTotalPeople: number;
export let onClose: () => void;
export let onReset: () => void;
export let onChange: (toggleVisibility: ToggleVisibilty) => void;
export let onDone: () => void;
const getNextVisibility = (toggleVisibility: ToggleVisibilty) => {
if (toggleVisibility === ToggleVisibilty.VIEW_ALL) {
return ToggleVisibilty.HIDE_UNNANEMD;
} else if (toggleVisibility === ToggleVisibilty.HIDE_UNNANEMD) {
return ToggleVisibilty.HIDE_ALL;
} else {
return ToggleVisibilty.VIEW_ALL;
}
};
const toggleIconOptions: Record<ToggleVisibilty, string> = {
[ToggleVisibilty.HIDE_ALL]: mdiEyeOff,
[ToggleVisibilty.HIDE_UNNANEMD]: mdiEyeSettings,
[ToggleVisibilty.VIEW_ALL]: mdiEye,
};
$: toggleIcon = toggleIconOptions[toggleVisibility];
</script>
<section
@ -29,7 +51,7 @@
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 title="Close" icon={mdiClose} on:click={() => dispatch('close')} />
<CircleIconButton title="Close" icon={mdiClose} on:click={onClose} />
<div class="flex gap-2 items-center">
<p class="ml-2">Show & hide people</p>
<p class="text-sm text-gray-400 dark:text-gray-600">({countTotalPeople.toLocaleString($locale)})</p>
@ -37,15 +59,15 @@
</div>
<div class="flex items-center justify-end">
<div class="flex items-center md:mr-8">
<CircleIconButton title="Reset people visibility" icon={mdiRestart} on:click={() => dispatch('reset')} />
<CircleIconButton title="Reset people visibility" icon={mdiRestart} on:click={onReset} />
<CircleIconButton
title="Toggle visibility"
icon={toggleVisibility ? mdiEye : mdiEyeOff}
on:click={() => dispatch('change')}
icon={toggleIcon}
on:click={() => onChange(getNextVisibility(toggleVisibility))}
/>
</div>
{#if !showLoadingSpinner}
<Button on:click={() => dispatch('done')} size="sm" rounded="lg">Done</Button>
<Button on:click={onDone} size="sm" rounded="lg">Done</Button>
{:else}
<LoadingSpinner />
{/if}

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

@ -7,7 +7,7 @@
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
import PeopleCard from '$lib/components/faces-page/people-card.svelte';
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
import ShowHide from '$lib/components/faces-page/show-hide.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 {
@ -48,7 +48,7 @@
let searchName = '';
let showLoadingSpinner = false;
let toggleVisibility = false;
let toggleVisibility: ToggleVisibilty = ToggleVisibilty.VIEW_ALL;
let showChangeNameModal = false;
let showSetBirthDateModal = false;
@ -104,7 +104,7 @@
// Reset variables used on the "Show & hide people" modal
showLoadingSpinner = false;
selectHidden = false;
toggleVisibility = false;
toggleVisibility = ToggleVisibilty.VIEW_ALL;
};
const handleResetVisibility = () => {
@ -116,10 +116,17 @@
people = people;
};
const handleToggleVisibility = () => {
toggleVisibility = !toggleVisibility;
const handleToggleVisibility = (toggleVisibility: ToggleVisibilty) => {
for (const person of people) {
person.isHidden = toggleVisibility;
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
@ -172,7 +179,7 @@
// Reset variables used on the "Show & hide people" modal
showLoadingSpinner = false;
selectHidden = false;
toggleVisibility = false;
toggleVisibility = ToggleVisibilty.VIEW_ALL;
};
const handleMergeSamePerson = async (response: [PersonResponseDto, PersonResponseDto]) => {
@ -483,10 +490,10 @@
</UserPageLayout>
{#if selectHidden}
<ShowHide
on:done={handleDoneClick}
on:close={handleCloseClick}
on:reset={handleResetVisibility}
on:change={handleToggleVisibility}
onDone={handleDoneClick}
onClose={handleCloseClick}
onReset={handleResetVisibility}
onChange={handleToggleVisibility}
bind:showLoadingSpinner
bind:toggleVisibility
{countTotalPeople}