self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-26 10:50:29 +02:00
Code Issues Releases Activity

feat(web): upload json config (#8953)

Browse Source 
* Button added, config is uploaded

* Refactored to pass "npm run lint" (also verified other PR checklist Web checks)

* Auto-save on config upload

* Static input element

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Alexandre Truppel 2024-04-24 21:43:43 +02:00 committed by GitHub
parent a78260296c
commit 0dbe44cb78
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,7 +23,7 @@
await (detail.default ? resetToDefault(detail.configKeys) : reset(detail.configKeys)); await (detail.default ? resetToDefault(detail.configKeys) : reset(detail.configKeys));
}; };
const handleSave = async (update: Partial<SystemConfigDto>) => { export const handleSave = async (update: Partial<SystemConfigDto>) => {
try { try {
const newConfig = await updateConfig({ const newConfig = await updateConfig({
systemConfigDto: { systemConfigDto: {

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

@ -23,14 +23,16 @@
import { featureFlags } from '$lib/stores/server-config.store'; import { featureFlags } from '$lib/stores/server-config.store';
import { copyToClipboard } from '$lib/utils'; import { copyToClipboard } from '$lib/utils';
import { downloadBlob } from '$lib/utils/asset-utils'; import { downloadBlob } from '$lib/utils/asset-utils';
import { mdiAlert, mdiContentCopy, mdiDownload } from '@mdi/js'; import { mdiAlert, mdiContentCopy, mdiDownload, mdiUpload } from '@mdi/js';
import type { PageData } from './$types'; import type { PageData } from './$types';
import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte'; import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
import { QueryParameter } from '$lib/constants'; import { QueryParameter } from '$lib/constants';
import type { SystemConfigDto } from '@immich/sdk';
export let data: PageData; export let data: PageData;
let config = data.configs; let config = data.configs;
let handleSave: (update: Partial<SystemConfigDto>) => Promise<void>;
type Settings = type Settings =
| typeof JobSettings | typeof JobSettings
@ -58,6 +60,20 @@
setTimeout(() => downloadManager.clear(downloadKey), 5000); setTimeout(() => downloadManager.clear(downloadKey), 5000);
}; };
let inputElement: HTMLInputElement;
const uploadConfig = (e: Event) => {
const file = (e.target as HTMLInputElement).files?.[0];
if (!file) {
return;
}
const reader = async () => {
const text = await file.text();
const newConfig = JSON.parse(text);
await handleSave(newConfig);
};
reader().catch((error) => console.error('Error handling JSON config upload', error));
};
const settings: Array<{ const settings: Array<{
item: Settings; item: Settings;
title: string; title: string;
@ -157,6 +173,8 @@
]; ];
</script> </script>
<input bind:this={inputElement} type="file" accept=".json" style="display: none" on:change={uploadConfig} />
<div class="h-svh flex flex-col overflow-hidden"> <div class="h-svh flex flex-col overflow-hidden">
{#if $featureFlags.configFile} {#if $featureFlags.configFile}
<div class="flex flex-row items-center gap-2 bg-gray-100 p-3 dark:bg-gray-800"> <div class="flex flex-row items-center gap-2 bg-gray-100 p-3 dark:bg-gray-800">
@ -181,9 +199,15 @@
Export as JSON Export as JSON
</div> </div>
</LinkButton> </LinkButton>
<LinkButton on:click={() => inputElement?.click()}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiUpload} size="18" />
Import from JSON
</div>
</LinkButton>
</div> </div>
<AdminSettings bind:config let:handleReset let:handleSave let:savedConfig let:defaultConfig> <AdminSettings bind:config let:handleReset bind:handleSave let:savedConfig let:defaultConfig>
<section id="setting-content" class="flex place-content-center sm:mx-4"> <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]"> <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
<SettingAccordionState queryParam={QueryParameter.IS_OPEN}> <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>