From 726f2335bac0ca6b323fa3df3d542eaf35fbb7ba Mon Sep 17 00:00:00 2001 From: Xiao Peng Date: Wed, 25 Sep 2024 15:22:15 -0700 Subject: [PATCH 1/8] feat: add go to seedlot button in seedlot dashboard --- .../src/components/SeedlotNavigator/index.tsx | 58 +++++++++++++++++++ .../views/Seedlot/ReviewSeedlots/index.tsx | 54 +++-------------- .../SeedlotDashboard/RecentSeedlots/index.tsx | 37 ++++++++---- .../RecentSeedlots/styles.scss | 7 +++ 4 files changed, 98 insertions(+), 58 deletions(-) create mode 100644 frontend/src/components/SeedlotNavigator/index.tsx 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; + } } From da2a0d33c6383a802865bb7e7ebce53ef048c2d6 Mon Sep 17 00:00:00 2001 From: Xiao Peng Date: Thu, 26 Sep 2024 15:35:32 -0700 Subject: [PATCH 2/8] feat: refactor seedlot nav component and add it to my seedslot page --- .../src/components/SeedlotNavigator/index.tsx | 18 ++++++++++++------ frontend/src/utils/NumberUtils.ts | 2 ++ .../src/views/Seedlot/MySeedlots/index.tsx | 4 ++++ .../src/views/Seedlot/MySeedlots/styles.scss | 5 +++++ 4 files changed, 23 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/SeedlotNavigator/index.tsx b/frontend/src/components/SeedlotNavigator/index.tsx index 84cc00175..40fedcfcb 100644 --- a/frontend/src/components/SeedlotNavigator/index.tsx +++ b/frontend/src/components/SeedlotNavigator/index.tsx @@ -9,27 +9,33 @@ import ROUTES from '../../routes/constants'; import { addParamToPath } from '../../utils/PathUtils'; import focusById from '../../utils/FocusUtils'; +import { isNumeric } from '../../utils/NumberUtils'; const SeedlotNavigator = () => { const navigate = useNavigate(); const [seedlotNumber, setSeedlotNumber] = useState(''); - const [seedlotInputErr, setSeedlotInputErr] = useState(false); + const [errorMessage, setErrorMessage] = useState(''); return ( <> ) => { - setSeedlotInputErr(false); + const inputValue = e.target.value; + if (inputValue && !isNumeric(inputValue)) { + setErrorMessage('Numbers only'); + return; + } + setSeedlotNumber(e.target.value); + setErrorMessage(''); }} onWheel={(e: React.ChangeEvent) => e.target.blur()} /> @@ -43,7 +49,7 @@ const SeedlotNavigator = () => { if (seedlotNumber) { navigate(addParamToPath(ROUTES.SEEDLOT_DETAILS, seedlotNumber)); } else { - setSeedlotInputErr(true); + setErrorMessage('Please enter a seedlot number'); focusById('go-to-seedlot-input'); } }} diff --git a/frontend/src/utils/NumberUtils.ts b/frontend/src/utils/NumberUtils.ts index 7bd49cbbe..60d3933d4 100644 --- a/frontend/src/utils/NumberUtils.ts +++ b/frontend/src/utils/NumberUtils.ts @@ -7,3 +7,5 @@ export const isFloatWithinRange = (value: string, min: string, max: string): boo new BigNumber(value).isGreaterThanOrEqualTo(min) && new BigNumber(value).isLessThanOrEqualTo(max) ); + +export const isNumeric = (value: string) => /^-?\d+$/.test(value); diff --git a/frontend/src/views/Seedlot/MySeedlots/index.tsx b/frontend/src/views/Seedlot/MySeedlots/index.tsx index 618b47c42..f38f87631 100644 --- a/frontend/src/views/Seedlot/MySeedlots/index.tsx +++ b/frontend/src/views/Seedlot/MySeedlots/index.tsx @@ -17,6 +17,7 @@ import SeedlotTable from '../../../components/SeedlotTable'; import ROUTES from '../../../routes/constants'; import useWindowSize from '../../../hooks/UseWindowSize'; import { MEDIUM_SCREEN_WIDTH } from '../../../shared-constants/shared-constants'; +import SeedlotNavigator from '../../../components/SeedlotNavigator'; import { tableText } from './constants'; @@ -56,6 +57,9 @@ const MySeedlots = () => { + + + Date: Wed, 2 Oct 2024 14:47:24 -0700 Subject: [PATCH 3/8] fix: styling --- frontend/src/components/SeedlotNavigator/index.tsx | 10 ++++++++-- .../src/components/SeedlotNavigator/styles.scss | 14 ++++++++++++++ frontend/src/utils/NumberUtils.ts | 2 +- frontend/src/views/Seedlot/MySeedlots/styles.scss | 4 ++-- .../SeedlotDashboard/RecentSeedlots/index.tsx | 10 +++++----- .../SeedlotDashboard/RecentSeedlots/styles.scss | 6 ++---- 6 files changed, 32 insertions(+), 14 deletions(-) create mode 100644 frontend/src/components/SeedlotNavigator/styles.scss diff --git a/frontend/src/components/SeedlotNavigator/index.tsx b/frontend/src/components/SeedlotNavigator/index.tsx index 40fedcfcb..285dc8fa5 100644 --- a/frontend/src/components/SeedlotNavigator/index.tsx +++ b/frontend/src/components/SeedlotNavigator/index.tsx @@ -6,20 +6,25 @@ import { } from '@carbon/react'; import { ArrowRight } from '@carbon/icons-react'; import ROUTES from '../../routes/constants'; +import useWindowSize from '../../hooks/UseWindowSize'; +import { MEDIUM_SCREEN_WIDTH } from '../../shared-constants/shared-constants'; import { addParamToPath } from '../../utils/PathUtils'; import focusById from '../../utils/FocusUtils'; import { isNumeric } from '../../utils/NumberUtils'; +import './styles.scss'; + const SeedlotNavigator = () => { const navigate = useNavigate(); + const windowSize = useWindowSize(); const [seedlotNumber, setSeedlotNumber] = useState(''); const [errorMessage, setErrorMessage] = useState(''); return ( <> - + { onWheel={(e: React.ChangeEvent) => e.target.blur()} /> - +