feat(frontend): is:external and is:not:external filter

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<boolean>(true);
+  const [taxonomyScope, setTaxonomyScope] = useState<string>("");
   const [chosenLanguagesCodes, setChosenLanguagesCodes] = useState<string[]>(
     []
   );
@@ -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"
       />
+      <ThreeOptionsSwitch filterValue={taxonomyScope} setFilterValue={setTaxonomyScope} options={{"in": {text:"IN", isNegated:true},"out":{text:"OUT",isNegated:false}}} setQ={setQ} keySearchTerm="external" setCurrentPage={setCurrentPage}/>
       <MultipleSelectFilter
         label="Translated into"
         filterValue={chosenLanguagesCodes}

taxonomy-editor-frontend/src/pages/project/search/ThreeOptionsSwitch.tsx

@@ -0,0 +1,61 @@
+import { ToggleButton, ToggleButtonGroup, Typography } from "@mui/material"
+import React, { Dispatch, SetStateAction } from "react";
+
+  const toggleTheme = {
+    "& .MuiToggleButton-root": {
+      color: "#341100",
+      "&.Mui-selected": {
+        color: "#341100",
+      },
+      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) => {
+
+    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>
+    )
+}