konnosDashboard
SortDropdown.tsx115 lines · main
1import { ArrowDownNarrowWide, ArrowDownWideNarrow } from 'lucide-react'
2import {
3 Button,
4 DropdownMenu,
5 DropdownMenuContent,
6 DropdownMenuRadioGroup,
7 DropdownMenuRadioItem,
8 DropdownMenuSub,
9 DropdownMenuSubContent,
10 DropdownMenuSubTrigger,
11 DropdownMenuTrigger,
12} from 'ui'
13
14import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
15
16interface SortDropdownProps {
17 specificFilterColumn: string
18 sortColumn: string
19 sortOrder: string
20 sortByValue: string
21 showSortByEmail: boolean
22 showSortByPhone: boolean
23 setSortByValue: (value: string) => void
24 improvedSearchEnabled: boolean
25}
26
27/** [Joshen] To refactor to use the SortDropdown component in components/ui */
28export const SortDropdown = ({
29 specificFilterColumn,
30 sortColumn,
31 sortOrder,
32 sortByValue,
33 showSortByEmail,
34 showSortByPhone,
35 setSortByValue,
36 improvedSearchEnabled = false,
37}: SortDropdownProps) => {
38 if (specificFilterColumn !== 'freeform' && !improvedSearchEnabled) {
39 return (
40 <ButtonTooltip
41 disabled
42 type="default"
43 icon={<ArrowDownNarrowWide />}
44 tooltip={{
45 content: {
46 side: 'bottom',
47 className: 'w-80 text-center',
48 text: (
49 <>
50 Sorting cannot be changed when searching on a specific column. If you'd like to sort
51 on other columns, change the search to{' '}
52 <span className="text-warning">unified search</span> from the search dropdown.
53 </>
54 ),
55 },
56 }}
57 >
58 Sorted by user ID
59 </ButtonTooltip>
60 )
61 }
62
63 return (
64 <DropdownMenu>
65 <DropdownMenuTrigger asChild>
66 <Button icon={sortOrder === 'desc' ? <ArrowDownWideNarrow /> : <ArrowDownNarrowWide />}>
67 Sorted by {sortColumn === 'id' ? 'user ID' : sortColumn.replaceAll('_', ' ')}
68 </Button>
69 </DropdownMenuTrigger>
70 <DropdownMenuContent className="w-44" align="start">
71 <DropdownMenuRadioGroup value={sortByValue} onValueChange={setSortByValue}>
72 <DropdownMenuSub>
73 <DropdownMenuSubTrigger>Sort by user ID</DropdownMenuSubTrigger>
74 <DropdownMenuSubContent>
75 <DropdownMenuRadioItem value="id:asc">Ascending</DropdownMenuRadioItem>
76 <DropdownMenuRadioItem value="id:desc">Descending</DropdownMenuRadioItem>
77 </DropdownMenuSubContent>
78 </DropdownMenuSub>
79 <DropdownMenuSub>
80 <DropdownMenuSubTrigger>Sort by created at</DropdownMenuSubTrigger>
81 <DropdownMenuSubContent>
82 <DropdownMenuRadioItem value="created_at:asc">Ascending</DropdownMenuRadioItem>
83 <DropdownMenuRadioItem value="created_at:desc">Descending</DropdownMenuRadioItem>
84 </DropdownMenuSubContent>
85 </DropdownMenuSub>
86 <DropdownMenuSub>
87 <DropdownMenuSubTrigger>Sort by last sign in at</DropdownMenuSubTrigger>
88 <DropdownMenuSubContent>
89 <DropdownMenuRadioItem value="last_sign_in_at:asc">Ascending</DropdownMenuRadioItem>
90 <DropdownMenuRadioItem value="last_sign_in_at:desc">Descending</DropdownMenuRadioItem>
91 </DropdownMenuSubContent>
92 </DropdownMenuSub>
93 {showSortByEmail && (
94 <DropdownMenuSub>
95 <DropdownMenuSubTrigger>Sort by email</DropdownMenuSubTrigger>
96 <DropdownMenuSubContent>
97 <DropdownMenuRadioItem value="email:asc">Ascending</DropdownMenuRadioItem>
98 <DropdownMenuRadioItem value="email:desc">Descending</DropdownMenuRadioItem>
99 </DropdownMenuSubContent>
100 </DropdownMenuSub>
101 )}
102 {showSortByPhone && (
103 <DropdownMenuSub>
104 <DropdownMenuSubTrigger>Sort by phone</DropdownMenuSubTrigger>
105 <DropdownMenuSubContent>
106 <DropdownMenuRadioItem value="phone:asc">Ascending</DropdownMenuRadioItem>
107 <DropdownMenuRadioItem value="phone:desc">Descending</DropdownMenuRadioItem>
108 </DropdownMenuSubContent>
109 </DropdownMenuSub>
110 )}
111 </DropdownMenuRadioGroup>
112 </DropdownMenuContent>
113 </DropdownMenu>
114 )
115}