inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-07-01 11:10:54 +00:00
Code Activity

Simplify dashboard items (#9882)

Browse Source
This commit is contained in:
Oliver
2025-06-27 09:52:34 +10:00
committed by GitHub
parent 9a8d2a6a2e
commit 55a019c054
1 changed files with 39 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
View File

@ -1,7 +1,7 @@
import { ActionIcon, Group, Loader } from '@mantine/core';
import { IconExternalLink } from '@tabler/icons-react';
import { ActionIcon, Anchor, Group, Loader } from '@mantine/core';
import { IconExclamationCircle } from '@tabler/icons-react';
import { useQuery } from '@tanstack/react-query';
import { type ReactNode, useCallback } from 'react';
import { type ReactNode, useCallback, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { ModelInformationDict } from '@lib/enums/ModelInformation';
@ -54,6 +54,10 @@ function QueryCountWidget({
const onFollowLink = useCallback(
(event: any) => {
if (!query.isFetched) {
return;
}
if (modelProperties.url_overview) {
let url = modelProperties.url_overview;
@ -67,36 +71,43 @@ function QueryCountWidget({
navigateToLink(url, navigate, event);
}
},
[modelProperties, params]
[query.isFetched, modelProperties, params]
);
const result: ReactNode = useMemo(() => {
if (query.isFetching) {
return <Loader size='xs' />;
} else if (query.isError) {
return (
<ActionIcon color='red' variant='transparent' size='lg'>
<IconExclamationCircle />
</ActionIcon>
);
} else {
return <StylishText size='xl'>{query.data?.count ?? '-'}</StylishText>;
}
}, [query.isFetching, query.isError, query.data]);
return (
<Group
gap='xs'
wrap='nowrap'
justify='space-between'
align='center'
style={{ height: '100%' }}
>
<Group gap='xs'>
<InvenTreeIcon icon={icon ?? modelProperties.icon} />
<StylishText size='md'>{title}</StylishText>
</Group>
<Group gap='xs' wrap='nowrap' justify='space-apart'>
<Group gap='xs' wrap='nowrap' justify='right'>
{query.isFetching ? (
<Loader size='sm' />
) : (
<StylishText size='md'>{query.data?.count ?? '-'}</StylishText>
)}
{modelProperties?.url_overview && (
<ActionIcon size='sm' variant='transparent' onClick={onFollowLink}>
<IconExternalLink />
</ActionIcon>
)}
<Anchor href='#' onClick={onFollowLink}>
<Group
gap='xs'
wrap='nowrap'
justify='space-between'
align='center'
style={{ height: '100%' }}
>
<Group gap='xs'>
<InvenTreeIcon icon={icon ?? modelProperties.icon} />
<StylishText size='md'>{title}</StylishText>
</Group>
<Group gap='xs' wrap='nowrap' justify='space-apart'>
<Group gap='xs' wrap='nowrap' justify='right'>
{result}
</Group>
</Group>
</Group>
</Group>
</Anchor>
);
}