feat(web): favorite an asset (#939)

* feat(web): favorite an asset

* fix: test and linting

* fix: asset dto type
This commit is contained in:
Jason Rasmussen 2022-11-08 11:20:36 -05:00 committed by GitHub
parent 8a9b0347bb
commit 99da181cfc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 453 additions and 12 deletions

View file

@ -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>

View file

@ -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)}
/>