self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-24 08:52:28 +02:00
Code Issues Releases Activity

fix(web): fix sidebar tooltip pluralization (#9952)

Browse Source 
* fix(web): fix sidebar tooltip pluralization

* Rename property

* Remove data-testid attribute

* Fix variable type
This commit is contained in:
Snowknight26 2024-06-03 20:35:17 -05:00 committed by GitHub
parent b3ee394fdc
commit 471cf5eaf7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 50 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/lib/components/shared-components/side-bar/more-information-albums.svelte Normal file
View File

@ -0,0 +1,24 @@
<script lang="ts">
import { locale } from '$lib/stores/preferences.store.js';
import { s } from '$lib/utils.js';
import { type AlbumCountResponseDto, getAlbumCount } from '@immich/sdk';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
export let albumCountType: keyof AlbumCountResponseDto;
const handleAlbumCount = async () => {
try {
return await getAlbumCount();
} catch {
return { owned: 0, shared: 0, notShared: 0 };
}
};
</script>
{#await handleAlbumCount()}
<LoadingSpinner />
{:then data}
<div>
<p>{data[albumCountType].toLocaleString($locale)} Album{s(data[albumCountType])}</p>
</div>
{/await}

17
web/src/lib/components/shared-components/side-bar/more-information-assets.svelte Normal file
View File

@ -0,0 +1,17 @@
<script lang="ts">
import { locale } from '$lib/stores/preferences.store.js';
import { s } from '$lib/utils.js';
import { getAssetStatistics } from '@immich/sdk';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
export let assetStats: NonNullable<Parameters<typeof getAssetStatistics>[0]>;
</script>
{#await getAssetStatistics(assetStats)}
<LoadingSpinner />
{:then data}
<div>
<p>{data.videos.toLocaleString($locale)} Video{s(data.videos)}</p>
<p>{data.images.toLocaleString($locale)} Photo{s(data.images)}</p>
</div>
{/await}

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

@ -1,7 +1,6 @@
<script lang="ts">
import { locale, sidebarSettings } from '$lib/stores/preferences.store';
import { sidebarSettings } from '$lib/stores/preferences.store';
import { featureFlags } from '$lib/stores/server-config.store';
import { getAlbumCount, getAssetStatistics } from '@immich/sdk';
import {
mdiAccount,
mdiAccountOutline,
@ -22,20 +21,11 @@
mdiToolbox,
mdiToolboxOutline,
} from '@mdi/js';
import LoadingSpinner from '../loading-spinner.svelte';
import StatusBox from '../status-box.svelte';
import SideBarSection from './side-bar-section.svelte';
import SideBarLink from './side-bar-link.svelte';
const getStats = (dto: Parameters<typeof getAssetStatistics>[0]) => getAssetStatistics(dto);
const handleAlbumCount = async () => {
try {
return await getAlbumCount();
} catch {
return { owned: 0, shared: 0, notShared: 0 };
}
};
import MoreInformationAssets from '$lib/components/shared-components/side-bar/more-information-assets.svelte';
import MoreInformationAlbums from '$lib/components/shared-components/side-bar/more-information-albums.svelte';
let isArchiveSelected: boolean;
let isFavoritesSelected: boolean;
@ -56,14 +46,7 @@
icon={isPhotosSelected ? mdiImageMultiple : mdiImageMultipleOutline}
>
<svelte:fragment slot="moreInformation">
{#await getStats({ isArchived: false })}
<LoadingSpinner />
{:then data}
<div>
<p>{data.videos.toLocaleString($locale)} Videos</p>
<p>{data.images.toLocaleString($locale)} Photos</p>
</div>
{/await}
<MoreInformationAssets assetStats={{ isArchived: false }} />
</svelte:fragment>
</SideBarLink>
{#if $featureFlags.search}
@ -95,13 +78,7 @@
bind:isSelected={isSharingSelected}
>
<svelte:fragment slot="moreInformation">
{#await handleAlbumCount()}
<LoadingSpinner />
{:then data}
<div>
<p>{data.shared.toLocaleString($locale)} Albums</p>
</div>
{/await}
<MoreInformationAlbums albumCountType="shared" />
</svelte:fragment>
</SideBarLink>
{/if}
@ -117,25 +94,12 @@
bind:isSelected={isFavoritesSelected}
>
<svelte:fragment slot="moreInformation">
{#await getStats({ isFavorite: true })}
<LoadingSpinner />
{:then data}
<div>
<p>{data.videos.toLocaleString($locale)} Videos</p>
<p>{data.images.toLocaleString($locale)} Photos</p>
</div>
{/await}
<MoreInformationAssets assetStats={{ isFavorite: true }} />
</svelte:fragment>
</SideBarLink>
<SideBarLink title="Albums" routeId="/(user)/albums" icon={mdiImageAlbum} flippedLogo>
<svelte:fragment slot="moreInformation">
{#await handleAlbumCount()}
<LoadingSpinner />
{:then data}
<div>
<p>{data.owned.toLocaleString($locale)} Albums</p>
</div>
{/await}
<MoreInformationAlbums albumCountType="owned" />
</svelte:fragment>
</SideBarLink>
@ -153,14 +117,7 @@
icon={isArchiveSelected ? mdiArchiveArrowDown : mdiArchiveArrowDownOutline}
>
<svelte:fragment slot="moreInformation">
{#await getStats({ isArchived: true })}
<LoadingSpinner />
{:then data}
<div>
<p>{data.videos.toLocaleString($locale)} Videos</p>
<p>{data.images.toLocaleString($locale)} Photos</p>
</div>
{/await}
<MoreInformationAssets assetStats={{ isArchived: true }} />
</svelte:fragment>
</SideBarLink>
@ -172,14 +129,7 @@
icon={isTrashSelected ? mdiTrashCan : mdiTrashCanOutline}
>
<svelte:fragment slot="moreInformation">
{#await getStats({ isTrashed: true })}
<LoadingSpinner />
{:then data}
<div>
<p>{data.videos.toLocaleString($locale)} Videos</p>
<p>{data.images.toLocaleString($locale)} Photos</p>
</div>
{/await}
<MoreInformationAssets assetStats={{ isTrashed: true }} />
</svelte:fragment>
</SideBarLink>
{/if}