mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web): favorite an asset (#939)
* feat(web): favorite an asset * fix: test and linting * fix: asset dto type
This commit is contained in:
parent
8a9b0347bb
commit
99da181cfc
19 changed files with 453 additions and 12 deletions
|
|
@ -9,6 +9,14 @@
|
|||
import CircleIconButton from '../shared-components/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 Star from 'svelte-material-icons/Star.svelte';
|
||||
import StarOutline from 'svelte-material-icons/StarOutline.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { AssetResponseDto } from '../../../api';
|
||||
|
||||
export let asset: AssetResponseDto;
|
||||
|
||||
const isOwner = asset.ownerId === $page.data.user.id;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
|
@ -38,8 +46,15 @@
|
|||
</div>
|
||||
<div class="text-white flex gap-2">
|
||||
<CircleIconButton logo={CloudDownloadOutline} on:click={() => dispatch('download')} />
|
||||
<CircleIconButton logo={DeleteOutline} on:click={() => dispatch('delete')} />
|
||||
<CircleIconButton logo={InformationOutline} on:click={() => dispatch('showDetail')} />
|
||||
{#if isOwner}
|
||||
<CircleIconButton
|
||||
logo={asset.isFavorite ? Star : StarOutline}
|
||||
on:click={() => dispatch('favorite')}
|
||||
title="Favorite"
|
||||
/>
|
||||
{/if}
|
||||
<CircleIconButton logo={DeleteOutline} on:click={() => dispatch('delete')} />
|
||||
<CircleIconButton logo={DotsVertical} on:click={(event) => showOptionsMenu(event)} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -178,6 +178,14 @@
|
|||
}
|
||||
};
|
||||
|
||||
const toggleFavorite = async () => {
|
||||
const { data } = await api.assetApi.updateAssetById(asset.id, {
|
||||
isFavorite: !asset.isFavorite
|
||||
});
|
||||
|
||||
asset.isFavorite = data.isFavorite;
|
||||
};
|
||||
|
||||
const openAlbumPicker = (shared: boolean) => {
|
||||
isShowAlbumPicker = true;
|
||||
addToSharedAlbum = shared;
|
||||
|
|
@ -218,10 +226,12 @@
|
|||
>
|
||||
<div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
|
||||
<AsserViewerNavBar
|
||||
{asset}
|
||||
on:goBack={closeViewer}
|
||||
on:showDetail={showDetailInfoHandler}
|
||||
on:download={downloadFile}
|
||||
on:delete={deleteAsset}
|
||||
on:favorite={toggleFavorite}
|
||||
on:addToAlbum={() => openAlbumPicker(false)}
|
||||
on:addToSharedAlbum={() => openAlbumPicker(true)}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue