helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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">
import { page } from '$app/stores';
import { QueryParameter } from '$lib/constants';
import { hasParamValue, handlePromiseError, updateParamList } from '$lib/utils';
import { slide } from 'svelte/transition';
import { getAccordionState } from './setting-accordion-state.svelte';
const accordionState = getAccordionState();
export let title: string;
export let subtitle = '';
export let key: string;
export let isOpen = false;
export let isOpen = $accordionState.has(key);
const syncFromUrl = () => (isOpen = hasParamValue(QueryParameter.IS_OPEN, key));
const syncToUrl = (isOpen: boolean) => updateParamList({ param: QueryParameter.IS_OPEN, value: key, add: isOpen });
$: setIsOpen(isOpen);
isOpen ? handlePromiseError(syncToUrl(true)) : syncFromUrl();
$: $page.url && syncFromUrl();
const toggle = async () => {
isOpen = !isOpen;
await syncToUrl(isOpen);
const setIsOpen = (isOpen: boolean) => {
if (isOpen) {
$accordionState = $accordionState.add(key);
} else {
$accordionState.delete(key);
$accordionState = $accordionState;
}
};
</script>
<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>
<h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
{title}

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

@ -1,5 +1,4 @@
<script lang="ts">
import { browser } from '$app/environment';
import { page } from '$app/stores';
import { OpenSettingQueryParameterValue, QueryParameter } from '$lib/constants';
import { featureFlags } from '$lib/stores/server-config.store';
@ -17,60 +16,56 @@
import TrashSettings from './trash-settings.svelte';
import UserAPIKeyList from './user-api-key-list.svelte';
import UserProfileSettings from './user-profile-settings.svelte';
import SettingAccordionState from '../shared-components/settings/setting-accordion-state.svelte';
export let keys: ApiKeyResponseDto[] = [];
export let devices: AuthDeviceResponseDto[] = [];
let oauthOpen = false;
if (browser) {
oauthOpen = oauth.isCallback(window.location);
}
let oauthOpen =
oauth.isCallback(window.location) ||
$page.url.searchParams.get(QueryParameter.OPEN_SETTING) === OpenSettingQueryParameterValue.OAUTH;
</script>
<SettingAccordion key="appearance" title="Appearance" subtitle="Manage the app appearance">
<AppearanceSettings />
</SettingAccordion>
<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} />
<SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
<SettingAccordion key="appearance" title="Appearance" subtitle="Manage the app appearance">
<AppearanceSettings />
</SettingAccordion>
{/if}
<SettingAccordion key="password" title="Password" subtitle="Change your password">
<ChangePasswordSettings />
</SettingAccordion>
<SettingAccordion key="account" title="Account" subtitle="Manage your account">
<UserProfileSettings />
</SettingAccordion>
<SettingAccordion key="sharing" title="Sharing" subtitle="Manage sharing with partners">
<PartnerSettings user={$user} />
</SettingAccordion>
<SettingAccordion key="api-keys" title="API Keys" subtitle="Manage your API keys">
<UserAPIKeyList bind:keys />
</SettingAccordion>
<SettingAccordion key="trash" title="Trash" subtitle="Manage trash settings">
<TrashSettings />
</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 || 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>