Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2026-05-23 08:02:29 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): immich/ui select component (#25268)

Browse Source 
Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Jason Rasmussen
2026-01-14 20:38:13 -05:00
committed by GitHub
parent 7b3a298c6a
commit d59ee7d2ae
9 changed files with 90 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/user-settings-page/feature-settings.svelte
+10 -11
View File
@@ -1,10 +1,9 @@
<script lang="ts">
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import { preferences } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { AssetOrder, updateMyPreferences } from '@immich/sdk';
import { Button, Field, NumberInput, Switch, toastManager } from '@immich/ui';
import { Button, Field, NumberInput, Select, Switch, toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
@@ -71,15 +70,15 @@
<div class="ms-4 mt-4 flex flex-col">
<SettingAccordion key="albums" title={$t('albums')} subtitle={$t('albums_feature_description')}>
<div class="ms-4 mt-6 flex flex-col gap-4">
<SettingSelect
label={$t('albums_default_sort_order')}
desc={$t('albums_default_sort_order_description')}
options={[
{ value: AssetOrder.Asc, text: $t('oldest_first') },
{ value: AssetOrder.Desc, text: $t('newest_first') },
]}
bind:value={defaultAssetOrder}
/>
<Field label={$t('albums_default_sort_order')} description={$t('albums_default_sort_order_description')}>
<Select
options={[
{ label: $t('oldest_first'), value: AssetOrder.Asc },
{ label: $t('newest_first'), value: AssetOrder.Desc },
]}
bind:value={defaultAssetOrder}
/>
</Field>
</div>
</SettingAccordion>
web/src/lib/components/workflows/SchemaFormFields.svelte
+4 -14
View File
@@ -81,16 +81,13 @@
{@const options = component.options?.map((opt) => {
return { label: opt.label, value: String(opt.value) };
}) || [{ label: 'N/A', value: '' }]}
{@const currentValue = actualConfig[key]}
{@const selectedItem = options.find((opt) => opt.value === String(currentValue)) ?? options[0]}
<Field
{label}
required={component.required}
description={component.description}
requiredIndicator={component.required}
>
<Select data={options} onChange={(opt) => updateConfig(key, opt.value)} value={selectedItem} />
<Select {options} onChange={(value) => updateConfig(key, value)} value={actualConfig[key] as string} />
</Field>
{/if}
@@ -107,9 +104,6 @@
{@const options = component.options?.map((opt) => {
return { label: opt.label, value: String(opt.value) };
}) || [{ label: 'N/A', value: '' }]}
{@const currentValues = (actualConfig[key] as string[]) ?? []}
{@const selectedItems = options.filter((opt) => currentValues.includes(opt.value))}
<Field
{label}
required={component.required}
@@ -117,13 +111,9 @@
requiredIndicator={component.required}
>
<MultiSelect
data={options}
onChange={(opt) =>
updateConfig(
key,
opt.map((o) => o.value),
)}
values={selectedItems}
{options}
values={(actualConfig[key] as string[]) ?? []}
onChange={(values) => updateConfig(key, values)}
/>
</Field>
{/if}