DBC22-313: working name search component

bcgov · Feb 8, 2024 · 09302bb · 09302bb
1 parent 4d065ff
commit 09302bb
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 13 deletions.
diff --git a/src/frontend/src/pages/CamerasListPage.js b/src/frontend/src/pages/CamerasListPage.js
@@ -4,8 +4,10 @@ import { useSelector, useDispatch } from 'react-redux'
 import { memoize } from 'proxy-memoize'
 
 // Third party components
+import { AsyncTypeahead } from 'react-bootstrap-typeahead';
 import Button from 'react-bootstrap/Button';
 import Container from 'react-bootstrap/Container';
+import Form from 'react-bootstrap/Form';
 
 // Components and functions
 import { collator, getCameras, addCameraGroups } from '../Components/data/webcams';
@@ -32,8 +34,10 @@ export default function CamerasListPage() {
   const isInitialMount = useRef(true);
 
   // UseState hooks
-  const [routeEdit, setRouteEdit] = useState(!(selectedRoute && selectedRoute.routeFound));
+  const [displayedCameras, setDisplayedCameras] = useState(null);
   const [processedCameras, setProcessedCameras] = useState(null);
+  const [routeEdit, setRouteEdit] = useState(!(selectedRoute && selectedRoute.routeFound));
+  const [searchText, setSearchText] = useState('');
 
   // UseEffect hooks and data functions
   useEffect(() => {
@@ -84,6 +88,14 @@ export default function CamerasListPage() {
     }
   }, [selectedRoute]);
 
+  useEffect(() => {
+    const filteredCams = !searchText ? processedCameras :
+      processedCameras.filter((pc) => pc.name.toLowerCase().includes(searchText));
+
+    setDisplayedCameras(filteredCams);
+
+  }, [searchText, processedCameras]);
+
   return (
     <div className="cameras-page">
       <PageHeader
@@ -94,16 +106,31 @@ export default function CamerasListPage() {
       <Container className="outer-container">
         <Advisories />
 
-        <div className="route-display-container">
-          <RouteSearch routeEdit={routeEdit} />
-
-          {!routeEdit &&
-            <Button onClick={() => setRouteEdit(true)}>Change</Button>
-          }
+        <div className="controls-container">
+          <div className="route-display-container">
+            <RouteSearch routeEdit={routeEdit} />
+
+            {!routeEdit &&
+              <Button onClick={() => setRouteEdit(true)}>Change</Button>
+            }
+          </div>
+
+          <div className="search-container">
+            <AsyncTypeahead
+              id="camera-name-search"
+              isLoading={false}
+              onSearch={() => {}}
+              onInputChange={(text) => setSearchText(text)}
+              placeholder={"Find by camera name"}
+              inputProps={{
+                'aria-label': 'input field for camera name search',
+              }}
+            />
+          </div>
         </div>
       </Container>
 
-      <CameraList cameras={processedCameras}></CameraList>
+      <CameraList cameras={ displayedCameras ? displayedCameras : [] }></CameraList>
 
       <Footer />
     </div>

diff --git a/src/frontend/src/pages/CamerasListPage.scss b/src/frontend/src/pages/CamerasListPage.scss
@@ -3,20 +3,48 @@
 .outer-container {
   padding-bottom: 0;
 
-  .route-display-container {
+  .controls-container {
     display: flex;
     align-items: center;
 
-    .routing-container {
-      padding: 0;
+    @media (max-width: 768px) {
+      flex-direction: column;
+    }
+
+    .route-display-container {
+      display: flex;
+      align-items: center;
 
       @media (max-width: 768px) {
         width: 100%;
       }
+
+      .routing-container {
+        padding: 0;
+
+        @media (max-width: 768px) {
+          width: 100%;
+        }
+      }
+
+      button {
+        margin: 0 0 0 10px;
+      }
     }
 
-    button {
-      margin: 0 0 0 10px;
+    .search-container {
+      margin-left: 30px;
+      min-width: 360px;
+
+      @media (max-width: 768px) {
+        width: 100%;
+        margin-top: 15px;
+        margin-right: 30px;
+      }
+
+      .rbt-menu {
+        display: none !important;
+      }
     }
   }
 }