127 lines
4.1 KiB
TypeScript
127 lines
4.1 KiB
TypeScript
import type { Route } from './+types/route'
|
|
|
|
import { PlusIcon } from 'lucide-react'
|
|
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'
|
|
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'
|
|
import { headers } from '@repo/ui/routes/users/data'
|
|
|
|
import { columns, type User } from './columns'
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [
|
|
{ title: 'Colaboradores' },
|
|
{
|
|
name: 'description',
|
|
content: 'Adicione colaboradores e organize sua equipe de forma prática'
|
|
}
|
|
]
|
|
}
|
|
|
|
export async function loader({ params, context, request }: Route.LoaderArgs) {
|
|
const { searchParams } = new URL(request.url)
|
|
const { orgid } = params
|
|
const query = searchParams.get('q') || ''
|
|
const sort = searchParams.get('sort') || 'createDate:desc'
|
|
const page = Number(searchParams.get('p')) + 1
|
|
const hitsPerPage = Number(searchParams.get('perPage')) || 25
|
|
|
|
let builder = new MeiliSearchFilterBuilder().where('tenant_id', '=', orgid)
|
|
|
|
const users = createSearch({
|
|
index: 'betaeducacao-prod-users_d2o3r5gmm4it7j',
|
|
filter: builder.build(),
|
|
sort: [sort],
|
|
query,
|
|
page,
|
|
hitsPerPage,
|
|
env: context.cloudflare.env
|
|
})
|
|
|
|
return { data: users }
|
|
}
|
|
|
|
export default function Route({ loaderData: { data } }) {
|
|
const { orgid } = useParams()
|
|
const [searchParams, setSearchParams] = useSearchParams()
|
|
const [selectedRows, setSelectedRows] = useState<User[]>([])
|
|
|
|
return (
|
|
<Suspense fallback={<Skeleton />}>
|
|
<div className="space-y-0.5 mb-8">
|
|
<h1 className="text-2xl font-bold tracking-tight">
|
|
Gerenciar colaboradores
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
Adicione colaboradores e organize sua equipe de forma prática.
|
|
</p>
|
|
</div>
|
|
|
|
<Await resolve={data}>
|
|
{({ hits, page, hitsPerPage, totalHits }) => {
|
|
return (
|
|
<DataTable
|
|
sort={[{ id: 'createDate', desc: true }]}
|
|
columns={columns}
|
|
data={hits as User[]}
|
|
pageIndex={page - 1}
|
|
pageSize={hitsPerPage}
|
|
rowCount={totalHits}
|
|
setSelectedRows={setSelectedRows}
|
|
>
|
|
<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
|
|
</>
|
|
}
|
|
defaultValue={searchParams.get('q') || ''}
|
|
onChange={(value) =>
|
|
setSearchParams((searchParams) => {
|
|
searchParams.set('q', String(value))
|
|
searchParams.delete('p')
|
|
return searchParams
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<Button className="lg:ml-auto" asChild>
|
|
<Link to="add">
|
|
<PlusIcon /> Adicionar
|
|
</Link>
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</DataTable>
|
|
)
|
|
}}
|
|
</Await>
|
|
</Suspense>
|
|
)
|
|
}
|