admin/jellyfin-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Hide metric cards if value is zero

Browse Source
This commit is contained in:
Bill Thornton
2025-06-13 16:23:35 -04:00
parent 1b633a45ec
commit 3c29b1ad5d
2 changed files with 87 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/apps/dashboard/components/widgets/ItemCountsWidget.tsx
View File

@@ -5,14 +5,89 @@ import MusicVideo from '@mui/icons-material/MusicVideo';
import Tv from '@mui/icons-material/Tv';
import VideoLibrary from '@mui/icons-material/VideoLibrary';
import Grid from '@mui/material/Grid2';
import React from 'react';
import React, { useMemo } from 'react';
import { useItemCounts } from 'apps/dashboard/features/metrics/api/useItemCounts';
import MetricCard from 'apps/dashboard/features/metrics/components/MetricCard';
import MetricCard, { type MetricCardProps } from 'apps/dashboard/features/metrics/components/MetricCard';
import globalize from 'lib/globalize';
const ItemCountsWidget = () => {
const { data: counts } = useItemCounts();
const {
data: counts,
isPending
} = useItemCounts();
const cards: MetricCardProps[] = useMemo(() => {
const cardProps: MetricCardProps[] = [];
if (isPending || counts?.MovieCount) {
cardProps.push({
Icon: Movie,
metrics: [{
label: globalize.translate('Movies'),
value: counts?.MovieCount
}]
});
}
if (isPending || counts?.SeriesCount || counts?.EpisodeCount) {
cardProps.push({
Icon: Tv,
metrics: [{
label: globalize.translate('Series'),
value: counts?.SeriesCount
}, {
label: globalize.translate('Episodes'),
value: counts?.EpisodeCount
}]
});
}
if (isPending || counts?.AlbumCount || counts?.SongCount) {
cardProps.push({
Icon: MusicNote,
metrics: [{
label: globalize.translate('Albums'),
value: counts?.AlbumCount
}, {
label: globalize.translate('Songs'),
value: counts?.SongCount
}]
});
}
if (isPending || counts?.MusicVideoCount) {
cardProps.push({
Icon: MusicVideo,
metrics: [{
label: globalize.translate('MusicVideos'),
value: counts?.MusicVideoCount
}]
});
}
if (isPending || counts?.BookCount) {
cardProps.push({
Icon: Book,
metrics: [{
label: globalize.translate('Books'),
value: counts?.BookCount
}]
});
}
if (isPending || counts?.BoxSetCount) {
cardProps.push({
Icon: VideoLibrary,
metrics: [{
label: globalize.translate('Collections'),
value: counts?.BoxSetCount
}]
});
}
return cardProps;
}, [ counts, isPending ]);
return (
<Grid
@@ -23,71 +98,14 @@ const ItemCountsWidget = () => {
marginTop: 2
}}
>
<Grid size={{ xs: 12, sm: 6, lg: 4 }}>
<MetricCard
Icon={Movie}
metrics={[{
label: globalize.translate('Movies'),
value: counts?.MovieCount
}]}
/>
</Grid>
<Grid size={{ xs: 12, sm: 6, lg: 4 }}>
<MetricCard
Icon={Tv}
metrics={[{
label: globalize.translate('Series'),
value: counts?.SeriesCount
}, {
label: globalize.translate('Episodes'),
value: counts?.EpisodeCount
}]}
/>
</Grid>
<Grid size={{ xs: 12, sm: 6, lg: 4 }}>
<MetricCard
Icon={MusicNote}
metrics={[{
label: globalize.translate('Albums'),
value: counts?.AlbumCount
}, {
label: globalize.translate('Songs'),
value: counts?.SongCount
}]}
/>
</Grid>
<Grid size={{ xs: 12, sm: 6, lg: 4 }}>
<MetricCard
Icon={MusicVideo}
metrics={[{
label: globalize.translate('MusicVideos'),
value: counts?.MusicVideoCount
}]}
/>
</Grid>
<Grid size={{ xs: 12, sm: 6, lg: 4 }}>
<MetricCard
Icon={Book}
metrics={[{
label: globalize.translate('Books'),
value: counts?.BookCount
}]}
/>
</Grid>
<Grid size={{ xs: 12, sm: 6, lg: 4 }}>
<MetricCard
Icon={VideoLibrary}
metrics={[{
label: globalize.translate('Collections'),
value: counts?.BoxSetCount
}]}
/>
</Grid>
{cards.map(card => (
<Grid
key={card.metrics.map(metric => metric.label).join('-')}
size={{ xs: 12, sm: 6, lg: 4 }}
>
<MetricCard {...card} />
</Grid>
))}
</Grid>
);
};

2
src/apps/dashboard/features/metrics/components/MetricCard.tsx
View File

@@ -14,7 +14,7 @@ interface Metric {
value?: number
}
interface MetricCardProps {
export interface MetricCardProps {
metrics: Metric[]
Icon: typeof SvgIcon
}