Skip to content

Commit a111747

Browse files
codevoid048codevoid048
committed
dropdown in branch and college list is updated
1 parent 301c141 commit a111747

File tree

3 files changed

+357
-14929
lines changed

3 files changed

+357
-14929
lines changed

‎client-test/src/components/ProfilePage/profileEdit.tsx‎

Lines changed: 92 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { useAuth } from "@/context/AuthContext"
2626
import { useNavigate } from "react-router-dom"
2727
import { toast } from "react-hot-toast"
2828
import institutions from "@/lib/colleges"
29+
import branches from "@/lib/branches"
2930

3031
export default function ProfileEditForm() {
3132
const { user, token, fetchUser } = useAuth()
@@ -63,6 +64,9 @@ export default function ProfileEditForm() {
6364

6465
const [image, setImage] = useState<string | null>(null)
6566
const [collegePopoverOpen, setCollegePopoverOpen] = useState(false)
67+
const [branchPopoverOpen, setBranchPopoverOpen] = useState(false)
68+
const [collegeSearchValue, setCollegeSearchValue] = useState("")
69+
const [branchSearchValue, setBranchSearchValue] = useState("")
6670

6771
const fileInputRef = useRef<HTMLInputElement>(null)
6872
const [isLoading, setIsLoading] = useState(false)
@@ -356,24 +360,72 @@ export default function ProfileEditForm() {
356360
/>
357361
</div>
358362

359-
<div className="space-y-2">
363+
<div className="space-y-2 overflow-hidden">
360364
<Label htmlFor="branch" className="flex items-center gap-2">
361365
<BookOpen className="w-4 h-4" /> Branch
362366
</Label>
363-
<Input
364-
id="branch"
365-
placeholder="Enter your branch"
366-
className="bg-background/50 border-input focus:border-primary transition-colors duration-300"
367-
value={formData.branch}
368-
onChange={handleChange}
369-
/>
367+
<Popover open={branchPopoverOpen} onOpenChange={(open) => {
368+
setBranchPopoverOpen(open)
369+
if (!open) setBranchSearchValue("")
370+
}}>
371+
<PopoverTrigger asChild>
372+
<Button
373+
variant="outline"
374+
role="combobox"
375+
aria-expanded={branchPopoverOpen}
376+
className="w-full justify-between bg-background/50 border-input focus:border-primary transition-colors duration-300 h-10"
377+
>
378+
{formData.branch ? formData.branch : "Select branch..."}
379+
<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
380+
</Button>
381+
</PopoverTrigger>
382+
<PopoverContent className="w-full p-0" style={{ width: "var(--radix-popover-trigger-width)" }}>
383+
<Command shouldFilter={false}>
384+
<CommandInput
385+
placeholder="Search branch..."
386+
className="h-9"
387+
value={branchSearchValue}
388+
onValueChange={setBranchSearchValue}
389+
/>
390+
<CommandList className="max-h-[200px] overflow-y-auto">
391+
<CommandEmpty>No branch found.</CommandEmpty>
392+
<CommandGroup>
393+
{branches
394+
.filter((branch) =>
395+
branch.toLowerCase().includes(branchSearchValue.toLowerCase())
396+
)
397+
.map((branch) => (
398+
<CommandItem
399+
key={branch}
400+
value={branch}
401+
onSelect={() => {
402+
setFormData((prev) => ({ ...prev, branch: branch }))
403+
setBranchPopoverOpen(false)
404+
setBranchSearchValue("")
405+
}}
406+
className="flex items-center"
407+
>
408+
{branch}
409+
{formData.branch === branch && (
410+
<Check className="ml-auto h-4 w-4" />
411+
)}
412+
</CommandItem>
413+
))}
414+
</CommandGroup>
415+
</CommandList>
416+
</Command>
417+
</PopoverContent>
418+
</Popover>
370419
</div>
371420

372421
<div className="space-y-2 overflow-hidden">
373422
<Label htmlFor="college" className="flex items-center gap-2">
374423
<Building className="w-4 h-4" /> College
375424
</Label>
376-
<Popover open={collegePopoverOpen} onOpenChange={setCollegePopoverOpen}>
425+
<Popover open={collegePopoverOpen} onOpenChange={(open) => {
426+
setCollegePopoverOpen(open)
427+
if (!open) setCollegeSearchValue("")
428+
}}>
377429
<PopoverTrigger asChild>
378430
<Button
379431
variant="outline"
@@ -386,27 +438,37 @@ export default function ProfileEditForm() {
386438
</Button>
387439
</PopoverTrigger>
388440
<PopoverContent className="w-full p-0" style={{ width: "var(--radix-popover-trigger-width)" }}>
389-
<Command>
390-
<CommandInput placeholder="Search college..." className="h-9" />
391-
<CommandList>
441+
<Command shouldFilter={false}>
442+
<CommandInput
443+
placeholder="Search college..."
444+
className="h-9"
445+
value={collegeSearchValue}
446+
onValueChange={setCollegeSearchValue}
447+
/>
448+
<CommandList className="max-h-[200px] overflow-y-auto">
392449
<CommandEmpty>No college found.</CommandEmpty>
393-
<CommandGroup className="max-h-[200px] overflow-y-auto">
394-
{institutions.map((college, index) => (
395-
<CommandItem
396-
key={index}
397-
value={college.name}
398-
onSelect={() => {
399-
setFormData((prev) => ({ ...prev, college: college.name }))
400-
setCollegePopoverOpen(false)
401-
}}
402-
className="flex items-center"
403-
>
404-
{college.name}
405-
{formData.college === college.name && (
406-
<Check className="ml-auto h-4 w-4" />
407-
)}
408-
</CommandItem>
409-
))}
450+
<CommandGroup>
451+
{institutions
452+
.filter((college) =>
453+
college.toLowerCase().includes(collegeSearchValue.toLowerCase())
454+
)
455+
.map((college) => (
456+
<CommandItem
457+
key={college}
458+
value={college}
459+
onSelect={() => {
460+
setFormData((prev) => ({ ...prev, college: college }))
461+
setCollegePopoverOpen(false)
462+
setCollegeSearchValue("")
463+
}}
464+
className="flex items-center"
465+
>
466+
{college}
467+
{formData.college === college && (
468+
<Check className="ml-auto h-4 w-4" />
469+
)}
470+
</CommandItem>
471+
))}
410472
</CommandGroup>
411473
</CommandList>
412474
</Command>
@@ -423,7 +485,7 @@ export default function ProfileEditForm() {
423485
htmlFor="affiliate"
424486
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
425487
>
426-
Are you an SRKR CODING CLUB Affiliate?
488+
Are you an Affiliate of SRKR CODING CLUB?
427489
</Label>
428490
</div>
429491

‎client-test/src/lib/branches.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const branches = [
2+
"CSE",
3+
"IT",
4+
"ECE",
5+
"EEE",
6+
"ME",
7+
"CE",
8+
"CHE",
9+
"AE",
10+
"BME",
11+
"BT",
12+
"IE",
13+
"PE",
14+
"AUTO",
15+
"AIML",
16+
"DS",
17+
"CSE-AIDS",
18+
"CSE-IoT",
19+
"CSBS",
20+
"CSD",
21+
"ECM",
22+
"EIE",
23+
"ICE",
24+
"MPAE",
25+
"MATHEMATICS",
26+
"PHYSICS",
27+
"CHEMISTRY",
28+
"COMMERCE",
29+
"ARTS",
30+
"OTHER"
31+
];
32+
33+
export default branches;

0 commit comments

Comments
 (0)