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

update select

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-11-07 07:44:40 -03:00
parent 0550f508b9
commit c8b4d9beeb
9 changed files with 192 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
import type { Route } from './+types'
import { PlusCircleIcon, PlusIcon } from 'lucide-react'
import { CalendarIcon, PlusCircleIcon, PlusIcon } from 'lucide-react'
import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
import { Suspense, useState } from 'react'
import { Suspense } from 'react'
import { Await, Link, useSearchParams } from 'react-router'
import { DataTable, DataTableViewOptions } from '@/components/data-table'
@@ -14,16 +14,8 @@ 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 {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue
} from '@repo/ui/components/ui/select'
import { columns, type Enrollment } from './columns'
import { statuses } from './data'
import { sortings, statuses } from './data'
export function meta({}: Route.MetaArgs) {
return [{ title: 'Matrículas' }]
@@ -33,17 +25,17 @@ export async function loader({ params, context, request }: Route.LoaderArgs) {
const { searchParams } = new URL(request.url)
const { orgid } = params
const query = searchParams.get('q') || ''
const from = searchParams.get('from') || ''
const to = searchParams.get('to') || ''
const from = searchParams.get('from')
const to = searchParams.get('to')
const sort = searchParams.get('sort') || 'created_at:desc'
const status = searchParams.getAll('status') || []
const status = searchParams.get('status')
const page = Number(searchParams.get('p')) + 1
const hitsPerPage = Number(searchParams.get('perPage')) || 25
let builder = new MeiliSearchFilterBuilder().where('org_id', '=', orgid)
if (status.length) {
builder = builder.where('status', 'in', status)
if (status) {
builder = builder.where('status', 'in', status.split(','))
}
if (from && to) {
@@ -72,8 +64,8 @@ const formatted = new Intl.DateTimeFormat('en-CA', {
export default function Route({ loaderData: { data } }) {
const [searchParams, setSearchParams] = useSearchParams()
// const [rangeField, setRangeField] = useState<string>('created_at')
const { rangeField, dateRange } = useRangeParams('created_at')
const status = searchParams.get('status')
const rangeParams = useRangeParams()
return (
<Suspense fallback={<Skeleton />}>
@@ -126,26 +118,22 @@ export default function Route({ loaderData: { data } }) {
<div className="flex gap-2.5 max-lg:flex-col w-full">
<div className="flex gap-2.5 max-lg:flex-col">
<FacetedFilter
title="Status"
icon={PlusCircleIcon}
className="lg:flex-1"
value={searchParams.getAll('status')}
value={status ? status.split(',') : []}
onChange={(statuses) => {
setSearchParams((searchParams) => {
searchParams.delete('status')
searchParams.delete('p')
if (statuses.length) {
statuses.forEach((s) =>
searchParams.has('status', s)
? null
: searchParams.append('status', s)
)
searchParams.set('status', statuses.join(','))
}
return searchParams
})
}}
title="Status"
options={Object.entries(statuses).map(([key, value]) => ({
value: key,
...value
@@ -153,69 +141,39 @@ export default function Route({ loaderData: { data } }) {
/>
<RangeCalendarFilter
title="Período"
icon={CalendarIcon}
value={rangeParams}
className="lg:flex-1"
value={dateRange}
onChange={(dateRange) => {
options={Object.entries(sortings).map(
([value, label]) => ({
value,
label
})
)}
onChange={(props) => {
setSearchParams((searchParams) => {
if (dateRange) {
searchParams.set(
'from',
`${rangeField}:${formatted.format(dateRange.from)}`
)
searchParams.set(
'to',
formatted.format(dateRange.to)
)
} else {
if (!props) {
searchParams.delete('from')
searchParams.delete('to')
return searchParams
}
const { rangeField, dateRange } = props
searchParams.set(
'from',
`${rangeField}:${formatted.format(dateRange?.from)}`
)
searchParams.set(
'to',
formatted.format(dateRange?.to)
)
return searchParams
})
}}
>
<div className="p-2.5">
<Select
defaultValue={rangeField}
onValueChange={(value) => {
setSearchParams((searchParams) => {
if (searchParams.has('from')) {
searchParams.set(
'from',
`${value}:${dateRange?.from?.getTime()}`
)
}
return searchParams
})
}}
>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="created_at">
Matriculado em
</SelectItem>
<SelectItem value="started_at">
Iniciado em
</SelectItem>
<SelectItem value="completed_at">
Aprovado em
</SelectItem>
<SelectItem value="failed_at">
Reprovado em
</SelectItem>
<SelectItem value="canceled_at">
Cancelado em
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
</RangeCalendarFilter>
/>
</div>
<div className="lg:ml-auto flex gap-2.5">
@@ -237,12 +195,12 @@ export default function Route({ loaderData: { data } }) {
)
}
function useRangeParams(initRangeField: string) {
function useRangeParams() {
const [searchParams] = useSearchParams()
const [from, to] = [searchParams.get('from'), searchParams.get('to')]
if (!from || !to) {
return { rangeField: initRangeField, dateRange: undefined }
return {}
}
const [rangeField, from_] = from.split(':')