mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
refactor: album picker modal (#19383)
Co-authored-by: Jason Rasmussen <jason@rasm.me>
This commit is contained in:
Daniel Dietzler
GitHub
parent
798debfde3
commit
fe4d6edbdc
5 changed files with 55 additions and 125 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -1,130 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { initInput } from '$lib/actions/focus';
|
||||
import {
|
||||
AlbumModalRowConverter,
|
||||
AlbumModalRowType,
|
||||
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 { 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';
|
||||
|
||||
let albums: AlbumResponseDto[] = $state([]);
|
||||
let recentAlbums: AlbumResponseDto[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let search = $state('');
|
||||
let selectedRowIndex: number = $state(-1);
|
||||
|
||||
interface Props {
|
||||
onNewAlbum: (search: string) => void;
|
||||
onAlbumClick: (album: AlbumResponseDto) => void;
|
||||
shared: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
let { onNewAlbum, onAlbumClick, shared, onClose }: Props = $props();
|
||||
|
||||
onMount(async () => {
|
||||
albums = await getAllAlbums({ shared: shared || undefined });
|
||||
recentAlbums = albums.sort((a, b) => (new Date(a.createdAt) > new Date(b.createdAt) ? -1 : 1)).slice(0, 3);
|
||||
loading = false;
|
||||
});
|
||||
|
||||
const rowConverter = new AlbumModalRowConverter(shared, $albumViewSettings.sortBy, $albumViewSettings.sortOrder);
|
||||
const albumModalRows = $derived(rowConverter.toModalRows(search, recentAlbums, albums, selectedRowIndex));
|
||||
const selectableRowCount = $derived(albumModalRows.filter((row) => isSelectableRowType(row.type)).length);
|
||||
|
||||
const onkeydown = (e: KeyboardEvent) => {
|
||||
switch (e.key) {
|
||||
case 'ArrowUp': {
|
||||
e.preventDefault();
|
||||
if (selectedRowIndex > 0) {
|
||||
selectedRowIndex--;
|
||||
} else {
|
||||
selectedRowIndex = selectableRowCount - 1;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'ArrowDown': {
|
||||
e.preventDefault();
|
||||
if (selectedRowIndex < selectableRowCount - 1) {
|
||||
selectedRowIndex++;
|
||||
} else {
|
||||
selectedRowIndex = 0;
|
||||
}
|
||||
break;
|
||||
}
|
||||
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;
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
selectedRowIndex = -1;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleAlbumClick = (album: AlbumResponseDto) => () => onAlbumClick(album);
|
||||
</script>
|
||||
|
||||
<Modal title={shared ? $t('add_to_shared_album') : $t('add_to_album')} {onClose} size="small">
|
||||
<ModalBody>
|
||||
<div class="mb-2 flex max-h-[400px] flex-col">
|
||||
{#if loading}
|
||||
<!-- eslint-disable-next-line svelte/require-each-key -->
|
||||
{#each { length: 3 } as _}
|
||||
<div class="flex animate-pulse gap-4 px-6 py-2">
|
||||
<div class="h-12 w-12 rounded-xl bg-slate-200"></div>
|
||||
<div class="flex flex-col items-start justify-center gap-2">
|
||||
<span class="h-4 w-36 animate-pulse bg-slate-200"></span>
|
||||
<div class="flex animate-pulse gap-1">
|
||||
<span class="h-3 w-8 bg-slate-200"></span>
|
||||
<span class="h-3 w-20 bg-slate-200"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<input
|
||||
class="border-b-4 border-immich-bg px-6 py-2 text-2xl focus:border-immich-primary dark:border-immich-dark-gray dark:focus:border-immich-dark-primary"
|
||||
placeholder={$t('search')}
|
||||
{onkeydown}
|
||||
bind:value={search}
|
||||
use:initInput
|
||||
/>
|
||||
<div class="immich-scrollbar overflow-y-auto">
|
||||
<!-- eslint-disable-next-line svelte/require-each-key -->
|
||||
{#each albumModalRows as row}
|
||||
{#if row.type === AlbumModalRowType.NEW_ALBUM}
|
||||
<NewAlbumListItem selected={row.selected || false} {onNewAlbum} searchQuery={search} />
|
||||
{:else if row.type === AlbumModalRowType.SECTION}
|
||||
<p class="px-5 py-3 text-xs">{row.text}</p>
|
||||
{:else if row.type === AlbumModalRowType.MESSAGE}
|
||||
<p class="px-5 py-1 text-sm">{row.text}</p>
|
||||
{:else if row.type === AlbumModalRowType.ALBUM_ITEM && row.album}
|
||||
<AlbumListItem
|
||||
album={row.album}
|
||||
selected={row.selected || false}
|
||||
searchQuery={search}
|
||||
onAlbumClick={handleAlbumClick(row.album)}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
Loading…
Add table
Add a link
Reference in a new issue