Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-07 10:14:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: album picker modal (#19383)

Browse Source 
Co-authored-by: Jason Rasmussen <jason@rasm.me>
This commit is contained in:
Daniel Dietzler 2025-06-21 14:18:54 +02:00 committed by GitHub
parent 798debfde3
commit fe4d6edbdc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 55 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
i18n/en.json
View File

@ -464,7 +464,6 @@
"assets": "Assets",
"assets_added_count": "Added {count, plural, one {# asset} other {# assets}}",
"assets_added_to_album_count": "Added {count, plural, one {# asset} other {# assets}} to the album",
"assets_added_to_name_count": "Added {count, plural, one {# asset} other {# assets}} to {hasName, select, true {<b>{name}</b>} other {new album}}",
"assets_cannot_be_added_to_album_count": "{count, plural, one {Asset} other {Assets}} cannot be added to the album",
"assets_count": "{count, plural, one {# asset} other {# assets}}",
"assets_deleted_permanently": "{count} asset(s) deleted permanently",

38
web/src/lib/components/asset-viewer/actions/add-to-album-action.svelte
View File

@ -1,13 +1,13 @@
<script lang="ts">
import { shortcut } from '$lib/actions/shortcut';
import type { OnAction } from '$lib/components/asset-viewer/actions/action';
import AlbumSelectionModal from '$lib/components/shared-components/album-selection/album-selection-modal.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import Portal from '$lib/components/shared-components/portal/portal.svelte';
import { AssetAction } from '$lib/constants';
import { addAssetsToAlbum, addAssetsToNewAlbum } from '$lib/utils/asset-utils';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import AlbumPickerModal from '$lib/modals/AlbumPickerModal.svelte';
import { addAssetsToAlbum } from '$lib/utils/asset-utils';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
import type { AssetResponseDto } from '@immich/sdk';
import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -19,40 +19,22 @@
let { asset, onAction, shared = false }: Props = $props();
let showSelectionModal = $state(false);
const onClick = async () => {
const album = await modalManager.show(AlbumPickerModal, { shared });
const handleAddToNewAlbum = async (albumName: string) => {
showSelectionModal = false;
const album = await addAssetsToNewAlbum(albumName, [asset.id]);
if (album) {
onAction({ type: AssetAction.ADD_TO_ALBUM, asset: toTimelineAsset(asset), album });
if (!album) {
return;
}
};
const handleAddToAlbum = async (album: AlbumResponseDto) => {
showSelectionModal = false;
await addAssetsToAlbum(album.id, [asset.id]);
onAction({ type: AssetAction.ADD_TO_ALBUM, asset: toTimelineAsset(asset), album });
};
</script>
<svelte:document
use:shortcut={{ shortcut: { key: 'l', shift: shared }, onShortcut: () => (showSelectionModal = true) }}
/>
<svelte:document use:shortcut={{ shortcut: { key: 'l', shift: shared }, onShortcut: onClick }} />
<MenuOption
icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
onClick={() => (showSelectionModal = true)}
{onClick}
/>
{#if showSelectionModal}
<Portal target="body">
<AlbumSelectionModal
{shared}
onNewAlbum={handleAddToNewAlbum}
onAlbumClick={handleAddToAlbum}
onClose={() => (showSelectionModal = false)}
/>
</Portal>
{/if}

40
web/src/lib/components/photos-page/actions/add-to-album.svelte
View File

@ -1,12 +1,12 @@
<script lang="ts">
import AlbumSelectionModal from '$lib/components/shared-components/album-selection/album-selection-modal.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import { addAssetsToAlbum, addAssetsToNewAlbum } from '$lib/utils/asset-utils';
import type { AlbumResponseDto } from '@immich/sdk';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import AlbumPickerModal from '$lib/modals/AlbumPickerModal.svelte';
import type { OnAddToAlbum } from '$lib/utils/actions';
import { addAssetsToAlbum } from '$lib/utils/asset-utils';
import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { OnAddToAlbum } from '$lib/utils/actions';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
interface Props {
shared?: boolean;
@ -15,46 +15,24 @@
let { shared = false, onAddToAlbum = () => {} }: Props = $props();
let showAlbumPicker = $state(false);
const { getAssets } = getAssetControlContext();
const handleHideAlbumPicker = () => {
showAlbumPicker = false;
};
const onClick = async () => {
const album = await modalManager.show(AlbumPickerModal, { shared });
const handleAddToNewAlbum = async (albumName: string) => {
showAlbumPicker = false;
const assetIds = [...getAssets()].map((asset) => asset.id);
const album = await addAssetsToNewAlbum(albumName, assetIds);
if (!album) {
return;
}
onAddToAlbum(assetIds, album.id);
};
const handleAddToAlbum = async (album: AlbumResponseDto) => {
showAlbumPicker = false;
const assetIds = [...getAssets()].map((asset) => asset.id);
const assetIds = [...getAssets()].map(({ id }) => id);
await addAssetsToAlbum(album.id, assetIds);
onAddToAlbum(assetIds, album.id);
};
</script>
<MenuOption
onClick={() => (showAlbumPicker = true)}
{onClick}
text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
shortcut={{ key: 'l', shift: shared }}
/>
{#if showAlbumPicker}
<AlbumSelectionModal
{shared}
onNewAlbum={handleAddToNewAlbum}
onAlbumClick={handleAddToAlbum}
onClose={handleHideAlbumPicker}
/>
{/if}

55
web/src/lib/components/shared-components/album-selection/album-selection-modal.svelte → web/src/lib/modals/AlbumPickerModal.svelte
View File

@ -6,12 +6,12 @@
isSelectableRowType,
} from '$lib/components/shared-components/album-selection/album-selection-utils';
import { albumViewSettings } from '$lib/stores/preferences.store';
import { type AlbumResponseDto, getAllAlbums } from '@immich/sdk';
import { type AlbumResponseDto, createAlbum, getAllAlbums } from '@immich/sdk';
import { Modal, ModalBody } from '@immich/ui';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import AlbumListItem from '../../asset-viewer/album-list-item.svelte';
import NewAlbumListItem from './new-album-list-item.svelte';
import AlbumListItem from '../components/asset-viewer/album-list-item.svelte';
import NewAlbumListItem from '../components/shared-components/album-selection/new-album-list-item.svelte';
let albums: AlbumResponseDto[] = $state([]);
let recentAlbums: AlbumResponseDto[] = $state([]);
@ -20,13 +20,11 @@
let selectedRowIndex: number = $state(-1);
interface Props {
onNewAlbum: (search: string) => void;
onAlbumClick: (album: AlbumResponseDto) => void;
shared: boolean;
onClose: () => void;
onClose: (album?: AlbumResponseDto) => void;
}
let { onNewAlbum, onAlbumClick, shared, onClose }: Props = $props();
let { shared, onClose }: Props = $props();
onMount(async () => {
albums = await getAllAlbums({ shared: shared || undefined });
@ -38,7 +36,34 @@
const albumModalRows = $derived(rowConverter.toModalRows(search, recentAlbums, albums, selectedRowIndex));
const selectableRowCount = $derived(albumModalRows.filter((row) => isSelectableRowType(row.type)).length);
const onkeydown = (e: KeyboardEvent) => {
const onNewAlbum = async (name: string) => {
const album = await createAlbum({ createAlbumDto: { albumName: name } });
onClose(album);
};
const onEnter = async () => {
const item = albumModalRows.find(({ selected }) => selected);
if (!item) {
return;
}
switch (item.type) {
case AlbumModalRowType.NEW_ALBUM: {
await onNewAlbum(search);
break;
}
case AlbumModalRowType.ALBUM_ITEM: {
if (item.album) {
onClose(item.album);
}
break;
}
}
selectedRowIndex = -1;
};
const onkeydown = async (e: KeyboardEvent) => {
switch (e.key) {
case 'ArrowUp': {
e.preventDefault();
@ -60,15 +85,7 @@
}
case 'Enter': {
e.preventDefault();
const selectedRow = albumModalRows.find((row) => row.selected);
if (selectedRow) {
if (selectedRow.type === AlbumModalRowType.NEW_ALBUM) {
onNewAlbum(search);
} else if (selectedRow.type === AlbumModalRowType.ALBUM_ITEM && selectedRow.album) {
onAlbumClick(selectedRow.album);
}
selectedRowIndex = -1;
}
await onEnter();
break;
}
default: {
@ -76,8 +93,6 @@
}
}
};
const handleAlbumClick = (album: AlbumResponseDto) => () => onAlbumClick(album);
</script>
<Modal title={shared ? $t('add_to_shared_album') : $t('add_to_album')} {onClose} size="small">
@ -119,7 +134,7 @@
album={row.album}
selected={row.selected || false}
searchQuery={search}
onAlbumClick={handleAlbumClick(row.album)}
onAlbumClick={() => onClose(row.album)}
/>
{/if}
{/each}

46
web/src/lib/utils/asset-utils.ts
View File

@ -1,6 +1,4 @@
import { goto } from '$app/navigation';
import FormatBoldMessage from '$lib/components/i18n/format-bold-message.svelte';
import type { InterpolationValues } from '$lib/components/i18n/format-message';
import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
import { authManager } from '$lib/managers/auth-manager.svelte';
@ -12,7 +10,6 @@ import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
import { preferences } from '$lib/stores/user.store';
import { downloadRequest, withError } from '$lib/utils';
import { createAlbum } from '$lib/utils/album-utils';
import { getByteUnitString } from '$lib/utils/byte-units';
import { getFormatter } from '$lib/utils/i18n';
import { navigate } from '$lib/utils/navigation';
@ -39,7 +36,7 @@ import {
type UserResponseDto,
} from '@immich/sdk';
import { DateTime } from 'luxon';
import { t, type Translations } from 'svelte-i18n';
import { t } from 'svelte-i18n';
import { get } from 'svelte/store';
import { handleError } from './handle-error';
@ -122,47 +119,6 @@ export const removeTag = async ({
return assetIds;
};
export const addAssetsToNewAlbum = async (albumName: string, assetIds: string[]) => {
const album = await createAlbum(albumName, assetIds);
if (!album) {
return;
}
const $t = get(t);
// for reasons beyond me <ComponentProps<typeof FormatBoldMessage>> doesn't work, even though it's (afaik) exactly this object
if (album.assets.length === 0) {
notificationController.show({
type: NotificationType.Info,
timeout: 5000,
message: $t('assets_cannot_be_added_to_album_count', { values: { count: assetIds.length } }),
button: {
text: $t('view_album'),
onClick() {
return goto(`${AppRoute.ALBUMS}/${album.id}`);
},
},
});
} else {
notificationController.show<{ key: Translations; values: InterpolationValues }>({
type: NotificationType.Info,
timeout: 5000,
component: {
type: FormatBoldMessage,
props: {
key: 'assets_added_to_name_count',
values: { count: album.assets.length, name: albumName, hasName: !!albumName },
},
},
button: {
text: $t('view_album'),
onClick() {
return goto(`${AppRoute.ALBUMS}/${album.id}`);
},
},
});
}
return album;
};
export const downloadAlbum = async (album: AlbumResponseDto) => {
await downloadArchive(`${album.albumName}.zip`, {
albumId: album.id,