tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-10-31 10:49:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): use callbacks for admin setting events (#10997)

Browse Source
This commit is contained in:
Michel Heusschen 2024-07-10 15:57:18 +02:00 committed by GitHub
parent 545b206076
commit 1dd1d36120
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 125 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/lib/components/admin-page/settings/admin-settings.svelte
View File

@ -9,8 +9,8 @@
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;
@ -18,10 +18,8 @@
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'));
}

14
web/src/lib/components/admin-page/settings/admin-settings.ts
View File

@ -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;
};

13
web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
View File

@ -8,9 +8,8 @@
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';
@ -18,8 +17,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;
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>

11
web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
View File

@ -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}
/>

11
web/src/lib/components/admin-page/settings/image/image-settings.svelte
View File

@ -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}
/>

11
web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
View File

@ -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}
/>

15
web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
View File

@ -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,6 +16,8 @@
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 * * *' },
@ -24,8 +25,6 @@
{ 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}
/>

11
web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
View File

@ -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}
/>

11
web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
View File

@ -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}
/>

11
web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
View File

@ -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 },

11
web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
View File

@ -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}
/>

13
web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte
View File

@ -1,9 +1,8 @@
<script lang="ts">
import { sendTestEmail, 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 SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
@ -24,8 +23,10 @@
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;
let isSending = false;
const dispatch = createEventDispatcher<SettingsEventType>();
const handleSendTestEmail = async () => {
if (isSending) {
@ -56,7 +57,7 @@
});
if (!disabled) {
dispatch('save', { notifications: config.notifications });
onSave({ notifications: config.notifications });
}
} catch (error) {
handleError(error, $t('admin.notification_email_test_email_failed'));
@ -156,8 +157,8 @@
</div>
<SettingButtonsRow
on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['notifications'] })}
on:save={() => dispatch('save', { notifications: config.notifications })}
onReset={(options) => onReset({ ...options, configKeys: ['notifications'] })}
onSave={() => onSave({ notifications: config.notifications })}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>

11
web/src/lib/components/admin-page/settings/server/server-settings.svelte
View File

@ -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 SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
@ -14,8 +13,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>
@ -40,8 +39,8 @@
<div class="ml-4">
<SettingButtonsRow
on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['server'] })}
on:save={() => dispatch('save', { server: config.server })}
onReset={(options) => onReset({ ...options, configKeys: ['server'] })}
onSave={() => onSave({ server: config.server })}
showResetToDefault={!isEqual(savedConfig.server, defaultConfig.server)}
{disabled}
/>

10
web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
View File

@ -10,9 +10,8 @@
import handlebar from 'handlebars';
import { isEqual } from 'lodash-es';
import * as luxon from 'luxon';
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import type { SettingsEventType } from '../admin-settings';
import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
import SupportedDatetimePanel from './supported-datetime-panel.svelte';
import SupportedVariablesPanel from './supported-variables-panel.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
@ -28,8 +27,9 @@
export let config: SystemConfigDto; // this is the config that is being edited
export let disabled = false;
export let minified = false;
export let onReset: SettingsResetEvent;
export let onSave: SettingsSaveEvent;
const dispatch = createEventDispatcher<SettingsEventType>();
let templateOptions: SystemConfigTemplateStorageOptionDto;
let selectedPreset = '';
@ -249,8 +249,8 @@
<slot />
{:else}
<SettingButtonsRow
on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['storageTemplate'] })}
on:save={() => dispatch('save', { storageTemplate: config.storageTemplate })}
onReset={(options) => onReset({ ...options, configKeys: ['storageTemplate'] })}
onSave={() => onSave({ storageTemplate: config.storageTemplate })}
showResetToDefault={!isEqual(savedConfig.storageTemplate, defaultConfig.storageTemplate) && !minified}
{disabled}
/>

11
web/src/lib/components/admin-page/settings/theme/theme-settings.svelte
View File

@ -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 SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.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>
@ -30,8 +29,8 @@
/>
<SettingButtonsRow
on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['theme'] })}
on:save={() => dispatch('save', { theme: config.theme })}
onReset={(options) => onReset({ ...options, configKeys: ['theme'] })}
onSave={() => onSave({ theme: config.theme })}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>

11
web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
View File

@ -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 SettingSwitch from '$lib/components/shared-components/settings/setting-switch.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;
</script>
<div>
@ -38,8 +37,8 @@
/>
<SettingButtonsRow
on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['trash'] })}
on:save={() => dispatch('save', { trash: config.trash })}
onReset={(options) => onReset({ ...options, configKeys: ['trash'] })}
onSave={() => onSave({ trash: config.trash })}
showResetToDefault={!isEqual(savedConfig.trash, defaultConfig.trash)}
{disabled}
/>

11
web/src/lib/components/admin-page/settings/user-settings/user-settings.svelte
View File

@ -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 SettingInputField, {
@ -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;
</script>
<div>
@ -35,8 +34,8 @@
<div class="ml-4">
<SettingButtonsRow
on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['user'] })}
on:save={() => dispatch('save', { user: config.user })}
onReset={(options) => onReset({ ...options, configKeys: ['user'] })}
onSave={() => onSave({ user: config.user })}
showResetToDefault={!isEqual(savedConfig.user, defaultConfig.user)}
{disabled}
/>

4
web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
View File

@ -43,8 +43,8 @@
{config}
{defaultConfig}
{savedConfig}
on:save={({ detail }) => handleSave(detail)}
on:reset={({ detail }) => handleReset(detail)}
onSave={(config) => handleSave(config)}
onReset={(options) => handleReset(options)}
>
<div class="flex pt-4">
<div class="w-full flex place-content-start">

16
web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
View File

@ -1,16 +1,12 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
import { createEventDispatcher } from 'svelte';
import { t } from 'svelte-i18n';
const dispatch = createEventDispatcher<{
reset: ResetOptions;
save: void;
}>();
export let showResetToDefault = true;
export let disabled = false;
export let onReset: (options: ResetOptions) => void;
export let onSave: () => void;
</script>
<div class="mt-8 flex justify-between gap-2">
@ -18,7 +14,7 @@
{#if showResetToDefault}
<button
type="button"
on:click={() => dispatch('reset', { default: true })}
on:click={() => onReset({ default: true })}
class="bg-none text-sm font-medium text-immich-primary hover:text-immich-primary/75 dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75"
>
{$t('reset_to_default')}
@ -27,9 +23,7 @@
</div>
<div class="right">
<Button {disabled} size="sm" color="gray" on:click={() => dispatch('reset', { default: false })}
>{$t('reset')}</Button
>
<Button type="submit" {disabled} size="sm" on:click={() => dispatch('save')}>{$t('save')}</Button>
<Button {disabled} size="sm" color="gray" on:click={() => onReset({ default: false })}>{$t('reset')}</Button>
<Button type="submit" {disabled} size="sm" on:click={() => onSave()}>{$t('save')}</Button>
</div>
</div>

60
web/src/routes/admin/system-settings/+page.svelte
View File

@ -29,28 +29,15 @@
import { mdiAlert, mdiContentCopy, mdiDownload, mdiUpload } from '@mdi/js';
import type { PageData } from './$types';
import { t } from 'svelte-i18n';
import type { ComponentType, SvelteComponent } from 'svelte';
import type { SettingsComponentProps } from '$lib/components/admin-page/settings/admin-settings';
export let data: PageData;
let config = data.configs;
let handleSave: (update: Partial<SystemConfigDto>) => Promise<void>;
type Settings =
| typeof AuthSettings
| typeof JobSettings
| typeof LibrarySettings
| typeof LoggingSettings
| typeof MachineLearningSettings
| typeof MapSettings
| typeof ServerSettings
| typeof StorageTemplateSettings
| typeof ThemeSettings
| typeof ImageSettings
| typeof TrashSettings
| typeof NewVersionCheckSettings
| typeof NotificationSettings
| typeof FFmpegSettings
| typeof UserSettings;
type SettingsComponent = ComponentType<SvelteComponent<SettingsComponentProps>>;
const downloadConfig = () => {
const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
@ -76,97 +63,97 @@
};
const settings: Array<{
item: Settings;
component: SettingsComponent;
title: string;
subtitle: string;
key: string;
}> = [
{
item: AuthSettings,
component: AuthSettings,
title: $t('admin.authentication_settings'),
subtitle: $t('admin.authentication_settings_description'),
key: 'image',
},
{
item: ImageSettings,
component: ImageSettings,
title: $t('admin.image_settings'),
subtitle: $t('admin.image_settings_description'),
key: 'image',
},
{
item: JobSettings,
component: JobSettings,
title: $t('admin.job_settings'),
subtitle: $t('admin.job_settings_description'),
key: 'job',
},
{
item: LibrarySettings,
component: LibrarySettings,
title: $t('admin.library_settings'),
subtitle: $t('admin.library_settings_description'),
key: 'external-library',
},
{
item: LoggingSettings,
component: LoggingSettings,
title: $t('admin.logging_settings'),
subtitle: $t('admin.manage_log_settings'),
key: 'logging',
},
{
item: MachineLearningSettings,
component: MachineLearningSettings,
title: $t('admin.machine_learning_settings'),
subtitle: $t('admin.machine_learning_settings_description'),
key: 'machine-learning',
},
{
item: MapSettings,
component: MapSettings,
title: $t('admin.map_settings'),
subtitle: $t('admin.map_settings_description'),
key: 'location',
},
{
item: NotificationSettings,
component: NotificationSettings,
title: $t('admin.notification_settings'),
subtitle: $t('admin.notification_settings_description'),
key: 'notifications',
},
{
item: ServerSettings,
component: ServerSettings,
title: $t('admin.server_settings'),
subtitle: $t('admin.server_settings_description'),
key: 'server',
},
{
item: StorageTemplateSettings,
component: StorageTemplateSettings,
title: $t('admin.storage_template_settings'),
subtitle: $t('admin.storage_template_settings_description'),
key: 'storage-template',
},
{
item: ThemeSettings,
component: ThemeSettings,
title: $t('admin.theme_settings'),
subtitle: $t('admin.theme_settings_description'),
key: 'theme',
},
{
item: TrashSettings,
component: TrashSettings,
title: $t('admin.trash_settings'),
subtitle: $t('admin.trash_settings_description'),
key: 'trash',
},
{
item: UserSettings,
component: UserSettings,
title: $t('admin.user_settings'),
subtitle: $t('admin.user_settings_description'),
key: 'user-settings',
},
{
item: NewVersionCheckSettings,
component: NewVersionCheckSettings,
title: $t('admin.version_check_settings'),
subtitle: $t('admin.version_check_settings_description'),
key: 'version-check',
},
{
item: FFmpegSettings,
component: FFmpegSettings,
title: $t('admin.transcoding_settings'),
subtitle: $t('admin.transcoding_settings_description'),
key: 'video-transcoding',
@ -212,12 +199,11 @@
<section id="setting-content" class="flex place-content-center sm:mx-4">
<section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
<SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
{#each settings as { item, title, subtitle, key }}
{#each settings as { component: Component, title, subtitle, key }}
<SettingAccordion {title} {subtitle} {key}>
<svelte:component
this={item}
on:save={({ detail }) => handleSave(detail)}
on:reset={({ detail }) => handleReset(detail)}
<Component
onSave={(config) => handleSave(config)}
onReset={(options) => handleReset(options)}
disabled={$featureFlags.configFile}
{defaultConfig}
{config}