Add Quickaction to home page

This commit is contained in:
Matthias Mair 2024-08-22 00:19:32 +02:00
parent 0a38aed90e
commit 08625ce500
No known key found for this signature in database
GPG Key ID: A593429DDA23B66A
3 changed files with 33 additions and 25 deletions

View File

@ -10,26 +10,36 @@ import {
} from '@mantine/core'; } from '@mantine/core';
import { IconHome } from '@tabler/icons-react'; import { IconHome } from '@tabler/icons-react';
import { ActionButton } from '../../../../components/buttons/ActionButton'; import { ActionButton } from '../buttons/ActionButton';
import { PlaceholderPill } from '../../../../components/items/Placeholder'; import { PlaceholderPill } from '../items/Placeholder';
export function generateQuickAction(navigate: any) { export const QuickAction = ({
return () => ( navigate,
<Stack gap={'xs'} ml={'sm'}> ml = 'sm'
}: {
navigate?: any;
ml?: string;
}) => {
return (
<Stack gap={'xs'} ml={ml}>
<Title order={5}> <Title order={5}>
<Trans>Quick Actions</Trans> <Trans>Quick Actions</Trans>
</Title> </Title>
<Flex align={'flex-end'}> <Flex align={'flex-end'}>
<ActionButton {navigate ? (
icon={<IconHome />} <>
color="blue" <ActionButton
size="lg" icon={<IconHome />}
radius="sm" color="blue"
variant="filled" size="lg"
tooltip={t`Go to Home`} radius="sm"
onClick={() => navigate('home')} variant="filled"
/> tooltip={t`Go to Home`}
<Divider orientation="vertical" mx="md" /> onClick={() => navigate('home')}
/>
<Divider orientation="vertical" mx="md" />
</>
) : null}
<SimpleGrid cols={3}> <SimpleGrid cols={3}>
<Paper shadow="xs" p="sm" withBorder> <Paper shadow="xs" p="sm" withBorder>
<Text> <Text>
@ -48,4 +58,4 @@ export function generateQuickAction(navigate: any) {
</Flex> </Flex>
</Stack> </Stack>
); );
} };

View File

@ -1,8 +1,10 @@
import { Trans, t } from '@lingui/macro'; import { Trans, t } from '@lingui/macro';
import { Alert, Button, Divider, Stack, Title } from '@mantine/core'; import { Alert, Button, Stack, Title } from '@mantine/core';
import { IconBrandGithub } from '@tabler/icons-react'; import { IconBrandGithub } from '@tabler/icons-react';
export default function HomePanel() { import { QuickAction } from '../../../../components/settings/QuickAction';
export default function HomePanel(): JSX.Element {
return ( return (
<Stack gap="xs"> <Stack gap="xs">
<Alert color="blue" title={t`This is new!`}> <Alert color="blue" title={t`This is new!`}>
@ -21,10 +23,7 @@ export default function HomePanel() {
<IconBrandGithub /> <Trans>Open an issue</Trans> <IconBrandGithub /> <Trans>Open an issue</Trans>
</Button> </Button>
</Alert> </Alert>
<Title order={5}> <QuickAction ml="" />
<Trans>Quick actions</Trans>
</Title>
TBD
<Title order={5}> <Title order={5}>
<Trans>System status</Trans> <Trans>System status</Trans>
</Title> </Title>

View File

@ -23,10 +23,10 @@ import { useLocation, useNavigate } from 'react-router-dom';
import PermissionDenied from '../../../../components/errors/PermissionDenied'; import PermissionDenied from '../../../../components/errors/PermissionDenied';
import { PanelGroup, PanelType } from '../../../../components/nav/PanelGroup'; import { PanelGroup, PanelType } from '../../../../components/nav/PanelGroup';
import { SettingsHeader } from '../../../../components/nav/SettingsHeader'; import { SettingsHeader } from '../../../../components/nav/SettingsHeader';
import { QuickAction } from '../../../../components/settings/QuickAction';
import { GlobalSettingList } from '../../../../components/settings/SettingList'; import { GlobalSettingList } from '../../../../components/settings/SettingList';
import { Loadable } from '../../../../functions/loading'; import { Loadable } from '../../../../functions/loading';
import { useUserState } from '../../../../states/UserState'; import { useUserState } from '../../../../states/UserState';
import { generateQuickAction } from './generateQuickAction';
const ReportTemplatePanel = Loadable( const ReportTemplatePanel = Loadable(
lazy(() => import('./ReportTemplatePanel')) lazy(() => import('./ReportTemplatePanel'))
@ -96,7 +96,6 @@ export default function AdminCenter() {
return panel !== 'home'; return panel !== 'home';
}, [panel]); }, [panel]);
const QuickAction = generateQuickAction(navigate);
const adminCenterPanels: PanelType[] = useMemo(() => { const adminCenterPanels: PanelType[] = useMemo(() => {
return [ return [
{ {
@ -213,7 +212,7 @@ export default function AdminCenter() {
switch_link="/settings/system" switch_link="/settings/system"
switch_text="System Settings" switch_text="System Settings"
/> />
{showQuickAction ? <QuickAction /> : null} {showQuickAction ? <QuickAction navigate={navigate} /> : null}
<PanelGroup <PanelGroup
pageKey="admin-center" pageKey="admin-center"
panels={adminCenterPanels} panels={adminCenterPanels}