c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-29 15:11:58 +00:00
Code Releases Activity

fix(web): settings accordion open state (#7504)

Browse source
This commit is contained in:
Michel Heusschen 2024-02-28 22:40:08 +01:00 committed by GitHub
parent 84fe41df31
commit 93f0a866a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 108 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
web/src/lib/components/shared-components/settings/setting-accordion-state.svelte Normal file
View file

@ -0,0 +1,35 @@
<script lang="ts" context="module">
export type AccordionState = Set<string>;
const { get: getAccordionState, set: setAccordionState } = createContext<Writable<AccordionState>>();
export { getAccordionState };
</script>
<script lang="ts">
import { writable, type Writable } from 'svelte/store';
import { createContext } from '$lib/utils/context';
import { page } from '$app/stores';
import { handlePromiseError } from '$lib/utils';
import { goto } from '$app/navigation';
const getParamValues = (param: string) => {
return new Set(($page.url.searchParams.get(param) || '').split(' ').filter((x) => x !== ''));
};
export let queryParam: string;
export let state: Writable<AccordionState> = writable(getParamValues(queryParam));
setAccordionState(state);
$: if (queryParam && $state) {
const searchParams = new URLSearchParams($page.url.searchParams);
if ($state.size > 0) {
searchParams.set(queryParam, [...$state].join(' '));
} else {
searchParams.delete(queryParam);
}
handlePromiseError(goto(`?${searchParams.toString()}`, { replaceState: true, noScroll: true, keepFocus: true }));
}
</script>
<slot />

26
web/src/lib/components/shared-components/settings/setting-accordion.svelte
View file

@ -1,28 +1,28 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores';
import { QueryParameter } from '$lib/constants';
import { hasParamValue, handlePromiseError, updateParamList } from '$lib/utils';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { getAccordionState } from './setting-accordion-state.svelte';
const accordionState = getAccordionState();
export let title: string; export let title: string;
export let subtitle = ''; export let subtitle = '';
export let key: string; export let key: string;
export let isOpen = false; export let isOpen = $accordionState.has(key);
const syncFromUrl = () => (isOpen = hasParamValue(QueryParameter.IS_OPEN, key)); $: setIsOpen(isOpen);
const syncToUrl = (isOpen: boolean) => updateParamList({ param: QueryParameter.IS_OPEN, value: key, add: isOpen });
isOpen ? handlePromiseError(syncToUrl(true)) : syncFromUrl(); const setIsOpen = (isOpen: boolean) => {
$: $page.url && syncFromUrl(); if (isOpen) {
$accordionState = $accordionState.add(key);
const toggle = async () => { } else {
isOpen = !isOpen; $accordionState.delete(key);
await syncToUrl(isOpen); $accordionState = $accordionState;
}
}; };
</script> </script>
<div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700"> <div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700">
<button on:click={toggle} class="flex w-full place-items-center justify-between text-left"> <button on:click={() => (isOpen = !isOpen)} class="flex w-full place-items-center justify-between text-left">
<div> <div>
<h2 class="font-medium text-immich-primary dark:text-immich-dark-primary"> <h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
{title} {title}

91
web/src/lib/components/user-settings-page/user-settings-list.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/environment';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { OpenSettingQueryParameterValue, QueryParameter } from '$lib/constants'; import { OpenSettingQueryParameterValue, QueryParameter } from '$lib/constants';
import { featureFlags } from '$lib/stores/server-config.store'; import { featureFlags } from '$lib/stores/server-config.store';
@ -17,60 +16,56 @@
import TrashSettings from './trash-settings.svelte'; import TrashSettings from './trash-settings.svelte';
import UserAPIKeyList from './user-api-key-list.svelte'; import UserAPIKeyList from './user-api-key-list.svelte';
import UserProfileSettings from './user-profile-settings.svelte'; import UserProfileSettings from './user-profile-settings.svelte';
import SettingAccordionState from '../shared-components/settings/setting-accordion-state.svelte';
export let keys: ApiKeyResponseDto[] = []; export let keys: ApiKeyResponseDto[] = [];
export let devices: AuthDeviceResponseDto[] = []; export let devices: AuthDeviceResponseDto[] = [];
let oauthOpen = false; let oauthOpen =
if (browser) { oauth.isCallback(window.location) ||
oauthOpen = oauth.isCallback(window.location); $page.url.searchParams.get(QueryParameter.OPEN_SETTING) === OpenSettingQueryParameterValue.OAUTH;
}
</script> </script>
<SettingAccordion key="appearance" title="Appearance" subtitle="Manage the app appearance"> <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
<AppearanceSettings /> <SettingAccordion key="appearance" title="Appearance" subtitle="Manage the app appearance">
</SettingAccordion> <AppearanceSettings />
<SettingAccordion key="account" title="Account" subtitle="Manage your account">
<UserProfileSettings />
</SettingAccordion>
<SettingAccordion key="api-keys" title="API Keys" subtitle="Manage your API keys">
<UserAPIKeyList bind:keys />
</SettingAccordion>
<SettingAccordion key="authorized-devices" title="Authorized Devices" subtitle="Manage your logged-in devices">
<DeviceList bind:devices />
</SettingAccordion>
<SettingAccordion key="libraries" title="Libraries" subtitle="Manage your asset libraries">
<LibraryList />
</SettingAccordion>
<SettingAccordion key="memories" title="Memories" subtitle="Manage what you see in your memories.">
<MemoriesSettings user={$user} />
</SettingAccordion>
{#if $featureFlags.loaded && $featureFlags.oauth}
<SettingAccordion
key="oauth"
title="OAuth"
subtitle="Manage your OAuth connection"
isOpen={oauthOpen ||
$page.url.searchParams.get(QueryParameter.OPEN_SETTING) === OpenSettingQueryParameterValue.OAUTH}
>
<OAuthSettings user={$user} />
</SettingAccordion> </SettingAccordion>
{/if}
<SettingAccordion key="password" title="Password" subtitle="Change your password"> <SettingAccordion key="account" title="Account" subtitle="Manage your account">
<ChangePasswordSettings /> <UserProfileSettings />
</SettingAccordion> </SettingAccordion>
<SettingAccordion key="sharing" title="Sharing" subtitle="Manage sharing with partners"> <SettingAccordion key="api-keys" title="API Keys" subtitle="Manage your API keys">
<PartnerSettings user={$user} /> <UserAPIKeyList bind:keys />
</SettingAccordion> </SettingAccordion>
<SettingAccordion key="trash" title="Trash" subtitle="Manage trash settings"> <SettingAccordion key="authorized-devices" title="Authorized Devices" subtitle="Manage your logged-in devices">
<TrashSettings /> <DeviceList bind:devices />
</SettingAccordion> </SettingAccordion>
<SettingAccordion key="libraries" title="Libraries" subtitle="Manage your asset libraries">
<LibraryList />
</SettingAccordion>
<SettingAccordion key="memories" title="Memories" subtitle="Manage what you see in your memories.">
<MemoriesSettings user={$user} />
</SettingAccordion>
{#if $featureFlags.loaded && $featureFlags.oauth}
<SettingAccordion key="oauth" title="OAuth" subtitle="Manage your OAuth connection" isOpen={oauthOpen || undefined}>
<OAuthSettings user={$user} />
</SettingAccordion>
{/if}
<SettingAccordion key="password" title="Password" subtitle="Change your password">
<ChangePasswordSettings />
</SettingAccordion>
<SettingAccordion key="sharing" title="Sharing" subtitle="Manage sharing with partners">
<PartnerSettings user={$user} />
</SettingAccordion>
<SettingAccordion key="trash" title="Trash" subtitle="Manage trash settings">
<TrashSettings />
</SettingAccordion>
</SettingAccordionState>

33
web/src/lib/utils.ts
View file

@ -1,5 +1,3 @@
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification'; import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
import { locales } from '$lib/constants'; import { locales } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
@ -14,37 +12,6 @@ import {
unlinkOAuthAccount, unlinkOAuthAccount,
type UserResponseDto, type UserResponseDto,
} from '@immich/sdk'; } from '@immich/sdk';
import { get } from 'svelte/store';
interface UpdateParamAction {
param: string;
value: string;
add: boolean;
}
const getParamValues = (param: string) =>
new Set((get(page).url.searchParams.get(param) || '').split(' ').filter((x) => x !== ''));
export const hasParamValue = (param: string, value: string) => getParamValues(param).has(value);
export const updateParamList = async ({ param, value, add }: UpdateParamAction) => {
const values = getParamValues(param);
if (add) {
values.add(value);
} else {
values.delete(value);
}
const searchParams = new URLSearchParams(get(page).url.searchParams);
searchParams.set(param, [...values.values()].join(' '));
if (values.size === 0) {
searchParams.delete(param);
}
await goto(`?${searchParams.toString()}`, { replaceState: true, noScroll: true, keepFocus: true });
};
export const getJobName = (jobName: JobName) => { export const getJobName = (jobName: JobName) => {
const names: Record<JobName, string> = { const names: Record<JobName, string> = {

30
web/src/routes/admin/system-settings/+page.svelte
View file

@ -24,6 +24,8 @@
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 } 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 { QueryParameter } from '$lib/constants';
export let data: PageData; export let data: PageData;
@ -176,19 +178,21 @@
<AdminSettings bind:config let:handleReset let:handleSave let:savedConfig let:defaultConfig> <AdminSettings bind:config let:handleReset let: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]">
{#each settings as { item, title, subtitle, key }} <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
<SettingAccordion {title} {subtitle} {key}> {#each settings as { item, title, subtitle, key }}
<svelte:component <SettingAccordion {title} {subtitle} {key}>
this={item} <svelte:component
on:save={({ detail }) => handleSave(detail)} this={item}
on:reset={({ detail }) => handleReset(detail)} on:save={({ detail }) => handleSave(detail)}
disabled={$featureFlags.configFile} on:reset={({ detail }) => handleReset(detail)}
{defaultConfig} disabled={$featureFlags.configFile}
{config} {defaultConfig}
{savedConfig} {config}
/> {savedConfig}
</SettingAccordion> />
{/each} </SettingAccordion>
{/each}
</SettingAccordionState>
</section> </section>
</section> </section>
</AdminSettings> </AdminSettings>