feat: add go to seedlot button in seedlot dashboard

bcgov · Sep 25, 2024 · 726f233 · 726f233
1 parent 545c686
commit 726f233
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 58 deletions.
diff --git a/frontend/src/components/SeedlotNavigator/index.tsx 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<string>('');
+  const [seedlotInputErr, setSeedlotInputErr] = useState<boolean>(false);
+
+  return (
+    <>
+      <Column className="no-padding-col" sm={4} md={6} lg={14} xlg={14}>
+        <TextInput
+          id="go-to-seedlot-input"
+          type="number"
+          labelText=""
+          placeholder="Enter seedlot number"
+          value={seedlotNumber}
+          invalid={seedlotInputErr}
+          invalidText="Please, enter a seedlot number"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setSeedlotInputErr(false);
+            setSeedlotNumber(e.target.value);
+          }}
+          onWheel={(e: React.ChangeEvent<HTMLInputElement>) => e.target.blur()}
+        />
+      </Column>
+      <Column sm={4} md={2} lg={2} xlg={2}>
+        <Button
+          kind="primary"
+          size="md"
+          renderIcon={ArrowRight}
+          onClick={() => {
+            if (seedlotNumber) {
+              navigate(addParamToPath(ROUTES.SEEDLOT_DETAILS, seedlotNumber));
+            } else {
+              setSeedlotInputErr(true);
+              focusById('go-to-seedlot-input');
+            }
+          }}
+        >
+          Go to seedlot
+        </Button>
+      </Column>
+    </>
+  );
+};
+
+export default SeedlotNavigator;
diff --git 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<string>('');
-  const [seedlotInputErr, setSeedlotInputErr] = useState<boolean>(false);
-
   useEffect(() => {
     if (!isTscAdmin) {
       navigate(ROUTES.FOUR_OH_FOUR);
@@ -42,7 +32,9 @@ const ReviewSeedlots = () => {
     <FlexGrid fullWidth className="review-seedlots-content">
       <Row className="review-seedlots-breadcrumb">
         <Breadcrumb>
-          <BreadcrumbItem onClick={() => navigate(ROUTES.SEEDLOTS)}>Seedlots</BreadcrumbItem>
+          <BreadcrumbItem onClick={() => navigate(ROUTES.SEEDLOTS)}>
+            Seedlots
+          </BreadcrumbItem>
         </Breadcrumb>
       </Row>
       <Row className="review-seedlots-title">
@@ -55,39 +47,7 @@ const ReviewSeedlots = () => {
         </Column>
       </Row>
       <Row className="go-to-seedlot-section">
-        <Column className="no-padding-col" sm={4} md={6} lg={14} xlg={14}>
-          <TextInput
-            id="go-to-seedlot-input"
-            type="number"
-            labelText=""
-            placeholder="Enter seedlot number"
-            value={seedlotNumber}
-            invalid={seedlotInputErr}
-            invalidText="Please, enter a seedlot number"
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              setSeedlotInputErr(false);
-              setSeedlotNumber(e.target.value);
-            }}
-            onWheel={(e: React.ChangeEvent<HTMLInputElement>) => e.target.blur()}
-          />
-        </Column>
-        <Column sm={4} md={2} lg={2} xlg={2}>
-          <Button
-            kind="primary"
-            size="md"
-            renderIcon={ArrowRight}
-            onClick={() => {
-              if (seedlotNumber) {
-                navigate(addParamToPath(ROUTES.SEEDLOT_DETAILS, seedlotNumber));
-              } else {
-                setSeedlotInputErr(true);
-                focusById('go-to-seedlot-input');
-              }
-            }}
-          >
-            Go to seedlot
-          </Button>
-        </Column>
+        <SeedlotNavigator />
       </Row>
       <div className="review-seedlots-table-wrapper">
         <Row className="review-seedlots-data-table-row">

diff --git 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 = () => {
     <Row className="recent-seedlots">
       <Column
         sm={4}
-        className={`recent-seedlots-title-section ${isTscAdmin ? 'review-seedlots-table-header' : ''}`}
+        className={`recent-seedlots-title-section ${
+          isTscAdmin ? 'review-seedlots-table-header' : ''
+        }`}
         onClick={() => {
           if (isTscAdmin) {
             navigate(ROUTES.TSC_SEEDLOTS_TABLE);
@@ -32,18 +35,30 @@ const RecentSeedlots = () => {
       >
         <div>
           <h2>{getTitle(isTscAdmin)}</h2>
-          <Subtitle text={getSubTitle(isTscAdmin)} className="recent-seedlots-subtitle" />
+          <Subtitle
+            text={getSubTitle(isTscAdmin)}
+            className="recent-seedlots-subtitle"
+          />
         </div>
-        {
-          isTscAdmin
-            ? (
-              <IconButton className="std-card-button" kind="ghost" label="Go" align="bottom" onClick={() => { navigate(ROUTES.TSC_SEEDLOTS_TABLE); }}>
-                <ArrowRight />
-              </IconButton>
-            )
-            : null
-        }
+        {isTscAdmin ? (
+          <IconButton
+            className="std-card-button"
+            kind="ghost"
+            label="Go"
+            align="bottom"
+            onClick={() => {
+              navigate(ROUTES.TSC_SEEDLOTS_TABLE);
+            }}
+          >
+            <ArrowRight />
+          </IconButton>
+        ) : null}
       </Column>
+
+      <Row className="recent-seedlots-navigator">
+        <SeedlotNavigator />
+      </Row>
+
       <Column sm={4} className="recent-seedlots-table">
         <SeedlotTable userId={userId} isTscAdmin={isTscAdmin} />
       </Column>

diff --git 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;
+  }
 }