sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add export to users

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-11-24 12:50:31 -03:00
parent 78ad183e61
commit 45dbb1ebfb
5 changed files with 135 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/route.tsx
View File

@@ -1,20 +1,9 @@
import type { Route } from './+types/route'
import { flatten } from 'flat'
import {
CalendarIcon,
ChevronDownIcon,
DownloadIcon,
FileSpreadsheetIcon,
FileTextIcon,
PlusCircleIcon,
PlusIcon
} from 'lucide-react'
import { CalendarIcon, PlusCircleIcon, PlusIcon } from 'lucide-react'
import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
import { Suspense, useState } from 'react'
import { Await, Link, Outlet, useParams, useSearchParams } from 'react-router'
import type { BookType } from 'xlsx'
import * as XLSX from 'xlsx'
import { DataTable, DataTableViewOptions } from '@repo/ui/components/data-table'
import { FacetedFilter } from '@repo/ui/components/faceted-filter'
@@ -22,13 +11,8 @@ import { RangeCalendarFilter } from '@repo/ui/components/range-calendar-filter'
import { SearchForm } from '@repo/ui/components/search-form'
import { Skeleton } from '@repo/ui/components/skeleton'
import { Button } from '@repo/ui/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger
} from '@repo/ui/components/ui/dropdown-menu'
import { ExportMenu } from '@repo/ui/components/export-menu'
import { Kbd } from '@repo/ui/components/ui/kbd'
import { createSearch } from '@repo/util/meili'
@@ -81,6 +65,7 @@ const formatted = new Intl.DateTimeFormat('en-CA', {
})
export default function Route({ loaderData: { data } }) {
const { orgid } = useParams()
const [searchParams, setSearchParams] = useSearchParams()
const [selectedRows, setSelectedRows] = useState<Enrollment[]>([])
const status = searchParams.get('status')
@@ -115,11 +100,15 @@ export default function Route({ loaderData: { data } }) {
canceled_at: false
}}
>
<div className="flex gap-2.5 mb-2.5">
<div className="flex max-lg:flex-col gap-2.5 mb-2.5">
{selectedRows.length ? (
<>
<div className="flex gap-2.5 items-center">
<ExportMenu headers={headers} selectedRows={selectedRows} />
<ExportMenu
name={`${orgid}_enrollments`}
headers={headers}
selectedRows={selectedRows}
/>
</div>
</>
) : (
@@ -246,56 +235,3 @@ function useRangeParams() {
}
}
}
export function ExportMenu({
headers,
selectedRows = []
}: {
headers: Record<string, string>
selectedRows: object[]
}) {
const { orgid } = useParams()
const exportFile = (bookType: BookType) => () => {
if (!selectedRows.length) {
return
}
const now = new Date()
const header = Object.keys(headers)
const data = selectedRows.map((data) => {
const obj: Record<string, string> = flatten(data)
return Object.fromEntries(header.map((k) => [k, obj?.[k]]))
})
const workbook = XLSX.utils.book_new()
const worksheet = XLSX.utils.json_to_sheet(data, { header })
XLSX.utils.sheet_add_aoa(worksheet, [Object.values(headers)], {
origin: 'A1'
})
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
XLSX.writeFile(workbook, `${orgid}_users_${+now}.${bookType}`, {
bookType,
compression: true
})
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="cursor-pointer">
<DownloadIcon /> Baixar <ChevronDownIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-52" align="start">
<DropdownMenuGroup className="*:cursor-pointer">
<DropdownMenuItem onClick={exportFile('xlsx')}>
<FileSpreadsheetIcon /> Microsoft Excel (.xlsx)
</DropdownMenuItem>
<DropdownMenuItem onClick={exportFile('csv')}>
<FileTextIcon /> CSV (.csv)
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
)
}

8
apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/data.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const headers = {
id: 'ID',
name: 'Nome',
email: 'Email',
cpf: 'CPF',
createDate: 'Cadastrado em',
lastLogin: 'Último acesso'
}

32
apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/route.tsx
View File

@@ -1,8 +1,8 @@
import type { Route } from './+types/route'
import { PlusIcon } from 'lucide-react'
import { Suspense } from 'react'
import { Await, Link, useSearchParams } from 'react-router'
import { Suspense, useState } from 'react'
import { Await, Link, useParams, useSearchParams } from 'react-router'
import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
import { DataTable } from '@repo/ui/components/data-table'
@@ -10,6 +10,7 @@ import { SearchForm } from '@repo/ui/components/search-form'
import { Skeleton } from '@repo/ui/components/skeleton'
import { Button } from '@repo/ui/components/ui/button'
import { Kbd } from '@repo/ui/components/ui/kbd'
import { ExportMenu } from '@repo/ui/components/export-menu'
import { createSearch } from '@repo/util/meili'
export function meta({}: Route.MetaArgs) {
@@ -22,6 +23,7 @@ export function meta({}: Route.MetaArgs) {
]
}
import { headers } from './data'
import { columns, type User } from './columns'
export async function loader({ params, context, request }: Route.LoaderArgs) {
@@ -48,7 +50,9 @@ export async function loader({ params, context, request }: Route.LoaderArgs) {
}
export default function Route({ loaderData: { data } }) {
const { orgid } = useParams()
const [searchParams, setSearchParams] = useSearchParams()
const [selectedRows, setSelectedRows] = useState<User[]>([])
return (
<Suspense fallback={<Skeleton />}>
@@ -71,14 +75,27 @@ export default function Route({ loaderData: { data } }) {
pageIndex={page - 1}
pageSize={hitsPerPage}
rowCount={totalHits}
setSelectedRows={setSelectedRows}
>
<div className="flex flex-col lg:flex-row justify-between gap-2.5 mb-2.5">
<div className="flex max-lg:flex-col gap-2.5 mb-2.5">
{selectedRows.length ? (
<>
<div className="flex gap-2.5 items-center">
<ExportMenu
name={`${orgid}_users`}
headers={headers}
selectedRows={selectedRows}
/>
</div>
</>
) : (
<>
<div className="2xl:w-1/4">
<SearchForm
placeholder={
<>
Digite <Kbd className="border font-mono">/</Kbd> para
pesquisar
Digite <Kbd className="border font-mono">/</Kbd>{' '}
para pesquisar
</>
}
defaultValue={searchParams.get('q') || ''}
@@ -91,11 +108,14 @@ export default function Route({ loaderData: { data } }) {
}
/>
</div>
<Button asChild>
<Button className="lg:ml-auto" asChild>
<Link to="add">
<PlusIcon /> Adicionar
</Link>
</Button>
</>
)}
</div>
</DataTable>
)

70
packages/ui/src/components/export-menu.tsx Normal file
View File

@@ -0,0 +1,70 @@
import type { BookType } from 'xlsx'
import { flatten } from 'flat'
import {
ChevronDownIcon,
DownloadIcon,
FileSpreadsheetIcon,
FileTextIcon
} from 'lucide-react'
import * as XLSX from 'xlsx'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger
} from '@repo/ui/components/ui/dropdown-menu'
import { Button } from '@repo/ui/components/ui/button'
export function ExportMenu({
name,
headers,
selectedRows = []
}: {
name: string
headers: Record<string, string>
selectedRows: object[]
}) {
const exportFile = (bookType: BookType) => () => {
if (!selectedRows.length) {
return
}
const header = Object.keys(headers)
const data = selectedRows.map((data) => {
const obj: Record<string, string> = flatten(data)
return Object.fromEntries(header.map((k) => [k, obj?.[k]]))
})
const workbook = XLSX.utils.book_new()
const worksheet = XLSX.utils.json_to_sheet(data, { header })
XLSX.utils.sheet_add_aoa(worksheet, [Object.values(headers)], {
origin: 'A1'
})
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
XLSX.writeFile(workbook, `${name}_${+new Date()}.${bookType}`, {
bookType,
compression: true
})
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="cursor-pointer">
<DownloadIcon /> Baixar <ChevronDownIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-52" align="start">
<DropdownMenuGroup className="*:cursor-pointer">
<DropdownMenuItem onClick={exportFile('xlsx')}>
<FileSpreadsheetIcon /> Microsoft Excel (.xlsx)
</DropdownMenuItem>
<DropdownMenuItem onClick={exportFile('csv')}>
<FileTextIcon /> CSV (.csv)
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
)
}

2
packages/ui/src/components/faceted-filter.tsx
View File

@@ -108,7 +108,7 @@ export function FacetedFilter<TData, TValue>({
>
<div
className={cn(
'flex size-4 items-center justify-center rounded-[4px] border',
'flex size-4 items-center justify-center rounded-lg border',
isSelected
? 'bg-primary border-primary text-primary-foreground'
: 'border-input [&_svg]:invisible'