mirror of
https://github.com/immich-app/immich.git
synced 2025-12-24 01:11:32 +03:00
refactor(web): admin settings (#6177)
* refactor admin settings * use slots to render buttons in simplified template settings * remove more boilerplate by looping over components * fix: onboarding * fix: reset/reset to default * remove lodash since it is unecessary * chore: standardize padding and margins --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Daniel Dietzler
@@ -17,26 +17,116 @@
|
||||
import { downloadManager } from '$lib/stores/download';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { downloadBlob } from '$lib/utils/asset-utils';
|
||||
import { copyToClipboard } from '@api';
|
||||
import { SystemConfigDto, 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';
|
||||
import LibrarySettings from '$lib/components/admin-page/settings/library-settings/library-settings.svelte';
|
||||
import LoggingSettings from '$lib/components/admin-page/settings/logging-settings/logging-settings.svelte';
|
||||
import { mdiAlert, mdiContentCopy, mdiDownload } from '@mdi/js';
|
||||
import _ from 'lodash';
|
||||
import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
const configs = data.configs;
|
||||
let config = data.configs;
|
||||
let openSettings = ($page.url.searchParams.get('open')?.split(',') || []) as Array<keyof SystemConfigDto>;
|
||||
|
||||
const downloadConfig = () => {
|
||||
const blob = new Blob([JSON.stringify(configs, null, 2)], { type: 'application/json' });
|
||||
const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
|
||||
const downloadKey = 'immich-config.json';
|
||||
downloadManager.add(downloadKey, blob.size);
|
||||
downloadManager.update(downloadKey, blob.size);
|
||||
downloadBlob(blob, downloadKey);
|
||||
setTimeout(() => downloadManager.clear(downloadKey), 5_000);
|
||||
};
|
||||
|
||||
const settings = [
|
||||
{
|
||||
item: JobSettings,
|
||||
title: 'Job Settings',
|
||||
subtitle: 'Manage job concurrency',
|
||||
isOpen: openSettings.includes('job'),
|
||||
},
|
||||
{
|
||||
item: LibrarySettings,
|
||||
title: 'Library',
|
||||
subtitle: 'Manage library settings',
|
||||
isOpen: openSettings.includes('library'),
|
||||
},
|
||||
{
|
||||
item: LoggingSettings,
|
||||
title: 'Logging',
|
||||
subtitle: 'Manage log settings',
|
||||
isOpen: openSettings.includes('logging'),
|
||||
},
|
||||
{
|
||||
item: MachineLearningSettings,
|
||||
title: 'Machine Learning Settings',
|
||||
subtitle: 'Manage machine learning features and settings',
|
||||
isOpen: openSettings.includes('machineLearning'),
|
||||
},
|
||||
{
|
||||
item: MapSettings,
|
||||
title: 'Map & GPS Settings',
|
||||
subtitle: 'Manage map related features and setting',
|
||||
isOpen: openSettings.some((key) => ['map', 'reverseGeocoding'].includes(key)),
|
||||
},
|
||||
{
|
||||
item: OAuthSettings,
|
||||
title: 'OAuth Authentication',
|
||||
subtitle: 'Manage the login with OAuth settings',
|
||||
isOpen: openSettings.includes('oauth'),
|
||||
},
|
||||
{
|
||||
item: PasswordLoginSettings,
|
||||
title: 'Password Authentication',
|
||||
subtitle: 'Manage the login with password settings',
|
||||
isOpen: openSettings.includes('passwordLogin'),
|
||||
},
|
||||
{
|
||||
item: ServerSettings,
|
||||
title: 'Server Settings',
|
||||
subtitle: 'Manage server settings',
|
||||
isOpen: openSettings.includes('server'),
|
||||
},
|
||||
{
|
||||
item: StorageTemplateSettings,
|
||||
title: 'Storage Template',
|
||||
subtitle: 'Manage the folder structure and file name of the upload asset',
|
||||
isOpen: openSettings.includes('storageTemplate'),
|
||||
},
|
||||
{
|
||||
item: ThemeSettings,
|
||||
title: 'Theme Settings',
|
||||
subtitle: 'Manage customization of the Immich web interface',
|
||||
isOpen: openSettings.includes('theme'),
|
||||
},
|
||||
{
|
||||
item: ThumbnailSettings,
|
||||
title: 'Thumbnail Settings',
|
||||
subtitle: 'Manage the resolution of thumbnail sizes',
|
||||
isOpen: openSettings.includes('thumbnail'),
|
||||
},
|
||||
{
|
||||
item: TrashSettings,
|
||||
title: 'Trash Settings',
|
||||
subtitle: 'Manage trash settings',
|
||||
isOpen: openSettings.includes('trash'),
|
||||
},
|
||||
{
|
||||
item: NewVersionCheckSettings,
|
||||
title: 'Version Check',
|
||||
subtitle: 'Enable/disable the new version notification',
|
||||
isOpen: openSettings.includes('newVersionCheck'),
|
||||
},
|
||||
{
|
||||
item: FFmpegSettings,
|
||||
title: 'Video Transcoding Settings',
|
||||
subtitle: 'Manage the resolution and encoding information of the video files',
|
||||
isOpen: openSettings.includes('ffmpeg'),
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
{#if $featureFlags.configFile}
|
||||
@@ -48,7 +138,7 @@
|
||||
|
||||
<UserPageLayout title={data.meta.title} admin>
|
||||
<div class="flex justify-end gap-2" slot="buttons">
|
||||
<LinkButton on:click={() => copyToClipboard(JSON.stringify(configs, null, 2))}>
|
||||
<LinkButton on:click={() => copyToClipboard(JSON.stringify(config, null, 2))}>
|
||||
<div class="flex place-items-center gap-2 text-sm">
|
||||
<Icon path={mdiContentCopy} size="18" />
|
||||
Copy to Clipboard
|
||||
@@ -62,74 +152,23 @@
|
||||
</LinkButton>
|
||||
</div>
|
||||
|
||||
<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]">
|
||||
<SettingAccordion
|
||||
title="Job Settings"
|
||||
subtitle="Manage job concurrency"
|
||||
isOpen={$page.url.searchParams.get('open') === 'job-settings'}
|
||||
>
|
||||
<JobSettings disabled={$featureFlags.configFile} jobConfig={configs.job} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Library" subtitle="Manage library settings">
|
||||
<LibrarySettings disabled={$featureFlags.configFile} libraryConfig={configs.library} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Logging" subtitle="Manage log settings">
|
||||
<LoggingSettings disabled={$featureFlags.configFile} loggingConfig={configs.logging} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Machine Learning Settings" subtitle="Manage machine learning features and settings">
|
||||
<MachineLearningSettings disabled={$featureFlags.configFile} machineLearningConfig={configs.machineLearning} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Map & GPS Settings" subtitle="Manage map related features and setting">
|
||||
<MapSettings disabled={$featureFlags.configFile} config={configs} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="OAuth Authentication" subtitle="Manage the login with OAuth settings">
|
||||
<OAuthSettings disabled={$featureFlags.configFile} oauthConfig={configs.oauth} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Password Authentication" subtitle="Manage login with password settings">
|
||||
<PasswordLoginSettings disabled={$featureFlags.configFile} passwordLoginConfig={configs.passwordLogin} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Server Settings" subtitle="Manage server settings">
|
||||
<ServerSettings disabled={$featureFlags.configFile} serverConfig={configs.server} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion
|
||||
title="Storage Template"
|
||||
subtitle="Manage the folder structure and file name of the upload asset"
|
||||
isOpen={$page.url.searchParams.get('open') === 'storage-template'}
|
||||
>
|
||||
<StorageTemplateSettings disabled={$featureFlags.configFile} storageConfig={configs.storageTemplate} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Theme Settings" subtitle="Manage customization of the Immich web interface">
|
||||
<ThemeSettings disabled={$featureFlags.configFile} themeConfig={configs.theme} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Thumbnail Settings" subtitle="Manage the resolution of thumbnail sizes">
|
||||
<ThumbnailSettings disabled={$featureFlags.configFile} thumbnailConfig={configs.thumbnail} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Trash Settings" subtitle="Manage trash settings">
|
||||
<TrashSettings disabled={$featureFlags.configFile} trashConfig={configs.trash} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Version Check" subtitle="Enable/disable the new version notification">
|
||||
<NewVersionCheckSettings disabled={$featureFlags.configFile} newVersionCheckConfig={configs.newVersionCheck} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion
|
||||
title="Video Transcoding Settings"
|
||||
subtitle="Manage the resolution and encoding information of the video files"
|
||||
>
|
||||
<FFmpegSettings disabled={$featureFlags.configFile} ffmpegConfig={configs.ffmpeg} />
|
||||
</SettingAccordion>
|
||||
<AdminSettings bind:config let:handleReset let:handleSave let:savedConfig let:defaultConfig>
|
||||
<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]">
|
||||
{#each settings as { item, title, subtitle, isOpen }}
|
||||
<SettingAccordion {title} {subtitle} {isOpen}>
|
||||
<svelte:component
|
||||
this={item}
|
||||
on:save={({ detail }) => handleSave(detail)}
|
||||
on:reset={({ detail }) => handleReset(detail)}
|
||||
disabled={$featureFlags.configFile}
|
||||
{defaultConfig}
|
||||
{config}
|
||||
{savedConfig}
|
||||
/>
|
||||
</SettingAccordion>
|
||||
{/each}
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</AdminSettings>
|
||||
</UserPageLayout>
|
||||
|
||||
Reference in New Issue
Block a user