inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-07-02 03:30: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 { ActionIcon, Anchor, Group, Loader } from '@mantine/core';
import { IconExternalLink } from '@tabler/icons-react'; import { IconExclamationCircle } from '@tabler/icons-react';
import { useQuery } from '@tanstack/react-query'; 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 { useNavigate } from 'react-router-dom';
import { ModelInformationDict } from '@lib/enums/ModelInformation'; import { ModelInformationDict } from '@lib/enums/ModelInformation';
@ -54,6 +54,10 @@ function QueryCountWidget({
const onFollowLink = useCallback( const onFollowLink = useCallback(
(event: any) => { (event: any) => {
if (!query.isFetched) {
return;
}
if (modelProperties.url_overview) { if (modelProperties.url_overview) {
let url = modelProperties.url_overview; let url = modelProperties.url_overview;
@ -67,36 +71,43 @@ function QueryCountWidget({
navigateToLink(url, navigate, event); 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 ( return (
<Group <Anchor href='#' onClick={onFollowLink}>
gap='xs' <Group
wrap='nowrap' gap='xs'
justify='space-between' wrap='nowrap'
align='center' justify='space-between'
style={{ height: '100%' }} align='center'
> style={{ height: '100%' }}
<Group gap='xs'> >
<InvenTreeIcon icon={icon ?? modelProperties.icon} /> <Group gap='xs'>
<StylishText size='md'>{title}</StylishText> <InvenTreeIcon icon={icon ?? modelProperties.icon} />
</Group> <StylishText size='md'>{title}</StylishText>
<Group gap='xs' wrap='nowrap' justify='space-apart'> </Group>
<Group gap='xs' wrap='nowrap' justify='right'> <Group gap='xs' wrap='nowrap' justify='space-apart'>
{query.isFetching ? ( <Group gap='xs' wrap='nowrap' justify='right'>
<Loader size='sm' /> {result}
) : ( </Group>
<StylishText size='md'>{query.data?.count ?? '-'}</StylishText>
)}
{modelProperties?.url_overview && (
<ActionIcon size='sm' variant='transparent' onClick={onFollowLink}>
<IconExternalLink />
</ActionIcon>
)}
</Group> </Group>
</Group> </Group>
</Group> </Anchor>
); );
} }