KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove/Add asset in ablum on web (#371)

Browse Source 
* Added interaction to select multiple thumbnail

* Fixed stutter transition

* Return AlbumResponseDto after removing an asset from album

* Render correctly when an array of thumbnail is updated

* Fixed wording

* Added native dialog for removing users from album

* Fixed rendering incorrect profile image on share user select dialog
This commit is contained in:
Alex
2022-07-23 23:23:14 -05:00
committed by GitHub
parent a35460cb84
commit 052db5d748
14 changed files with 210 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/api/open-api/api.ts
View File

@@ -1608,7 +1608,7 @@ export const AlbumApiFp = function(configuration?: Configuration) {
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async removeAssetFromAlbum(albumId: string, removeAssetsDto: RemoveAssetsDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
async removeAssetFromAlbum(albumId: string, removeAssetsDto: RemoveAssetsDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AlbumResponseDto>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.removeAssetFromAlbum(albumId, removeAssetsDto, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
@@ -1707,7 +1707,7 @@ export const AlbumApiFactory = function (configuration?: Configuration, basePath
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
removeAssetFromAlbum(albumId: string, removeAssetsDto: RemoveAssetsDto, options?: any): AxiosPromise<void> {
removeAssetFromAlbum(albumId: string, removeAssetsDto: RemoveAssetsDto, options?: any): AxiosPromise<AlbumResponseDto> {
return localVarFp.removeAssetFromAlbum(albumId, removeAssetsDto, options).then((request) => request(axios, basePath));
},
/**

16
web/src/lib/components/album-page/album-app-bar.svelte
View File

@@ -4,9 +4,12 @@
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import Close from 'svelte-material-icons/Close.svelte';
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
import { fly } from 'svelte/transition';
export let backIcon = Close;
let appBarBorder = 'bg-immich-bg';
export let tailwindClasses = '';
let appBarBorder = 'bg-immich-bg border border-transparent';
const dispatch = createEventDispatcher();
onMount(() => {
@@ -15,7 +18,7 @@
if (window.pageYOffset > 80) {
appBarBorder = 'border border-gray-200 bg-gray-50';
} else {
appBarBorder = 'bg-immich-bg';
appBarBorder = 'bg-immich-bg border border-transparent';
}
});
}
@@ -28,10 +31,13 @@
});
</script>
<div class="fixed top-0 w-full bg-transparent z-[100]">
<div
transition:fly|local={{ y: 10, duration: 200 }}
class="fixed top-0 w-full bg-transparent z-[100]"
>
<div
id="asset-selection-app-bar"
class={`flex justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center`}
class={`flex justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center ${tailwindClasses}`}
>
<div class="flex place-items-center gap-6">
<CircleIconButton

162
web/src/lib/components/album-page/album-viewer.svelte
View File

@@ -2,7 +2,7 @@
import { afterNavigate, goto } from '$app/navigation';
import { page } from '$app/stores';
import { AlbumResponseDto, api, AssetResponseDto, ThumbnailFormat, UserResponseDto } from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import { onMount } from 'svelte';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import Plus from 'svelte-material-icons/Plus.svelte';
import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
@@ -16,8 +16,8 @@
import UserSelectionModal from './user-selection-modal.svelte';
import ShareInfoModal from './share-info-modal.svelte';
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
const dispatch = createEventDispatcher();
import Close from 'svelte-material-icons/Close.svelte';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
export let album: AlbumResponseDto;
let isShowAssetViewer = false;
@@ -39,6 +39,9 @@
$: isOwned = currentUser?.id == album.ownerId;
let multiSelectAsset: Set<AssetResponseDto> = new Set();
$: isMultiSelectionMode = multiSelectAsset.size > 0;
afterNavigate(({ from }) => {
backUrl = from?.pathname ?? '/albums';
@@ -81,15 +84,46 @@
}
});
const viewAsset = (event: CustomEvent) => {
const { assetId, deviceId }: { assetId: string; deviceId: string } = event.detail;
const viewAssetHandler = (event: CustomEvent) => {
const { asset }: { asset: AssetResponseDto } = event.detail;
currentViewAssetIndex = album.assets.findIndex((a) => a.id == assetId);
currentViewAssetIndex = album.assets.findIndex((a) => a.id == asset.id);
selectedAsset = album.assets[currentViewAssetIndex];
isShowAssetViewer = true;
pushState(selectedAsset.id);
};
const selectAssetHandler = (event: CustomEvent) => {
const { asset }: { asset: AssetResponseDto } = event.detail;
let temp = new Set(multiSelectAsset);
if (multiSelectAsset.has(asset)) {
temp.delete(asset);
} else {
temp.add(asset);
}
multiSelectAsset = temp;
};
const clearMultiSelectAssetAssetHandler = () => {
multiSelectAsset = new Set();
};
const removeSelectedAssetFromAlbum = async () => {
if (window.confirm('Do you want to remove selected assets from the album?')) {
try {
const { data } = await api.albumApi.removeAssetFromAlbum(album.id, {
assetIds: Array.from(multiSelectAsset).map((a) => a.id)
});
album = data;
multiSelectAsset = new Set();
} catch (e) {
console.log('Error [album-viewer] [removeAssetFromAlbum]', e);
}
}
};
const navigateAssetForward = () => {
try {
if (currentViewAssetIndex < album.assets.length - 1) {
@@ -191,32 +225,60 @@
</script>
<section class="bg-immich-bg">
<AlbumAppBar on:close-button-click={() => goto(backUrl)} backIcon={ArrowLeft}>
<svelte:fragment slot="trailing">
{#if album.assets.length > 0}
<CircleIconButton
title="Add Photos"
on:click={() => (isShowAssetSelection = true)}
logo={FileImagePlusOutline}
/>
<!-- Multiselection mode app bar -->
{#if isMultiSelectionMode}
<AlbumAppBar
on:close-button-click={clearMultiSelectAssetAssetHandler}
backIcon={Close}
tailwindClasses={'bg-white shadow-md'}
>
<svelte:fragment slot="leading">
<p class="font-medium text-immich-primary">Selected {multiSelectAsset.size}</p>
</svelte:fragment>
<svelte:fragment slot="trailing">
{#if isOwned}
<CircleIconButton
title="Remove from album"
on:click={removeSelectedAssetFromAlbum}
logo={DeleteOutline}
/>
{/if}
</svelte:fragment>
</AlbumAppBar>
{/if}
<CircleIconButton
title="Share"
on:click={() => (isShowShareUserSelection = true)}
logo={ShareVariantOutline}
/>
{/if}
<!-- Default app bar -->
{#if !isMultiSelectionMode}
<AlbumAppBar on:close-button-click={() => goto(backUrl)} backIcon={ArrowLeft}>
<svelte:fragment slot="trailing">
{#if album.assets.length > 0}
<CircleIconButton
title="Add Photos"
on:click={() => (isShowAssetSelection = true)}
logo={FileImagePlusOutline}
/>
{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
<button
disabled={album.assets.length == 0}
on:click={() => (isShowShareUserSelection = true)}
class="immich-text-button border bg-immich-primary text-gray-50 hover:bg-immich-primary/75 px-6 text-sm disabled:opacity-25 disabled:bg-gray-500 disabled:cursor-not-allowed"
><span class="px-2">Share</span></button
>
{/if}
</svelte:fragment>
</AlbumAppBar>
<!-- Sharing only for owner -->
{#if isOwned}
<CircleIconButton
title="Share"
on:click={() => (isShowShareUserSelection = true)}
logo={ShareVariantOutline}
/>
{/if}
{/if}
{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
<button
disabled={album.assets.length == 0}
on:click={() => (isShowShareUserSelection = true)}
class="immich-text-button border bg-immich-primary text-gray-50 hover:bg-immich-primary/75 px-6 text-sm disabled:opacity-25 disabled:bg-gray-500 disabled:cursor-not-allowed"
><span class="px-2">Share</span></button
>
{/if}
</svelte:fragment>
</AlbumAppBar>
{/if}
<section class="m-auto my-[160px] w-[60%]">
<input
@@ -237,9 +299,11 @@
{#if album.shared}
<div class="my-6 flex">
{#each album.sharedUsers as user}
<span class="mr-1">
<CircleAvatar {user} on:click={() => (isShowShareInfoModal = true)} />
</span>
{#key user.id}
<span class="mr-1">
<CircleAvatar {user} on:click={() => (isShowShareInfoModal = true)} />
</span>
{/key}
{/each}
<button
@@ -255,16 +319,28 @@
{#if album.assets.length > 0}
<div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
{#each album.assets as asset}
{#if album.assets.length < 7}
<ImmichThumbnail
{asset}
{thumbnailSize}
format={ThumbnailFormat.Jpeg}
on:click={viewAsset}
/>
{:else}
<ImmichThumbnail {asset} {thumbnailSize} on:click={viewAsset} />
{/if}
{#key asset.id}
{#if album.assets.length < 7}
<ImmichThumbnail
{asset}
{thumbnailSize}
format={ThumbnailFormat.Jpeg}
on:click={(e) =>
isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e)}
on:select={selectAssetHandler}
selected={multiSelectAsset.has(asset)}
/>
{:else}
<ImmichThumbnail
{asset}
{thumbnailSize}
on:click={(e) =>
isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e)}
on:select={selectAssetHandler}
selected={multiSelectAsset.has(asset)}
/>
{/if}
{/key}
{/each}
</div>
{:else}

12
web/src/lib/components/album-page/share-info-modal.svelte
View File

@@ -42,11 +42,13 @@
};
const removeUser = async (userId: string) => {
try {
await api.albumApi.removeUserFromAlbum(album.id, userId);
dispatch('user-deleted', { userId });
} catch (e) {
console.error('Error [share-info-modal] [removeUser]', e);
if (window.confirm('Do you want to remove selected user from the album?')) {
try {
await api.albumApi.removeUserFromAlbum(album.id, userId);
dispatch('user-deleted', { userId });
} catch (e) {
console.error('Error [share-info-modal] [removeUser]', e);
}
}
};
</script>

42
web/src/lib/components/album-page/user-selection-modal.svelte
View File

@@ -6,7 +6,7 @@
export let sharedUsersInAlbum: Set<UserResponseDto>;
let users: UserResponseDto[] = [];
let selectedUsers: Set<UserResponseDto> = new Set();
let selectedUsers: UserResponseDto[] = [];
const dispatch = createEventDispatcher();
@@ -22,23 +22,15 @@
});
const selectUser = (user: UserResponseDto) => {
const tempSelectedUsers = new Set(selectedUsers);
if (selectedUsers.has(user)) {
tempSelectedUsers.delete(user);
if (selectedUsers.includes(user)) {
selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
} else {
tempSelectedUsers.add(user);
selectedUsers = [...selectedUsers, user];
}
selectedUsers = tempSelectedUsers;
};
const deselectUser = (user: UserResponseDto) => {
const tempSelectedUsers = new Set(selectedUsers);
tempSelectedUsers.delete(user);
selectedUsers = tempSelectedUsers;
selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
};
</script>
@@ -51,18 +43,20 @@
</svelte:fragment>
<div class=" max-h-[400px] overflow-y-auto immich-scrollbar">
{#if selectedUsers.size > 0}
{#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 Array.from(selectedUsers) as user}
<button
on:click={() => deselectUser(user)}
class="flex gap-1 place-items-center border border-gray-400 rounded-full p-1 hover:bg-gray-200 transition-colors"
>
<CircleAvatar size={28} {user} />
<p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
</button>
{#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 transition-colors"
>
<CircleAvatar size={28} {user} />
<p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
</button>
{/key}
{/each}
</div>
{/if}
@@ -76,7 +70,7 @@
on:click={() => selectUser(user)}
class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200 transition-all"
>
{#if selectedUsers.has(user)}
{#if selectedUsers.includes(user)}
<span
class="bg-immich-primary text-white rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl"
>✓</span
@@ -104,7 +98,7 @@
</p>
{/if}
{#if selectedUsers.size > 0}
{#if selectedUsers.length > 0}
<div class="flex place-content-end p-5 ">
<button
on:click={() => dispatch('add-user', { selectedUsers })}

12
web/src/lib/components/shared-components/immich-thumbnail.svelte
View File

@@ -171,9 +171,14 @@
};
const thumbnailClickedHandler = () => {
if (!isExisted) {
dispatch('click', { assetId: asset.id, deviceId: asset.deviceId });
dispatch('click', { asset });
}
};
const onIconClickedHandler = (e: MouseEvent) => {
e.stopPropagation();
dispatch('select', { asset });
};
</script>
<IntersectionObserver once={true} let:intersecting>
@@ -192,7 +197,8 @@
in:fade={{ duration: 200 }}
class={`w-full ${getOverlaySelectorIconStyle()} via-white/0 to-white/0 absolute p-2 z-10`}
>
<div
<button
on:click={onIconClickedHandler}
on:mouseenter={() => (mouseOverIcon = true)}
on:mouseleave={() => (mouseOverIcon = false)}
class="inline-block"
@@ -204,7 +210,7 @@
{:else}
<CheckCircle size="24" color={mouseOverIcon ? 'white' : '#d8dadb'} />
{/if}
</div>
</button>
</div>
{/if}

18
web/src/routes/photos/index.svelte
View File

@@ -58,9 +58,9 @@
};
const viewAssetHandler = (event: CustomEvent) => {
const { assetId, deviceId }: { assetId: string; deviceId: string } = event.detail;
const { asset }: { asset: AssetResponseDto } = event.detail;
currentViewAssetIndex = $flattenAssetGroupByDate.findIndex((a) => a.id == assetId);
currentViewAssetIndex = $flattenAssetGroupByDate.findIndex((a) => a.id == asset.id);
selectedAsset = $flattenAssetGroupByDate[currentViewAssetIndex];
isShowAssetViewer = true;
pushState(selectedAsset.id);
@@ -170,12 +170,14 @@
<!-- Image grid -->
<div class="flex flex-wrap gap-[2px]">
{#each assetsInDateGroup as asset}
<ImmichThumbnail
{asset}
on:mouseEvent={thumbnailMouseEventHandler}
on:click={viewAssetHandler}
{groupIndex}
/>
{#key asset.id}
<ImmichThumbnail
{asset}
on:mouseEvent={thumbnailMouseEventHandler}
on:click={viewAssetHandler}
{groupIndex}
/>
{/key}
{/each}
</div>
</div>