diff --git a/apps/admin.saladeaula.digital/app/components/abbr.tsx b/apps/admin.saladeaula.digital/app/components/abbr.tsx new file mode 100644 index 0000000..9975a60 --- /dev/null +++ b/apps/admin.saladeaula.digital/app/components/abbr.tsx @@ -0,0 +1,16 @@ +type AbbrProps = { + children: string + maxLen?: number +} + +export function Abbr({ children, maxLen = 30, ...props }: AbbrProps) { + if (children.length <= maxLen) { + return {children} + } + + return ( + + {children.substring(0, maxLen).concat('...')} + + ) +} diff --git a/apps/admin.saladeaula.digital/app/components/data-table/column-header.tsx b/apps/admin.saladeaula.digital/app/components/data-table/column-header.tsx index 0c52b82..ee49f4e 100644 --- a/apps/admin.saladeaula.digital/app/components/data-table/column-header.tsx +++ b/apps/admin.saladeaula.digital/app/components/data-table/column-header.tsx @@ -11,14 +11,15 @@ import { cn } from '@repo/ui/lib/utils' interface DataTableColumnHeaderProps extends React.HTMLAttributes { column: Column - title: string } export function DataTableColumnHeader({ column, - title, className }: DataTableColumnHeaderProps) { + // @ts-ignore + const title = column.columnDef?.meta?.title ?? column.id + if (!column.getCanSort()) { return
{title}
} diff --git a/apps/admin.saladeaula.digital/app/components/data-table/data-table.tsx b/apps/admin.saladeaula.digital/app/components/data-table/data-table.tsx index 14a63f6..2c2694d 100644 --- a/apps/admin.saladeaula.digital/app/components/data-table/data-table.tsx +++ b/apps/admin.saladeaula.digital/app/components/data-table/data-table.tsx @@ -10,7 +10,13 @@ import { type Table, type VisibilityState } from '@tanstack/react-table' -import { createContext, useEffect, useState, type ReactNode } from 'react' +import { + createContext, + useContext, + useEffect, + useState, + type ReactNode +} from 'react' import { useSearchParams } from 'react-router' import { Card, CardContent } from '@repo/ui/components/ui/card' @@ -36,7 +42,17 @@ interface DataTableProps { hiddenColumn?: string[] } -export const TableContext = createContext<{ table: Table } | null>(null) +const TableContext = createContext<{ table: Table } | null>(null) + +export function useDataTable() { + const ctx = useContext(TableContext) as { table: Table } | null + + if (!ctx) { + throw new Error('TableContext is null') + } + + return ctx +} export function DataTable({ children, @@ -68,6 +84,9 @@ export function DataTable({ const newState = typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater + onRowSelectionChange?.([]) + setRowSelection({}) + setSearchParams((searchParams) => { searchParams.set('p', newState?.pageIndex.toString()) searchParams.set('perPage', newState?.pageSize.toString()) diff --git a/apps/admin.saladeaula.digital/app/components/data-table/view-options.tsx b/apps/admin.saladeaula.digital/app/components/data-table/view-options.tsx index 4b6d2d0..bd46f09 100644 --- a/apps/admin.saladeaula.digital/app/components/data-table/view-options.tsx +++ b/apps/admin.saladeaula.digital/app/components/data-table/view-options.tsx @@ -1,8 +1,5 @@ 'use client' -import { useContext } from 'react' - -import { type Table } from '@tanstack/react-table' import { Columns2Icon } from 'lucide-react' import { Button } from '@repo/ui/components/ui/button' @@ -13,20 +10,14 @@ import { DropdownMenuTrigger } from '@repo/ui/components/ui/dropdown-menu' import { cn } from '@repo/ui/lib/utils' -import { TableContext } from './data-table' +import { useDataTable } from './data-table' export function DataTableViewOptions({ className }: { className: string }) { - const ctx = useContext(TableContext) as { table: Table } | null - - if (!ctx) { - throw new Error('TableContext is null') - } - - const { table } = ctx + const { table } = useDataTable() return ( @@ -43,13 +34,16 @@ export function DataTableViewOptions({ typeof column.accessorFn !== 'undefined' && column.getCanHide() ) .map((column) => { + // @ts-ignore + const title = column.columnDef?.meta?.title ?? column.id + return ( column.toggleVisibility(!!value)} > - {column.columnDef?.meta?.title ?? column.id} + {title} ) })} diff --git a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/columns.tsx b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/columns.tsx index a31114c..d8de1ad 100644 --- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/columns.tsx +++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/columns.tsx @@ -9,6 +9,7 @@ import { Checkbox } from '@repo/ui/components/ui/checkbox' import { Progress } from '@repo/ui/components/ui/progress' import { cn, initials } from '@repo/ui/lib/utils' +import { Abbr } from '@/components/abbr' import { DataTableColumnHeader } from '@/components/data-table/column-header' import { labels, statuses } from './data' @@ -46,6 +47,7 @@ export const columns: ColumnDef[] = [ (table.getIsSomePageRowsSelected() && 'indeterminate') } onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} + className="cursor-pointer" aria-label="Selecionar tudo" /> ), @@ -54,6 +56,7 @@ export const columns: ColumnDef[] = [ checked={row.getIsSelected()} disabled={!row.getCanSelect()} onCheckedChange={(value) => row.toggleSelected(!!value)} + className="cursor-pointer" aria-label="Selecionar linha" /> ) @@ -72,9 +75,11 @@ export const columns: ColumnDef[] = [
    -
  • {user.name}
  • -
  • - {user.email} +
  • + {user.name} +
  • +
  • + {user.email}
@@ -88,11 +93,7 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => { const { name } = row.getValue('course') as { name: string } - return ( - - {name} - - ) + return {name} } }, { @@ -129,9 +130,7 @@ export const columns: ColumnDef[] = [ }, { accessorKey: 'created_at', - header: ({ column }) => ( - - ), + header: ({ column }) => , meta: { title: 'Cadastrado em' }, enableSorting: true, enableHiding: true, @@ -139,9 +138,7 @@ export const columns: ColumnDef[] = [ }, { accessorKey: 'started_at', - header: ({ column }) => ( - - ), + header: ({ column }) => , meta: { title: 'Iniciado em' }, enableSorting: true, enableHiding: true, @@ -149,9 +146,7 @@ export const columns: ColumnDef[] = [ }, { accessorKey: 'completed_at', - header: ({ column }) => ( - - ), + header: ({ column }) => , meta: { title: 'ConcluĂ­do em' }, enableSorting: true, enableHiding: true, @@ -159,9 +154,7 @@ export const columns: ColumnDef[] = [ }, { accessorKey: 'failed_at', - header: ({ column }) => ( - - ), + header: ({ column }) => , meta: { title: 'Reprovado em' }, enableSorting: true, enableHiding: true, @@ -169,9 +162,7 @@ export const columns: ColumnDef[] = [ }, { accessorKey: 'canceled_at', - header: ({ column }) => ( - - ), + header: ({ column }) => , meta: { title: 'Cancelado em' }, enableSorting: true, enableHiding: true, diff --git a/apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/columns.tsx b/apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/columns.tsx index 6ac0610..d2593dd 100644 --- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/columns.tsx +++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/columns.tsx @@ -5,6 +5,7 @@ import { type ColumnDef } from '@tanstack/react-table' import { ArrowRight } from 'lucide-react' import { NavLink } from 'react-router' +import { Abbr } from '@/components/abbr' import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar' import { Button } from '@repo/ui/components/ui/button' import { Spinner } from '@repo/ui/components/ui/spinner' @@ -41,9 +42,11 @@ export const columns: ColumnDef[] = [
    -
  • {name}
  • -
  • - {email} +
  • + {name} +
  • +
  • + {email}