feat: search bar in fav activity modal

frontend/src/views/CONSEP/FavouriteActivity/FavouriteActivityModal.tsx

@@ -3,17 +3,22 @@ import React, { useEffect, useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 
 import {
-  Modal, Table, TableHead, TableRow, TableHeader, Pagination,
-  TableBody, TableCell, TableContainer, DataTable, TableSelectRow, TableSelectAll
+  Modal, Table, TableHead, TableRow, TableHeader, Pagination, TableBody,
+  TableCell, TableContainer, DataTable, TableSelectRow, TableSelectAll,
+  TextInput, Dropdown, Button, Column, Grid
 } from '@carbon/react';
 import * as Icons from '@carbon/icons-react';
 
 import { getFavAct, postFavAct, deleteFavAct } from '../../../api-service/favouriteActivitiesAPI';
 import { FavActivityPostType } from '../../../types/FavActivityTypes';
 
-import { textConfig, favActHeaders } from './constants';
+import ComboBoxEvent from '../../../types/ComboBoxEvent';
 import {
-  HeaderProps, RowProps, FavouriteActivityModalProps, FavActivityTableProps
+  textConfig, favActHeaders, searchOptions, headerIconMap
+} from './constants';
+import {
+  HeaderProps, RowProps, FavouriteActivityModalProps,
+  FavActivityTableProps
 } from './definitions';
 import './styles.scss';
 
@@ -27,23 +32,16 @@ const allRows: RowProps[] = Object.entries(FavouriteActivityMap)
     department: activity.department || 'Unknown'
   }));
 
-type Department = 'Testing' | 'Administrative' | 'Withdrawal' | 'Processing' | 'Seed and family lot';
-
-const headerIconMap: Record<Department, string> = {
-  Testing: 'Chemistry',
-  Administrative: 'Tools',
-  Withdrawal: 'StayInside',
-  Processing: 'Industry',
-  'Seed and family lot': 'SoilMoistureGlobal'
-};
-
 const FavouriteActivityModal = ({ open, setOpen }: FavouriteActivityModalProps) => {
   const [selectedRows, setSelectedRows] = useState<string[]>([]);
   const [initActs, setInitActs] = useState<string[]>([]);
+  const [searchOption, setSearchOption] = useState<string>(searchOptions[0]);
+  const [searchWord, setSearchWord] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(10);
+  const [filteredRows, setFilteredRows] = useState(allRows);
 
-  const currentRows = allRows.slice(
+  const currentRows = filteredRows.slice(
     (currentPage - 1) * itemsPerPage,
     currentPage * itemsPerPage
   );
@@ -101,6 +99,17 @@ const FavouriteActivityModal = ({ open, setOpen }: FavouriteActivityModalProps)
     [favActQuery.isSuccess]
   );
 
+  useEffect(() => {
+    if (searchWord) {
+      const lowerCaseKeyWord = searchWord.toLowerCase();
+      let rows = allRows.filter((r) => r.activityName.toLowerCase().includes(lowerCaseKeyWord));
+      if (searchOption !== 'All departments') {
+        rows = rows.filter((row) => row.department === searchOption);
+      }
+      setFilteredRows(rows);
+    }
+  }, [searchWord, searchOption]);
+
   return (
     <Modal
       className="favourite-activity-modal"
@@ -117,6 +126,38 @@ const FavouriteActivityModal = ({ open, setOpen }: FavouriteActivityModalProps)
       <p className="favourite-activity-modal-description">
         {textConfig.description}
       </p>
+      <Grid fullWidth className="fav-activity-search-row">
+        <Column sm={1} md={3} lg={4} xlg={4}>
+          <Dropdown
+            id="client-search-dropdown"
+            label=""
+            aria-label="Client Search Field Select Dropdown"
+            titleText=""
+            items={searchOptions}
+            selectedItem={searchOption}
+            onChange={(e: ComboBoxEvent) => {
+              setSearchOption(e.selectedItem);
+            }}
+          />
+        </Column>
+        <Column sm={2} md={3} lg={10} xlg={10}>
+          <TextInput
+            id="client-search-input"
+            labelText=""
+            aria-label="Favourite Activity Search Input"
+            placeholder="Search for favourite activity"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setSearchWord(e.target.value);
+            }}
+          />
+        </Column>
+        <Column sm={1} md={2} lg={2} xlg={2}>
+          <Button size="md" className="fav-activity-search-btn">
+            Search
+            <Icons.Search className="fav-activity-search-btn-icon" />
+          </Button>
+        </Column>
+      </Grid>
       <DataTable
         rows={currentRows}
         headers={favActHeaders}
@@ -169,7 +210,7 @@ const FavouriteActivityModal = ({ open, setOpen }: FavouriteActivityModalProps)
       />
 
       <Pagination
-        totalItems={allRows.length}
+        totalItems={filteredRows.length}
         pageSize={itemsPerPage}
         pageSizes={[5, 10, 15, 20]}
         onChange={({ page, pageSize }: { page: number; pageSize: number }) => {

frontend/src/views/CONSEP/FavouriteActivity/constants.tsx

@@ -1,4 +1,4 @@
-import { HeaderProps } from './definitions';
+import { HeaderProps, Department } from './definitions';
 
 export const textConfig = {
   title: 'Add favourite activity',
@@ -18,3 +18,15 @@ export const favActHeaders: HeaderProps[] = [
     key: 'department',
     header: 'Department'
   }];
+
+export const searchOptions: Array<string> = [
+  'All departments', 'Testing', 'Administrative', 'Withdrawal', 'Processing', 'Seed and family lot'
+];
+
+export const headerIconMap: Record<Department, string> = {
+  Testing: 'Chemistry',
+  Administrative: 'Tools',
+  Withdrawal: 'StayInside',
+  Processing: 'Industry',
+  'Seed and family lot': 'SoilMoistureGlobal'
+};

frontend/src/views/CONSEP/FavouriteActivity/definitions.tsx

@@ -27,3 +27,7 @@ export type FavActivityTableProps = {
   getSelectionProps: (props: { row: RowProps }) => any;
   getRowProps: (props: { row: RowProps }) => any;
 };
+
+export type Department = 'Testing' | 'Administrative' | 'Withdrawal' | 'Processing' | 'Seed and family lot';
+
+export type FavActivitySearchOptions = 'All departments' | Department;

frontend/src/views/CONSEP/FavouriteActivity/index.tsx

@@ -63,10 +63,10 @@ const FavouriteActivity = () => {
           <Row className="consep-fav-row">
             <Column className="consep-fav-non-content-section">
               <UserInsights className="consep-fav-non-content-icon" />
-              <p className="consep-fav-non-content-title">You don’t have any favorites to show yet!</p>
+              <p className="consep-fav-non-content-title">You don’t have any favourites to show yet!</p>
               <p className="consep-fav-non-content-subtitle">
-                You can favorite your activities by clicking on add
-                favorite activity or by clicking on the heart icon inside each page
+                You can favourite your activities by clicking on &apos;Add favourite activity&apos;
+                or by clicking on the heart icon on each page.
               </p>
               <Button onClick={() => setOpen(true)} className="consep-fav-non-content-btn" renderIcon={Add}>
                 Add favourite activity

frontend/src/views/CONSEP/FavouriteActivity/styles.scss

@@ -118,13 +118,28 @@ th > .bx--checkbox--inline > .bx--checkbox-label {
   .consep-fav-non-content-btn {
     margin-top: 2rem;
     max-width: 16rem;
-    width: fit-content;
-    white-space: nowrap;
+  }
+}
+
+.fav-activity-search-row {
+  margin: 0 0 1.5rem 0;
+  padding: 0;
+
+  .#{vars.$bcgov-prefix}--css-grid-column {
+    padding: 0;
+    margin: 0 0.1rem 0 0;
   }
 
-  .consep-fav-non-content-icon {
-    width: 11rem;
-    height: 11em;
-    color: colors.$blue-70;
+  .fav-activity-search-btn {
+    width: 100%;
+    .fav-activity-search-btn-icon {
+      color: colors.$white;
+    }
   }
 }
+
+.consep-fav-non-content-icon {
+  width: 11rem;
+  height: 11rem;
+  color: colors.$blue-70;
+}