diff --git a/frontend/src/components/SeedlotNavigator/index.tsx b/frontend/src/components/SeedlotNavigator/index.tsx new file mode 100644 index 000000000..84cc00175 --- /dev/null +++ b/frontend/src/components/SeedlotNavigator/index.tsx @@ -0,0 +1,58 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import { + Button, TextInput, Column +} from '@carbon/react'; +import { ArrowRight } from '@carbon/icons-react'; +import ROUTES from '../../routes/constants'; + +import { addParamToPath } from '../../utils/PathUtils'; +import focusById from '../../utils/FocusUtils'; + +const SeedlotNavigator = () => { + const navigate = useNavigate(); + + const [seedlotNumber, setSeedlotNumber] = useState(''); + const [seedlotInputErr, setSeedlotInputErr] = useState(false); + + return ( + <> + + ) => { + setSeedlotInputErr(false); + setSeedlotNumber(e.target.value); + }} + onWheel={(e: React.ChangeEvent) => e.target.blur()} + /> + + + + + + ); +}; + +export default SeedlotNavigator; diff --git a/frontend/src/views/Seedlot/ReviewSeedlots/index.tsx b/frontend/src/views/Seedlot/ReviewSeedlots/index.tsx index 87058a330..440039d18 100644 --- a/frontend/src/views/Seedlot/ReviewSeedlots/index.tsx +++ b/frontend/src/views/Seedlot/ReviewSeedlots/index.tsx @@ -1,26 +1,19 @@ -import React, { - useContext, - useEffect, - useState -} from 'react'; +import React, { useContext, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { - TextInput, - Button, Row, Column, Breadcrumb, BreadcrumbItem, FlexGrid } from '@carbon/react'; -import { ArrowRight } from '@carbon/icons-react'; import PageTitle from '../../../components/PageTitle'; import AuthContext from '../../../contexts/AuthContext'; import SeedlotTable from '../../../components/SeedlotTable'; +import SeedlotNavigator from '../../../components/SeedlotNavigator'; + import ROUTES from '../../../routes/constants'; -import { addParamToPath } from '../../../utils/PathUtils'; -import focusById from '../../../utils/FocusUtils'; import './styles.scss'; @@ -29,9 +22,6 @@ const ReviewSeedlots = () => { const { user, isTscAdmin } = useContext(AuthContext); const userId = user?.userId ?? ''; - const [seedlotNumber, setSeedlotNumber] = useState(''); - const [seedlotInputErr, setSeedlotInputErr] = useState(false); - useEffect(() => { if (!isTscAdmin) { navigate(ROUTES.FOUR_OH_FOUR); @@ -42,7 +32,9 @@ const ReviewSeedlots = () => { - navigate(ROUTES.SEEDLOTS)}>Seedlots + navigate(ROUTES.SEEDLOTS)}> + Seedlots + @@ -55,39 +47,7 @@ const ReviewSeedlots = () => { - - ) => { - setSeedlotInputErr(false); - setSeedlotNumber(e.target.value); - }} - onWheel={(e: React.ChangeEvent) => e.target.blur()} - /> - - - - +
diff --git a/frontend/src/views/Seedlot/SeedlotDashboard/RecentSeedlots/index.tsx b/frontend/src/views/Seedlot/SeedlotDashboard/RecentSeedlots/index.tsx index ba3129cbc..497ce6002 100644 --- a/frontend/src/views/Seedlot/SeedlotDashboard/RecentSeedlots/index.tsx +++ b/frontend/src/views/Seedlot/SeedlotDashboard/RecentSeedlots/index.tsx @@ -8,6 +8,7 @@ import ROUTES from '../../../../routes/constants'; import AuthContext from '../../../../contexts/AuthContext'; import SeedlotTable from '../../../../components/SeedlotTable'; import Subtitle from '../../../../components/Subtitle'; +import SeedlotNavigator from '../../../../components/SeedlotNavigator'; import { getSubTitle, getTitle } from './constants'; @@ -23,7 +24,9 @@ const RecentSeedlots = () => { { if (isTscAdmin) { navigate(ROUTES.TSC_SEEDLOTS_TABLE); @@ -32,18 +35,30 @@ const RecentSeedlots = () => { >

{getTitle(isTscAdmin)}

- +
- { - isTscAdmin - ? ( - { navigate(ROUTES.TSC_SEEDLOTS_TABLE); }}> - - - ) - : null - } + {isTscAdmin ? ( + { + navigate(ROUTES.TSC_SEEDLOTS_TABLE); + }} + > + + + ) : null}
+ + + + + diff --git a/frontend/src/views/Seedlot/SeedlotDashboard/RecentSeedlots/styles.scss b/frontend/src/views/Seedlot/SeedlotDashboard/RecentSeedlots/styles.scss index 41be90bfc..667edb9d8 100644 --- a/frontend/src/views/Seedlot/SeedlotDashboard/RecentSeedlots/styles.scss +++ b/frontend/src/views/Seedlot/SeedlotDashboard/RecentSeedlots/styles.scss @@ -38,4 +38,11 @@ background-color: var(--#{vars.$bcgov-prefix}-layer-hover-01); cursor: pointer; } + + .recent-seedlots-navigator { + display: flex; + flex: 0 0 100%; + justify-content: space-between; + margin: 0.5rem 0 1.5rem 0; + } }