diff --git a/frontend/src/views/CONSEP/FavouriteActivity/FavouriteActivityModal.tsx b/frontend/src/views/CONSEP/FavouriteActivity/FavouriteActivityModal.tsx
index a272a11ca..39ed72002 100644
--- a/frontend/src/views/CONSEP/FavouriteActivity/FavouriteActivityModal.tsx
+++ b/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 = {
- Testing: 'Chemistry',
- Administrative: 'Tools',
- Withdrawal: 'StayInside',
- Processing: 'Industry',
- 'Seed and family lot': 'SoilMoistureGlobal'
-};
-
const FavouriteActivityModal = ({ open, setOpen }: FavouriteActivityModalProps) => {
const [selectedRows, setSelectedRows] = useState([]);
const [initActs, setInitActs] = useState([]);
+ const [searchOption, setSearchOption] = useState(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 (
{textConfig.description}
+
+
+ {
+ setSearchOption(e.selectedItem);
+ }}
+ />
+
+
+ ) => {
+ setSearchWord(e.target.value);
+ }}
+ />
+
+
+
+ Search
+
+
+
+
{
diff --git a/frontend/src/views/CONSEP/FavouriteActivity/constants.tsx b/frontend/src/views/CONSEP/FavouriteActivity/constants.tsx
index 49e7a900f..cb660433f 100644
--- a/frontend/src/views/CONSEP/FavouriteActivity/constants.tsx
+++ b/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 = [
+ 'All departments', 'Testing', 'Administrative', 'Withdrawal', 'Processing', 'Seed and family lot'
+];
+
+export const headerIconMap: Record = {
+ Testing: 'Chemistry',
+ Administrative: 'Tools',
+ Withdrawal: 'StayInside',
+ Processing: 'Industry',
+ 'Seed and family lot': 'SoilMoistureGlobal'
+};
diff --git a/frontend/src/views/CONSEP/FavouriteActivity/definitions.tsx b/frontend/src/views/CONSEP/FavouriteActivity/definitions.tsx
index e4cf859fe..28757a772 100644
--- a/frontend/src/views/CONSEP/FavouriteActivity/definitions.tsx
+++ b/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;
diff --git a/frontend/src/views/CONSEP/FavouriteActivity/index.tsx b/frontend/src/views/CONSEP/FavouriteActivity/index.tsx
index 3bb44b112..b7df914a2 100644
--- a/frontend/src/views/CONSEP/FavouriteActivity/index.tsx
+++ b/frontend/src/views/CONSEP/FavouriteActivity/index.tsx
@@ -63,10 +63,10 @@ const FavouriteActivity = () => {
- You don’t have any favorites to show yet!
+ You don’t have any favourites to show yet!
- 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 'Add favourite activity'
+ or by clicking on the heart icon on each page.
setOpen(true)} className="consep-fav-non-content-btn" renderIcon={Add}>
Add favourite activity
diff --git a/frontend/src/views/CONSEP/FavouriteActivity/styles.scss b/frontend/src/views/CONSEP/FavouriteActivity/styles.scss
index d130767bc..120540668 100644
--- a/frontend/src/views/CONSEP/FavouriteActivity/styles.scss
+++ b/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;
+}