refactor: sync implementation

immich-app · Feb 9, 2024 · 52aac3a · 52aac3a
1 parent d484ccc
commit 52aac3a
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 113 deletions.
diff --git a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
@@ -235,6 +235,7 @@
         />
 
         <SettingAccordion
+          key="hardware-acceleration"
           title="Hardware Acceleration"
           subtitle="Experimental; much faster, but will have lower quality at the same bitrate"
         >
@@ -296,7 +297,11 @@
           </div>
         </SettingAccordion>
 
-        <SettingAccordion title="Advanced" subtitle="Options most users should not need to change">
+        <SettingAccordion
+          key="advanced-options"
+          title="Advanced"
+          subtitle="Options most users should not need to change"
+        >
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <SettingInputField
               inputType={SettingInputFieldType.NUMBER}

diff --git a/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte b/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
@@ -26,7 +26,12 @@
 
 <div>
   <div in:fade={{ duration: 500 }}>
-    <SettingAccordion title="Library watching (EXPERIMENTAL)" subtitle="Automatically watch for changed files" isOpen>
+    <SettingAccordion
+      key="library-watching"
+      title="Library watching (EXPERIMENTAL)"
+      subtitle="Automatically watch for changed files"
+      isOpen
+    >
       <form autocomplete="off" on:submit|preventDefault>
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
@@ -70,7 +75,12 @@
       </form>
     </SettingAccordion>
 
-    <SettingAccordion title="Periodic Scanning" subtitle="Configure periodic library scanning" isOpen>
+    <SettingAccordion
+      key="library-scanning"
+      title="Periodic Scanning"
+      subtitle="Configure periodic library scanning"
+      isOpen
+    >
       <form autocomplete="off" on:submit|preventDefault>
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch

diff --git a/...components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte b/...components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
@@ -42,7 +42,11 @@
         />
       </div>
 
-      <SettingAccordion title="Smart Search" subtitle="Search for images semantically using CLIP embeddings">
+      <SettingAccordion
+        key="smart-search"
+        title="Smart Search"
+        subtitle="Search for images semantically using CLIP embeddings"
+      >
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
             title="ENABLED"
@@ -69,7 +73,11 @@
         </div>
       </SettingAccordion>
 
-      <SettingAccordion title="Facial Recognition" subtitle="Detect, recognize and group faces in images">
+      <SettingAccordion
+        key="facial-recognition"
+        title="Facial Recognition"
+        subtitle="Detect, recognize and group faces in images"
+      >
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
             title="ENABLED"

diff --git a/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte b/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
@@ -21,7 +21,7 @@
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" on:submit|preventDefault>
       <div class="flex flex-col gap-4">
-        <SettingAccordion title="Map Settings" subtitle="Manage map settings">
+        <SettingAccordion key="map" title="Map Settings" subtitle="Manage map settings">
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <SettingSwitch
               title="ENABLED"
@@ -51,7 +51,7 @@
           </div></SettingAccordion
         >
 
-        <SettingAccordion title="Reverse Geocoding Settings">
+        <SettingAccordion key="reverse-geocoding" title="Reverse Geocoding Settings">
           <svelte:fragment slot="subtitle">
             <p class="text-sm dark:text-immich-dark-fg">
               Manage <a

diff --git a/web/src/lib/components/admin-page/settings/setting-accordion.svelte b/web/src/lib/components/admin-page/settings/setting-accordion.svelte
@@ -1,37 +1,22 @@
-<script lang="ts" context="module">
-  type T = string;
-</script>
-
-<script lang="ts" generics="T extends string">
-  import { slide } from 'svelte/transition';
+<script lang="ts">
   import { page } from '$app/stores';
-  import { SearchParams } from '$lib/stores/search-params.store';
-  import { onMount } from 'svelte';
+  import { hasParamValue, updateParamList } from '$lib/utils';
+  import { slide } from 'svelte/transition';
+
   export let title: string;
   export let subtitle = '';
-  export let key: T | Array<T> | undefined = undefined;
+  export let key: string;
   export let isOpen = false;
 
-  let searchParams = SearchParams.get<T>('isOpen');
+  const syncFromUrl = () => (isOpen = hasParamValue('isOpen', key));
+  const syncToUrl = (isOpen: boolean) => updateParamList({ param: 'isOpen', value: key, add: isOpen });
 
-  onMount(() => {
-    if (key) {
-      searchParams.set($page.url.searchParams.get('isOpen'));
-      searchParams.hasValue(key).subscribe((hasValue) => (isOpen = hasValue));
-    }
-  });
+  isOpen ? syncToUrl(true) : syncFromUrl();
+  $: $page.url && syncFromUrl();
 
   const toggle = () => {
-    if (!key) {
-      isOpen = !isOpen;
-      return;
-    }
-
-    if (isOpen) {
-      searchParams.removeValue(key);
-    } else {
-      searchParams.addValue(key);
-    }
+    isOpen = !isOpen;
+    syncToUrl(isOpen);
   };
 </script>
 

diff --git a/web/src/lib/components/user-settings-page/user-settings-list.svelte b/web/src/lib/components/user-settings-page/user-settings-list.svelte
@@ -27,32 +27,33 @@
   }
 </script>
 
-<SettingAccordion title="Appearance" subtitle="Manage your Immich appearance">
+<SettingAccordion key="appearance" title="Appearance" subtitle="Manage your Immich appearance">
   <AppearanceSettings />
 </SettingAccordion>
 
-<SettingAccordion title="Account" subtitle="Manage your account">
+<SettingAccordion key="account" title="Account" subtitle="Manage your account">
   <UserProfileSettings user={$user} />
 </SettingAccordion>
 
-<SettingAccordion title="API Keys" subtitle="Manage your API keys">
+<SettingAccordion key="api-keys" title="API Keys" subtitle="Manage your API keys">
   <UserAPIKeyList bind:keys />
 </SettingAccordion>
 
-<SettingAccordion title="Authorized Devices" subtitle="Manage your logged-in devices">
+<SettingAccordion key="authorized-devices" title="Authorized Devices" subtitle="Manage your logged-in devices">
   <DeviceList bind:devices />
 </SettingAccordion>
 
-<SettingAccordion title="Libraries" subtitle="Manage your asset libraries">
+<SettingAccordion key="libraries" title="Libraries" subtitle="Manage your asset libraries">
   <LibraryList />
 </SettingAccordion>
 
-<SettingAccordion title="Memories" subtitle="Manage what you see in your memories.">
+<SettingAccordion key="memories" title="Memories" subtitle="Manage what you see in your memories.">
   <MemoriesSettings user={$user} />
 </SettingAccordion>
 
 {#if $featureFlags.loaded && $featureFlags.oauth}
   <SettingAccordion
+    key="oauth"
     title="OAuth"
     subtitle="Manage your OAuth connection"
     isOpen={oauthOpen ||
@@ -62,18 +63,18 @@
   </SettingAccordion>
 {/if}
 
-<SettingAccordion title="Password" subtitle="Change your password">
+<SettingAccordion key="password" title="Password" subtitle="Change your password">
   <ChangePasswordSettings />
 </SettingAccordion>
 
-<SettingAccordion title="Sharing" subtitle="Manage sharing with partners">
+<SettingAccordion key="sharing" title="Sharing" subtitle="Manage sharing with partners">
   <PartnerSettings user={$user} />
 </SettingAccordion>
 
-<SettingAccordion title="Sidebar" subtitle="Manage sidebar settings">
+<SettingAccordion key="sidebar" title="Sidebar" subtitle="Manage sidebar settings">
   <SidebarSettings />
 </SettingAccordion>
 
-<SettingAccordion title="Trash" subtitle="Manage trash settings">
+<SettingAccordion key="trash" title="Trash" subtitle="Manage trash settings">
   <TrashSettings />
 </SettingAccordion>
diff --git a/web/src/lib/stores/search-params.store.ts b/web/src/lib/stores/search-params.store.ts
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
@@ -0,0 +1,32 @@
+import { goto } from '$app/navigation';
+import { page } from '$app/stores';
+import { get } from 'svelte/store';
+
+interface UpdateParamAction {
+  param: string;
+  value: string;
+  add: boolean;
+}
+
+const getParamValues = (param: string) =>
+  new Set((get(page).url.searchParams.get(param) || '').split(' ').filter((x) => x !== ''));
+
+export const hasParamValue = (param: string, value: string) => getParamValues(param).has(value);
+
+export const updateParamList = async ({ param, value, add }: UpdateParamAction) => {
+  const values = getParamValues(param);
+
+  if (add) {
+    values.add(value);
+  } else {
+    values.delete(value);
+  }
+
+  get(page).url.searchParams.set(param, [...values.values()].join(' '));
+
+  if (values.size === 0) {
+    get(page).url.searchParams.delete(param);
+  }
+
+  await goto(get(page).url, { replaceState: true, noScroll: true, keepFocus: true });
+};
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
@@ -16,7 +16,7 @@
   import { downloadManager } from '$lib/stores/download';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { downloadBlob } from '$lib/utils/asset-utils';
-  import { type SystemConfigDto, copyToClipboard } from '@api';
+  import { copyToClipboard } from '@api';
   import Icon from '$lib/components/elements/icon.svelte';
   import type { PageData } from './$types';
   import NewVersionCheckSettings from '$lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte';
@@ -59,7 +59,7 @@
     item: Settings;
     title: string;
     subtitle: string;
-    key: keyof SystemConfigDto | Array<keyof SystemConfigDto>;
+    key: string;
   }> = [
     {
       item: JobSettings,
@@ -83,13 +83,13 @@
       item: MachineLearningSettings,
       title: 'Machine Learning Settings',
       subtitle: 'Manage machine learning features and settings',
-      key: 'machineLearning',
+      key: 'machine-learning',
     },
     {
       item: MapSettings,
       title: 'Map & GPS Settings',
       subtitle: 'Manage map related features and setting',
-      key: ['map', 'reverseGeocoding'],
+      key: 'location',
     },
     {
       item: OAuthSettings,
@@ -101,7 +101,7 @@
       item: PasswordLoginSettings,
       title: 'Password Authentication',
       subtitle: 'Manage the login with password settings',
-      key: 'passwordLogin',
+      key: 'password',
     },
     {
       item: ServerSettings,
@@ -113,7 +113,7 @@
       item: StorageTemplateSettings,
       title: 'Storage Template',
       subtitle: 'Manage the folder structure and file name of the upload asset',
-      key: 'storageTemplate',
+      key: 'storage-template',
     },
     {
       item: ThemeSettings,
@@ -137,13 +137,13 @@
       item: NewVersionCheckSettings,
       title: 'Version Check',
       subtitle: 'Enable/disable the new version notification',
-      key: 'newVersionCheck',
+      key: 'version-check',
     },
     {
       item: FFmpegSettings,
       title: 'Video Transcoding Settings',
       subtitle: 'Manage the resolution and encoding information of the video files',
-      key: 'ffmpeg',
+      key: 'video-transcoding',
     },
   ];
 </script>