github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03: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/modals/AlbumOptionsModal.svelte
+15 -23
View File
@@ -19,7 +19,7 @@
type SharedLinkResponseDto,
type UserResponseDto,
} from '@immich/sdk';
import { Field, HStack, Modal, ModalBody, Select, Stack, Switch, Text } from '@immich/ui';
import { Field, HStack, Modal, ModalBody, Select, Stack, Switch, Text, type SelectOption } from '@immich/ui';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@@ -30,21 +30,6 @@
let { album, onClose }: Props = $props();
const orderOptions = [
{ label: $t('newest_first'), value: AssetOrder.Desc },
{ label: $t('oldest_first'), value: AssetOrder.Asc },
];
const roleOptions: Array<{ label: string; value: AlbumUserRole | 'none'; icon?: string }> = [
{ label: $t('role_editor'), value: AlbumUserRole.Editor },
{ label: $t('role_viewer'), value: AlbumUserRole.Viewer },
{ label: $t('remove_user'), value: 'none' },
];
const selectedOrderOption = $derived(
album.order ? orderOptions.find(({ value }) => value === album.order) : orderOptions[0],
);
const handleRoleSelect = async (user: UserResponseDto, role: AlbumUserRole | 'none') => {
if (role === 'none') {
await handleRemoveUserFromAlbum(album, user);
@@ -97,9 +82,12 @@
{#if album.order}
<Field label={$t('display_order')}>
<Select
data={orderOptions}
value={selectedOrderOption}
onChange={({ value }) => handleUpdateAlbum(album, { order: value })}
value={album.order}
options={[
{ label: $t('newest_first'), value: AssetOrder.Desc },
{ label: $t('oldest_first'), value: AssetOrder.Asc },
]}
onChange={(value) => handleUpdateAlbum(album, { order: value })}
/>
</Field>
{/if}
@@ -124,7 +112,7 @@
</div>
<Text class="w-full" size="small">{$user.name}</Text>
<Field disabled class="w-32 shrink-0">
<Select data={[{ label: $t('owner'), value: 'owner' }]} value={{ label: $t('owner'), value: 'owner' }} />
<Select options={[{ label: $t('owner'), value: 'owner' }]} value="owner" />
</Field>
</div>
@@ -138,9 +126,13 @@
</div>
<Field class="w-32">
<Select
data={roleOptions}
value={roleOptions.find(({ value }) => value === role)}
onChange={({ value }) => handleRoleSelect(user, value)}
value={role}
options={[
{ label: $t('role_editor'), value: AlbumUserRole.Editor },
{ label: $t('role_viewer'), value: AlbumUserRole.Viewer },
{ label: $t('remove_user'), value: 'none' },
] as SelectOption<AlbumUserRole | 'none'>[]}
onChange={(value) => handleRoleSelect(user, value)}
/>
</Field>
</div>