mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
Jason Rasmussen
GitHub
parent
7c2f7d6c51
commit
f55b3add80
242 changed files with 12794 additions and 13426 deletions
|
|
@ -1,141 +1,136 @@
|
|||
import { jest, describe, it } from '@jest/globals';
|
||||
import { render, RenderResult, waitFor, fireEvent } from '@testing-library/svelte';
|
||||
import { createObjectURLMock } from '$lib/__mocks__/jsdom-url.mock';
|
||||
import { api, ThumbnailFormat } from '@api';
|
||||
import { describe, it, jest } from '@jest/globals';
|
||||
import { albumFactory } from '@test-data';
|
||||
import AlbumCard from '../album-card.svelte';
|
||||
import '@testing-library/jest-dom';
|
||||
import { fireEvent, render, RenderResult, waitFor } from '@testing-library/svelte';
|
||||
import AlbumCard from '../album-card.svelte';
|
||||
|
||||
jest.mock('@api');
|
||||
|
||||
const apiMock: jest.MockedObject<typeof api> = api as jest.MockedObject<typeof api>;
|
||||
|
||||
describe('AlbumCard component', () => {
|
||||
let sut: RenderResult<AlbumCard>;
|
||||
let sut: RenderResult<AlbumCard>;
|
||||
|
||||
it.each([
|
||||
{
|
||||
album: albumFactory.build({ albumThumbnailAssetId: null, shared: false, assetCount: 0 }),
|
||||
count: 0,
|
||||
shared: false
|
||||
},
|
||||
{
|
||||
album: albumFactory.build({ albumThumbnailAssetId: null, shared: true, assetCount: 0 }),
|
||||
count: 0,
|
||||
shared: true
|
||||
},
|
||||
{
|
||||
album: albumFactory.build({ albumThumbnailAssetId: null, shared: false, assetCount: 5 }),
|
||||
count: 5,
|
||||
shared: false
|
||||
},
|
||||
{
|
||||
album: albumFactory.build({ albumThumbnailAssetId: null, shared: true, assetCount: 2 }),
|
||||
count: 2,
|
||||
shared: true
|
||||
}
|
||||
])(
|
||||
'shows album data without thumbnail with count $count - shared: $shared',
|
||||
async ({ album, count, shared }) => {
|
||||
sut = render(AlbumCard, { album, user: album.owner });
|
||||
it.each([
|
||||
{
|
||||
album: albumFactory.build({ albumThumbnailAssetId: null, shared: false, assetCount: 0 }),
|
||||
count: 0,
|
||||
shared: false,
|
||||
},
|
||||
{
|
||||
album: albumFactory.build({ albumThumbnailAssetId: null, shared: true, assetCount: 0 }),
|
||||
count: 0,
|
||||
shared: true,
|
||||
},
|
||||
{
|
||||
album: albumFactory.build({ albumThumbnailAssetId: null, shared: false, assetCount: 5 }),
|
||||
count: 5,
|
||||
shared: false,
|
||||
},
|
||||
{
|
||||
album: albumFactory.build({ albumThumbnailAssetId: null, shared: true, assetCount: 2 }),
|
||||
count: 2,
|
||||
shared: true,
|
||||
},
|
||||
])('shows album data without thumbnail with count $count - shared: $shared', async ({ album, count, shared }) => {
|
||||
sut = render(AlbumCard, { album, user: album.owner });
|
||||
|
||||
const albumImgElement = sut.getByTestId('album-image');
|
||||
const albumNameElement = sut.getByTestId('album-name');
|
||||
const albumDetailsElement = sut.getByTestId('album-details');
|
||||
const detailsText = `${count} items` + (shared ? ' . Shared' : '');
|
||||
const albumImgElement = sut.getByTestId('album-image');
|
||||
const albumNameElement = sut.getByTestId('album-name');
|
||||
const albumDetailsElement = sut.getByTestId('album-details');
|
||||
const detailsText = `${count} items` + (shared ? ' . Shared' : '');
|
||||
|
||||
expect(albumImgElement).toHaveAttribute('src');
|
||||
expect(albumImgElement).toHaveAttribute('alt', album.id);
|
||||
expect(albumImgElement).toHaveAttribute('src');
|
||||
expect(albumImgElement).toHaveAttribute('alt', album.id);
|
||||
|
||||
await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
|
||||
await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
|
||||
|
||||
expect(albumImgElement).toHaveAttribute('alt', album.id);
|
||||
expect(apiMock.assetApi.getAssetThumbnail).not.toHaveBeenCalled();
|
||||
expect(albumImgElement).toHaveAttribute('alt', album.id);
|
||||
expect(apiMock.assetApi.getAssetThumbnail).not.toHaveBeenCalled();
|
||||
|
||||
expect(albumNameElement).toHaveTextContent(album.albumName);
|
||||
expect(albumDetailsElement).toHaveTextContent(new RegExp(detailsText));
|
||||
}
|
||||
);
|
||||
expect(albumNameElement).toHaveTextContent(album.albumName);
|
||||
expect(albumDetailsElement).toHaveTextContent(new RegExp(detailsText));
|
||||
});
|
||||
|
||||
it('shows album data and and loads the thumbnail image when available', async () => {
|
||||
const thumbnailFile = new File([new Blob()], 'fileThumbnail');
|
||||
const thumbnailUrl = 'blob:thumbnailUrlOne';
|
||||
apiMock.assetApi.getAssetThumbnail.mockResolvedValue({
|
||||
data: thumbnailFile,
|
||||
config: {},
|
||||
headers: {},
|
||||
status: 200,
|
||||
statusText: ''
|
||||
});
|
||||
createObjectURLMock.mockReturnValueOnce(thumbnailUrl);
|
||||
it('shows album data and and loads the thumbnail image when available', async () => {
|
||||
const thumbnailFile = new File([new Blob()], 'fileThumbnail');
|
||||
const thumbnailUrl = 'blob:thumbnailUrlOne';
|
||||
apiMock.assetApi.getAssetThumbnail.mockResolvedValue({
|
||||
data: thumbnailFile,
|
||||
config: {},
|
||||
headers: {},
|
||||
status: 200,
|
||||
statusText: '',
|
||||
});
|
||||
createObjectURLMock.mockReturnValueOnce(thumbnailUrl);
|
||||
|
||||
const album = albumFactory.build({
|
||||
albumThumbnailAssetId: 'thumbnailIdOne',
|
||||
shared: false,
|
||||
albumName: 'some album name'
|
||||
});
|
||||
sut = render(AlbumCard, { album, user: album.owner });
|
||||
const album = albumFactory.build({
|
||||
albumThumbnailAssetId: 'thumbnailIdOne',
|
||||
shared: false,
|
||||
albumName: 'some album name',
|
||||
});
|
||||
sut = render(AlbumCard, { album, user: album.owner });
|
||||
|
||||
const albumImgElement = sut.getByTestId('album-image');
|
||||
const albumNameElement = sut.getByTestId('album-name');
|
||||
const albumDetailsElement = sut.getByTestId('album-details');
|
||||
expect(albumImgElement).toHaveAttribute('alt', album.id);
|
||||
const albumImgElement = sut.getByTestId('album-image');
|
||||
const albumNameElement = sut.getByTestId('album-name');
|
||||
const albumDetailsElement = sut.getByTestId('album-details');
|
||||
expect(albumImgElement).toHaveAttribute('alt', album.id);
|
||||
|
||||
await waitFor(() => expect(albumImgElement).toHaveAttribute('src', thumbnailUrl));
|
||||
await waitFor(() => expect(albumImgElement).toHaveAttribute('src', thumbnailUrl));
|
||||
|
||||
expect(albumImgElement).toHaveAttribute('alt', album.id);
|
||||
expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledTimes(1);
|
||||
expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledWith(
|
||||
{
|
||||
id: 'thumbnailIdOne',
|
||||
format: ThumbnailFormat.Jpeg
|
||||
},
|
||||
{ responseType: 'blob' }
|
||||
);
|
||||
expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailFile);
|
||||
expect(albumImgElement).toHaveAttribute('alt', album.id);
|
||||
expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledTimes(1);
|
||||
expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledWith(
|
||||
{
|
||||
id: 'thumbnailIdOne',
|
||||
format: ThumbnailFormat.Jpeg,
|
||||
},
|
||||
{ responseType: 'blob' },
|
||||
);
|
||||
expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailFile);
|
||||
|
||||
expect(albumNameElement).toHaveTextContent('some album name');
|
||||
expect(albumDetailsElement).toHaveTextContent('0 items');
|
||||
});
|
||||
expect(albumNameElement).toHaveTextContent('some album name');
|
||||
expect(albumDetailsElement).toHaveTextContent('0 items');
|
||||
});
|
||||
|
||||
describe('with rendered component - no thumbnail', () => {
|
||||
const album = Object.freeze(albumFactory.build({ albumThumbnailAssetId: null }));
|
||||
describe('with rendered component - no thumbnail', () => {
|
||||
const album = Object.freeze(albumFactory.build({ albumThumbnailAssetId: null }));
|
||||
|
||||
beforeEach(async () => {
|
||||
sut = render(AlbumCard, { album, user: album.owner });
|
||||
beforeEach(async () => {
|
||||
sut = render(AlbumCard, { album, user: album.owner });
|
||||
|
||||
const albumImgElement = sut.getByTestId('album-image');
|
||||
await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
|
||||
});
|
||||
const albumImgElement = sut.getByTestId('album-image');
|
||||
await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
|
||||
});
|
||||
|
||||
it('dispatches custom "click" event with the album in context', async () => {
|
||||
const onClickHandler = jest.fn();
|
||||
sut.component.$on('click', onClickHandler);
|
||||
const albumCardElement = sut.getByTestId('album-card');
|
||||
it('dispatches custom "click" event with the album in context', async () => {
|
||||
const onClickHandler = jest.fn();
|
||||
sut.component.$on('click', onClickHandler);
|
||||
const albumCardElement = sut.getByTestId('album-card');
|
||||
|
||||
await fireEvent.click(albumCardElement);
|
||||
expect(onClickHandler).toHaveBeenCalledTimes(1);
|
||||
expect(onClickHandler).toHaveBeenCalledWith(expect.objectContaining({ detail: album }));
|
||||
});
|
||||
await fireEvent.click(albumCardElement);
|
||||
expect(onClickHandler).toHaveBeenCalledTimes(1);
|
||||
expect(onClickHandler).toHaveBeenCalledWith(expect.objectContaining({ detail: album }));
|
||||
});
|
||||
|
||||
it('dispatches custom "click" event on context menu click with mouse coordinates', async () => {
|
||||
const onClickHandler = jest.fn();
|
||||
sut.component.$on('showalbumcontextmenu', onClickHandler);
|
||||
it('dispatches custom "click" event on context menu click with mouse coordinates', async () => {
|
||||
const onClickHandler = jest.fn();
|
||||
sut.component.$on('showalbumcontextmenu', onClickHandler);
|
||||
|
||||
const contextMenuBtnParent = sut.getByTestId('context-button-parent');
|
||||
const contextMenuBtnParent = sut.getByTestId('context-button-parent');
|
||||
|
||||
await fireEvent(
|
||||
contextMenuBtnParent,
|
||||
new MouseEvent('click', {
|
||||
clientX: 123,
|
||||
clientY: 456
|
||||
})
|
||||
);
|
||||
await fireEvent(
|
||||
contextMenuBtnParent,
|
||||
new MouseEvent('click', {
|
||||
clientX: 123,
|
||||
clientY: 456,
|
||||
}),
|
||||
);
|
||||
|
||||
expect(onClickHandler).toHaveBeenCalledTimes(1);
|
||||
expect(onClickHandler).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ detail: { x: 123, y: 456 } })
|
||||
);
|
||||
});
|
||||
});
|
||||
expect(onClickHandler).toHaveBeenCalledTimes(1);
|
||||
expect(onClickHandler).toHaveBeenCalledWith(expect.objectContaining({ detail: { x: 123, y: 456 } }));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,133 +1,133 @@
|
|||
<script lang="ts">
|
||||
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import IconButton from '../elements/buttons/icon-button.svelte';
|
||||
import type { OnClick, OnShowContextMenu } from './album-card';
|
||||
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import IconButton from '../elements/buttons/icon-button.svelte';
|
||||
import type { OnClick, OnShowContextMenu } from './album-card';
|
||||
|
||||
export let album: AlbumResponseDto;
|
||||
export let isSharingView = false;
|
||||
export let user: UserResponseDto;
|
||||
export let showItemCount = true;
|
||||
export let showContextMenu = true;
|
||||
export let album: AlbumResponseDto;
|
||||
export let isSharingView = false;
|
||||
export let user: UserResponseDto;
|
||||
export let showItemCount = true;
|
||||
export let showContextMenu = true;
|
||||
|
||||
$: imageData = album.albumThumbnailAssetId
|
||||
? api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)
|
||||
: noThumbnailUrl;
|
||||
$: imageData = album.albumThumbnailAssetId
|
||||
? api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)
|
||||
: noThumbnailUrl;
|
||||
|
||||
const dispatchClick = createEventDispatcher<OnClick>();
|
||||
const dispatchShowContextMenu = createEventDispatcher<OnShowContextMenu>();
|
||||
const dispatchClick = createEventDispatcher<OnClick>();
|
||||
const dispatchShowContextMenu = createEventDispatcher<OnShowContextMenu>();
|
||||
|
||||
const loadHighQualityThumbnail = async (thubmnailId: string | null) => {
|
||||
if (thubmnailId == null) {
|
||||
return;
|
||||
}
|
||||
const loadHighQualityThumbnail = async (thubmnailId: string | null) => {
|
||||
if (thubmnailId == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await api.assetApi.getAssetThumbnail(
|
||||
{
|
||||
id: thubmnailId,
|
||||
format: ThumbnailFormat.Jpeg
|
||||
},
|
||||
{
|
||||
responseType: 'blob'
|
||||
}
|
||||
);
|
||||
const { data } = await api.assetApi.getAssetThumbnail(
|
||||
{
|
||||
id: thubmnailId,
|
||||
format: ThumbnailFormat.Jpeg,
|
||||
},
|
||||
{
|
||||
responseType: 'blob',
|
||||
},
|
||||
);
|
||||
|
||||
if (data instanceof Blob) {
|
||||
return URL.createObjectURL(data);
|
||||
}
|
||||
};
|
||||
if (data instanceof Blob) {
|
||||
return URL.createObjectURL(data);
|
||||
}
|
||||
};
|
||||
|
||||
const showAlbumContextMenu = (e: MouseEvent) => {
|
||||
dispatchShowContextMenu('showalbumcontextmenu', {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
});
|
||||
};
|
||||
const showAlbumContextMenu = (e: MouseEvent) => {
|
||||
dispatchShowContextMenu('showalbumcontextmenu', {
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
});
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || noThumbnailUrl;
|
||||
});
|
||||
onMount(async () => {
|
||||
imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || noThumbnailUrl;
|
||||
});
|
||||
|
||||
const getAlbumOwnerInfo = async (): Promise<UserResponseDto> => {
|
||||
const { data } = await api.userApi.getUserById({ userId: album.ownerId });
|
||||
const getAlbumOwnerInfo = async (): Promise<UserResponseDto> => {
|
||||
const { data } = await api.userApi.getUserById({ userId: album.ownerId });
|
||||
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="group hover:cursor-pointer mt-4 border-[3px] border-transparent dark:hover:border-immich-dark-primary/75 hover:border-immich-primary/75 rounded-3xl p-5 relative"
|
||||
on:click={() => dispatchClick('click', album)}
|
||||
on:keydown={() => dispatchClick('click', album)}
|
||||
data-testid="album-card"
|
||||
class="group hover:cursor-pointer mt-4 border-[3px] border-transparent dark:hover:border-immich-dark-primary/75 hover:border-immich-primary/75 rounded-3xl p-5 relative"
|
||||
on:click={() => dispatchClick('click', album)}
|
||||
on:keydown={() => dispatchClick('click', album)}
|
||||
data-testid="album-card"
|
||||
>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
{#if showContextMenu}
|
||||
<div
|
||||
id={`icon-${album.id}`}
|
||||
class="absolute top-6 right-6 z-10"
|
||||
on:click|stopPropagation|preventDefault={showAlbumContextMenu}
|
||||
data-testid="context-button-parent"
|
||||
>
|
||||
<IconButton color="overlay-primary">
|
||||
<DotsVertical size="20" />
|
||||
</IconButton>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
{#if showContextMenu}
|
||||
<div
|
||||
id={`icon-${album.id}`}
|
||||
class="absolute top-6 right-6 z-10"
|
||||
on:click|stopPropagation|preventDefault={showAlbumContextMenu}
|
||||
data-testid="context-button-parent"
|
||||
>
|
||||
<IconButton color="overlay-primary">
|
||||
<DotsVertical size="20" />
|
||||
</IconButton>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class={`aspect-square relative`}>
|
||||
<img
|
||||
src={imageData}
|
||||
alt={album.id}
|
||||
class={`object-cover h-full w-full transition-all z-0 rounded-3xl duration-300 hover:shadow-lg`}
|
||||
data-testid="album-image"
|
||||
draggable="false"
|
||||
/>
|
||||
<div
|
||||
class="w-full h-full absolute top-0 rounded-3xl {isSharingView
|
||||
? 'group-hover:bg-yellow-800/25'
|
||||
: 'group-hover:bg-indigo-800/25'} "
|
||||
/>
|
||||
</div>
|
||||
<div class={`aspect-square relative`}>
|
||||
<img
|
||||
src={imageData}
|
||||
alt={album.id}
|
||||
class={`object-cover h-full w-full transition-all z-0 rounded-3xl duration-300 hover:shadow-lg`}
|
||||
data-testid="album-image"
|
||||
draggable="false"
|
||||
/>
|
||||
<div
|
||||
class="w-full h-full absolute top-0 rounded-3xl {isSharingView
|
||||
? 'group-hover:bg-yellow-800/25'
|
||||
: 'group-hover:bg-indigo-800/25'} "
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<p
|
||||
class="text-xl font-semibold dark:text-immich-dark-primary text-immich-primary w-full truncate"
|
||||
data-testid="album-name"
|
||||
title={album.albumName}
|
||||
>
|
||||
{album.albumName}
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<p
|
||||
class="text-xl font-semibold dark:text-immich-dark-primary text-immich-primary w-full truncate"
|
||||
data-testid="album-name"
|
||||
title={album.albumName}
|
||||
>
|
||||
{album.albumName}
|
||||
</p>
|
||||
|
||||
<span class="text-sm flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
|
||||
{#if showItemCount}
|
||||
<p>
|
||||
{album.assetCount.toLocaleString($locale)}
|
||||
{album.assetCount == 1 ? `item` : `items`}
|
||||
</p>
|
||||
{/if}
|
||||
<span class="text-sm flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
|
||||
{#if showItemCount}
|
||||
<p>
|
||||
{album.assetCount.toLocaleString($locale)}
|
||||
{album.assetCount == 1 ? `item` : `items`}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if isSharingView || album.shared}
|
||||
<p>·</p>
|
||||
{/if}
|
||||
{#if isSharingView || album.shared}
|
||||
<p>·</p>
|
||||
{/if}
|
||||
|
||||
{#if isSharingView}
|
||||
{#await getAlbumOwnerInfo() then albumOwner}
|
||||
{#if user.email == albumOwner.email}
|
||||
<p>Owned</p>
|
||||
{:else}
|
||||
<p>
|
||||
Shared by {albumOwner.firstName}
|
||||
{albumOwner.lastName}
|
||||
</p>
|
||||
{/if}
|
||||
{/await}
|
||||
{:else if album.shared}
|
||||
<p>Shared</p>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
{#if isSharingView}
|
||||
{#await getAlbumOwnerInfo() then albumOwner}
|
||||
{#if user.email == albumOwner.email}
|
||||
<p>Owned</p>
|
||||
{:else}
|
||||
<p>
|
||||
Shared by {albumOwner.firstName}
|
||||
{albumOwner.lastName}
|
||||
</p>
|
||||
{/if}
|
||||
{/await}
|
||||
{:else if album.shared}
|
||||
<p>Shared</p>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import type { AlbumResponseDto } from '@api';
|
||||
|
||||
export type OnShowContextMenu = {
|
||||
showalbumcontextmenu: OnShowContextMenuDetail;
|
||||
showalbumcontextmenu: OnShowContextMenuDetail;
|
||||
};
|
||||
|
||||
export type OnClick = {
|
||||
click: OnClickDetail;
|
||||
click: OnClickDetail;
|
||||
};
|
||||
|
||||
export type OnShowContextMenuDetail = { x: number; y: number };
|
||||
|
|
|
|||
|
|
@ -1,533 +1,490 @@
|
|||
<script lang="ts">
|
||||
import { browser } from '$app/environment';
|
||||
import { afterNavigate, goto } from '$app/navigation';
|
||||
import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
|
||||
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
|
||||
import {
|
||||
AlbumResponseDto,
|
||||
AssetResponseDto,
|
||||
SharedLinkResponseDto,
|
||||
SharedLinkType,
|
||||
UserResponseDto,
|
||||
api
|
||||
} from '@api';
|
||||
import { onMount } from 'svelte';
|
||||
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
|
||||
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
|
||||
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
|
||||
import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
|
||||
import Plus from 'svelte-material-icons/Plus.svelte';
|
||||
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import DownloadAction from '../photos-page/actions/download-action.svelte';
|
||||
import RemoveFromAlbum from '../photos-page/actions/remove-from-album.svelte';
|
||||
import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
|
||||
import UserAvatar from '../shared-components/user-avatar.svelte';
|
||||
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
|
||||
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
|
||||
import ControlAppBar from '../shared-components/control-app-bar.svelte';
|
||||
import CreateSharedLinkModal from '../shared-components/create-share-link-modal/create-shared-link-modal.svelte';
|
||||
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
|
||||
import ImmichLogo from '../shared-components/immich-logo.svelte';
|
||||
import SelectAll from 'svelte-material-icons/SelectAll.svelte';
|
||||
import {
|
||||
NotificationType,
|
||||
notificationController
|
||||
} from '../shared-components/notification/notification';
|
||||
import ThemeButton from '../shared-components/theme-button.svelte';
|
||||
import AssetSelection from './asset-selection.svelte';
|
||||
import ShareInfoModal from './share-info-modal.svelte';
|
||||
import ThumbnailSelection from './thumbnail-selection.svelte';
|
||||
import UserSelectionModal from './user-selection-modal.svelte';
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
import { handleError } from '../../utils/handle-error';
|
||||
import { downloadArchive } from '../../utils/asset-utils';
|
||||
import { browser } from '$app/environment';
|
||||
import { afterNavigate, goto } from '$app/navigation';
|
||||
import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
|
||||
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
|
||||
import {
|
||||
AlbumResponseDto,
|
||||
AssetResponseDto,
|
||||
SharedLinkResponseDto,
|
||||
SharedLinkType,
|
||||
UserResponseDto,
|
||||
api,
|
||||
} from '@api';
|
||||
import { onMount } from 'svelte';
|
||||
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
|
||||
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
|
||||
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
|
||||
import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
|
||||
import Plus from 'svelte-material-icons/Plus.svelte';
|
||||
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import DownloadAction from '../photos-page/actions/download-action.svelte';
|
||||
import RemoveFromAlbum from '../photos-page/actions/remove-from-album.svelte';
|
||||
import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
|
||||
import UserAvatar from '../shared-components/user-avatar.svelte';
|
||||
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
|
||||
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
|
||||
import ControlAppBar from '../shared-components/control-app-bar.svelte';
|
||||
import CreateSharedLinkModal from '../shared-components/create-share-link-modal/create-shared-link-modal.svelte';
|
||||
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
|
||||
import ImmichLogo from '../shared-components/immich-logo.svelte';
|
||||
import SelectAll from 'svelte-material-icons/SelectAll.svelte';
|
||||
import { NotificationType, notificationController } from '../shared-components/notification/notification';
|
||||
import ThemeButton from '../shared-components/theme-button.svelte';
|
||||
import AssetSelection from './asset-selection.svelte';
|
||||
import ShareInfoModal from './share-info-modal.svelte';
|
||||
import ThumbnailSelection from './thumbnail-selection.svelte';
|
||||
import UserSelectionModal from './user-selection-modal.svelte';
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
import { handleError } from '../../utils/handle-error';
|
||||
import { downloadArchive } from '../../utils/asset-utils';
|
||||
|
||||
export let album: AlbumResponseDto;
|
||||
export let sharedLink: SharedLinkResponseDto | undefined = undefined;
|
||||
export let album: AlbumResponseDto;
|
||||
export let sharedLink: SharedLinkResponseDto | undefined = undefined;
|
||||
|
||||
const { isAlbumAssetSelectionOpen } = albumAssetSelectionStore;
|
||||
const { isAlbumAssetSelectionOpen } = albumAssetSelectionStore;
|
||||
|
||||
let isShowAssetSelection = false;
|
||||
let isShowAssetSelection = false;
|
||||
|
||||
let isShowShareLinkModal = false;
|
||||
let isShowShareLinkModal = false;
|
||||
|
||||
$: $isAlbumAssetSelectionOpen = isShowAssetSelection;
|
||||
$: {
|
||||
if (browser) {
|
||||
if (isShowAssetSelection) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
}
|
||||
}
|
||||
let isShowShareUserSelection = false;
|
||||
let isEditingTitle = false;
|
||||
let isCreatingSharedAlbum = false;
|
||||
let isShowShareInfoModal = false;
|
||||
let isShowAlbumOptions = false;
|
||||
let isShowThumbnailSelection = false;
|
||||
let isShowDeleteConfirmation = false;
|
||||
$: $isAlbumAssetSelectionOpen = isShowAssetSelection;
|
||||
$: {
|
||||
if (browser) {
|
||||
if (isShowAssetSelection) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
}
|
||||
}
|
||||
let isShowShareUserSelection = false;
|
||||
let isEditingTitle = false;
|
||||
let isCreatingSharedAlbum = false;
|
||||
let isShowShareInfoModal = false;
|
||||
let isShowAlbumOptions = false;
|
||||
let isShowThumbnailSelection = false;
|
||||
let isShowDeleteConfirmation = false;
|
||||
|
||||
let backUrl = '/albums';
|
||||
let currentAlbumName = '';
|
||||
let currentUser: UserResponseDto;
|
||||
let titleInput: HTMLInputElement;
|
||||
let contextMenuPosition = { x: 0, y: 0 };
|
||||
let backUrl = '/albums';
|
||||
let currentAlbumName = '';
|
||||
let currentUser: UserResponseDto;
|
||||
let titleInput: HTMLInputElement;
|
||||
let contextMenuPosition = { x: 0, y: 0 };
|
||||
|
||||
$: isPublicShared = sharedLink;
|
||||
$: isOwned = currentUser?.id == album.ownerId;
|
||||
$: isPublicShared = sharedLink;
|
||||
$: isOwned = currentUser?.id == album.ownerId;
|
||||
|
||||
dragAndDropFilesStore.subscribe((value) => {
|
||||
if (value.isDragging && value.files.length > 0) {
|
||||
fileUploadHandler(value.files, album.id, sharedLink?.key);
|
||||
dragAndDropFilesStore.set({ isDragging: false, files: [] });
|
||||
}
|
||||
});
|
||||
dragAndDropFilesStore.subscribe((value) => {
|
||||
if (value.isDragging && value.files.length > 0) {
|
||||
fileUploadHandler(value.files, album.id, sharedLink?.key);
|
||||
dragAndDropFilesStore.set({ isDragging: false, files: [] });
|
||||
}
|
||||
});
|
||||
|
||||
let multiSelectAsset: Set<AssetResponseDto> = new Set();
|
||||
$: isMultiSelectionMode = multiSelectAsset.size > 0;
|
||||
let multiSelectAsset: Set<AssetResponseDto> = new Set();
|
||||
$: isMultiSelectionMode = multiSelectAsset.size > 0;
|
||||
|
||||
afterNavigate(({ from }) => {
|
||||
backUrl = from?.url.pathname ?? '/albums';
|
||||
afterNavigate(({ from }) => {
|
||||
backUrl = from?.url.pathname ?? '/albums';
|
||||
|
||||
if (from?.url.pathname === '/sharing' && album.sharedUsers.length === 0) {
|
||||
isCreatingSharedAlbum = true;
|
||||
}
|
||||
if (from?.url.pathname === '/sharing' && album.sharedUsers.length === 0) {
|
||||
isCreatingSharedAlbum = true;
|
||||
}
|
||||
|
||||
if (from?.route.id === '/(user)/search') {
|
||||
backUrl = from.url.href;
|
||||
}
|
||||
});
|
||||
if (from?.route.id === '/(user)/search') {
|
||||
backUrl = from.url.href;
|
||||
}
|
||||
});
|
||||
|
||||
const albumDateFormat: Intl.DateTimeFormatOptions = {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
};
|
||||
const albumDateFormat: Intl.DateTimeFormatOptions = {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
};
|
||||
|
||||
const getDateRange = () => {
|
||||
const startDate = new Date(album.assets[0].fileCreatedAt);
|
||||
const endDate = new Date(album.assets[album.assetCount - 1].fileCreatedAt);
|
||||
const getDateRange = () => {
|
||||
const startDate = new Date(album.assets[0].fileCreatedAt);
|
||||
const endDate = new Date(album.assets[album.assetCount - 1].fileCreatedAt);
|
||||
|
||||
const startDateString = startDate.toLocaleDateString($locale, albumDateFormat);
|
||||
const endDateString = endDate.toLocaleDateString($locale, albumDateFormat);
|
||||
const startDateString = startDate.toLocaleDateString($locale, albumDateFormat);
|
||||
const endDateString = endDate.toLocaleDateString($locale, albumDateFormat);
|
||||
|
||||
// If the start and end date are the same, only show one date
|
||||
return startDateString === endDateString
|
||||
? startDateString
|
||||
: `${startDateString} - ${endDateString}`;
|
||||
};
|
||||
// If the start and end date are the same, only show one date
|
||||
return startDateString === endDateString ? startDateString : `${startDateString} - ${endDateString}`;
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
currentAlbumName = album.albumName;
|
||||
onMount(async () => {
|
||||
currentAlbumName = album.albumName;
|
||||
|
||||
try {
|
||||
const { data } = await api.userApi.getMyUserInfo();
|
||||
currentUser = data;
|
||||
} catch (e) {
|
||||
console.log('Error [getMyUserInfo - album-viewer] ', e);
|
||||
}
|
||||
});
|
||||
try {
|
||||
const { data } = await api.userApi.getMyUserInfo();
|
||||
currentUser = data;
|
||||
} catch (e) {
|
||||
console.log('Error [getMyUserInfo - album-viewer] ', e);
|
||||
}
|
||||
});
|
||||
|
||||
// Update Album Name
|
||||
$: {
|
||||
if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {
|
||||
api.albumApi
|
||||
.updateAlbumInfo({
|
||||
id: album.id,
|
||||
updateAlbumDto: {
|
||||
albumName: album.albumName
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
currentAlbumName = album.albumName;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error('Error [updateAlbumInfo] ', e);
|
||||
notificationController.show({
|
||||
type: NotificationType.Error,
|
||||
message: "Error updating album's name, check console for more details"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
// Update Album Name
|
||||
$: {
|
||||
if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {
|
||||
api.albumApi
|
||||
.updateAlbumInfo({
|
||||
id: album.id,
|
||||
updateAlbumDto: {
|
||||
albumName: album.albumName,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
currentAlbumName = album.albumName;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error('Error [updateAlbumInfo] ', e);
|
||||
notificationController.show({
|
||||
type: NotificationType.Error,
|
||||
message: "Error updating album's name, check console for more details",
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const createAlbumHandler = async (event: CustomEvent) => {
|
||||
const { assets }: { assets: AssetResponseDto[] } = event.detail;
|
||||
try {
|
||||
const { data } = await api.albumApi.addAssetsToAlbum({
|
||||
id: album.id,
|
||||
addAssetsDto: {
|
||||
assetIds: assets.map((a) => a.id)
|
||||
},
|
||||
key: sharedLink?.key
|
||||
});
|
||||
const createAlbumHandler = async (event: CustomEvent) => {
|
||||
const { assets }: { assets: AssetResponseDto[] } = event.detail;
|
||||
try {
|
||||
const { data } = await api.albumApi.addAssetsToAlbum({
|
||||
id: album.id,
|
||||
addAssetsDto: {
|
||||
assetIds: assets.map((a) => a.id),
|
||||
},
|
||||
key: sharedLink?.key,
|
||||
});
|
||||
|
||||
if (data.album) {
|
||||
album = data.album;
|
||||
}
|
||||
isShowAssetSelection = false;
|
||||
} catch (e) {
|
||||
console.error('Error [createAlbumHandler] ', e);
|
||||
notificationController.show({
|
||||
type: NotificationType.Error,
|
||||
message: 'Error creating album, check console for more details'
|
||||
});
|
||||
}
|
||||
};
|
||||
if (data.album) {
|
||||
album = data.album;
|
||||
}
|
||||
isShowAssetSelection = false;
|
||||
} catch (e) {
|
||||
console.error('Error [createAlbumHandler] ', e);
|
||||
notificationController.show({
|
||||
type: NotificationType.Error,
|
||||
message: 'Error creating album, check console for more details',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const addUserHandler = async (event: CustomEvent) => {
|
||||
const { selectedUsers }: { selectedUsers: UserResponseDto[] } = event.detail;
|
||||
const addUserHandler = async (event: CustomEvent) => {
|
||||
const { selectedUsers }: { selectedUsers: UserResponseDto[] } = event.detail;
|
||||
|
||||
try {
|
||||
const { data } = await api.albumApi.addUsersToAlbum({
|
||||
id: album.id,
|
||||
addUsersDto: {
|
||||
sharedUserIds: Array.from(selectedUsers).map((u) => u.id)
|
||||
}
|
||||
});
|
||||
try {
|
||||
const { data } = await api.albumApi.addUsersToAlbum({
|
||||
id: album.id,
|
||||
addUsersDto: {
|
||||
sharedUserIds: Array.from(selectedUsers).map((u) => u.id),
|
||||
},
|
||||
});
|
||||
|
||||
album = data;
|
||||
album = data;
|
||||
|
||||
isShowShareUserSelection = false;
|
||||
} catch (e) {
|
||||
console.error('Error [addUserHandler] ', e);
|
||||
notificationController.show({
|
||||
type: NotificationType.Error,
|
||||
message: 'Error adding users to album, check console for more details'
|
||||
});
|
||||
}
|
||||
};
|
||||
isShowShareUserSelection = false;
|
||||
} catch (e) {
|
||||
console.error('Error [addUserHandler] ', e);
|
||||
notificationController.show({
|
||||
type: NotificationType.Error,
|
||||
message: 'Error adding users to album, check console for more details',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const sharedUserDeletedHandler = async (event: CustomEvent) => {
|
||||
const { userId }: { userId: string } = event.detail;
|
||||
const sharedUserDeletedHandler = async (event: CustomEvent) => {
|
||||
const { userId }: { userId: string } = event.detail;
|
||||
|
||||
if (userId == 'me') {
|
||||
isShowShareInfoModal = false;
|
||||
goto(backUrl);
|
||||
return;
|
||||
}
|
||||
if (userId == 'me') {
|
||||
isShowShareInfoModal = false;
|
||||
goto(backUrl);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data } = await api.albumApi.getAlbumInfo({ id: album.id });
|
||||
try {
|
||||
const { data } = await api.albumApi.getAlbumInfo({ id: album.id });
|
||||
|
||||
album = data;
|
||||
isShowShareInfoModal = data.sharedUsers.length >= 1;
|
||||
} catch (e) {
|
||||
handleError(e, 'Error deleting share users');
|
||||
}
|
||||
};
|
||||
album = data;
|
||||
isShowShareInfoModal = data.sharedUsers.length >= 1;
|
||||
} catch (e) {
|
||||
handleError(e, 'Error deleting share users');
|
||||
}
|
||||
};
|
||||
|
||||
const removeAlbum = async () => {
|
||||
try {
|
||||
await api.albumApi.deleteAlbum({ id: album.id });
|
||||
goto(backUrl);
|
||||
} catch (e) {
|
||||
console.error('Error [userDeleteMenu] ', e);
|
||||
notificationController.show({
|
||||
type: NotificationType.Error,
|
||||
message: 'Error deleting album, check console for more details'
|
||||
});
|
||||
} finally {
|
||||
isShowDeleteConfirmation = false;
|
||||
}
|
||||
};
|
||||
const removeAlbum = async () => {
|
||||
try {
|
||||
await api.albumApi.deleteAlbum({ id: album.id });
|
||||
goto(backUrl);
|
||||
} catch (e) {
|
||||
console.error('Error [userDeleteMenu] ', e);
|
||||
notificationController.show({
|
||||
type: NotificationType.Error,
|
||||
message: 'Error deleting album, check console for more details',
|
||||
});
|
||||
} finally {
|
||||
isShowDeleteConfirmation = false;
|
||||
}
|
||||
};
|
||||
|
||||
const downloadAlbum = async () => {
|
||||
await downloadArchive(
|
||||
`${album.albumName}.zip`,
|
||||
{ albumId: album.id },
|
||||
undefined,
|
||||
sharedLink?.key
|
||||
);
|
||||
};
|
||||
const downloadAlbum = async () => {
|
||||
await downloadArchive(`${album.albumName}.zip`, { albumId: album.id }, undefined, sharedLink?.key);
|
||||
};
|
||||
|
||||
const showAlbumOptionsMenu = ({ x, y }: MouseEvent) => {
|
||||
contextMenuPosition = { x, y };
|
||||
isShowAlbumOptions = !isShowAlbumOptions;
|
||||
};
|
||||
const showAlbumOptionsMenu = ({ x, y }: MouseEvent) => {
|
||||
contextMenuPosition = { x, y };
|
||||
isShowAlbumOptions = !isShowAlbumOptions;
|
||||
};
|
||||
|
||||
const setAlbumThumbnailHandler = (event: CustomEvent) => {
|
||||
const { asset }: { asset: AssetResponseDto } = event.detail;
|
||||
try {
|
||||
api.albumApi.updateAlbumInfo({
|
||||
id: album.id,
|
||||
updateAlbumDto: {
|
||||
albumThumbnailAssetId: asset.id
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Error [setAlbumThumbnailHandler] ', e);
|
||||
notificationController.show({
|
||||
type: NotificationType.Error,
|
||||
message: 'Error setting album thumbnail, check console for more details'
|
||||
});
|
||||
}
|
||||
const setAlbumThumbnailHandler = (event: CustomEvent) => {
|
||||
const { asset }: { asset: AssetResponseDto } = event.detail;
|
||||
try {
|
||||
api.albumApi.updateAlbumInfo({
|
||||
id: album.id,
|
||||
updateAlbumDto: {
|
||||
albumThumbnailAssetId: asset.id,
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Error [setAlbumThumbnailHandler] ', e);
|
||||
notificationController.show({
|
||||
type: NotificationType.Error,
|
||||
message: 'Error setting album thumbnail, check console for more details',
|
||||
});
|
||||
}
|
||||
|
||||
isShowThumbnailSelection = false;
|
||||
};
|
||||
isShowThumbnailSelection = false;
|
||||
};
|
||||
|
||||
const onSharedLinkClickHandler = () => {
|
||||
isShowShareUserSelection = false;
|
||||
isShowShareLinkModal = true;
|
||||
};
|
||||
const onSharedLinkClickHandler = () => {
|
||||
isShowShareUserSelection = false;
|
||||
isShowShareLinkModal = true;
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
multiSelectAsset = new Set(album.assets);
|
||||
};
|
||||
const handleSelectAll = () => {
|
||||
multiSelectAsset = new Set(album.assets);
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="bg-immich-bg dark:bg-immich-dark-bg" class:hidden={isShowThumbnailSelection}>
|
||||
<!-- Multiselection mode app bar -->
|
||||
{#if isMultiSelectionMode}
|
||||
<AssetSelectControlBar
|
||||
assets={multiSelectAsset}
|
||||
clearSelect={() => (multiSelectAsset = new Set())}
|
||||
>
|
||||
<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
|
||||
{#if sharedLink?.allowDownload || !isPublicShared}
|
||||
<DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink?.key} />
|
||||
{/if}
|
||||
{#if isOwned}
|
||||
<RemoveFromAlbum bind:album />
|
||||
{/if}
|
||||
</AssetSelectControlBar>
|
||||
{/if}
|
||||
<!-- Multiselection mode app bar -->
|
||||
{#if isMultiSelectionMode}
|
||||
<AssetSelectControlBar assets={multiSelectAsset} clearSelect={() => (multiSelectAsset = new Set())}>
|
||||
<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
|
||||
{#if sharedLink?.allowDownload || !isPublicShared}
|
||||
<DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink?.key} />
|
||||
{/if}
|
||||
{#if isOwned}
|
||||
<RemoveFromAlbum bind:album />
|
||||
{/if}
|
||||
</AssetSelectControlBar>
|
||||
{/if}
|
||||
|
||||
<!-- Default app bar -->
|
||||
{#if !isMultiSelectionMode}
|
||||
<ControlAppBar
|
||||
on:close-button-click={() => goto(backUrl)}
|
||||
backIcon={ArrowLeft}
|
||||
showBackButton={(!isPublicShared && isOwned) ||
|
||||
(!isPublicShared && !isOwned) ||
|
||||
(isPublicShared && isOwned)}
|
||||
>
|
||||
<svelte:fragment slot="leading">
|
||||
{#if isPublicShared && !isOwned}
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
|
||||
href="https://immich.app"
|
||||
>
|
||||
<ImmichLogo height={30} width={30} />
|
||||
<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">
|
||||
IMMICH
|
||||
</h1>
|
||||
</a>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
<!-- Default app bar -->
|
||||
{#if !isMultiSelectionMode}
|
||||
<ControlAppBar
|
||||
on:close-button-click={() => goto(backUrl)}
|
||||
backIcon={ArrowLeft}
|
||||
showBackButton={(!isPublicShared && isOwned) || (!isPublicShared && !isOwned) || (isPublicShared && isOwned)}
|
||||
>
|
||||
<svelte:fragment slot="leading">
|
||||
{#if isPublicShared && !isOwned}
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
|
||||
href="https://immich.app"
|
||||
>
|
||||
<ImmichLogo height={30} width={30} />
|
||||
<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">IMMICH</h1>
|
||||
</a>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="trailing">
|
||||
{#if !isCreatingSharedAlbum}
|
||||
{#if !sharedLink}
|
||||
<CircleIconButton
|
||||
title="Add Photos"
|
||||
on:click={() => (isShowAssetSelection = true)}
|
||||
logo={FileImagePlusOutline}
|
||||
/>
|
||||
{:else if sharedLink?.allowUpload}
|
||||
<CircleIconButton
|
||||
title="Add Photos"
|
||||
on:click={() => openFileUploadDialog(album.id, sharedLink?.key)}
|
||||
logo={FileImagePlusOutline}
|
||||
/>
|
||||
{/if}
|
||||
<svelte:fragment slot="trailing">
|
||||
{#if !isCreatingSharedAlbum}
|
||||
{#if !sharedLink}
|
||||
<CircleIconButton
|
||||
title="Add Photos"
|
||||
on:click={() => (isShowAssetSelection = true)}
|
||||
logo={FileImagePlusOutline}
|
||||
/>
|
||||
{:else if sharedLink?.allowUpload}
|
||||
<CircleIconButton
|
||||
title="Add Photos"
|
||||
on:click={() => openFileUploadDialog(album.id, sharedLink?.key)}
|
||||
logo={FileImagePlusOutline}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if isOwned}
|
||||
<CircleIconButton
|
||||
title="Share"
|
||||
on:click={() => (isShowShareUserSelection = true)}
|
||||
logo={ShareVariantOutline}
|
||||
/>
|
||||
<CircleIconButton
|
||||
title="Remove album"
|
||||
on:click={() => (isShowDeleteConfirmation = true)}
|
||||
logo={DeleteOutline}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if isOwned}
|
||||
<CircleIconButton
|
||||
title="Share"
|
||||
on:click={() => (isShowShareUserSelection = true)}
|
||||
logo={ShareVariantOutline}
|
||||
/>
|
||||
<CircleIconButton
|
||||
title="Remove album"
|
||||
on:click={() => (isShowDeleteConfirmation = true)}
|
||||
logo={DeleteOutline}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if album.assetCount > 0 && !isCreatingSharedAlbum}
|
||||
{#if !isPublicShared || (isPublicShared && sharedLink?.allowDownload)}
|
||||
<CircleIconButton
|
||||
title="Download"
|
||||
on:click={() => downloadAlbum()}
|
||||
logo={FolderDownloadOutline}
|
||||
/>
|
||||
{/if}
|
||||
{#if album.assetCount > 0 && !isCreatingSharedAlbum}
|
||||
{#if !isPublicShared || (isPublicShared && sharedLink?.allowDownload)}
|
||||
<CircleIconButton title="Download" on:click={() => downloadAlbum()} logo={FolderDownloadOutline} />
|
||||
{/if}
|
||||
|
||||
{#if !isPublicShared && isOwned}
|
||||
<CircleIconButton
|
||||
title="Album options"
|
||||
on:click={showAlbumOptionsMenu}
|
||||
logo={DotsVertical}
|
||||
>
|
||||
{#if isShowAlbumOptions}
|
||||
<ContextMenu
|
||||
{...contextMenuPosition}
|
||||
on:outclick={() => (isShowAlbumOptions = false)}
|
||||
>
|
||||
<MenuOption
|
||||
on:click={() => {
|
||||
isShowThumbnailSelection = true;
|
||||
isShowAlbumOptions = false;
|
||||
}}
|
||||
text="Set album cover"
|
||||
/>
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
</CircleIconButton>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !isPublicShared && isOwned}
|
||||
<CircleIconButton title="Album options" on:click={showAlbumOptionsMenu} logo={DotsVertical}>
|
||||
{#if isShowAlbumOptions}
|
||||
<ContextMenu {...contextMenuPosition} on:outclick={() => (isShowAlbumOptions = false)}>
|
||||
<MenuOption
|
||||
on:click={() => {
|
||||
isShowThumbnailSelection = true;
|
||||
isShowAlbumOptions = false;
|
||||
}}
|
||||
text="Set album cover"
|
||||
/>
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
</CircleIconButton>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if isPublicShared}
|
||||
<ThemeButton />
|
||||
{/if}
|
||||
{#if isPublicShared}
|
||||
<ThemeButton />
|
||||
{/if}
|
||||
|
||||
{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
|
||||
<Button
|
||||
size="sm"
|
||||
rounded="lg"
|
||||
disabled={album.assetCount == 0}
|
||||
on:click={() => (isShowShareUserSelection = true)}
|
||||
>
|
||||
Share
|
||||
</Button>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
{/if}
|
||||
{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
|
||||
<Button
|
||||
size="sm"
|
||||
rounded="lg"
|
||||
disabled={album.assetCount == 0}
|
||||
on:click={() => (isShowShareUserSelection = true)}
|
||||
>
|
||||
Share
|
||||
</Button>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
{/if}
|
||||
|
||||
<section class="flex flex-col my-[160px] px-6 sm:px-12 md:px-24 lg:px-40">
|
||||
<input
|
||||
on:keydown={(e) => {
|
||||
if (e.key == 'Enter') {
|
||||
isEditingTitle = false;
|
||||
titleInput.blur();
|
||||
}
|
||||
}}
|
||||
on:focus={() => (isEditingTitle = true)}
|
||||
on:blur={() => (isEditingTitle = false)}
|
||||
class={`transition-all text-6xl text-immich-primary dark:text-immich-dark-primary w-[99%] border-b-2 border-transparent outline-none ${
|
||||
isOwned ? 'hover:border-gray-400' : 'hover:border-transparent'
|
||||
} focus:outline-none focus:border-b-2 focus:border-immich-primary dark:focus:border-immich-dark-primary bg-immich-bg dark:bg-immich-dark-bg dark:focus:bg-immich-dark-gray`}
|
||||
type="text"
|
||||
bind:value={album.albumName}
|
||||
disabled={!isOwned}
|
||||
bind:this={titleInput}
|
||||
/>
|
||||
<section class="flex flex-col my-[160px] px-6 sm:px-12 md:px-24 lg:px-40">
|
||||
<input
|
||||
on:keydown={(e) => {
|
||||
if (e.key == 'Enter') {
|
||||
isEditingTitle = false;
|
||||
titleInput.blur();
|
||||
}
|
||||
}}
|
||||
on:focus={() => (isEditingTitle = true)}
|
||||
on:blur={() => (isEditingTitle = false)}
|
||||
class={`transition-all text-6xl text-immich-primary dark:text-immich-dark-primary w-[99%] border-b-2 border-transparent outline-none ${
|
||||
isOwned ? 'hover:border-gray-400' : 'hover:border-transparent'
|
||||
} focus:outline-none focus:border-b-2 focus:border-immich-primary dark:focus:border-immich-dark-primary bg-immich-bg dark:bg-immich-dark-bg dark:focus:bg-immich-dark-gray`}
|
||||
type="text"
|
||||
bind:value={album.albumName}
|
||||
disabled={!isOwned}
|
||||
bind:this={titleInput}
|
||||
/>
|
||||
|
||||
{#if album.assetCount > 0}
|
||||
<span class="flex gap-2 my-4 text-sm text-gray-500 font-medium" data-testid="album-details">
|
||||
<p class="">{getDateRange()}</p>
|
||||
<p>·</p>
|
||||
<p>{album.assetCount} items</p>
|
||||
</span>
|
||||
{/if}
|
||||
{#if album.shared}
|
||||
<div class="flex my-6 gap-x-1">
|
||||
{#each album.sharedUsers as user (user.id)}
|
||||
<button on:click={() => (isShowShareInfoModal = true)}>
|
||||
<UserAvatar {user} size="md" autoColor />
|
||||
</button>
|
||||
{/each}
|
||||
{#if album.assetCount > 0}
|
||||
<span class="flex gap-2 my-4 text-sm text-gray-500 font-medium" data-testid="album-details">
|
||||
<p class="">{getDateRange()}</p>
|
||||
<p>·</p>
|
||||
<p>{album.assetCount} items</p>
|
||||
</span>
|
||||
{/if}
|
||||
{#if album.shared}
|
||||
<div class="flex my-6 gap-x-1">
|
||||
{#each album.sharedUsers as user (user.id)}
|
||||
<button on:click={() => (isShowShareInfoModal = true)}>
|
||||
<UserAvatar {user} size="md" autoColor />
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
<button
|
||||
style:display={isOwned ? 'block' : 'none'}
|
||||
on:click={() => (isShowShareUserSelection = true)}
|
||||
title="Add more users"
|
||||
class="h-12 w-12 border bg-white transition-colors hover:bg-gray-300 text-3xl flex place-items-center place-content-center rounded-full"
|
||||
>+</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
<button
|
||||
style:display={isOwned ? 'block' : 'none'}
|
||||
on:click={() => (isShowShareUserSelection = true)}
|
||||
title="Add more users"
|
||||
class="h-12 w-12 border bg-white transition-colors hover:bg-gray-300 text-3xl flex place-items-center place-content-center rounded-full"
|
||||
>+</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if album.assetCount > 0}
|
||||
<GalleryViewer
|
||||
assets={album.assets}
|
||||
{sharedLink}
|
||||
bind:selectedAssets={multiSelectAsset}
|
||||
viewFrom="album-page"
|
||||
/>
|
||||
{:else}
|
||||
<!-- Album is empty - Show asset selectection buttons -->
|
||||
<section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
|
||||
<div class="w-[300px]">
|
||||
<p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
|
||||
<button
|
||||
on:click={() => (isShowAssetSelection = true)}
|
||||
class="w-full py-8 border bg-immich-bg dark:bg-immich-dark-gray text-immich-fg dark:text-immich-dark-fg dark:hover:text-immich-dark-primary rounded-md mt-5 flex place-items-center gap-6 px-8 transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none"
|
||||
>
|
||||
<span class="text-text-immich-primary dark:text-immich-dark-primary"
|
||||
><Plus size="24" />
|
||||
</span>
|
||||
<span class="text-lg">Select photos</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</section>
|
||||
{#if album.assetCount > 0}
|
||||
<GalleryViewer assets={album.assets} {sharedLink} bind:selectedAssets={multiSelectAsset} viewFrom="album-page" />
|
||||
{:else}
|
||||
<!-- Album is empty - Show asset selectection buttons -->
|
||||
<section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
|
||||
<div class="w-[300px]">
|
||||
<p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
|
||||
<button
|
||||
on:click={() => (isShowAssetSelection = true)}
|
||||
class="w-full py-8 border bg-immich-bg dark:bg-immich-dark-gray text-immich-fg dark:text-immich-dark-fg dark:hover:text-immich-dark-primary rounded-md mt-5 flex place-items-center gap-6 px-8 transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none"
|
||||
>
|
||||
<span class="text-text-immich-primary dark:text-immich-dark-primary"><Plus size="24" /> </span>
|
||||
<span class="text-lg">Select photos</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{#if isShowAssetSelection}
|
||||
<AssetSelection
|
||||
albumId={album.id}
|
||||
assetsInAlbum={album.assets}
|
||||
on:go-back={() => (isShowAssetSelection = false)}
|
||||
on:create-album={createAlbumHandler}
|
||||
/>
|
||||
<AssetSelection
|
||||
albumId={album.id}
|
||||
assetsInAlbum={album.assets}
|
||||
on:go-back={() => (isShowAssetSelection = false)}
|
||||
on:create-album={createAlbumHandler}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if isShowShareUserSelection}
|
||||
<UserSelectionModal
|
||||
{album}
|
||||
on:close={() => (isShowShareUserSelection = false)}
|
||||
on:add-user={addUserHandler}
|
||||
on:sharedlinkclick={onSharedLinkClickHandler}
|
||||
sharedUsersInAlbum={new Set(album.sharedUsers)}
|
||||
/>
|
||||
<UserSelectionModal
|
||||
{album}
|
||||
on:close={() => (isShowShareUserSelection = false)}
|
||||
on:add-user={addUserHandler}
|
||||
on:sharedlinkclick={onSharedLinkClickHandler}
|
||||
sharedUsersInAlbum={new Set(album.sharedUsers)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if isShowShareLinkModal}
|
||||
<CreateSharedLinkModal
|
||||
on:close={() => (isShowShareLinkModal = false)}
|
||||
shareType={SharedLinkType.Album}
|
||||
{album}
|
||||
/>
|
||||
<CreateSharedLinkModal on:close={() => (isShowShareLinkModal = false)} shareType={SharedLinkType.Album} {album} />
|
||||
{/if}
|
||||
{#if isShowShareInfoModal}
|
||||
<ShareInfoModal
|
||||
on:close={() => (isShowShareInfoModal = false)}
|
||||
{album}
|
||||
on:user-deleted={sharedUserDeletedHandler}
|
||||
/>
|
||||
<ShareInfoModal on:close={() => (isShowShareInfoModal = false)} {album} on:user-deleted={sharedUserDeletedHandler} />
|
||||
{/if}
|
||||
|
||||
{#if isShowThumbnailSelection}
|
||||
<ThumbnailSelection
|
||||
{album}
|
||||
on:close={() => (isShowThumbnailSelection = false)}
|
||||
on:thumbnail-selected={setAlbumThumbnailHandler}
|
||||
/>
|
||||
<ThumbnailSelection
|
||||
{album}
|
||||
on:close={() => (isShowThumbnailSelection = false)}
|
||||
on:thumbnail-selected={setAlbumThumbnailHandler}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if isShowDeleteConfirmation}
|
||||
<ConfirmDialogue
|
||||
title="Delete Album"
|
||||
confirmText="Delete"
|
||||
on:confirm={removeAlbum}
|
||||
on:cancel={() => (isShowDeleteConfirmation = false)}
|
||||
>
|
||||
<svelte:fragment slot="prompt">
|
||||
<p>Are you sure you want to delete the album <b>{album.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={removeAlbum}
|
||||
on:cancel={() => (isShowDeleteConfirmation = false)}
|
||||
>
|
||||
<svelte:fragment slot="prompt">
|
||||
<p>Are you sure you want to delete the album <b>{album.albumName}</b>?</p>
|
||||
<p>If this album is shared, other users will not be able to access it anymore.</p>
|
||||
</svelte:fragment>
|
||||
</ConfirmDialogue>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,80 +1,69 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
assetInteractionStore,
|
||||
assetsInAlbumStoreState,
|
||||
selectedAssets
|
||||
} from '$lib/stores/asset-interaction.store';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { openFileUploadDialog } from '$lib/utils/file-uploader';
|
||||
import type { AssetResponseDto } from '@api';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import AssetGrid from '../photos-page/asset-grid.svelte';
|
||||
import ControlAppBar from '../shared-components/control-app-bar.svelte';
|
||||
import { assetInteractionStore, assetsInAlbumStoreState, selectedAssets } from '$lib/stores/asset-interaction.store';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { openFileUploadDialog } from '$lib/utils/file-uploader';
|
||||
import type { AssetResponseDto } from '@api';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import AssetGrid from '../photos-page/asset-grid.svelte';
|
||||
import ControlAppBar from '../shared-components/control-app-bar.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let albumId: string;
|
||||
export let assetsInAlbum: AssetResponseDto[];
|
||||
export let albumId: string;
|
||||
export let assetsInAlbum: AssetResponseDto[];
|
||||
|
||||
onMount(() => {
|
||||
$assetsInAlbumStoreState = assetsInAlbum;
|
||||
});
|
||||
onMount(() => {
|
||||
$assetsInAlbumStoreState = assetsInAlbum;
|
||||
});
|
||||
|
||||
const addSelectedAssets = async () => {
|
||||
dispatch('create-album', {
|
||||
assets: Array.from($selectedAssets)
|
||||
});
|
||||
const addSelectedAssets = async () => {
|
||||
dispatch('create-album', {
|
||||
assets: Array.from($selectedAssets),
|
||||
});
|
||||
|
||||
assetInteractionStore.clearMultiselect();
|
||||
};
|
||||
const handleSelectFromComputerClicked = async () => {
|
||||
await openFileUploadDialog(albumId, '');
|
||||
assetInteractionStore.clearMultiselect();
|
||||
dispatch('go-back');
|
||||
};
|
||||
assetInteractionStore.clearMultiselect();
|
||||
};
|
||||
const handleSelectFromComputerClicked = async () => {
|
||||
await openFileUploadDialog(albumId, '');
|
||||
assetInteractionStore.clearMultiselect();
|
||||
dispatch('go-back');
|
||||
};
|
||||
</script>
|
||||
|
||||
<section
|
||||
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
|
||||
class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
|
||||
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
|
||||
class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
|
||||
>
|
||||
<ControlAppBar
|
||||
on:close-button-click={() => {
|
||||
assetInteractionStore.clearMultiselect();
|
||||
dispatch('go-back');
|
||||
}}
|
||||
>
|
||||
<svelte:fragment slot="leading">
|
||||
{#if $selectedAssets.size == 0}
|
||||
<p class="text-lg dark:text-immich-dark-fg">Add to album</p>
|
||||
{:else}
|
||||
<p class="text-lg dark:text-immich-dark-fg">
|
||||
{$selectedAssets.size.toLocaleString($locale)} selected
|
||||
</p>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
<ControlAppBar
|
||||
on:close-button-click={() => {
|
||||
assetInteractionStore.clearMultiselect();
|
||||
dispatch('go-back');
|
||||
}}
|
||||
>
|
||||
<svelte:fragment slot="leading">
|
||||
{#if $selectedAssets.size == 0}
|
||||
<p class="text-lg dark:text-immich-dark-fg">Add to album</p>
|
||||
{:else}
|
||||
<p class="text-lg dark:text-immich-dark-fg">
|
||||
{$selectedAssets.size.toLocaleString($locale)} selected
|
||||
</p>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="trailing">
|
||||
<button
|
||||
on:click={handleSelectFromComputerClicked}
|
||||
class="text-immich-primary dark:text-immich-dark-primary text-sm hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/25 transition-all px-6 py-2 rounded-lg font-medium"
|
||||
>
|
||||
Select from computer
|
||||
</button>
|
||||
<Button
|
||||
size="sm"
|
||||
rounded="lg"
|
||||
disabled={$selectedAssets.size === 0}
|
||||
on:click={addSelectedAssets}
|
||||
>
|
||||
Done
|
||||
</Button>
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
<section class="pt-[100px] pl-[70px] grid h-screen bg-immich-bg dark:bg-immich-dark-bg">
|
||||
<AssetGrid isAlbumSelectionMode={true} />
|
||||
</section>
|
||||
<svelte:fragment slot="trailing">
|
||||
<button
|
||||
on:click={handleSelectFromComputerClicked}
|
||||
class="text-immich-primary dark:text-immich-dark-primary text-sm hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/25 transition-all px-6 py-2 rounded-lg font-medium"
|
||||
>
|
||||
Select from computer
|
||||
</button>
|
||||
<Button size="sm" rounded="lg" disabled={$selectedAssets.size === 0} on:click={addSelectedAssets}>Done</Button>
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
<section class="pt-[100px] pl-[70px] grid h-screen bg-immich-bg dark:bg-immich-dark-bg">
|
||||
<AssetGrid isAlbumSelectionMode={true} />
|
||||
</section>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,144 +1,140 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { AlbumResponseDto, api, UserResponseDto } from '@api';
|
||||
import BaseModal from '../shared-components/base-modal.svelte';
|
||||
import UserAvatar from '../shared-components/user-avatar.svelte';
|
||||
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
|
||||
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
|
||||
import {
|
||||
notificationController,
|
||||
NotificationType
|
||||
} from '../shared-components/notification/notification';
|
||||
import { handleError } from '../../utils/handle-error';
|
||||
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { AlbumResponseDto, api, UserResponseDto } from '@api';
|
||||
import BaseModal from '../shared-components/base-modal.svelte';
|
||||
import UserAvatar from '../shared-components/user-avatar.svelte';
|
||||
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
|
||||
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
|
||||
import { notificationController, NotificationType } from '../shared-components/notification/notification';
|
||||
import { handleError } from '../../utils/handle-error';
|
||||
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
|
||||
|
||||
export let album: AlbumResponseDto;
|
||||
export let album: AlbumResponseDto;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let currentUser: UserResponseDto;
|
||||
let position = { x: 0, y: 0 };
|
||||
let selectedMenuUser: UserResponseDto | null = null;
|
||||
let selectedRemoveUser: UserResponseDto | null = null;
|
||||
let currentUser: UserResponseDto;
|
||||
let position = { x: 0, y: 0 };
|
||||
let selectedMenuUser: UserResponseDto | null = null;
|
||||
let selectedRemoveUser: UserResponseDto | null = null;
|
||||
|
||||
$: isOwned = currentUser?.id == album.ownerId;
|
||||
$: isOwned = currentUser?.id == album.ownerId;
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const { data } = await api.userApi.getMyUserInfo();
|
||||
currentUser = data;
|
||||
} catch (e) {
|
||||
handleError(e, 'Unable to refresh user');
|
||||
}
|
||||
});
|
||||
onMount(async () => {
|
||||
try {
|
||||
const { data } = await api.userApi.getMyUserInfo();
|
||||
currentUser = data;
|
||||
} catch (e) {
|
||||
handleError(e, 'Unable to refresh user');
|
||||
}
|
||||
});
|
||||
|
||||
const showContextMenu = (user: UserResponseDto) => {
|
||||
const iconButton = document.getElementById('icon-' + user.id);
|
||||
const showContextMenu = (user: UserResponseDto) => {
|
||||
const iconButton = document.getElementById('icon-' + user.id);
|
||||
|
||||
if (iconButton) {
|
||||
position = {
|
||||
x: iconButton.getBoundingClientRect().left,
|
||||
y: iconButton.getBoundingClientRect().bottom
|
||||
};
|
||||
}
|
||||
if (iconButton) {
|
||||
position = {
|
||||
x: iconButton.getBoundingClientRect().left,
|
||||
y: iconButton.getBoundingClientRect().bottom,
|
||||
};
|
||||
}
|
||||
|
||||
selectedMenuUser = user;
|
||||
selectedRemoveUser = null;
|
||||
};
|
||||
selectedMenuUser = user;
|
||||
selectedRemoveUser = null;
|
||||
};
|
||||
|
||||
const handleMenuRemove = () => {
|
||||
selectedRemoveUser = selectedMenuUser;
|
||||
selectedMenuUser = null;
|
||||
};
|
||||
const handleMenuRemove = () => {
|
||||
selectedRemoveUser = selectedMenuUser;
|
||||
selectedMenuUser = null;
|
||||
};
|
||||
|
||||
const handleRemoveUser = async () => {
|
||||
if (!selectedRemoveUser) {
|
||||
return;
|
||||
}
|
||||
const handleRemoveUser = async () => {
|
||||
if (!selectedRemoveUser) {
|
||||
return;
|
||||
}
|
||||
|
||||
const userId = selectedRemoveUser.id === currentUser?.id ? 'me' : selectedRemoveUser.id;
|
||||
const userId = selectedRemoveUser.id === currentUser?.id ? 'me' : selectedRemoveUser.id;
|
||||
|
||||
try {
|
||||
await api.albumApi.removeUserFromAlbum({ id: album.id, userId });
|
||||
dispatch('user-deleted', { userId });
|
||||
const message =
|
||||
userId === 'me' ? `Left ${album.albumName}` : `Removed ${selectedRemoveUser.firstName}`;
|
||||
notificationController.show({ type: NotificationType.Info, message });
|
||||
} catch (e) {
|
||||
handleError(e, 'Unable to remove user');
|
||||
} finally {
|
||||
selectedRemoveUser = null;
|
||||
}
|
||||
};
|
||||
try {
|
||||
await api.albumApi.removeUserFromAlbum({ id: album.id, userId });
|
||||
dispatch('user-deleted', { userId });
|
||||
const message = userId === 'me' ? `Left ${album.albumName}` : `Removed ${selectedRemoveUser.firstName}`;
|
||||
notificationController.show({ type: NotificationType.Info, message });
|
||||
} catch (e) {
|
||||
handleError(e, 'Unable to remove user');
|
||||
} finally {
|
||||
selectedRemoveUser = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if !selectedRemoveUser}
|
||||
<BaseModal on:close={() => dispatch('close')}>
|
||||
<svelte:fragment slot="title">
|
||||
<span class="flex gap-2 place-items-center">
|
||||
<p class="font-medium text-immich-fg dark:text-immich-dark-fg">Options</p>
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
<BaseModal on:close={() => dispatch('close')}>
|
||||
<svelte:fragment slot="title">
|
||||
<span class="flex gap-2 place-items-center">
|
||||
<p class="font-medium text-immich-fg dark:text-immich-dark-fg">Options</p>
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
|
||||
<section class="max-h-[400px] overflow-y-auto immich-scrollbar pb-4">
|
||||
{#each album.sharedUsers as user}
|
||||
<div
|
||||
class="flex gap-4 p-5 place-items-center justify-between w-full transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
>
|
||||
<div class="flex gap-4 place-items-center">
|
||||
<UserAvatar {user} size="md" autoColor />
|
||||
<p class="font-medium text-sm">{user.firstName} {user.lastName}</p>
|
||||
</div>
|
||||
<section class="max-h-[400px] overflow-y-auto immich-scrollbar pb-4">
|
||||
{#each album.sharedUsers as user}
|
||||
<div
|
||||
class="flex gap-4 p-5 place-items-center justify-between w-full transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
>
|
||||
<div class="flex gap-4 place-items-center">
|
||||
<UserAvatar {user} size="md" autoColor />
|
||||
<p class="font-medium text-sm">{user.firstName} {user.lastName}</p>
|
||||
</div>
|
||||
|
||||
<div id={`icon-${user.id}`} class="flex place-items-center">
|
||||
{#if isOwned}
|
||||
<div>
|
||||
<CircleIconButton
|
||||
on:click={() => showContextMenu(user)}
|
||||
logo={DotsVertical}
|
||||
backgroundColor="transparent"
|
||||
hoverColor="#e2e7e9"
|
||||
size="20"
|
||||
/>
|
||||
<div id={`icon-${user.id}`} class="flex place-items-center">
|
||||
{#if isOwned}
|
||||
<div>
|
||||
<CircleIconButton
|
||||
on:click={() => showContextMenu(user)}
|
||||
logo={DotsVertical}
|
||||
backgroundColor="transparent"
|
||||
hoverColor="#e2e7e9"
|
||||
size="20"
|
||||
/>
|
||||
|
||||
{#if selectedMenuUser === user}
|
||||
<ContextMenu {...position} on:outclick={() => (selectedMenuUser = null)}>
|
||||
<MenuOption on:click={handleMenuRemove} text="Remove" />
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if user.id == currentUser?.id}
|
||||
<button
|
||||
on:click={() => (selectedRemoveUser = user)}
|
||||
class="text-sm text-immich-primary dark:text-immich-dark-primary font-medium transition-colors hover:text-immich-primary/75"
|
||||
>Leave</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
</BaseModal>
|
||||
{#if selectedMenuUser === user}
|
||||
<ContextMenu {...position} on:outclick={() => (selectedMenuUser = null)}>
|
||||
<MenuOption on:click={handleMenuRemove} text="Remove" />
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if user.id == currentUser?.id}
|
||||
<button
|
||||
on:click={() => (selectedRemoveUser = user)}
|
||||
class="text-sm text-immich-primary dark:text-immich-dark-primary font-medium transition-colors hover:text-immich-primary/75"
|
||||
>Leave</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
</BaseModal>
|
||||
{/if}
|
||||
|
||||
{#if selectedRemoveUser && selectedRemoveUser?.id === currentUser?.id}
|
||||
<ConfirmDialogue
|
||||
title="Leave Album?"
|
||||
prompt="Are you sure you want to leave {album.albumName}?"
|
||||
confirmText="Leave"
|
||||
on:confirm={handleRemoveUser}
|
||||
on:cancel={() => (selectedRemoveUser = null)}
|
||||
/>
|
||||
<ConfirmDialogue
|
||||
title="Leave Album?"
|
||||
prompt="Are you sure you want to leave {album.albumName}?"
|
||||
confirmText="Leave"
|
||||
on:confirm={handleRemoveUser}
|
||||
on:cancel={() => (selectedRemoveUser = null)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if selectedRemoveUser && selectedRemoveUser?.id !== currentUser?.id}
|
||||
<ConfirmDialogue
|
||||
title="Remove User?"
|
||||
prompt="Are you sure you want to remove {selectedRemoveUser.firstName} {selectedRemoveUser.lastName}"
|
||||
confirmText="Remove"
|
||||
on:confirm={handleRemoveUser}
|
||||
on:cancel={() => (selectedRemoveUser = null)}
|
||||
/>
|
||||
<ConfirmDialogue
|
||||
title="Remove User?"
|
||||
prompt="Are you sure you want to remove {selectedRemoveUser.firstName} {selectedRemoveUser.lastName}"
|
||||
confirmText="Remove"
|
||||
on:confirm={handleRemoveUser}
|
||||
on:cancel={() => (selectedRemoveUser = null)}
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,57 +1,53 @@
|
|||
<script lang="ts">
|
||||
import type { AlbumResponseDto, AssetResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import ControlAppBar from '../shared-components/control-app-bar.svelte';
|
||||
import type { AlbumResponseDto, AssetResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import ControlAppBar from '../shared-components/control-app-bar.svelte';
|
||||
|
||||
export let album: AlbumResponseDto;
|
||||
export let album: AlbumResponseDto;
|
||||
|
||||
let selectedThumbnail: AssetResponseDto | undefined;
|
||||
const dispatch = createEventDispatcher();
|
||||
let selectedThumbnail: AssetResponseDto | undefined;
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
$: isSelected = (id: string): boolean | undefined => {
|
||||
if (!selectedThumbnail && album.albumThumbnailAssetId == id) {
|
||||
return true;
|
||||
} else {
|
||||
return selectedThumbnail?.id == id;
|
||||
}
|
||||
};
|
||||
$: isSelected = (id: string): boolean | undefined => {
|
||||
if (!selectedThumbnail && album.albumThumbnailAssetId == id) {
|
||||
return true;
|
||||
} else {
|
||||
return selectedThumbnail?.id == id;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<section
|
||||
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
|
||||
class="absolute top-0 left-0 w-full h-full py-[160px] bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
|
||||
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
|
||||
class="absolute top-0 left-0 w-full h-full py-[160px] bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
|
||||
>
|
||||
<ControlAppBar on:close-button-click={() => dispatch('close')}>
|
||||
<svelte:fragment slot="leading">
|
||||
<p class="text-lg">Select album cover</p>
|
||||
</svelte:fragment>
|
||||
<ControlAppBar on:close-button-click={() => dispatch('close')}>
|
||||
<svelte:fragment slot="leading">
|
||||
<p class="text-lg">Select album cover</p>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="trailing">
|
||||
<Button
|
||||
size="sm"
|
||||
rounded="lg"
|
||||
disabled={selectedThumbnail == undefined}
|
||||
on:click={() => dispatch('thumbnail-selected', { asset: selectedThumbnail })}
|
||||
>
|
||||
Done
|
||||
</Button>
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
<svelte:fragment slot="trailing">
|
||||
<Button
|
||||
size="sm"
|
||||
rounded="lg"
|
||||
disabled={selectedThumbnail == undefined}
|
||||
on:click={() => dispatch('thumbnail-selected', { asset: selectedThumbnail })}
|
||||
>
|
||||
Done
|
||||
</Button>
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
|
||||
<section class="flex flex-wrap gap-14 px-20 overflow-y-auto">
|
||||
<!-- Image grid -->
|
||||
<div class="flex flex-wrap gap-[2px]">
|
||||
{#each album.assets as asset}
|
||||
<Thumbnail
|
||||
{asset}
|
||||
on:click={() => (selectedThumbnail = asset)}
|
||||
selected={isSelected(asset.id)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex flex-wrap gap-14 px-20 overflow-y-auto">
|
||||
<!-- Image grid -->
|
||||
<div class="flex flex-wrap gap-[2px]">
|
||||
{#each album.assets as asset}
|
||||
<Thumbnail {asset} on:click={() => (selectedThumbnail = asset)} selected={isSelected(asset.id)} />
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,149 +1,146 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { AlbumResponseDto, api, SharedLinkResponseDto, UserResponseDto } from '@api';
|
||||
import BaseModal from '../shared-components/base-modal.svelte';
|
||||
import UserAvatar from '../shared-components/user-avatar.svelte';
|
||||
import Link from 'svelte-material-icons/Link.svelte';
|
||||
import ShareCircle from 'svelte-material-icons/ShareCircle.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import ImmichLogo from '../shared-components/immich-logo.svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { AlbumResponseDto, api, SharedLinkResponseDto, UserResponseDto } from '@api';
|
||||
import BaseModal from '../shared-components/base-modal.svelte';
|
||||
import UserAvatar from '../shared-components/user-avatar.svelte';
|
||||
import Link from 'svelte-material-icons/Link.svelte';
|
||||
import ShareCircle from 'svelte-material-icons/ShareCircle.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import ImmichLogo from '../shared-components/immich-logo.svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
|
||||
export let album: AlbumResponseDto;
|
||||
export let sharedUsersInAlbum: Set<UserResponseDto>;
|
||||
let users: UserResponseDto[] = [];
|
||||
let selectedUsers: UserResponseDto[] = [];
|
||||
export let album: AlbumResponseDto;
|
||||
export let sharedUsersInAlbum: Set<UserResponseDto>;
|
||||
let users: UserResponseDto[] = [];
|
||||
let selectedUsers: UserResponseDto[] = [];
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
let sharedLinks: SharedLinkResponseDto[] = [];
|
||||
onMount(async () => {
|
||||
await getSharedLinks();
|
||||
const { data } = await api.userApi.getAllUsers({ isAll: false });
|
||||
const dispatch = createEventDispatcher();
|
||||
let sharedLinks: SharedLinkResponseDto[] = [];
|
||||
onMount(async () => {
|
||||
await getSharedLinks();
|
||||
const { data } = await api.userApi.getAllUsers({ isAll: false });
|
||||
|
||||
// remove invalid users
|
||||
users = data.filter((user) => !(user.deletedAt || user.id === album.ownerId));
|
||||
// remove invalid users
|
||||
users = data.filter((user) => !(user.deletedAt || user.id === album.ownerId));
|
||||
|
||||
// Remove the existed shared users from the album
|
||||
sharedUsersInAlbum.forEach((sharedUser) => {
|
||||
users = users.filter((user) => user.id !== sharedUser.id);
|
||||
});
|
||||
});
|
||||
// Remove the existed shared users from the album
|
||||
sharedUsersInAlbum.forEach((sharedUser) => {
|
||||
users = users.filter((user) => user.id !== sharedUser.id);
|
||||
});
|
||||
});
|
||||
|
||||
const getSharedLinks = async () => {
|
||||
const { data } = await api.sharedLinkApi.getAllSharedLinks();
|
||||
const getSharedLinks = async () => {
|
||||
const { data } = await api.sharedLinkApi.getAllSharedLinks();
|
||||
|
||||
sharedLinks = data.filter((link) => link.album?.id === album.id);
|
||||
};
|
||||
sharedLinks = data.filter((link) => link.album?.id === album.id);
|
||||
};
|
||||
|
||||
const selectUser = (user: UserResponseDto) => {
|
||||
if (selectedUsers.includes(user)) {
|
||||
selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
|
||||
} else {
|
||||
selectedUsers = [...selectedUsers, user];
|
||||
}
|
||||
};
|
||||
const selectUser = (user: UserResponseDto) => {
|
||||
if (selectedUsers.includes(user)) {
|
||||
selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
|
||||
} else {
|
||||
selectedUsers = [...selectedUsers, user];
|
||||
}
|
||||
};
|
||||
|
||||
const deselectUser = (user: UserResponseDto) => {
|
||||
selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
|
||||
};
|
||||
const deselectUser = (user: UserResponseDto) => {
|
||||
selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
|
||||
};
|
||||
|
||||
const onSharedLinkClick = () => {
|
||||
dispatch('sharedlinkclick');
|
||||
};
|
||||
const onSharedLinkClick = () => {
|
||||
dispatch('sharedlinkclick');
|
||||
};
|
||||
</script>
|
||||
|
||||
<BaseModal on:close={() => dispatch('close')}>
|
||||
<svelte:fragment slot="title">
|
||||
<span class="flex gap-2 place-items-center">
|
||||
<ImmichLogo width={24} />
|
||||
<p class="font-medium">Invite to album</p>
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="title">
|
||||
<span class="flex gap-2 place-items-center">
|
||||
<ImmichLogo width={24} />
|
||||
<p class="font-medium">Invite to album</p>
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
|
||||
<div class="max-h-[300px] overflow-y-auto immich-scrollbar">
|
||||
{#if selectedUsers.length > 0}
|
||||
<div class="flex gap-4 py-2 px-5 overflow-x-auto place-items-center mb-2">
|
||||
<p class="font-medium">To</p>
|
||||
<div class="max-h-[300px] overflow-y-auto immich-scrollbar">
|
||||
{#if selectedUsers.length > 0}
|
||||
<div class="flex gap-4 py-2 px-5 overflow-x-auto place-items-center mb-2">
|
||||
<p class="font-medium">To</p>
|
||||
|
||||
{#each selectedUsers as user}
|
||||
{#key user.id}
|
||||
<button
|
||||
on:click={() => deselectUser(user)}
|
||||
class="flex gap-1 place-items-center border border-gray-400 rounded-full p-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<UserAvatar {user} size="sm" autoColor />
|
||||
<p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
|
||||
</button>
|
||||
{/key}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{#each selectedUsers as user}
|
||||
{#key user.id}
|
||||
<button
|
||||
on:click={() => deselectUser(user)}
|
||||
class="flex gap-1 place-items-center border border-gray-400 rounded-full p-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<UserAvatar {user} size="sm" autoColor />
|
||||
<p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
|
||||
</button>
|
||||
{/key}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if users.length > 0}
|
||||
<p class="text-xs font-medium px-5">SUGGESTIONS</p>
|
||||
{#if users.length > 0}
|
||||
<p class="text-xs font-medium px-5">SUGGESTIONS</p>
|
||||
|
||||
<div class="my-4">
|
||||
{#each users as user}
|
||||
<button
|
||||
on:click={() => selectUser(user)}
|
||||
class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
|
||||
>
|
||||
{#if selectedUsers.includes(user)}
|
||||
<span
|
||||
class="bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-bg rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl dark:border-immich-dark-gray"
|
||||
>✓</span
|
||||
>
|
||||
{:else}
|
||||
<UserAvatar {user} size="md" autoColor />
|
||||
{/if}
|
||||
<div class="my-4">
|
||||
{#each users as user}
|
||||
<button
|
||||
on:click={() => selectUser(user)}
|
||||
class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
|
||||
>
|
||||
{#if selectedUsers.includes(user)}
|
||||
<span
|
||||
class="bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-bg rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl dark:border-immich-dark-gray"
|
||||
>✓</span
|
||||
>
|
||||
{:else}
|
||||
<UserAvatar {user} size="md" autoColor />
|
||||
{/if}
|
||||
|
||||
<div class="text-left">
|
||||
<p class="text-immich-fg dark:text-immich-dark-fg">
|
||||
{user.firstName}
|
||||
{user.lastName}
|
||||
</p>
|
||||
<p class="text-xs">
|
||||
{user.email}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="text-sm p-5">
|
||||
Looks like you have shared this album with all users or you don't have any user to share
|
||||
with.
|
||||
</p>
|
||||
{/if}
|
||||
<div class="text-left">
|
||||
<p class="text-immich-fg dark:text-immich-dark-fg">
|
||||
{user.firstName}
|
||||
{user.lastName}
|
||||
</p>
|
||||
<p class="text-xs">
|
||||
{user.email}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="text-sm p-5">
|
||||
Looks like you have shared this album with all users or you don't have any user to share with.
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if selectedUsers.length > 0}
|
||||
<div class="flex place-content-end p-5">
|
||||
<Button size="sm" rounded="lg" on:click={() => dispatch('add-user', { selectedUsers })}>
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if selectedUsers.length > 0}
|
||||
<div class="flex place-content-end p-5">
|
||||
<Button size="sm" rounded="lg" on:click={() => dispatch('add-user', { selectedUsers })}>Add</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<div id="shared-buttons" class="flex my-4 justify-around place-items-center place-content-center">
|
||||
<button
|
||||
class="flex flex-col gap-2 place-items-center place-content-center hover:cursor-pointer"
|
||||
on:click={onSharedLinkClick}
|
||||
>
|
||||
<Link size={24} />
|
||||
<p class="text-sm">Create link</p>
|
||||
</button>
|
||||
<hr />
|
||||
<div id="shared-buttons" class="flex my-4 justify-around place-items-center place-content-center">
|
||||
<button
|
||||
class="flex flex-col gap-2 place-items-center place-content-center hover:cursor-pointer"
|
||||
on:click={onSharedLinkClick}
|
||||
>
|
||||
<Link size={24} />
|
||||
<p class="text-sm">Create link</p>
|
||||
</button>
|
||||
|
||||
{#if sharedLinks.length}
|
||||
<button
|
||||
class="flex flex-col gap-2 place-items-center place-content-center hover:cursor-pointer"
|
||||
on:click={() => goto(AppRoute.SHARED_LINKS)}
|
||||
>
|
||||
<ShareCircle size={24} />
|
||||
<p class="text-sm">View links</p>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if sharedLinks.length}
|
||||
<button
|
||||
class="flex flex-col gap-2 place-items-center place-content-center hover:cursor-pointer"
|
||||
on:click={() => goto(AppRoute.SHARED_LINKS)}
|
||||
>
|
||||
<ShareCircle size={24} />
|
||||
<p class="text-sm">View links</p>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</BaseModal>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue