From b78827037a97f617ceae9620b8bc1530ffc2c877 Mon Sep 17 00:00:00 2001
From: Jad <jad.saad@aot-technologies.com>
Date: Wed, 13 Dec 2023 14:57:39 -0800
Subject: [PATCH] Enhancements for filterselect and name filter

---
 .../shared/filterSelect/FilterSelect.tsx      | 43 ++++++-------------
 epictrack-web/src/styles/theme.tsx            |  1 +
 .../src/utils/MatchingTextHighlight.tsx       |  5 ++-
 3 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/epictrack-web/src/components/shared/filterSelect/FilterSelect.tsx b/epictrack-web/src/components/shared/filterSelect/FilterSelect.tsx
index 029cdc964..cb429114e 100644
--- a/epictrack-web/src/components/shared/filterSelect/FilterSelect.tsx
+++ b/epictrack-web/src/components/shared/filterSelect/FilterSelect.tsx
@@ -9,21 +9,8 @@ import SingleValue from "./components/SingleValueContainer";
 import DropdownIndicator from "./components/DropDownIndicator";
 import { MET_Header_Font_Weight_Regular } from "../../../styles/constants";
 
-// const useStyle = makeStyles({
-//   infoSelect: {
-//     pointerEvents: "auto",
-//     borderRadius: "4px",
-//     "& > div:first-child": {
-//       paddingRight: 0,
-//     },
-//     "&:hover": {
-//       backgroundColor: Palette.neutral.bg.main,
-//     },
-//   },
-// });
-
+const INPUT_SIZE = "0.875rem";
 const FilterSelect = (props: SelectProps) => {
-  // const classes = useStyle();
   const { name, isMulti, defaultValue } = props;
   const standardDefault = isMulti ? [] : "";
   const [options, setOptions] = React.useState<OptionType[]>([]);
@@ -92,7 +79,6 @@ const FilterSelect = (props: SelectProps) => {
   };
 
   const applyFilters = () => {
-    // header.column.setFilterValue(selectedOptions);
     if (props.filterAppliedCallback) {
       props.filterAppliedCallback(selectedOptions);
     }
@@ -117,7 +103,6 @@ const FilterSelect = (props: SelectProps) => {
   const clearFilters = () => {
     setSelectedOptions([]);
     setSelectValue(isMulti ? [] : "");
-    // header.column.setFilterValue(isMulti ? [] : "");
     if (props.filterClearedCallback) {
       props.filterClearedCallback(isMulti ? [] : "");
     }
@@ -139,6 +124,16 @@ const FilterSelect = (props: SelectProps) => {
     setOptions(filterOptions);
   }, [props.options]);
 
+  const isSearchable = () => {
+    if (props.isSearchable !== undefined) return props.isSearchable;
+
+    if (selectValue instanceof Array) {
+      return selectValue.length === 0;
+    }
+
+    return !selectValue;
+  };
+
   return (
     <Select
       value={selectValue}
@@ -196,12 +191,6 @@ const FilterSelect = (props: SelectProps) => {
               ? Palette.primary.accent.light
               : Palette.neutral.accent.light,
           boxShadow: "none",
-          // "&:hover": {
-          //   borderColor:
-          //     props.isFocused || props.menuIsOpen
-          //       ? Palette.primary.accent.light
-          //       : "transparent",
-          // },
           ...(props.selectProps.filterProps?.variant === "bar" && {
             borderColor: props.isFocused
               ? Palette.primary.accent.light
@@ -219,7 +208,7 @@ const FilterSelect = (props: SelectProps) => {
           ...base,
           fontWeight: MET_Header_Font_Weight_Regular,
           color: Palette.neutral.light,
-          fontSize: "0.875rem",
+          fontSize: INPUT_SIZE,
           lineHeight: "1rem",
           ...(props.selectProps.filterProps?.variant == "bar" && {
             color: Palette.primary.accent.main,
@@ -234,20 +223,16 @@ const FilterSelect = (props: SelectProps) => {
         input: (base, props) => ({
           ...base,
           fontWeight: "400",
+          fontSize: INPUT_SIZE,
         }),
       }}
       isClearable={false}
       menuPortalTarget={document.body}
       controlShouldRenderValue={props.controlShouldRenderValue}
-      // className={clsx({
-      //   [classes.infoSelect]: props.info,
-      // })}
-      // classNames={{
-      //   control: () => (props.info ? classes.infoSelect : ""),
-      // }}
       isLoading={props.isLoading}
       loadingMessage={() => "Loading..."}
       isDisabled={props.isDisabled}
+      isSearchable={isSearchable()}
     />
   );
 };
diff --git a/epictrack-web/src/styles/theme.tsx b/epictrack-web/src/styles/theme.tsx
index dd49dc520..53b9d74ed 100644
--- a/epictrack-web/src/styles/theme.tsx
+++ b/epictrack-web/src/styles/theme.tsx
@@ -42,6 +42,7 @@ export const Palette = {
     light: "#FDD166",
     bg: {
       light: "#FEEEC5",
+      main: "FEDD8C",
     },
   },
   success: {
diff --git a/epictrack-web/src/utils/MatchingTextHighlight.tsx b/epictrack-web/src/utils/MatchingTextHighlight.tsx
index aa4863650..35210e04e 100644
--- a/epictrack-web/src/utils/MatchingTextHighlight.tsx
+++ b/epictrack-web/src/utils/MatchingTextHighlight.tsx
@@ -1,10 +1,13 @@
+import { Palette } from "../styles/theme";
+
+
 export const highlightText = (text: string, query: string) => {
   const index = text.toLowerCase().indexOf(query.toLowerCase());
   if (index !== -1) {
     return (
       <>
         {text.substring(0, index)}
-        <span style={{ backgroundColor: "rgb(255, 203, 127)" }}>
+        <span style={{ backgroundColor: Palette.secondary.main }}>
           {text.substring(index, index + query.length)}
         </span>
         {text.substring(index + query.length)}