immich-app · alextran1502 · Jul 10, 2024 · Jul 10, 2024
diff --git a/web/src/lib/components/admin-page/settings/admin-settings.svelte b/web/src/lib/components/admin-page/settings/admin-settings.svelte
@@ -9,19 +9,17 @@
   import { getConfig, getConfigDefaults, updateConfig, type SystemConfigDto } from '@immich/sdk';
   import { loadConfig } from '$lib/stores/server-config.store';
   import { cloneDeep } from 'lodash-es';
-  import { createEventDispatcher, onMount } from 'svelte';
-  import type { SettingsEventType } from './admin-settings';
+  import { onMount } from 'svelte';
+  import type { SettingsResetOptions } from './admin-settings';
   import { t } from 'svelte-i18n';
 
   export let config: SystemConfigDto;
 
   let savedConfig: SystemConfigDto;
   let defaultConfig: SystemConfigDto;
 
-  const dispatch = createEventDispatcher<{ save: void }>();
-
-  const handleReset = async (detail: SettingsEventType['reset']) => {
-    await (detail.default ? resetToDefault(detail.configKeys) : reset(detail.configKeys));
+  const handleReset = async (options: SettingsResetOptions) => {
+    await (options.default ? resetToDefault(options.configKeys) : reset(options.configKeys));
   };
 
   export const handleSave = async (update: Partial<SystemConfigDto>) => {
@@ -38,8 +36,6 @@
       notificationController.show({ message: $t('settings_saved'), type: NotificationType.Info });
 
       await loadConfig();
-
-      dispatch('save');
     } catch (error) {
       handleError(error, $t('errors.unable_to_save_settings'));
     }

diff --git a/web/src/lib/components/admin-page/settings/admin-settings.ts b/web/src/lib/components/admin-page/settings/admin-settings.ts
@@ -1,7 +1,15 @@
 import type { ResetOptions } from '$lib/utils/dipatch';
 import type { SystemConfigDto } from '@immich/sdk';
 
-export type SettingsEventType = {
-  reset: ResetOptions & { configKeys: Array<keyof SystemConfigDto> };
-  save: Partial<SystemConfigDto>;
+export type SettingsResetOptions = ResetOptions & { configKeys: Array<keyof SystemConfigDto> };
+export type SettingsResetEvent = (options: SettingsResetOptions) => void;
+export type SettingsSaveEvent = (config: Partial<SystemConfigDto>) => void;
+
+export type SettingsComponentProps = {
+  disabled?: boolean;
+  defaultConfig: SystemConfigDto;
+  config: SystemConfigDto;
+  savedConfig: SystemConfigDto;
+  onReset: SettingsResetEvent;
+  onSave: SettingsSaveEvent;
 };
diff --git a/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte b/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
@@ -8,18 +8,17 @@
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import { t } from 'svelte-i18n';
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 
   let isConfirmOpen = false;
 
@@ -39,7 +38,7 @@
     }
 
     isConfirmOpen = false;
-    dispatch('save', { passwordLogin: config.passwordLogin, oauth: config.oauth });
+    onSave({ passwordLogin: config.passwordLogin, oauth: config.oauth });
   };
 </script>
 
@@ -240,8 +239,8 @@
           showResetToDefault={!isEqual(savedConfig.passwordLogin, defaultConfig.passwordLogin) ||
             !isEqual(savedConfig.oauth, defaultConfig.oauth)}
           {disabled}
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['passwordLogin', 'oauth'] })}
-          on:save={() => handleSave(false)}
+          onReset={(options) => onReset({ ...options, configKeys: ['passwordLogin', 'oauth'] })}
+          onSave={() => handleSave(false)}
         />
       </div>
     </form>

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
@@ -11,9 +11,8 @@
   } from '@immich/sdk';
   import { mdiHelpCircleOutline } from '@mdi/js';
   import { isEqual, sortBy } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingInputField, {
     SettingInputFieldType,
@@ -29,8 +28,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div>
@@ -368,8 +367,8 @@
 
       <div class="ml-4">
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['ffmpeg'] })}
-          on:save={() => dispatch('save', { ffmpeg: config.ffmpeg })}
+          onReset={(options) => onReset({ ...options, configKeys: ['ffmpeg'] })}
+          onSave={() => onSave({ ffmpeg: config.ffmpeg })}
           showResetToDefault={!isEqual(savedConfig.ffmpeg, defaultConfig.ffmpeg)}
           {disabled}
         />

diff --git a/web/src/lib/components/admin-page/settings/image/image-settings.svelte b/web/src/lib/components/admin-page/settings/image/image-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { Colorspace, ImageFormat, type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
 
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
@@ -17,8 +16,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div>
@@ -114,8 +113,8 @@
 
       <div class="ml-4">
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['image'] })}
-          on:save={() => dispatch('save', { image: config.image })}
+          onReset={(options) => onReset({ ...options, configKeys: ['image'] })}
+          onSave={() => onSave({ image: config.image })}
           showResetToDefault={!isEqual(savedConfig.image, defaultConfig.image)}
           {disabled}
         />

diff --git a/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte b/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
@@ -2,9 +2,8 @@
   import { getJobName } from '$lib/utils';
   import { JobName, type SystemConfigDto, type SystemConfigJobDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingInputField, {
     SettingInputFieldType,
@@ -15,8 +14,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 
   const jobNames = [
     JobName.ThumbnailGeneration,
@@ -67,8 +66,8 @@
 
       <div class="ml-4">
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['job'] })}
-          on:save={() => dispatch('save', { job: config.job })}
+          onReset={(options) => onReset({ ...options, configKeys: ['job'] })}
+          onSave={() => onSave({ job: config.job })}
           showResetToDefault={!isEqual(savedConfig.job, defaultConfig.job)}
           {disabled}
         />

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
@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingInputField, {
     SettingInputFieldType,
@@ -17,15 +16,15 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 
   $: cronExpressionOptions = [
     { title: $t('interval.night_at_midnight'), expression: '0 0 * * *' },
     { title: $t('interval.night_at_twoam'), expression: '0 2 * * *' },
     { title: $t('interval.day_at_onepm'), expression: '0 13 * * *' },
     { title: $t('interval.hours', { values: { hours: 6 } }), expression: '0 */6 * * *' },
   ];
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
 </script>
 
 <div>
@@ -47,8 +46,8 @@
 
         <div class="ml-4">
           <SettingButtonsRow
-            on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['library'] })}
-            on:save={() => dispatch('save', { library: config.library })}
+            onReset={(options) => onReset({ ...options, configKeys: ['library'] })}
+            onSave={() => onSave({ library: config.library })}
             showResetToDefault={!isEqual(savedConfig.library, defaultConfig.library)}
             {disabled}
           />
@@ -112,8 +111,8 @@
 
         <div class="ml-4">
           <SettingButtonsRow
-            on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['library'] })}
-            on:save={() => dispatch('save', { library: config.library })}
+            onReset={(options) => onReset({ ...options, configKeys: ['library'] })}
+            onSave={() => onSave({ library: config.library })}
             showResetToDefault={!isEqual(savedConfig.library, defaultConfig.library)}
             {disabled}
           />

diff --git a/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte b/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { LogLevel, type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
@@ -13,8 +12,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div>
@@ -44,8 +43,8 @@
         />
 
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['logging'] })}
-          on:save={() => dispatch('save', { logging: config.logging })}
+          onReset={(options) => onReset({ ...options, configKeys: ['logging'] })}
+          onSave={() => onSave({ logging: config.logging })}
           showResetToDefault={!isEqual(savedConfig.logging, defaultConfig.logging)}
           {disabled}
         />

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
@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingInputField, {
@@ -19,8 +18,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div class="mt-2">
@@ -181,8 +180,8 @@
       </SettingAccordion>
 
       <SettingButtonsRow
-        on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['machineLearning'] })}
-        on:save={() => dispatch('save', { machineLearning: config.machineLearning })}
+        onReset={(options) => onReset({ ...options, configKeys: ['machineLearning'] })}
+        onSave={() => onSave({ machineLearning: config.machineLearning })}
         showResetToDefault={!isEqual(savedConfig.machineLearning, defaultConfig.machineLearning)}
         {disabled}
       />

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
@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
@@ -17,8 +16,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div class="mt-2">
@@ -75,8 +74,8 @@
         >
 
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['map', 'reverseGeocoding'] })}
-          on:save={() => dispatch('save', { map: config.map, reverseGeocoding: config.reverseGeocoding })}
+          onReset={(options) => onReset({ ...options, configKeys: ['map', 'reverseGeocoding'] })}
+          onSave={() => onSave({ map: config.map, reverseGeocoding: config.reverseGeocoding })}
           showResetToDefault={!isEqual(
             { map: savedConfig.map, reverseGeocoding: savedConfig.reverseGeocoding },
             { map: defaultConfig.map, reverseGeocoding: defaultConfig.reverseGeocoding },

diff --git a/...mponents/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte b/...mponents/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import type { SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
-  import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { SettingsEventType } from '../admin-settings';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { t } from 'svelte-i18n';
@@ -12,8 +11,8 @@
   export let defaultConfig: SystemConfigDto;
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<SettingsEventType>();
+  export let onReset: SettingsResetEvent;
+  export let onSave: SettingsSaveEvent;
 </script>
 
 <div>
@@ -26,8 +25,8 @@
           {disabled}
         />
         <SettingButtonsRow
-          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['newVersionCheck'] })}
-          on:save={() => dispatch('save', { newVersionCheck: config.newVersionCheck })}
+          onReset={(options) => onReset({ ...options, configKeys: ['newVersionCheck'] })}
+          onSave={() => onSave({ newVersionCheck: config.newVersionCheck })}
           showResetToDefault={!isEqual(savedConfig.newVersionCheck, defaultConfig.newVersionCheck)}
           {disabled}
         />