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); + }} + /> + + + + + { 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.