mirror of
https://github.com/immich-app/immich.git
synced 2025-12-20 01:11:46 +03:00
refactor(web): admin layout (#4461)
This commit is contained in:
Jason Rasmussen
@@ -9,26 +9,23 @@
|
||||
import SettingAccordion from '$lib/components/admin-page/settings/setting-accordion.svelte';
|
||||
import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
|
||||
import ThumbnailSettings from '$lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte';
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||
import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte';
|
||||
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import { downloadManager } from '$lib/stores/download';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { downloadBlob } from '$lib/utils/asset-utils';
|
||||
import { SystemConfigDto, api, copyToClipboard } from '@api';
|
||||
import { copyToClipboard } from '@api';
|
||||
import Alert from 'svelte-material-icons/Alert.svelte';
|
||||
import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
|
||||
import Download from 'svelte-material-icons/Download.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
const getConfig = async () => {
|
||||
const { data } = await api.systemConfigApi.getConfig();
|
||||
return data;
|
||||
};
|
||||
const configs = data.configs;
|
||||
|
||||
const downloadConfig = (configs: SystemConfigDto) => {
|
||||
const downloadConfig = () => {
|
||||
const blob = new Blob([JSON.stringify(configs, null, 2)], { type: 'application/json' });
|
||||
const downloadKey = 'immich-config.json';
|
||||
downloadManager.add(downloadKey, blob.size);
|
||||
@@ -45,70 +42,74 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<section class="">
|
||||
{#await getConfig()}
|
||||
<LoadingSpinner />
|
||||
{:then configs}
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button size="sm" on:click={() => copyToClipboard(JSON.stringify(configs, null, 2))}>
|
||||
<UserPageLayout user={data.user} title={data.meta.title} admin>
|
||||
<div class="flex justify-end gap-2" slot="buttons">
|
||||
<LinkButton on:click={() => copyToClipboard(JSON.stringify(configs, null, 2))}>
|
||||
<div class="flex place-items-center gap-2 text-sm">
|
||||
<ContentCopy size="18" />
|
||||
<span class="pl-2">Copy to Clipboard</span>
|
||||
</Button>
|
||||
<Button size="sm" on:click={() => downloadConfig(configs)}>
|
||||
Copy to Clipboard
|
||||
</div>
|
||||
</LinkButton>
|
||||
<LinkButton on:click={() => downloadConfig()}>
|
||||
<div class="flex place-items-center gap-2 text-sm">
|
||||
<Download size="18" />
|
||||
<span class="pl-2">Export as JSON</span>
|
||||
</Button>
|
||||
</div>
|
||||
Export as JSON
|
||||
</div>
|
||||
</LinkButton>
|
||||
</div>
|
||||
|
||||
<SettingAccordion
|
||||
title="Job Settings"
|
||||
subtitle="Manage job concurrency"
|
||||
isOpen={$page.url.searchParams.get('open') === 'job-settings'}
|
||||
>
|
||||
<JobSettings disabled={$featureFlags.configFile} jobConfig={configs.job} />
|
||||
</SettingAccordion>
|
||||
<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="Machine Learning Settings" subtitle="Manage machine learning features and settings">
|
||||
<MachineLearningSettings disabled={$featureFlags.configFile} machineLearningConfig={configs.machineLearning} />
|
||||
</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="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="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="Password Authentication" subtitle="Manage login with password settings">
|
||||
<PasswordLoginSettings disabled={$featureFlags.configFile} passwordLoginConfig={configs.passwordLogin} />
|
||||
</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}
|
||||
user={data.user}
|
||||
/>
|
||||
</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}
|
||||
user={data.user}
|
||||
/>
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Thumbnail Settings" subtitle="Manage the resolution of thumbnail sizes">
|
||||
<ThumbnailSettings disabled={$featureFlags.configFile} thumbnailConfig={configs.thumbnail} />
|
||||
</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="Trash Settings" subtitle="Manage trash settings">
|
||||
<TrashSettings disabled={$featureFlags.configFile} trashConfig={configs.trash} />
|
||||
</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>
|
||||
{/await}
|
||||
</section>
|
||||
<SettingAccordion
|
||||
title="Video Transcoding Settings"
|
||||
subtitle="Manage the resolution and encoding information of the video files"
|
||||
>
|
||||
<FFmpegSettings disabled={$featureFlags.configFile} ffmpegConfig={configs.ffmpeg} />
|
||||
</SettingAccordion>
|
||||
</section>
|
||||
</section>
|
||||
</UserPageLayout>
|
||||
|
||||
Reference in New Issue
Block a user