diff --git a/taxonomy-editor-frontend/src/pages/project/search/FiltersArea.tsx b/taxonomy-editor-frontend/src/pages/project/search/FiltersArea.tsx index dec9acc1..27199424 100644 --- a/taxonomy-editor-frontend/src/pages/project/search/FiltersArea.tsx +++ b/taxonomy-editor-frontend/src/pages/project/search/FiltersArea.tsx @@ -10,6 +10,7 @@ import { } from "react"; import ISO6391 from "iso-639-1"; import { EntryNodeSearchResult } from "@/client"; +import { ThreeOptionsSwitch } from "./ThreeOptionsSwitch"; const checkboxTheme = { color: "#201a17", @@ -30,6 +31,7 @@ export const FiltersArea = ({ filters, }: FiltersAreaType) => { const [isRootNodesChecked, setIsRootNodesChecked] = useState(true); + const [taxonomyScope, setTaxonomyScope] = useState(""); const [chosenLanguagesCodes, setChosenLanguagesCodes] = useState( [] ); @@ -42,13 +44,13 @@ export const FiltersArea = ({ const initializeFilters = (): { isRootNodesChecked: boolean; - isModifiedChecked: boolean; + taxonomyScopeMode: string; //"in" -> in taxonomy, "out" -> outside taxonomy, "" -> filter not selected chosenLanguagesCodes: string[]; withoutChosenLanguagesCodes: string[]; } => { return { isRootNodesChecked: false, - isModifiedChecked: false, + taxonomyScopeMode: "", chosenLanguagesCodes: [], withoutChosenLanguagesCodes: [], }; @@ -61,8 +63,10 @@ export const FiltersArea = ({ case "is": if (filter.filterValue === "root") { filtersStates.isRootNodesChecked = true; - } else if (filter.filterValue === "modified") { - filtersStates.isModifiedChecked = true; + } else if (filter.filterValue === "external") { + filtersStates.taxonomyScopeMode = "out"; + } else if (filter.filterValue === "not:external") { + filtersStates.taxonomyScopeMode = "in"; } break; case "language": @@ -79,6 +83,7 @@ export const FiltersArea = ({ } } setIsRootNodesChecked(filtersStates.isRootNodesChecked); + setTaxonomyScope(filtersStates.taxonomyScopeMode); setChosenLanguagesCodes(filtersStates.chosenLanguagesCodes); setWithoutChosenLanguagesCodes(filtersStates.withoutChosenLanguagesCodes); }, []); @@ -135,6 +140,7 @@ export const FiltersArea = ({ } label="Root nodes" /> + >, + options: {[key: string]: { text: string; isNegated: boolean}}; + setQ: Dispatch>; + keySearchTerm: string; + setCurrentPage: Dispatch>; +} + +export const ThreeOptionsSwitch = ({filterValue, setFilterValue, options, setQ, keySearchTerm, setCurrentPage}:ThreeOptionsSwitchType) => { + + const handleChange = ( + event: React.MouseEvent, + 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 ( +
+ + Taxonomy + + + {Object.entries(options).map(([value,option]) => ( + {option.text} + ))} + +
+ ) +} \ No newline at end of file