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 1

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}