1+ "use client"
2+
3+ import * as React from "react"
4+ import {
5+ CaretSortIcon ,
6+ ChevronDownIcon ,
7+ DotsHorizontalIcon ,
8+ } from "@radix-ui/react-icons"
9+ import {
10+ ColumnDef ,
11+ ColumnFiltersState ,
12+ SortingState ,
13+ VisibilityState ,
14+ flexRender ,
15+ getCoreRowModel ,
16+ getFilteredRowModel ,
17+ getPaginationRowModel ,
18+ getSortedRowModel ,
19+ useReactTable ,
20+ } from "@tanstack/react-table"
21+
22+ import { Button } from "@/components/ui/button"
23+ import {
24+ DropdownMenu ,
25+ DropdownMenuCheckboxItem ,
26+ DropdownMenuContent ,
27+ DropdownMenuItem ,
28+ DropdownMenuLabel ,
29+ DropdownMenuSeparator ,
30+ DropdownMenuTrigger ,
31+ } from "@/components/ui/dropdown-menu"
32+ import { Input } from "@/components/ui/input"
33+ import {
34+ Table ,
35+ TableBody ,
36+ TableCell ,
37+ TableHead ,
38+ TableHeader ,
39+ TableRow ,
40+ } from "@/components/ui/table"
41+
42+ type Vehicle = {
43+ id : number ;
44+ automaker : string ;
45+ project : string ;
46+ responsible : string ;
47+ model : string ;
48+ color : string ;
49+ chassis : string ;
50+ fleet : string | null ;
51+ comments : string | null ;
52+ image : string | null ;
53+ nf_number : string ;
54+ nf_emission_date : string ;
55+ loan_expiration_date : string ;
56+ } ;
57+ export const columns : ColumnDef < Vehicle > [ ] = [
58+ {
59+ accessorKey : "automaker" ,
60+ header : "Montadora" ,
61+ cell : ( { row } ) => {
62+ const { automaker } = row . original
63+
64+ return < div > { automaker } </ div >
65+ }
66+ } ,
67+ {
68+ accessorKey : "model" ,
69+ header : ( { column } ) => {
70+ return (
71+ < Button
72+ variant = "link"
73+ onClick = { ( ) => column . toggleSorting ( column . getIsSorted ( ) === "asc" ) }
74+ >
75+ Modelo
76+ < CaretSortIcon className = "ml-2 h-4 w-4" />
77+ </ Button >
78+ )
79+ } ,
80+ cell : ( { row } ) => < div > { row . getValue ( "model" ) } </ div > ,
81+ } ,
82+ {
83+ accessorKey : "chassis" ,
84+ header : ( ) => < div className = "text-right" > Chassi</ div > ,
85+ cell : ( { row } ) => {
86+
87+
88+ return < div className = "text-right font-medium" > { row . original . chassis } </ div >
89+ } ,
90+ } ,
91+ {
92+ id : "actions" ,
93+ enableHiding : false ,
94+ cell : ( { row } ) => {
95+ const vehicle = row . original
96+
97+ // const handleDeleteTodo = async (todo: Todo) => {
98+ // await deleteTodo({
99+ // id: todo.id
100+ // })
101+ // toast({
102+ // title: "Deletion Successful",
103+ // description: "The todo item has been successfully deleted."
104+ // })
105+ // }
106+ // const handleToggleDone = async (todo: Todo) => {
107+ // const doneAt = todo.doneAt ? null : new Date()
108+ // await upsertTodo({ id: todo.id, doneAt })
109+ // toast({
110+ // title: "Update Successful",
111+ // description: "The todo item has been successfully updated."
112+ // })
113+ // }
114+ return (
115+ < DropdownMenu >
116+ < DropdownMenuTrigger asChild >
117+ < Button variant = "link" className = "h-8 w-8 p-0" >
118+ < span className = "sr-only" > Open menu</ span >
119+ < DotsHorizontalIcon className = "h-4 w-4" />
120+ </ Button >
121+ </ DropdownMenuTrigger >
122+ < DropdownMenuContent align = "end" >
123+ < DropdownMenuLabel > Actions</ DropdownMenuLabel >
124+ < DropdownMenuItem
125+ onClick = { ( ) => navigator . clipboard . writeText ( vehicle . id . toString ( ) ) }
126+ >
127+ Copiar ID
128+ </ DropdownMenuItem >
129+ < DropdownMenuSeparator />
130+ < DropdownMenuItem
131+ // onClick={() => handleDeleteVehicle(vehicle)}
132+ >
133+ Apagar
134+ </ DropdownMenuItem >
135+ </ DropdownMenuContent >
136+ </ DropdownMenu >
137+ )
138+ } ,
139+ } ,
140+ ]
141+
142+ type VehicleDataTable = {
143+ data : Vehicle [ ]
144+ }
145+
146+ export function VehicleDataTable ( { data } : VehicleDataTable ) {
147+
148+ const [ sorting , setSorting ] = React . useState < SortingState > ( [ ] )
149+ const [ columnFilters , setColumnFilters ] = React . useState < ColumnFiltersState > (
150+ [ ]
151+ )
152+ const [ columnVisibility , setColumnVisibility ] =
153+ React . useState < VisibilityState > ( { } )
154+ const [ rowSelection , setRowSelection ] = React . useState ( { } )
155+
156+ const table = useReactTable ( {
157+ data,
158+ columns,
159+ onSortingChange : setSorting ,
160+ onColumnFiltersChange : setColumnFilters ,
161+ getCoreRowModel : getCoreRowModel ( ) ,
162+ getPaginationRowModel : getPaginationRowModel ( ) ,
163+ getSortedRowModel : getSortedRowModel ( ) ,
164+ getFilteredRowModel : getFilteredRowModel ( ) ,
165+ onColumnVisibilityChange : setColumnVisibility ,
166+ onRowSelectionChange : setRowSelection ,
167+ state : {
168+ sorting,
169+ columnFilters,
170+ columnVisibility,
171+ rowSelection,
172+ } ,
173+ } )
174+
175+ return (
176+ < div className = "w-full" >
177+ < div className = "flex items-center py-4" >
178+ < Input
179+ placeholder = "Filtrar montadora..."
180+ value = { ( table . getColumn ( "automaker" ) ?. getFilterValue ( ) as string ) ?? "" }
181+ onChange = { ( event ) =>
182+ table . getColumn ( "automaker" ) ?. setFilterValue ( event . target . value )
183+ }
184+ className = "max-w-sm"
185+ />
186+ < DropdownMenu >
187+ < DropdownMenuTrigger asChild >
188+ < Button variant = "outline" className = "ml-auto" >
189+ Columns < ChevronDownIcon className = "ml-2 h-4 w-4" />
190+ </ Button >
191+ </ DropdownMenuTrigger >
192+ < DropdownMenuContent align = "end" >
193+ { table
194+ . getAllColumns ( )
195+ . filter ( ( column ) => column . getCanHide ( ) )
196+ . map ( ( column ) => {
197+ return (
198+ < DropdownMenuCheckboxItem
199+ key = { column . id }
200+ className = "capitalize"
201+ checked = { column . getIsVisible ( ) }
202+ onCheckedChange = { ( value ) =>
203+ column . toggleVisibility ( ! ! value )
204+ }
205+ >
206+ { column . id }
207+ </ DropdownMenuCheckboxItem >
208+ )
209+ } ) }
210+ </ DropdownMenuContent >
211+ </ DropdownMenu >
212+ </ div >
213+ < div className = "rounded-md border" >
214+ < Table >
215+ < TableHeader >
216+ { table . getHeaderGroups ( ) . map ( ( headerGroup ) => (
217+ < TableRow key = { headerGroup . id } >
218+ { headerGroup . headers . map ( ( header ) => {
219+ return (
220+ < TableHead key = { header . id } >
221+ { header . isPlaceholder
222+ ? null
223+ : flexRender (
224+ header . column . columnDef . header ,
225+ header . getContext ( )
226+ ) }
227+ </ TableHead >
228+ )
229+ } ) }
230+ </ TableRow >
231+ ) ) }
232+ </ TableHeader >
233+ < TableBody >
234+ { table . getRowModel ( ) . rows ?. length ? (
235+ table . getRowModel ( ) . rows . map ( ( row ) => (
236+ < TableRow
237+ key = { row . id }
238+ data-state = { row . getIsSelected ( ) && "selected" }
239+ >
240+ { row . getVisibleCells ( ) . map ( ( cell ) => (
241+ < TableCell key = { cell . id } >
242+ { flexRender (
243+ cell . column . columnDef . cell ,
244+ cell . getContext ( )
245+ ) }
246+ </ TableCell >
247+ ) ) }
248+ </ TableRow >
249+ ) )
250+ ) : (
251+ < TableRow >
252+ < TableCell
253+ colSpan = { columns . length }
254+ className = "h-24 text-center"
255+ >
256+ No results.
257+ </ TableCell >
258+ </ TableRow >
259+ ) }
260+ </ TableBody >
261+ </ Table >
262+ </ div >
263+ < div className = "flex items-center justify-end space-x-2 py-4" >
264+ < div className = "flex-1 text-sm text-muted-foreground" >
265+ { table . getFilteredSelectedRowModel ( ) . rows . length } of{ " " }
266+ { table . getFilteredRowModel ( ) . rows . length } row(s) selected.
267+ </ div >
268+ < div className = "space-x-2" >
269+ < Button
270+ variant = "outline"
271+ size = "sm"
272+ onClick = { ( ) => table . previousPage ( ) }
273+ disabled = { ! table . getCanPreviousPage ( ) }
274+ >
275+ Previous
276+ </ Button >
277+ < Button
278+ variant = "outline"
279+ size = "sm"
280+ onClick = { ( ) => table . nextPage ( ) }
281+ disabled = { ! table . getCanNextPage ( ) }
282+ >
283+ Next
284+ </ Button >
285+ </ div >
286+ </ div >
287+ </ div >
288+ )
289+ }
0 commit comments