feat: hide all unnamed

immich-app · May 10, 2024 · 987177f · 987177f
1 parent 757840c
commit 987177f
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 11 deletions.
diff --git a/web/src/lib/components/faces-page/show-hide.svelte b/web/src/lib/components/faces-page/show-hide.svelte
@@ -1,24 +1,50 @@
+<script lang="ts" context="module">
+  export enum ToggleVisibilty {
+    HIDE_ALL = 'hide-all',
+    HIDE_UNNANEMD = 'hide-unnamed',
+    VIEW_ALL = 'view-all',
+  }
+
+  export const changeVisibility = (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;
+    }
+  };
+</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;
+    change: ToggleVisibilty;
     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;
+
+  const toggleIconOptions: Record<ToggleVisibilty, string> = {
+    [ToggleVisibilty.HIDE_ALL]: mdiEyeOff,
+    [ToggleVisibilty.HIDE_UNNANEMD]: mdiEyeSettings,
+    [ToggleVisibilty.VIEW_ALL]: mdiEye,
+  };
+
+  $: toggleIcon = toggleIconOptions[toggleVisibility];
 </script>
 
 <section
@@ -40,8 +66,8 @@
         <CircleIconButton title="Reset people visibility" icon={mdiRestart} on:click={() => dispatch('reset')} />
         <CircleIconButton
           title="Toggle visibility"
-          icon={toggleVisibility ? mdiEye : mdiEyeOff}
-          on:click={() => dispatch('change')}
+          icon={toggleIcon}
+          on:click={() => dispatch('change', toggleVisibility)}
         />
       </div>
       {#if !showLoadingSpinner}

diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
@@ -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, { changeVisibility, 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 = () => {
@@ -117,9 +117,17 @@
   };
 
   const handleToggleVisibility = () => {
-    toggleVisibility = !toggleVisibility;
+    toggleVisibility = changeVisibility(toggleVisibility);
     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 +180,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]) => {