immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-18 09:13:15 +03:00
Code Issues Packages Projects Releases 16 Wiki Activity

refactor: albums-list (#23765)

Browse Source
This commit is contained in:
Jason Rasmussen
2025-11-10 11:49:59 -05:00
committed by GitHub
parent dd393c8346
commit a4e65a7ea8
4 changed files with 74 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
web/src/lib/components/album-page/albums-list.svelte
View File

@@ -11,7 +11,7 @@
import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
import { handleDownloadAlbum } from '$lib/services/album.service';
import { handleConfirmAlbumDelete, handleDownloadAlbum } from '$lib/services/album.service';
import {
AlbumFilter,
AlbumGroupBy,
@@ -24,13 +24,7 @@
import { user } from '$lib/stores/user.store';
import { userInteraction } from '$lib/stores/user.svelte';
import { makeSharedLinkUrl } from '$lib/utils';
import {
confirmAlbumDelete,
getSelectedAlbumGroupOption,
sortAlbums,
stringToSortOrder,
type AlbumGroup,
} from '$lib/utils/album-utils';
import { getSelectedAlbumGroupOption, sortAlbums, stringToSortOrder, type AlbumGroup } from '$lib/utils/album-utils';
import type { ContextMenuPosition } from '$lib/utils/context-menu';
import { handleError } from '$lib/utils/handle-error';
import { normalizeSearchString } from '$lib/utils/string-utils';
@@ -142,10 +136,9 @@
let albumGroupOption: string = $state(AlbumGroupBy.None);
let albumToShare: AlbumResponseDto | null = $state(null);
let albumToDelete: AlbumResponseDto | null = null;
let contextMenuPosition: ContextMenuPosition = $state({ x: 0, y: 0 });
let contextMenuTargetAlbum: AlbumResponseDto | undefined = $state();
let selectedAlbum: AlbumResponseDto | undefined = $state();
let isOpen = $state(false);
// Step 1: Filter between Owned and Shared albums, or both.
@@ -198,9 +191,7 @@
albumGroupIds = groupedAlbums.map(({ id }) => id);
});
let showFullContextMenu = $derived(
allowEdit && contextMenuTargetAlbum && contextMenuTargetAlbum.ownerId === $user.id,
);
let showFullContextMenu = $derived(allowEdit && selectedAlbum && selectedAlbum.ownerId === $user.id);
onMount(async () => {
if (allowEdit) {
@@ -209,7 +200,7 @@
});
const showAlbumContextMenu = (contextMenuDetail: ContextMenuPosition, album: AlbumResponseDto) => {
contextMenuTargetAlbum = album;
selectedAlbum = album;
contextMenuPosition = {
x: contextMenuDetail.x,
y: contextMenuDetail.y,
@@ -221,13 +212,6 @@
isOpen = false;
};
const onDownloadAlbum = async () => {
if (contextMenuTargetAlbum) {
closeAlbumContextMenu();
await handleDownloadAlbum(contextMenuTargetAlbum);
}
};
const handleDeleteAlbum = async (albumToDelete: AlbumResponseDto) => {
try {
await deleteAlbum({
@@ -247,39 +231,61 @@
sharedAlbums = sharedAlbums.filter(({ id }) => id !== albumToDelete.id);
};
const setAlbumToDelete = async () => {
albumToDelete = contextMenuTargetAlbum ?? null;
const handleSelect = async (action: 'edit' | 'share' | 'download' | 'delete') => {
closeAlbumContextMenu();
await deleteSelectedAlbum();
};
const handleEdit = async (album: AlbumResponseDto) => {
closeAlbumContextMenu();
const editedAlbum = await modalManager.show(AlbumEditModal, {
album,
});
if (editedAlbum) {
successEditAlbumInfo(editedAlbum);
}
};
const deleteSelectedAlbum = async () => {
if (!albumToDelete) {
if (!selectedAlbum) {
return;
}
const isConfirmed = await confirmAlbumDelete(albumToDelete);
switch (action) {
case 'edit': {
const editedAlbum = await modalManager.show(AlbumEditModal, { album: selectedAlbum });
if (editedAlbum) {
successEditAlbumInfo(editedAlbum);
}
break;
}
if (!isConfirmed) {
return;
}
case 'share': {
const result = await modalManager.show(AlbumShareModal, { album: selectedAlbum });
switch (result?.action) {
case 'sharedUsers': {
await handleAddUsers(result.data);
break;
}
try {
await handleDeleteAlbum(albumToDelete);
} catch (error) {
handleError(error, $t('errors.unable_to_delete_album'));
} finally {
albumToDelete = null;
case 'sharedLink': {
const sharedLink = await modalManager.show(SharedLinkCreateModal, { albumId: selectedAlbum.id });
if (sharedLink) {
handleSharedLinkCreated(selectedAlbum);
await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
}
break;
}
}
break;
}
case 'download': {
await handleDownloadAlbum(selectedAlbum);
break;
}
case 'delete': {
const isConfirmed = await handleConfirmAlbumDelete(selectedAlbum);
if (!isConfirmed) {
return;
}
try {
await handleDeleteAlbum(selectedAlbum);
} catch (error) {
handleError(error, $t('errors.unable_to_delete_album'));
}
break;
}
}
};
@@ -347,33 +353,6 @@
album.hasSharedLink = true;
updateAlbumInfo(album);
};
const openShareModal = async () => {
if (!contextMenuTargetAlbum) {
return;
}
albumToShare = contextMenuTargetAlbum;
closeAlbumContextMenu();
const result = await modalManager.show(AlbumShareModal, { album: albumToShare });
switch (result?.action) {
case 'sharedUsers': {
await handleAddUsers(result.data);
return;
}
case 'sharedLink': {
const sharedLink = await modalManager.show(SharedLinkCreateModal, { albumId: albumToShare.id });
if (sharedLink) {
handleSharedLinkCreated(albumToShare);
await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
}
return;
}
}
};
</script>
{#if albums.length > 0}
@@ -411,15 +390,11 @@
<!-- Context Menu -->
<RightClickContextMenu title={$t('album_options')} {...contextMenuPosition} {isOpen} onClose={closeAlbumContextMenu}>
{#if showFullContextMenu}
<MenuOption
icon={mdiRenameOutline}
text={$t('edit_album')}
onClick={() => contextMenuTargetAlbum && handleEdit(contextMenuTargetAlbum)}
/>
<MenuOption icon={mdiShareVariantOutline} text={$t('share')} onClick={() => openShareModal()} />
<MenuOption icon={mdiRenameOutline} text={$t('edit_album')} onClick={() => handleSelect('edit')} />
<MenuOption icon={mdiShareVariantOutline} text={$t('share')} onClick={() => handleSelect('share')} />
{/if}
<MenuOption icon={mdiDownload} text={$t('download')} onClick={onDownloadAlbum} />
<MenuOption icon={mdiDownload} text={$t('download')} onClick={() => handleSelect('download')} />
{#if showFullContextMenu}
<MenuOption icon={mdiDeleteOutline} text={$t('delete')} onClick={() => setAlbumToDelete()} />
<MenuOption icon={mdiDeleteOutline} text={$t('delete')} onClick={() => handleSelect('delete')} />
{/if}
</RightClickContextMenu>