self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-23 04:38:12 +02:00
Code Issues Releases Activity

feat(web): add asset and album count info (#623)

Browse Source 
* Get asset and album count

* Generate APIs

* Added asset count for each type

* Added api on the web

* Added info button for asset and album count to trigger getting info on hover

* Remove websocket event from photo page
This commit is contained in:
Alex
2022-09-07 15:16:18 -05:00
committed by GitHub
parent 18a7ff8726
commit 566039b93f
28 changed files with 932 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
web/src/lib/components/shared-components/side-bar/side-bar.svelte
View File

@ -5,11 +5,19 @@
import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
import SideBarButton from './side-bar-button.svelte';
import StatusBox from '../status-box.svelte';
import { AlbumCountResponseDto, api, AssetCountByUserIdResponseDto } from '@api';
import { fade } from 'svelte/transition';
import LoadingSpinner from '../loading-spinner.svelte';
let selectedAction: AppSideBarSelection;
let showAssetCount: boolean = false;
let showSharingCount = false;
let showAlbumsCount = false;
onMount(async () => {
if ($page.routeId == 'albums') {
selectedAction = AppSideBarSelection.ALBUMS;
@ -19,35 +27,130 @@
selectedAction = AppSideBarSelection.SHARING;
}
});
const getAssetCount = async () => {
const { data: assetCount } = await api.assetApi.getAssetCountByUserId();
return {
videos: assetCount.videos,
photos: assetCount.photos
};
};
const getAlbumCount = async () => {
const { data: albumCount } = await api.albumApi.getAlbumCountByUserId();
return {
shared: albumCount.shared,
sharing: albumCount.sharing,
owned: albumCount.owned
};
};
</script>
<section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6">
<a sveltekit:prefetch sveltekit:noscroll href={$page.routeId !== 'photos' ? `/photos` : null}>
<a
sveltekit:prefetch
sveltekit:noscroll
href={$page.routeId !== 'photos' ? `/photos` : null}
class="relative"
>
<SideBarButton
title="Photos"
title={`Photos`}
logo={ImageOutline}
actionType={AppSideBarSelection.PHOTOS}
isSelected={selectedAction === AppSideBarSelection.PHOTOS}
/></a
>
<a sveltekit:prefetch href={$page.routeId !== 'sharing' ? `/sharing` : null}>
/>
<div
id="asset-count-info"
class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
on:mouseenter={() => (showAssetCount = true)}
on:mouseleave={() => (showAssetCount = false)}
>
<InformationOutline size={18} color="#4250af" />
{#if showAssetCount}
<div
transition:fade={{ duration: 200 }}
id="asset-count-info-detail"
class="w-32 rounded-lg px-4 py-2 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
>
{#await getAssetCount()}
<LoadingSpinner />
{:then data}
<div>
<p>{data.videos} Videos</p>
<p>{data.photos} Photos</p>
</div>
{/await}
</div>
{/if}
</div>
</a>
<a sveltekit:prefetch href={$page.routeId !== 'sharing' ? `/sharing` : null} class="relative">
<SideBarButton
title="Sharing"
logo={AccountMultipleOutline}
actionType={AppSideBarSelection.SHARING}
isSelected={selectedAction === AppSideBarSelection.SHARING}
/></a
>
/>
<div
id="sharing-count-info"
class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
on:mouseenter={() => (showSharingCount = true)}
on:mouseleave={() => (showSharingCount = false)}
>
<InformationOutline size={18} color="#4250af" />
{#if showSharingCount}
<div
transition:fade={{ duration: 200 }}
id="asset-count-info-detail"
class="w-32 rounded-lg px-4 py-2 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
>
{#await getAlbumCount()}
<LoadingSpinner />
{:then data}
<div>
<p>{data.shared + data.sharing} albums</p>
</div>
{/await}
</div>
{/if}
</div>
</a>
<div class="text-xs ml-5 my-4">
<p>LIBRARY</p>
</div>
<a sveltekit:prefetch href={$page.routeId !== 'albums' ? `/albums` : null}>
<a sveltekit:prefetch href={$page.routeId !== 'albums' ? `/albums` : null} class="relative">
<SideBarButton
title="Albums"
logo={ImageAlbum}
actionType={AppSideBarSelection.ALBUMS}
isSelected={selectedAction === AppSideBarSelection.ALBUMS}
/>
<div
id="album-count-info"
class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
on:mouseenter={() => (showAlbumsCount = true)}
on:mouseleave={() => (showAlbumsCount = false)}
>
<InformationOutline size={18} color="#4250af" />
{#if showAlbumsCount}
<div
transition:fade={{ duration: 200 }}
id="asset-count-info-detail"
class="w-32 rounded-lg px-4 py-2 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
>
{#await getAlbumCount()}
<LoadingSpinner />
{:then data}
<div>
<p>{data.owned} albums</p>
</div>
{/await}
</div>
{/if}
</div>
</a>
<!-- Status Box -->