immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-19 17:23:21 +03:00
Code Issues Packages Projects Releases 17 Wiki Activity

refactor(web): admin settings (#6177)

Browse Source 
* 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
2024-01-12 18:44:11 +01:00
committed by GitHub
parent 2439c5ab57
commit a4f49d197e
20 changed files with 1192 additions and 1971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,116 +1,49 @@
<script lang="ts">
import SettingButtonsRow from '$lib/components/admin-page/settings/setting-buttons-row.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import type { ResetOptions } from '$lib/utils/dipatch';
import { handleError } from '$lib/utils/handle-error';
import { api, SystemConfigServerDto } from '@api';
import type { SystemConfigDto } from '@api';
import { isEqual } from 'lodash-es';
import { fade } from 'svelte/transition';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import { createEventDispatcher } from 'svelte';
import type { SettingsEventType } from '../admin-settings';
export let serverConfig: SystemConfigServerDto; // this is the config that is being edited
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;
export let config: SystemConfigDto; // this is the config that is being edited
export let disabled = false;
let savedConfig: SystemConfigServerDto;
let defaultConfig: SystemConfigServerDto;
const handleReset = (detail: ResetOptions) => {
if (detail.default) {
resetToDefault();
} else {
reset();
}
};
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.server),
api.systemConfigApi.getConfigDefaults().then((res) => res.data.server),
]);
}
async function reset() {
const { data: resetConfig } = await api.systemConfigApi.getConfig();
serverConfig = { ...resetConfig.server };
savedConfig = { ...resetConfig.server };
notificationController.show({
message: 'Reset server settings to the recent saved settings',
type: NotificationType.Info,
});
}
async function resetToDefault() {
const { data: configs } = await api.systemConfigApi.getConfigDefaults();
serverConfig = { ...configs.server };
defaultConfig = { ...configs.server };
notificationController.show({
message: 'Reset server settings to default',
type: NotificationType.Info,
});
}
async function saveSetting() {
try {
const { data: configs } = await api.systemConfigApi.getConfig();
const result = await api.systemConfigApi.updateConfig({
systemConfigDto: {
...configs,
server: serverConfig,
},
});
serverConfig = { ...result.data.server };
savedConfig = { ...result.data.server };
notificationController.show({
message: 'Server settings saved',
type: NotificationType.Info,
});
} catch (e) {
handleError(e, 'Unable to save settings');
}
}
const dispatch = createEventDispatcher<SettingsEventType>();
</script>
<div>
{#await getConfigs() then}
<div in:fade={{ duration: 500 }}>
<form autocomplete="off" on:submit|preventDefault>
<div class="mt-2">
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="EXTERNAL DOMAIN"
desc="Domain for public shared links, including http(s)://"
bind:value={serverConfig.externalDomain}
isEdited={serverConfig.externalDomain !== savedConfig.externalDomain}
/>
<div in:fade={{ duration: 500 }}>
<form autocomplete="off" on:submit|preventDefault>
<div class="mt-4 ml-4">
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="EXTERNAL DOMAIN"
desc="Domain for public shared links, including http(s)://"
bind:value={config.server.externalDomain}
isEdited={config.server.externalDomain !== savedConfig.server.externalDomain}
/>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="WELCOME MESSAGE"
desc="A message that is displayed on the login page."
bind:value={serverConfig.loginPageMessage}
isEdited={serverConfig.loginPageMessage !== savedConfig.loginPageMessage}
/>
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="WELCOME MESSAGE"
desc="A message that is displayed on the login page."
bind:value={config.server.loginPageMessage}
isEdited={config.server.loginPageMessage !== savedConfig.server.loginPageMessage}
/>
<div class="ml-4">
<SettingButtonsRow
on:reset={({ detail }) => handleReset(detail)}
on:save={saveSetting}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>
</div>
<div class="ml-4">
<SettingButtonsRow
on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['server'] })}
on:save={() => dispatch('save', { server: config.server })}
showResetToDefault={!isEqual(savedConfig, defaultConfig)}
{disabled}
/>
</div>
</form>
</div>
{/await}
</div>
</form>
</div>
</div>