Update list over consultants based on comments from PO (#131)

varianter · Oct 12, 2023 · aa41e60 · aa41e60
1 parent b3ac2cd
commit aa41e60
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/frontend/src/components/ConsultantListElement.tsx b/frontend/src/components/ConsultantListElement.tsx
@@ -20,17 +20,17 @@ export default function ConsultantListElement({
     <div
       className={`flex flex-col ${
         isListElementVisible && "bg-primary_l4"
-      } border-t-2  border-primary_l4 `}
+      } border-t  border-primary_l4 `}
     >
       <button
-        className="flex flex-row gap-6 p-3  hover:bg-primary_default hover:bg-opacity-5"
+        className="flex flex-row gap-3 py-0.5  hover:bg-primary_default hover:bg-opacity-5"
         onClick={toggleListElementVisibility}
       >
-        <div className={`w-6 h-6 m-3 ${isListElementVisible && "rotate-180"}`}>
+        <div className={`w-6 h-6 m-2 ${isListElementVisible && "rotate-180"}`}>
           <ChevronDown className={`text-primary_default`} />
         </div>
-        <div className="flex flex-col gap-1 justify-center items-start">
-          <p className="body text-black"> {consultant.name}</p>
+        <div className="flex flex-col justify-center items-start">
+          <p className="body text-black text-sm"> {consultant.name}</p>
           <p className="detail text-neutral_l1">{consultant.email}</p>
         </div>
       </button>

diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
@@ -18,7 +18,7 @@ export default function FilteredConsultantList({
     var newFilteredConsultants = consultants;
     if (search && search.length > 0) {
       newFilteredConsultants = newFilteredConsultants?.filter((consultant) =>
-        consultant.name.toLowerCase().includes(search.toLowerCase()),
+        consultant.name.match(new RegExp(`\\b${search}.*\\b`, "gi")),
       );
     }
     if (filter && filter.length > 0) {

diff --git a/frontend/src/components/SearchBarComponent.tsx b/frontend/src/components/SearchBarComponent.tsx
@@ -6,7 +6,9 @@ import { Search } from "react-feather";
 export default function SearchBarComponent() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const [searchText, setSearchText] = useState("");
+  const [searchText, setSearchText] = useState(
+    searchParams.get("search") || "",
+  );
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -22,6 +24,9 @@ export default function SearchBarComponent() {
       ) {
         inputRef.current.focus();
       }
+      if (e.code.includes("Escape")) {
+        setSearchText("");
+      }
     }
     document.addEventListener("keydown", keyDownHandler);
 
@@ -42,6 +47,7 @@ export default function SearchBarComponent() {
           onChange={(e) => setSearchText(e.target.value)}
           autoFocus
           ref={inputRef}
+          value={searchText}
         ></input>
       </div>
     </div>