use navigation function instaed

This commit is contained in:
Matthias Mair 2024-04-16 23:12:12 +02:00
parent f8cdf9c19d
commit 2f4d74a180
No known key found for this signature in database
GPG Key ID: A593429DDA23B66A
2 changed files with 27 additions and 21 deletions

View File

@ -1,6 +1,6 @@
import { t } from '@lingui/macro';
import { Accordion, Alert, LoadingOverlay, Stack, Text } from '@mantine/core';
import { ReactNode, useMemo } from 'react';
import { useMemo, useState } from 'react';
import { ApiEndpoints } from '../../enums/ApiEndpoints';
import { UserRoles } from '../../enums/Roles';
@ -53,6 +53,17 @@ export default function PartPricingPanel({ part }: { part: any }) {
return user.hasViewRole(UserRoles.sales_order) && part?.salable;
}, [user, part]);
const [value, setValue] = useState<string[]>([panelOptions.overview]);
function doNavigation(panel: panelOptions) {
if (!value.includes(panel)) {
setValue([...value, panel]);
}
const element = document.getElementById(panel);
if (element) {
element.scrollIntoView();
}
}
return (
<Stack spacing="xs">
<LoadingOverlay visible={instanceQuery.isLoading} />
@ -62,9 +73,15 @@ export default function PartPricingPanel({ part }: { part: any }) {
</Alert>
)}
{pricing && (
<Accordion multiple defaultValue={['overview']}>
<Accordion multiple value={value} onChange={setValue}>
<PricingPanel
content={<PricingOverviewPanel part={part} pricing={pricing} />}
content={
<PricingOverviewPanel
part={part}
pricing={pricing}
doNavigation={doNavigation}
/>
}
label={panelOptions.overview}
title={t`Pricing Overview`}
visible={true}

View File

@ -1,13 +1,5 @@
import { t } from '@lingui/macro';
import {
Alert,
Anchor,
Group,
Paper,
SimpleGrid,
Stack,
Text
} from '@mantine/core';
import { Alert, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import {
IconBuildingWarehouse,
IconChartDonut,
@ -45,10 +37,12 @@ interface PricingOverviewEntry {
export default function PricingOverviewPanel({
part,
pricing
pricing,
doNavigation
}: {
part: any;
pricing: any;
doNavigation: (panel: panelOptions) => void;
}): ReactNode {
const columns: DataTableColumn<any>[] = useMemo(() => {
return [
@ -59,14 +53,9 @@ export default function PricingOverviewPanel({
return (
<Group position="left" spacing="xs">
{record.icon}
{record.name !== panelOptions.overall &&
record.name !== panelOptions.override ? (
<Anchor href={`#${record.name}`} weight={700}>
<Text weight={700} onClick={() => doNavigation(record.name)}>
{record.title}
</Anchor>
) : (
<Text weight={700}>{record.title}</Text>
)}
</Text>
</Group>
);
}