Jason Rasmussen
@@ -3,21 +3,21 @@ import { redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load = (async ({ locals: { api, user } }) => {
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
|
||||
try {
|
||||
const { data: albums } = await api.albumApi.getAllAlbums();
|
||||
try {
|
||||
const { data: albums } = await api.albumApi.getAllAlbums();
|
||||
|
||||
return {
|
||||
user: user,
|
||||
albums: albums,
|
||||
meta: {
|
||||
title: 'Albums'
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
return {
|
||||
user: user,
|
||||
albums: albums,
|
||||
meta: {
|
||||
title: 'Albums',
|
||||
},
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
}) satisfies PageServerLoad;
|
||||
|
||||
@@ -1,171 +1,163 @@
|
||||
<script lang="ts">
|
||||
import { albumViewSettings } from '$lib/stores/preferences.store';
|
||||
import AlbumCard from '$lib/components/album-page/album-card.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
|
||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
|
||||
import { useAlbums } from './albums.bloc';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { flip } from 'svelte/animate';
|
||||
import Dropdown from '$lib/components/elements/dropdown.svelte';
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import type { AlbumResponseDto } from '@api';
|
||||
import { albumViewSettings } from '$lib/stores/preferences.store';
|
||||
import AlbumCard from '$lib/components/album-page/album-card.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
|
||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
|
||||
import { useAlbums } from './albums.bloc';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { flip } from 'svelte/animate';
|
||||
import Dropdown from '$lib/components/elements/dropdown.svelte';
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import type { AlbumResponseDto } from '@api';
|
||||
|
||||
export let data: PageData;
|
||||
export let data: PageData;
|
||||
|
||||
const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
|
||||
const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
|
||||
|
||||
const {
|
||||
albums: unsortedAlbums,
|
||||
isShowContextMenu,
|
||||
contextMenuPosition,
|
||||
contextMenuTargetAlbum,
|
||||
createAlbum,
|
||||
deleteAlbum,
|
||||
showAlbumContextMenu,
|
||||
closeAlbumContextMenu
|
||||
} = useAlbums({ albums: data.albums });
|
||||
const {
|
||||
albums: unsortedAlbums,
|
||||
isShowContextMenu,
|
||||
contextMenuPosition,
|
||||
contextMenuTargetAlbum,
|
||||
createAlbum,
|
||||
deleteAlbum,
|
||||
showAlbumContextMenu,
|
||||
closeAlbumContextMenu,
|
||||
} = useAlbums({ albums: data.albums });
|
||||
|
||||
let albums = unsortedAlbums;
|
||||
let albumToDelete: AlbumResponseDto | null;
|
||||
let albums = unsortedAlbums;
|
||||
let albumToDelete: AlbumResponseDto | null;
|
||||
|
||||
const setAlbumToDelete = () => {
|
||||
albumToDelete = $contextMenuTargetAlbum ?? null;
|
||||
closeAlbumContextMenu();
|
||||
};
|
||||
const setAlbumToDelete = () => {
|
||||
albumToDelete = $contextMenuTargetAlbum ?? null;
|
||||
closeAlbumContextMenu();
|
||||
};
|
||||
|
||||
const deleteSelectedAlbum = async () => {
|
||||
if (!albumToDelete) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await deleteAlbum(albumToDelete);
|
||||
} catch {
|
||||
notificationController.show({
|
||||
message: 'Error deleting album',
|
||||
type: NotificationType.Error
|
||||
});
|
||||
} finally {
|
||||
albumToDelete = null;
|
||||
}
|
||||
};
|
||||
const deleteSelectedAlbum = async () => {
|
||||
if (!albumToDelete) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await deleteAlbum(albumToDelete);
|
||||
} catch {
|
||||
notificationController.show({
|
||||
message: 'Error deleting album',
|
||||
type: NotificationType.Error,
|
||||
});
|
||||
} finally {
|
||||
albumToDelete = null;
|
||||
}
|
||||
};
|
||||
|
||||
const sortByDate = (a: string, b: string) => {
|
||||
const aDate = new Date(a);
|
||||
const bDate = new Date(b);
|
||||
return bDate.getTime() - aDate.getTime();
|
||||
};
|
||||
const sortByDate = (a: string, b: string) => {
|
||||
const aDate = new Date(a);
|
||||
const bDate = new Date(b);
|
||||
return bDate.getTime() - aDate.getTime();
|
||||
};
|
||||
|
||||
$: {
|
||||
const { sortBy } = $albumViewSettings;
|
||||
if (sortBy === 'Most recent photo') {
|
||||
$albums = $unsortedAlbums.sort((a, b) =>
|
||||
a.lastModifiedAssetTimestamp && b.lastModifiedAssetTimestamp
|
||||
? sortByDate(a.lastModifiedAssetTimestamp, b.lastModifiedAssetTimestamp)
|
||||
: sortByDate(a.updatedAt, b.updatedAt)
|
||||
);
|
||||
} else if (sortBy === 'Last modified') {
|
||||
$albums = $unsortedAlbums.sort((a, b) => sortByDate(a.updatedAt, b.updatedAt));
|
||||
} else if (sortBy === 'Album title') {
|
||||
$albums = $unsortedAlbums.sort((a, b) => a.albumName.localeCompare(b.albumName));
|
||||
}
|
||||
}
|
||||
$: {
|
||||
const { sortBy } = $albumViewSettings;
|
||||
if (sortBy === 'Most recent photo') {
|
||||
$albums = $unsortedAlbums.sort((a, b) =>
|
||||
a.lastModifiedAssetTimestamp && b.lastModifiedAssetTimestamp
|
||||
? sortByDate(a.lastModifiedAssetTimestamp, b.lastModifiedAssetTimestamp)
|
||||
: sortByDate(a.updatedAt, b.updatedAt),
|
||||
);
|
||||
} else if (sortBy === 'Last modified') {
|
||||
$albums = $unsortedAlbums.sort((a, b) => sortByDate(a.updatedAt, b.updatedAt));
|
||||
} else if (sortBy === 'Album title') {
|
||||
$albums = $unsortedAlbums.sort((a, b) => a.albumName.localeCompare(b.albumName));
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreateAlbum = async () => {
|
||||
const newAlbum = await createAlbum();
|
||||
if (newAlbum) {
|
||||
goto('/albums/' + newAlbum.id);
|
||||
}
|
||||
};
|
||||
const handleCreateAlbum = async () => {
|
||||
const newAlbum = await createAlbum();
|
||||
if (newAlbum) {
|
||||
goto('/albums/' + newAlbum.id);
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
removeAlbumsIfEmpty();
|
||||
});
|
||||
onMount(() => {
|
||||
removeAlbumsIfEmpty();
|
||||
});
|
||||
|
||||
const removeAlbumsIfEmpty = async () => {
|
||||
try {
|
||||
for (const album of $albums) {
|
||||
if (album.assetCount == 0 && album.albumName == 'Untitled') {
|
||||
await deleteAlbum(album);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
const removeAlbumsIfEmpty = async () => {
|
||||
try {
|
||||
for (const album of $albums) {
|
||||
if (album.assetCount == 0 && album.albumName == 'Untitled') {
|
||||
await deleteAlbum(album);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||
<div class="flex place-items-center gap-2" slot="buttons">
|
||||
<LinkButton on:click={handleCreateAlbum}>
|
||||
<div class="flex place-items-center gap-2 text-sm">
|
||||
<PlusBoxOutline size="18" />
|
||||
Create album
|
||||
</div>
|
||||
</LinkButton>
|
||||
<div class="flex place-items-center gap-2" slot="buttons">
|
||||
<LinkButton on:click={handleCreateAlbum}>
|
||||
<div class="flex place-items-center gap-2 text-sm">
|
||||
<PlusBoxOutline size="18" />
|
||||
Create album
|
||||
</div>
|
||||
</LinkButton>
|
||||
|
||||
<Dropdown options={sortByOptions} bind:value={$albumViewSettings.sortBy} />
|
||||
</div>
|
||||
<Dropdown options={sortByOptions} bind:value={$albumViewSettings.sortBy} />
|
||||
</div>
|
||||
|
||||
<!-- Album Card -->
|
||||
<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
|
||||
{#each $albums as album (album.id)}
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
href={`albums/${album.id}`}
|
||||
animate:flip={{ duration: 200 }}
|
||||
>
|
||||
<AlbumCard
|
||||
{album}
|
||||
on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
|
||||
user={data.user}
|
||||
/>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<!-- Album Card -->
|
||||
<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
|
||||
{#each $albums as album (album.id)}
|
||||
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
|
||||
<AlbumCard {album} on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)} user={data.user} />
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Empty Message -->
|
||||
{#if $albums.length === 0}
|
||||
<EmptyPlaceholder
|
||||
text="Create an album to organize your photos and videos"
|
||||
actionHandler={handleCreateAlbum}
|
||||
alt="Empty albums"
|
||||
/>
|
||||
{/if}
|
||||
<!-- Empty Message -->
|
||||
{#if $albums.length === 0}
|
||||
<EmptyPlaceholder
|
||||
text="Create an album to organize your photos and videos"
|
||||
actionHandler={handleCreateAlbum}
|
||||
alt="Empty albums"
|
||||
/>
|
||||
{/if}
|
||||
</UserPageLayout>
|
||||
|
||||
<!-- Context Menu -->
|
||||
{#if $isShowContextMenu}
|
||||
<ContextMenu {...$contextMenuPosition} on:outclick={closeAlbumContextMenu}>
|
||||
<MenuOption on:click={() => setAlbumToDelete()}>
|
||||
<span class="flex place-items-center place-content-center gap-2">
|
||||
<DeleteOutline size="18" />
|
||||
<p>Delete album</p>
|
||||
</span>
|
||||
</MenuOption>
|
||||
</ContextMenu>
|
||||
<ContextMenu {...$contextMenuPosition} on:outclick={closeAlbumContextMenu}>
|
||||
<MenuOption on:click={() => setAlbumToDelete()}>
|
||||
<span class="flex place-items-center place-content-center gap-2">
|
||||
<DeleteOutline size="18" />
|
||||
<p>Delete album</p>
|
||||
</span>
|
||||
</MenuOption>
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
|
||||
{#if albumToDelete}
|
||||
<ConfirmDialogue
|
||||
title="Delete Album"
|
||||
confirmText="Delete"
|
||||
on:confirm={deleteSelectedAlbum}
|
||||
on:cancel={() => (albumToDelete = null)}
|
||||
>
|
||||
<svelte:fragment slot="prompt">
|
||||
<p>Are you sure you want to delete the album <b>{albumToDelete.albumName}</b>?</p>
|
||||
<p>If this album is shared, other users will not be able to access it anymore.</p>
|
||||
</svelte:fragment>
|
||||
</ConfirmDialogue>
|
||||
<ConfirmDialogue
|
||||
title="Delete Album"
|
||||
confirmText="Delete"
|
||||
on:confirm={deleteSelectedAlbum}
|
||||
on:cancel={() => (albumToDelete = null)}
|
||||
>
|
||||
<svelte:fragment slot="prompt">
|
||||
<p>Are you sure you want to delete the album <b>{albumToDelete.albumName}</b>?</p>
|
||||
<p>If this album is shared, other users will not be able to access it anymore.</p>
|
||||
</svelte:fragment>
|
||||
</ConfirmDialogue>
|
||||
{/if}
|
||||
|
||||
@@ -3,21 +3,21 @@ import { redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load = (async ({ params, locals: { api, user } }) => {
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
|
||||
const albumId = params['albumId'];
|
||||
const albumId = params['albumId'];
|
||||
|
||||
try {
|
||||
const { data: album } = await api.albumApi.getAlbumInfo({ id: albumId });
|
||||
return {
|
||||
album,
|
||||
meta: {
|
||||
title: album.albumName
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, AppRoute.ALBUMS);
|
||||
}
|
||||
try {
|
||||
const { data: album } = await api.albumApi.getAlbumInfo({ id: albumId });
|
||||
return {
|
||||
album,
|
||||
meta: {
|
||||
title: album.albumName,
|
||||
},
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, AppRoute.ALBUMS);
|
||||
}
|
||||
}) satisfies PageServerLoad;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script lang="ts">
|
||||
import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
<div class="immich-scrollbar">
|
||||
<AlbumViewer album={data.album} />
|
||||
<AlbumViewer album={data.album} />
|
||||
</div>
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
export const prerender = false;
|
||||
import type { PageLoad } from './$types';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import type { PageLoad } from './$types';
|
||||
export const prerender = false;
|
||||
|
||||
export const load: PageLoad = async ({ params, parent }) => {
|
||||
const { user } = await parent();
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
const { user } = await parent();
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
|
||||
const albumId = params['albumId'];
|
||||
const albumId = params['albumId'];
|
||||
|
||||
if (albumId) {
|
||||
throw redirect(302, `${AppRoute.ALBUMS}/${albumId}`);
|
||||
} else {
|
||||
throw redirect(302, AppRoute.PHOTOS);
|
||||
}
|
||||
if (albumId) {
|
||||
throw redirect(302, `${AppRoute.ALBUMS}/${albumId}`);
|
||||
} else {
|
||||
throw redirect(302, AppRoute.PHOTOS);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,142 +1,137 @@
|
||||
import { jest, describe, it, expect, beforeEach, afterEach } from '@jest/globals';
|
||||
import { useAlbums } from '../albums.bloc';
|
||||
import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
|
||||
import { api, CreateAlbumDto } from '@api';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { afterEach, beforeEach, describe, expect, it, jest } from '@jest/globals';
|
||||
import { albumFactory } from '@test-data';
|
||||
import { get } from 'svelte/store';
|
||||
import { useAlbums } from '../albums.bloc';
|
||||
|
||||
jest.mock('@api');
|
||||
|
||||
const apiMock: jest.MockedObject<typeof api> = api as jest.MockedObject<typeof api>;
|
||||
|
||||
describe('Albums BLoC', () => {
|
||||
let sut: ReturnType<typeof useAlbums>;
|
||||
const _albums = albumFactory.buildList(5);
|
||||
let sut: ReturnType<typeof useAlbums>;
|
||||
const _albums = albumFactory.buildList(5);
|
||||
|
||||
beforeEach(() => {
|
||||
sut = useAlbums({ albums: [..._albums] });
|
||||
});
|
||||
beforeEach(() => {
|
||||
sut = useAlbums({ albums: [..._albums] });
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
const notifications = get(notificationController.notificationList);
|
||||
afterEach(() => {
|
||||
const notifications = get(notificationController.notificationList);
|
||||
|
||||
notifications.forEach((notification) =>
|
||||
notificationController.removeNotificationById(notification.id)
|
||||
);
|
||||
});
|
||||
notifications.forEach((notification) => notificationController.removeNotificationById(notification.id));
|
||||
});
|
||||
|
||||
it('inits with provided albums', () => {
|
||||
const albums = get(sut.albums);
|
||||
expect(albums.length).toEqual(5);
|
||||
expect(albums).toEqual(_albums);
|
||||
});
|
||||
it('inits with provided albums', () => {
|
||||
const albums = get(sut.albums);
|
||||
expect(albums.length).toEqual(5);
|
||||
expect(albums).toEqual(_albums);
|
||||
});
|
||||
|
||||
it('loads albums from the server', async () => {
|
||||
// TODO: this method currently deletes albums with no assets and albumName === 'Untitled' which might not be the best approach
|
||||
const loadedAlbums = [..._albums, albumFactory.build({ id: 'new_loaded_uuid' })];
|
||||
it('loads albums from the server', async () => {
|
||||
// TODO: this method currently deletes albums with no assets and albumName === 'Untitled' which might not be the best approach
|
||||
const loadedAlbums = [..._albums, albumFactory.build({ id: 'new_loaded_uuid' })];
|
||||
|
||||
apiMock.albumApi.getAllAlbums.mockResolvedValueOnce({
|
||||
data: loadedAlbums,
|
||||
config: {},
|
||||
headers: {},
|
||||
status: 200,
|
||||
statusText: ''
|
||||
});
|
||||
apiMock.albumApi.getAllAlbums.mockResolvedValueOnce({
|
||||
data: loadedAlbums,
|
||||
config: {},
|
||||
headers: {},
|
||||
status: 200,
|
||||
statusText: '',
|
||||
});
|
||||
|
||||
await sut.loadAlbums();
|
||||
const albums = get(sut.albums);
|
||||
await sut.loadAlbums();
|
||||
const albums = get(sut.albums);
|
||||
|
||||
expect(apiMock.albumApi.getAllAlbums).toHaveBeenCalledTimes(1);
|
||||
expect(albums).toEqual(loadedAlbums);
|
||||
});
|
||||
expect(apiMock.albumApi.getAllAlbums).toHaveBeenCalledTimes(1);
|
||||
expect(albums).toEqual(loadedAlbums);
|
||||
});
|
||||
|
||||
it('shows error message when it fails loading albums', async () => {
|
||||
apiMock.albumApi.getAllAlbums.mockRejectedValueOnce({}); // TODO: implement APIProblem interface in the server
|
||||
it('shows error message when it fails loading albums', async () => {
|
||||
apiMock.albumApi.getAllAlbums.mockRejectedValueOnce({}); // TODO: implement APIProblem interface in the server
|
||||
|
||||
expect(get(notificationController.notificationList)).toHaveLength(0);
|
||||
await sut.loadAlbums();
|
||||
const albums = get(sut.albums);
|
||||
const notifications = get(notificationController.notificationList);
|
||||
expect(get(notificationController.notificationList)).toHaveLength(0);
|
||||
await sut.loadAlbums();
|
||||
const albums = get(sut.albums);
|
||||
const notifications = get(notificationController.notificationList);
|
||||
|
||||
expect(apiMock.albumApi.getAllAlbums).toHaveBeenCalledTimes(1);
|
||||
expect(albums).toEqual(_albums);
|
||||
expect(notifications).toHaveLength(1);
|
||||
expect(notifications[0].type).toEqual(NotificationType.Error);
|
||||
});
|
||||
expect(apiMock.albumApi.getAllAlbums).toHaveBeenCalledTimes(1);
|
||||
expect(albums).toEqual(_albums);
|
||||
expect(notifications).toHaveLength(1);
|
||||
expect(notifications[0].type).toEqual(NotificationType.Error);
|
||||
});
|
||||
|
||||
it('creates a new album', async () => {
|
||||
// TODO: we probably shouldn't hardcode the album name "untitled" here and let the user input the album name before creating it
|
||||
const payload: CreateAlbumDto = {
|
||||
albumName: 'Untitled'
|
||||
};
|
||||
it('creates a new album', async () => {
|
||||
// TODO: we probably shouldn't hardcode the album name "untitled" here and let the user input the album name before creating it
|
||||
const payload: CreateAlbumDto = {
|
||||
albumName: 'Untitled',
|
||||
};
|
||||
|
||||
const returnedAlbum = albumFactory.build();
|
||||
const returnedAlbum = albumFactory.build();
|
||||
|
||||
apiMock.albumApi.createAlbum.mockResolvedValueOnce({
|
||||
data: returnedAlbum,
|
||||
config: {},
|
||||
headers: {},
|
||||
status: 200,
|
||||
statusText: ''
|
||||
});
|
||||
apiMock.albumApi.createAlbum.mockResolvedValueOnce({
|
||||
data: returnedAlbum,
|
||||
config: {},
|
||||
headers: {},
|
||||
status: 200,
|
||||
statusText: '',
|
||||
});
|
||||
|
||||
const newAlbum = await sut.createAlbum();
|
||||
const newAlbum = await sut.createAlbum();
|
||||
|
||||
expect(apiMock.albumApi.createAlbum).toHaveBeenCalledTimes(1);
|
||||
expect(apiMock.albumApi.createAlbum).toHaveBeenCalledWith({ createAlbumDto: payload });
|
||||
expect(newAlbum).toEqual(returnedAlbum);
|
||||
});
|
||||
expect(apiMock.albumApi.createAlbum).toHaveBeenCalledTimes(1);
|
||||
expect(apiMock.albumApi.createAlbum).toHaveBeenCalledWith({ createAlbumDto: payload });
|
||||
expect(newAlbum).toEqual(returnedAlbum);
|
||||
});
|
||||
|
||||
it('shows error message when it fails creating an album', async () => {
|
||||
apiMock.albumApi.createAlbum.mockRejectedValueOnce({});
|
||||
it('shows error message when it fails creating an album', async () => {
|
||||
apiMock.albumApi.createAlbum.mockRejectedValueOnce({});
|
||||
|
||||
const newAlbum = await sut.createAlbum();
|
||||
const notifications = get(notificationController.notificationList);
|
||||
const newAlbum = await sut.createAlbum();
|
||||
const notifications = get(notificationController.notificationList);
|
||||
|
||||
expect(apiMock.albumApi.createAlbum).toHaveBeenCalledTimes(1);
|
||||
expect(newAlbum).not.toBeDefined();
|
||||
expect(notifications).toHaveLength(1);
|
||||
expect(notifications[0].type).toEqual(NotificationType.Error);
|
||||
});
|
||||
expect(apiMock.albumApi.createAlbum).toHaveBeenCalledTimes(1);
|
||||
expect(newAlbum).not.toBeDefined();
|
||||
expect(notifications).toHaveLength(1);
|
||||
expect(notifications[0].type).toEqual(NotificationType.Error);
|
||||
});
|
||||
|
||||
it('selects an album and deletes it', async () => {
|
||||
apiMock.albumApi.deleteAlbum.mockResolvedValueOnce({
|
||||
data: undefined,
|
||||
config: {},
|
||||
headers: {},
|
||||
status: 200,
|
||||
statusText: ''
|
||||
});
|
||||
it('selects an album and deletes it', async () => {
|
||||
apiMock.albumApi.deleteAlbum.mockResolvedValueOnce({
|
||||
data: undefined,
|
||||
config: {},
|
||||
headers: {},
|
||||
status: 200,
|
||||
statusText: '',
|
||||
});
|
||||
|
||||
const albumToDelete = get(sut.albums)[2]; // delete third album
|
||||
const albumToDeleteId = albumToDelete.id;
|
||||
const contextMenuCoords = { x: 100, y: 150 };
|
||||
const albumToDelete = get(sut.albums)[2]; // delete third album
|
||||
const albumToDeleteId = albumToDelete.id;
|
||||
const contextMenuCoords = { x: 100, y: 150 };
|
||||
|
||||
expect(get(sut.isShowContextMenu)).toBe(false);
|
||||
sut.showAlbumContextMenu(contextMenuCoords, albumToDelete);
|
||||
expect(get(sut.contextMenuPosition)).toEqual(contextMenuCoords);
|
||||
expect(get(sut.isShowContextMenu)).toBe(true);
|
||||
expect(get(sut.contextMenuTargetAlbum)).toEqual(albumToDelete);
|
||||
expect(get(sut.isShowContextMenu)).toBe(false);
|
||||
sut.showAlbumContextMenu(contextMenuCoords, albumToDelete);
|
||||
expect(get(sut.contextMenuPosition)).toEqual(contextMenuCoords);
|
||||
expect(get(sut.isShowContextMenu)).toBe(true);
|
||||
expect(get(sut.contextMenuTargetAlbum)).toEqual(albumToDelete);
|
||||
|
||||
await sut.deleteAlbum(albumToDelete);
|
||||
const updatedAlbums = get(sut.albums);
|
||||
await sut.deleteAlbum(albumToDelete);
|
||||
const updatedAlbums = get(sut.albums);
|
||||
|
||||
expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledTimes(1);
|
||||
expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledWith({ id: albumToDeleteId });
|
||||
expect(updatedAlbums).toHaveLength(4);
|
||||
expect(updatedAlbums).not.toContain(albumToDelete);
|
||||
});
|
||||
expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledTimes(1);
|
||||
expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledWith({ id: albumToDeleteId });
|
||||
expect(updatedAlbums).toHaveLength(4);
|
||||
expect(updatedAlbums).not.toContain(albumToDelete);
|
||||
});
|
||||
|
||||
it('closes album context menu, deselecting album', () => {
|
||||
const albumToDelete = get(sut.albums)[2]; // delete third album
|
||||
sut.showAlbumContextMenu({ x: 100, y: 150 }, albumToDelete);
|
||||
it('closes album context menu, deselecting album', () => {
|
||||
const albumToDelete = get(sut.albums)[2]; // delete third album
|
||||
sut.showAlbumContextMenu({ x: 100, y: 150 }, albumToDelete);
|
||||
|
||||
expect(get(sut.isShowContextMenu)).toBe(true);
|
||||
expect(get(sut.isShowContextMenu)).toBe(true);
|
||||
|
||||
sut.closeAlbumContextMenu();
|
||||
expect(get(sut.isShowContextMenu)).toBe(false);
|
||||
});
|
||||
sut.closeAlbumContextMenu();
|
||||
expect(get(sut.isShowContextMenu)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,91 +1,88 @@
|
||||
import type { OnShowContextMenuDetail } from '$lib/components/album-page/album-card';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
|
||||
import { AlbumResponseDto, api } from '@api';
|
||||
import { derived, get, writable } from 'svelte/store';
|
||||
|
||||
type AlbumsProps = { albums: AlbumResponseDto[] };
|
||||
|
||||
export const useAlbums = (props: AlbumsProps) => {
|
||||
const albums = writable([...props.albums]);
|
||||
const contextMenuPosition = writable<OnShowContextMenuDetail>({ x: 0, y: 0 });
|
||||
const contextMenuTargetAlbum = writable<AlbumResponseDto | undefined>();
|
||||
const isShowContextMenu = derived(contextMenuTargetAlbum, ($selectedAlbum) => !!$selectedAlbum);
|
||||
const albums = writable([...props.albums]);
|
||||
const contextMenuPosition = writable<OnShowContextMenuDetail>({ x: 0, y: 0 });
|
||||
const contextMenuTargetAlbum = writable<AlbumResponseDto | undefined>();
|
||||
const isShowContextMenu = derived(contextMenuTargetAlbum, ($selectedAlbum) => !!$selectedAlbum);
|
||||
|
||||
async function loadAlbums(): Promise<void> {
|
||||
try {
|
||||
const { data } = await api.albumApi.getAllAlbums();
|
||||
albums.set(data);
|
||||
async function loadAlbums(): Promise<void> {
|
||||
try {
|
||||
const { data } = await api.albumApi.getAllAlbums();
|
||||
albums.set(data);
|
||||
|
||||
// Delete album that has no photos and is named 'Untitled'
|
||||
for (const album of data) {
|
||||
if (album.albumName === 'Untitled' && album.assetCount === 0) {
|
||||
setTimeout(async () => {
|
||||
await deleteAlbum(album);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
notificationController.show({
|
||||
message: 'Error loading albums',
|
||||
type: NotificationType.Error
|
||||
});
|
||||
}
|
||||
}
|
||||
// Delete album that has no photos and is named 'Untitled'
|
||||
for (const album of data) {
|
||||
if (album.albumName === 'Untitled' && album.assetCount === 0) {
|
||||
setTimeout(async () => {
|
||||
await deleteAlbum(album);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
notificationController.show({
|
||||
message: 'Error loading albums',
|
||||
type: NotificationType.Error,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function createAlbum(): Promise<AlbumResponseDto | undefined> {
|
||||
try {
|
||||
const { data: newAlbum } = await api.albumApi.createAlbum({
|
||||
createAlbumDto: {
|
||||
albumName: 'Untitled'
|
||||
}
|
||||
});
|
||||
async function createAlbum(): Promise<AlbumResponseDto | undefined> {
|
||||
try {
|
||||
const { data: newAlbum } = await api.albumApi.createAlbum({
|
||||
createAlbumDto: {
|
||||
albumName: 'Untitled',
|
||||
},
|
||||
});
|
||||
|
||||
return newAlbum;
|
||||
} catch {
|
||||
notificationController.show({
|
||||
message: 'Error creating album',
|
||||
type: NotificationType.Error
|
||||
});
|
||||
}
|
||||
}
|
||||
return newAlbum;
|
||||
} catch {
|
||||
notificationController.show({
|
||||
message: 'Error creating album',
|
||||
type: NotificationType.Error,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteAlbum(albumToDelete: AlbumResponseDto): Promise<void> {
|
||||
await api.albumApi.deleteAlbum({ id: albumToDelete.id });
|
||||
albums.set(
|
||||
get(albums).filter(({ id }) => {
|
||||
return id !== albumToDelete.id;
|
||||
})
|
||||
);
|
||||
}
|
||||
async function deleteAlbum(albumToDelete: AlbumResponseDto): Promise<void> {
|
||||
await api.albumApi.deleteAlbum({ id: albumToDelete.id });
|
||||
albums.set(
|
||||
get(albums).filter(({ id }) => {
|
||||
return id !== albumToDelete.id;
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
async function showAlbumContextMenu(
|
||||
contextMenuDetail: OnShowContextMenuDetail,
|
||||
album: AlbumResponseDto
|
||||
): Promise<void> {
|
||||
contextMenuTargetAlbum.set(album);
|
||||
async function showAlbumContextMenu(
|
||||
contextMenuDetail: OnShowContextMenuDetail,
|
||||
album: AlbumResponseDto,
|
||||
): Promise<void> {
|
||||
contextMenuTargetAlbum.set(album);
|
||||
|
||||
contextMenuPosition.set({
|
||||
x: contextMenuDetail.x,
|
||||
y: contextMenuDetail.y
|
||||
});
|
||||
}
|
||||
contextMenuPosition.set({
|
||||
x: contextMenuDetail.x,
|
||||
y: contextMenuDetail.y,
|
||||
});
|
||||
}
|
||||
|
||||
function closeAlbumContextMenu() {
|
||||
contextMenuTargetAlbum.set(undefined);
|
||||
}
|
||||
function closeAlbumContextMenu() {
|
||||
contextMenuTargetAlbum.set(undefined);
|
||||
}
|
||||
|
||||
return {
|
||||
albums,
|
||||
isShowContextMenu,
|
||||
contextMenuPosition,
|
||||
contextMenuTargetAlbum,
|
||||
loadAlbums,
|
||||
createAlbum,
|
||||
deleteAlbum,
|
||||
showAlbumContextMenu,
|
||||
closeAlbumContextMenu
|
||||
};
|
||||
return {
|
||||
albums,
|
||||
isShowContextMenu,
|
||||
contextMenuPosition,
|
||||
contextMenuTargetAlbum,
|
||||
loadAlbums,
|
||||
createAlbum,
|
||||
deleteAlbum,
|
||||
showAlbumContextMenu,
|
||||
closeAlbumContextMenu,
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user