add Errors tab
move calculation content to file
This commit is contained in:
parent
65b4c95779
commit
29fdb70509
@ -1,4 +0,0 @@
|
||||
export * from './Form';
|
||||
export * from './Layout';
|
||||
export * from './Output';
|
||||
export * from './Settings';
|
||||
77
apps/web/Components/Calculation/index.tsx
Normal file
77
apps/web/Components/Calculation/index.tsx
Normal file
@ -0,0 +1,77 @@
|
||||
import { Form } from './Form';
|
||||
import { Layout } from './Layout';
|
||||
import { Output } from './Output';
|
||||
import Validation from './Output/Validation';
|
||||
import { Settings } from './Settings';
|
||||
import { Notification } from '@/Components/Common';
|
||||
import { NavigationBar, Tabs } from '@/Components/Layout/Navigation';
|
||||
import { NavigationProvider } from '@/context/navigation';
|
||||
import { Media } from '@/styles/media';
|
||||
import { getPageTitle } from '@/utils/page';
|
||||
import Head from 'next/head';
|
||||
import {
|
||||
BarChartOutlined,
|
||||
CalculatorOutlined,
|
||||
ProfileOutlined,
|
||||
WarningOutlined,
|
||||
} from 'ui/elements/icons';
|
||||
|
||||
const defaultIconStyle = { fontSize: '1.2rem' };
|
||||
|
||||
export const tabs = [
|
||||
{
|
||||
Component: Settings,
|
||||
icon: <ProfileOutlined style={defaultIconStyle} />,
|
||||
key: 'settings',
|
||||
title: 'Интерес/Расчет',
|
||||
},
|
||||
{
|
||||
Component: Form,
|
||||
icon: <CalculatorOutlined style={defaultIconStyle} />,
|
||||
key: 'form',
|
||||
title: 'Параметры',
|
||||
},
|
||||
{
|
||||
Component: Output,
|
||||
icon: <BarChartOutlined style={defaultIconStyle} />,
|
||||
key: 'output',
|
||||
title: 'Результаты',
|
||||
},
|
||||
{
|
||||
Component: Validation.Component,
|
||||
icon: <WarningOutlined style={defaultIconStyle} />,
|
||||
key: Validation.id,
|
||||
title: Validation.title,
|
||||
},
|
||||
];
|
||||
|
||||
type ContentProps = {
|
||||
readonly initHooks: () => void;
|
||||
readonly title: string;
|
||||
};
|
||||
|
||||
export function Content({ initHooks, title }: ContentProps) {
|
||||
initHooks();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{getPageTitle(title)}</title>
|
||||
</Head>
|
||||
<Notification />
|
||||
<Media lessThan="laptop">
|
||||
<NavigationProvider>
|
||||
<Tabs tabs={tabs} />
|
||||
<NavigationBar />
|
||||
</NavigationProvider>
|
||||
</Media>
|
||||
<Media greaterThanOrEqual="laptop">
|
||||
<Layout>
|
||||
{tabs.map(({ Component, key }) => (
|
||||
<Component key={key} />
|
||||
))}
|
||||
</Layout>
|
||||
</Media>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -8,7 +8,7 @@ import { message as antdMessage, notification as antdNotification } from 'ui/ele
|
||||
export let message: Readonly<MessageInstance>;
|
||||
export let notification: Readonly<NotificationInstance>;
|
||||
|
||||
export function Notification({ children }: { readonly children: ReactNode }) {
|
||||
export function Notification({ children }: { readonly children?: ReactNode }) {
|
||||
const [messageApi, messageContextHolder] = antdMessage.useMessage({
|
||||
duration: 1.2,
|
||||
maxCount: 3,
|
||||
|
||||
@ -1,65 +1,9 @@
|
||||
import initializeApollo from '@/apollo/client';
|
||||
import * as Calculation from '@/Components/Calculation';
|
||||
import { Notification } from '@/Components/Common';
|
||||
import { Content } from '@/Components/Calculation';
|
||||
import { Error } from '@/Components/Common/Error';
|
||||
import { NavigationBar, Tabs } from '@/Components/Layout/Navigation';
|
||||
import { NavigationProvider } from '@/context/navigation';
|
||||
import * as hooks from '@/process/hooks';
|
||||
import { Media } from '@/styles/media';
|
||||
import { getPageTitle } from '@/utils/page';
|
||||
import { makeGetUserType } from '@/utils/user';
|
||||
import { dehydrate, QueryClient } from '@tanstack/react-query';
|
||||
import Head from 'next/head';
|
||||
import { AreaChartOutlined, CalculatorOutlined, ProfileOutlined } from 'ui/elements/icons';
|
||||
|
||||
const defaultIconStyle = { fontSize: '1.2rem' };
|
||||
|
||||
export const tabs = [
|
||||
{
|
||||
Component: Calculation.Settings,
|
||||
icon: <ProfileOutlined style={defaultIconStyle} />,
|
||||
key: 'settings',
|
||||
title: 'Интерес/Расчет',
|
||||
},
|
||||
{
|
||||
Component: Calculation.Form,
|
||||
icon: <CalculatorOutlined style={defaultIconStyle} />,
|
||||
key: 'form',
|
||||
title: 'Параметры',
|
||||
},
|
||||
{
|
||||
Component: Calculation.Output,
|
||||
icon: <AreaChartOutlined style={defaultIconStyle} />,
|
||||
key: 'output',
|
||||
title: 'Результаты',
|
||||
},
|
||||
];
|
||||
|
||||
export function Content({ initHooks, title }) {
|
||||
initHooks();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{getPageTitle(title)}</title>
|
||||
</Head>
|
||||
<Notification />
|
||||
<Media lessThan="laptop">
|
||||
<NavigationProvider>
|
||||
<Tabs tabs={tabs} />
|
||||
<NavigationBar />
|
||||
</NavigationProvider>
|
||||
</Media>
|
||||
<Media greaterThanOrEqual="laptop">
|
||||
<Calculation.Layout>
|
||||
{tabs.map(({ Component, key }) => (
|
||||
<Component key={key} />
|
||||
))}
|
||||
</Calculation.Layout>
|
||||
</Media>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Page(props) {
|
||||
if (props.statusCode !== 200) return <Error {...props} />;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { Content } from '.';
|
||||
import initializeApollo from '@/apollo/client';
|
||||
import { Content } from '@/Components/Calculation';
|
||||
import { Error } from '@/Components/Common/Error';
|
||||
import { NavigationProvider } from '@/context/navigation';
|
||||
import * as hooks from '@/process/hooks';
|
||||
import { makeGetUserType } from '@/utils/user';
|
||||
import { dehydrate, QueryClient } from '@tanstack/react-query';
|
||||
@ -10,18 +9,16 @@ export default function Page(props) {
|
||||
if (props.statusCode !== 200) return <Error {...props} />;
|
||||
|
||||
return (
|
||||
<NavigationProvider>
|
||||
<Content
|
||||
title="Без ограничений"
|
||||
initHooks={() => {
|
||||
hooks.useSentryScope();
|
||||
hooks.useMainData();
|
||||
hooks.useGetUsers();
|
||||
hooks.useInsuranceData();
|
||||
hooks.useReactions();
|
||||
}}
|
||||
/>
|
||||
</NavigationProvider>
|
||||
<Content
|
||||
title="Без ограничений"
|
||||
initHooks={() => {
|
||||
hooks.useSentryScope();
|
||||
hooks.useMainData();
|
||||
hooks.useGetUsers();
|
||||
hooks.useInsuranceData();
|
||||
hooks.useReactions();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user