feat: add highlight circle for the selected candidate and integrate i…

…t with search bar
DemocracyDevelopers · Oct 12, 2024 · a96ba49 · a96ba49
1 parent a5ca5ef
commit a96ba49
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 10 deletions.
diff --git a/app/dashboard/components/elimination-tree/candidate-list-bar.tsx b/app/dashboard/components/elimination-tree/candidate-list-bar.tsx
@@ -6,6 +6,7 @@ import {
 import { Candidate } from "./constants";
 import SearchDropdown from "./search-dropdown";
 import { TooltipTrigger } from "@radix-ui/react-tooltip";
+import { useState } from "react";
 
 type CandidateListBarProps = {
   selectedWinnerId: number;
@@ -20,16 +21,35 @@ function CandidateListBar({
   useAvatar,
   candidateList,
 }: CandidateListBarProps) {
+  const [selectedCandidateId, setSelectedCandidateId] = useState<number | null>(
+    null,
+  );
+
+  const handleCandidateSelect = (candidateId: number) => {
+    setSelectedCandidateId(candidateId);
+    handleSelectWinner(candidateId); // Call to display the tree or other action
+  };
   return (
     <div className="flex justify-center mb-5 gap-10">
       <div className="flex">
         {candidateList.map((candidate) => (
           <div key={candidate.id} className="flex flex-col items-center w-12">
             <TooltipProvider>
               <Tooltip>
+                {/*<TooltipTrigger*/}
+                {/*  onClick={() => handleSelectWinner(candidate.id)}*/}
+                {/*  className="leading-9 w-10 h-10 rounded-full cursor-pointer text-center border-2 border-black text-xs overflow-hidden whitespace-nowrap text-ellipsis"*/}
+                {/*>*/}
+                {/*  {candidate.name}*/}
+                {/*</TooltipTrigger>*/}
+
                 <TooltipTrigger
-                  onClick={() => handleSelectWinner(candidate.id)}
-                  className="leading-9 w-10 h-10 rounded-full cursor-pointer text-center border-2 border-black text-xs overflow-hidden whitespace-nowrap text-ellipsis"
+                  onClick={() => handleCandidateSelect(candidate.id)}
+                  className={`leading-9 w-10 h-10 rounded-full cursor-pointer text-center border-2 text-xs overflow-hidden whitespace-nowrap text-ellipsis ${
+                    selectedCandidateId === candidate.id
+                      ? "border-blue-500" // Outer blue circle when selected
+                      : "border-black"
+                  }`}
                 >
                   {candidate.name}
                 </TooltipTrigger>
@@ -39,7 +59,11 @@ function CandidateListBar({
           </div>
         ))}
       </div>
-      <SearchDropdown candidateList={candidateList} />
+      {/*<SearchDropdown candidateList={candidateList} />*/}
+      <SearchDropdown
+        candidateList={candidateList}
+        onSelect={handleCandidateSelect}
+      />
     </div>
   );
 }

diff --git a/app/dashboard/components/elimination-tree/search-dropdown.tsx b/app/dashboard/components/elimination-tree/search-dropdown.tsx
@@ -6,27 +6,49 @@ import { Candidate } from "./constants";
 import { Card, CardContent } from "@/components/ui/card";
 import Image from "next/image";
 
-function SearchDropdown({ candidateList }: { candidateList: Candidate[] }) {
+// function SearchDropdown({ candidateList }: { candidateList: Candidate[] }) {
+//   const [searchTerm, setSearchTerm] = useState("");
+//   const [selectedCandidate, setSelectedCandidate] = useState<Candidate | null>(
+//     null,
+//   );
+//   const [isOpen, setIsOpen] = useState(false);
+//   //不能用shadcn的popover,因为他的popover弹出瞬间会让input失去焦点
+//
+//   const filteredList = candidateList.filter((candidate) =>
+//     candidate.name.toLowerCase().includes(searchTerm.toLowerCase()),
+//   );
+//   const handleSelect = (candidate: Candidate) => {
+//     setSelectedCandidate(candidate);
+//     setSearchTerm(candidate.name);
+//     console.log("Selected Candidate:", candidate.name);
+//     setIsOpen(false);
+//   };
+
+function SearchDropdown({
+  candidateList,
+  onSelect,
+}: {
+  candidateList: Candidate[];
+  onSelect: (candidateId: number) => void;
+}) {
   const [searchTerm, setSearchTerm] = useState("");
-  const [selectedCandidate, setSelectedCandidate] = useState<Candidate | null>(
-    null,
-  );
   const [isOpen, setIsOpen] = useState(false);
-  //不能用shadcn的popover,因为他的popover弹出瞬间会让input失去焦点
 
   const filteredList = candidateList.filter((candidate) =>
     candidate.name.toLowerCase().includes(searchTerm.toLowerCase()),
   );
+
   const handleSelect = (candidate: Candidate) => {
-    setSelectedCandidate(candidate);
     setSearchTerm(candidate.name);
-    console.log("Selected Candidate:", candidate.name);
+    onSelect(candidate.id);
     setIsOpen(false);
   };
   return (
     <div className="relative">
       <Input
         value={searchTerm}
+        type="search"
+        placeholder="Search for a candidate"
         onChange={(e) => setSearchTerm(e.target.value)}
         onFocus={() => setIsOpen(true)}
         onBlur={() => setIsOpen(false)}