-
-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
alice.juan
committed
Mar 27, 2024
1 parent
f4add08
commit 6b1a5be
Showing
4 changed files
with
112 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
123 changes: 69 additions & 54 deletions
123
taxonomy-editor-frontend/src/pages/project/search/ThreeOptionsSwitch.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,76 @@ | ||
| import { ToggleButton, ToggleButtonGroup, Typography } from "@mui/material" | ||
| import { ToggleButton, ToggleButtonGroup, Typography } from "@mui/material"; | ||
| import React, { Dispatch, SetStateAction } from "react"; | ||
|
|
||
| const toggleTheme = { | ||
| "& .MuiToggleButton-root": { | ||
| const toggleTheme = { | ||
| "& .MuiToggleButton-root": { | ||
| color: "#341100", | ||
| "&.Mui-selected": { | ||
| color: "#341100", | ||
| "&.Mui-selected": { | ||
| color: "#341100", | ||
| }, | ||
| borderColor: "rgba(0, 0, 0, 0.23)", | ||
| }, | ||
| }; | ||
| borderColor: "rgba(0, 0, 0, 0.23)", | ||
| }, | ||
| }; | ||
|
|
||
| type ThreeOptionsSwitchType = { | ||
| filterValue: string, | ||
| setFilterValue: Dispatch<SetStateAction<string>>, | ||
| options: {[key: string]: { text: string; isNegated: boolean}}; | ||
| setQ: Dispatch<SetStateAction<string>>; | ||
| keySearchTerm: string; | ||
| setCurrentPage: Dispatch<SetStateAction<number>>; | ||
| } | ||
|
|
||
| export const ThreeOptionsSwitch = ({filterValue, setFilterValue, options, setQ, keySearchTerm, setCurrentPage}:ThreeOptionsSwitchType) => { | ||
| filterValue: string; | ||
| setFilterValue: Dispatch<SetStateAction<string>>; | ||
| options: { [key: string]: { text: string; isNegated: boolean } }; | ||
| setQ: Dispatch<SetStateAction<string>>; | ||
| keySearchTerm: string; | ||
| setCurrentPage: Dispatch<SetStateAction<number>>; | ||
| }; | ||
|
|
||
| const handleChange = ( | ||
| event: React.MouseEvent<HTMLElement>, | ||
| newValue: string, | ||
| ) => { | ||
| setFilterValue(newValue); | ||
| setCurrentPage(1); | ||
| let newFilterExpression=""; | ||
| if (options[newValue].isNegated) { | ||
| newFilterExpression = ` is:not:${keySearchTerm}`; | ||
| } else { | ||
| newFilterExpression = ` is:${keySearchTerm}`; | ||
| } | ||
| setQ((prevQ) => { | ||
| prevQ = prevQ.replace(`is:not:${keySearchTerm}`,""); | ||
| prevQ = prevQ.replace(`is:${keySearchTerm}`,""); | ||
| return prevQ+newFilterExpression; | ||
| }); | ||
| }; | ||
| return ( | ||
| <div style={{ display: 'flex', flexDirection: 'column' }}> | ||
| <Typography variant="subtitle1" gutterBottom sx={{mb:0, m:"8px", color:"#341100"}}> | ||
| Taxonomy | ||
| </Typography> | ||
| <ToggleButtonGroup | ||
| sx={toggleTheme} | ||
| value={filterValue} | ||
| exclusive | ||
| onChange={handleChange} | ||
| aria-label="Platform" | ||
| > | ||
| {Object.entries(options).map(([value,option]) => ( | ||
| <ToggleButton key={value} value={value} sx={{height:"2em"}}>{option.text}</ToggleButton> | ||
| ))} | ||
| </ToggleButtonGroup> | ||
| </div> | ||
| ) | ||
| } | ||
| export const ThreeOptionsSwitch = ({ | ||
| filterValue, | ||
| setFilterValue, | ||
| options, | ||
| setQ, | ||
| keySearchTerm, | ||
| setCurrentPage, | ||
| }: ThreeOptionsSwitchType) => { | ||
| const handleChange = ( | ||
| event: React.MouseEvent<HTMLElement>, | ||
| newValue: string | ||
| ) => { | ||
| setFilterValue(newValue); | ||
| setCurrentPage(1); | ||
| let newFilterExpression = ""; | ||
| if (newValue) { | ||
| // one of the options is selected | ||
| if (options[newValue].isNegated) { | ||
| newFilterExpression = ` is:not:${keySearchTerm}`; | ||
| } else { | ||
| newFilterExpression = ` is:${keySearchTerm}`; | ||
| } | ||
| } | ||
| setQ((prevQ) => { | ||
| prevQ = prevQ.replace(`is:not:${keySearchTerm}`, ""); | ||
| prevQ = prevQ.replace(`is:${keySearchTerm}`, ""); | ||
| return prevQ + newFilterExpression; | ||
| }); | ||
| }; | ||
| return ( | ||
| <div style={{ display: "flex", flexDirection: "column" }}> | ||
| <Typography | ||
| variant="subtitle1" | ||
| gutterBottom | ||
| sx={{ mb: 0, m: "8px", color: "#341100" }} | ||
| > | ||
| Taxonomy | ||
| </Typography> | ||
| <ToggleButtonGroup | ||
| sx={toggleTheme} | ||
| value={filterValue} | ||
| exclusive | ||
| onChange={handleChange} | ||
| aria-label="Platform" | ||
| > | ||
| {Object.entries(options).map(([value, option]) => ( | ||
| <ToggleButton key={value} value={value} sx={{ height: "2em" }}> | ||
| {option.text} | ||
| </ToggleButton> | ||
| ))} | ||
| </ToggleButtonGroup> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters