add search filter
This commit is contained in:
@@ -1,21 +1,36 @@
|
||||
import type { Route } from './+types/route'
|
||||
|
||||
import { CalendarIcon, PlusCircleIcon } from 'lucide-react'
|
||||
import { pick } from 'ramda'
|
||||
import {
|
||||
CalendarIcon,
|
||||
PlusCircleIcon,
|
||||
BuildingIcon,
|
||||
CheckIcon
|
||||
} from 'lucide-react'
|
||||
import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
|
||||
import { Suspense, useState } from 'react'
|
||||
import { Await, Outlet, useSearchParams } from 'react-router'
|
||||
import { formatCNPJ } from '@brazilian-utils/brazilian-utils'
|
||||
|
||||
import { cloudflareContext } from '@repo/auth/context'
|
||||
|
||||
import { DataTable, DataTableViewOptions } from '@repo/ui/components/data-table'
|
||||
import { FacetedFilter } from '@repo/ui/components/faceted-filter'
|
||||
import { RangeCalendarFilter } from '@repo/ui/components/range-calendar-filter'
|
||||
import { SearchForm } from '@repo/ui/components/search-form'
|
||||
import { SearchFilter } from '@repo/ui/components/search-filter'
|
||||
import { Skeleton } from '@repo/ui/components/skeleton'
|
||||
import { Kbd } from '@repo/ui/components/ui/kbd'
|
||||
import { ExportMenu } from '@repo/ui/components/export-menu'
|
||||
import { createSearch } from '@repo/util/meili'
|
||||
import { headers, sortings, statuses } from '@repo/ui/routes/enrollments/data'
|
||||
import { cn, initials } from '@repo/ui/lib/utils'
|
||||
import { CommandItem } from '@repo/ui/components/ui/command'
|
||||
import { Button } from '@repo/ui/components/ui/button'
|
||||
import { Separator } from '@repo/ui/components/ui/separator'
|
||||
import { Badge } from '@repo/ui/components/ui/badge'
|
||||
import { Abbr } from '@repo/ui/components/abbr'
|
||||
import { Spinner } from '@repo/ui/components/ui/spinner'
|
||||
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
|
||||
|
||||
import { columns, type Enrollment } from './columns'
|
||||
|
||||
@@ -27,6 +42,7 @@ export async function loader({ context, request }: Route.LoaderArgs) {
|
||||
const cloudflare = context.get(cloudflareContext)
|
||||
const { searchParams } = new URL(request.url)
|
||||
const query = searchParams.get('q') || ''
|
||||
const org = searchParams.get('org') || ''
|
||||
const from = searchParams.get('from')
|
||||
const to = searchParams.get('to')
|
||||
const sort = searchParams.get('sort') || 'created_at:desc'
|
||||
@@ -40,6 +56,11 @@ export async function loader({ context, request }: Route.LoaderArgs) {
|
||||
builder = builder.where('status', 'in', status.split(','))
|
||||
}
|
||||
|
||||
if (org) {
|
||||
const { id } = JSON.parse(org)
|
||||
builder = builder.where('org_id', '=', id)
|
||||
}
|
||||
|
||||
if (from && to) {
|
||||
const [field, from_] = from.split(':')
|
||||
builder = builder.where(field, 'between', [from_, to])
|
||||
@@ -56,7 +77,7 @@ export async function loader({ context, request }: Route.LoaderArgs) {
|
||||
})
|
||||
|
||||
return {
|
||||
data: enrollments
|
||||
enrollments
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,11 +87,23 @@ const formatted = new Intl.DateTimeFormat('en-CA', {
|
||||
day: '2-digit'
|
||||
})
|
||||
|
||||
export default function Route({ loaderData: { data } }: Route.ComponentProps) {
|
||||
export default function Route({
|
||||
loaderData: { enrollments }
|
||||
}: Route.ComponentProps) {
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
const [selectedRows, setSelectedRows] = useState<Enrollment[]>([])
|
||||
const status = searchParams.get('status')
|
||||
const rangeParams = useRangeParams()
|
||||
const dateRange = useRangeParams()
|
||||
const org = searchParams.has('org')
|
||||
? JSON.parse(searchParams.get('org') || '')
|
||||
: null
|
||||
|
||||
const onSearch = async (search: string) => {
|
||||
const params = new URLSearchParams({ q: search })
|
||||
const r = await fetch(`/orgs.json?${params.toString()}`)
|
||||
const { hits } = (await r.json()) as { hits: any[] }
|
||||
return hits
|
||||
}
|
||||
|
||||
return (
|
||||
<Suspense fallback={<Skeleton />}>
|
||||
@@ -78,7 +111,7 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
|
||||
<h1 className="text-2xl font-bold tracking-tight">Matrículas</h1>
|
||||
</div>
|
||||
|
||||
<Await resolve={data}>
|
||||
<Await resolve={enrollments}>
|
||||
{({ hits, page = 1, hitsPerPage, totalHits }) => (
|
||||
<DataTable
|
||||
sort={[{ id: 'created_at', desc: true }]}
|
||||
@@ -159,7 +192,7 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
|
||||
<RangeCalendarFilter
|
||||
title="Período"
|
||||
icon={CalendarIcon}
|
||||
value={rangeParams}
|
||||
value={dateRange}
|
||||
className="lg:flex-1"
|
||||
options={Object.entries(sortings).map(
|
||||
([value, label]) => ({
|
||||
@@ -190,6 +223,88 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
<SearchFilter
|
||||
align="end"
|
||||
requestOptions={{
|
||||
manual: !org,
|
||||
defaultParams: [org?.q || '']
|
||||
}}
|
||||
defaultValue={org?.q || ''}
|
||||
onSearch={onSearch}
|
||||
onChange={(value) => {
|
||||
setSearchParams((searchParams) => {
|
||||
if (value) {
|
||||
searchParams.set(
|
||||
'org',
|
||||
JSON.stringify(pick(['id', 'name', 'q'], value))
|
||||
)
|
||||
} else {
|
||||
searchParams.delete('org')
|
||||
}
|
||||
|
||||
return searchParams
|
||||
})
|
||||
}}
|
||||
render={({ id, name, cnpj, onSelect }) => (
|
||||
<CommandItem
|
||||
key={id}
|
||||
value={id}
|
||||
className="cursor-pointer"
|
||||
onSelect={onSelect}
|
||||
>
|
||||
<div className="flex gap-2.5 items-start">
|
||||
<Avatar className="size-10 hidden lg:block">
|
||||
<AvatarFallback className="border">
|
||||
{initials(name)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<ul>
|
||||
<li className="font-bold">
|
||||
<Abbr>{name}</Abbr>
|
||||
</li>
|
||||
<li className="text-muted-foreground text-sm">
|
||||
<Abbr>{formatCNPJ(cnpj)}</Abbr>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<CheckIcon
|
||||
className={cn(
|
||||
'ml-auto',
|
||||
org?.id === id ? 'opacity-100' : 'opacity-0'
|
||||
)}
|
||||
/>
|
||||
</CommandItem>
|
||||
)}
|
||||
>
|
||||
{({ loading }) => (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="cursor-pointer border-dashed h-full"
|
||||
>
|
||||
{loading ? <Spinner /> : <BuildingIcon />}
|
||||
<span>Empresa</span>
|
||||
{org?.id ? (
|
||||
<>
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="mx-0.5 h-4"
|
||||
/>
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="rounded-sm px-1 font-normal"
|
||||
>
|
||||
<Abbr maxLen={14}>{org.name}</Abbr>
|
||||
</Badge>
|
||||
</>
|
||||
) : null}
|
||||
</Button>
|
||||
)}
|
||||
</SearchFilter>
|
||||
</div>
|
||||
|
||||
<div className="lg:ml-auto flex gap-2.5">
|
||||
|
||||
Reference in New Issue
Block a user