add filter
This commit is contained in:
@@ -104,7 +104,8 @@ export default function Route({
|
||||
defaultValue={search || ''}
|
||||
placeholder={
|
||||
<>
|
||||
Digite <Kbd>/</Kbd> para pesquisar
|
||||
Digite <Kbd className="border font-mono">/</Kbd>{' '}
|
||||
para pesquisar
|
||||
</>
|
||||
}
|
||||
onChange={(value) =>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { Route } from './+types/route'
|
||||
|
||||
import type { MouseEvent } from 'react'
|
||||
import type { MouseEvent, ReactNode } from 'react'
|
||||
import { useRequest, useToggle } from 'ahooks'
|
||||
import {
|
||||
BanIcon,
|
||||
@@ -63,6 +63,12 @@ import {
|
||||
import { Spinner } from '@repo/ui/components/ui/spinner'
|
||||
import { useParams } from 'react-router'
|
||||
import { useRevalidator } from 'react-router'
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger
|
||||
} from '@repo/ui/components/ui/tabs'
|
||||
|
||||
export function meta({}: Route.MetaArgs) {
|
||||
return [{ title: 'Matrículas agendadas' }]
|
||||
@@ -97,9 +103,7 @@ export default function Route({
|
||||
|
||||
<Await resolve={scheduled}>
|
||||
{({ items }) => {
|
||||
const scheduled = grouping(items)
|
||||
|
||||
if (scheduled.length === 0) {
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<Empty className="border border-dashed">
|
||||
<EmptyHeader>
|
||||
@@ -123,74 +127,45 @@ export default function Route({
|
||||
)
|
||||
}
|
||||
|
||||
const scheduled = grouping(filtering(items, undefined))
|
||||
const executed = grouping(filtering(items, 'EXECUTED'))
|
||||
const failed = grouping(filtering(items, 'FAILED'))
|
||||
|
||||
return (
|
||||
<div className="space-y-5 lg:max-w-4xl mx-auto">
|
||||
{scheduled.map(([run_at, items], index) => (
|
||||
<div
|
||||
className="grid grid-cols-1 lg:grid-cols-5 gap-2.5"
|
||||
key={index}
|
||||
>
|
||||
<div>
|
||||
{DateTime.fromISO(run_at)
|
||||
.setLocale('pt-BR')
|
||||
.toFormat('cccc, dd LLL yyyy')}
|
||||
</div>
|
||||
|
||||
<Card className="col-span-4">
|
||||
<CardContent>
|
||||
<ItemGroup>
|
||||
{items.map(
|
||||
(
|
||||
{ sk, user, course, created_by, scheduled_at },
|
||||
index
|
||||
) => (
|
||||
<Fragment key={index}>
|
||||
<Item>
|
||||
<ItemMedia className="hidden lg:block">
|
||||
<Avatar className="size-10 ">
|
||||
<AvatarFallback className="border">
|
||||
{initials(user.name)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{course.name}</ItemTitle>
|
||||
<ItemDescription className="flex flex-col">
|
||||
<Abbr>{user.name}</Abbr>
|
||||
<Abbr>{user.email}</Abbr>
|
||||
</ItemDescription>
|
||||
<div className="mt-1">
|
||||
<ul
|
||||
className="lg:flex gap-2.5 text-muted-foreground text-sm
|
||||
*:flex *:gap-1 *:items-center"
|
||||
>
|
||||
<li>
|
||||
<CalendarIcon className="size-3.5" />{' '}
|
||||
{datetime.format(
|
||||
new Date(scheduled_at)
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
<UserIcon className="size-3.5" />{' '}
|
||||
{created_by.name}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ItemContent>
|
||||
<ItemActions className="self-start">
|
||||
<ActionMenu sk={sk} />
|
||||
</ItemActions>
|
||||
</Item>
|
||||
|
||||
{index !== items.length - 1 && <ItemSeparator />}
|
||||
</Fragment>
|
||||
)
|
||||
)}
|
||||
</ItemGroup>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Tabs defaultValue="pending" className="space-y-5">
|
||||
<div className="flex justify-between">
|
||||
<TabsList className="*:cursor-pointer">
|
||||
<TabsTrigger value="pending">Aguardando</TabsTrigger>
|
||||
<TabsTrigger value="executed">Executada</TabsTrigger>
|
||||
<TabsTrigger value="failed">Falhou</TabsTrigger>
|
||||
</TabsList>
|
||||
<Button asChild>
|
||||
<Link to="../enrollments/add">
|
||||
<PlusIcon />{' '}
|
||||
<span className="hidden xl:block">Agendar</span>
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<TabsContent value="pending" className="space-y-5">
|
||||
<Timeline events={scheduled}>
|
||||
{({ items }) => (
|
||||
<Scheduled items={items} className="col-span-4" />
|
||||
)}
|
||||
</Timeline>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="executed" className="space-y-5">
|
||||
<Timeline events={executed}>
|
||||
{({ items }) => <>...</>}
|
||||
</Timeline>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="failed" className="space-y-5">
|
||||
<Timeline events={failed}>{({ items }) => <>...</>}</Timeline>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
@@ -199,6 +174,82 @@ export default function Route({
|
||||
)
|
||||
}
|
||||
|
||||
function Timeline({
|
||||
events = [],
|
||||
children
|
||||
}: {
|
||||
events: any[]
|
||||
children: (props: any) => ReactNode
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{events.map(([run_at, items], index) => (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-2.5" key={index}>
|
||||
<div>
|
||||
{DateTime.fromISO(run_at)
|
||||
.setLocale('pt-BR')
|
||||
.toFormat('cccc, dd LLL yyyy')}
|
||||
</div>
|
||||
|
||||
{children({ items })}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function Scheduled({ items, className }) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardContent>
|
||||
<ItemGroup>
|
||||
{items.map(
|
||||
({ sk, user, course, created_by, scheduled_at }, index) => (
|
||||
<Fragment key={index}>
|
||||
<Item className="max-lg:px-0 max-lg:first:pt-0 max-lg:last:pb-0">
|
||||
<ItemMedia className="hidden lg:block">
|
||||
<Avatar className="size-10 ">
|
||||
<AvatarFallback className="border">
|
||||
{initials(user.name)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
|
||||
<ItemContent>
|
||||
<ItemTitle>{course.name}</ItemTitle>
|
||||
<ItemDescription className="flex flex-col">
|
||||
<Abbr>{user.name}</Abbr>
|
||||
<Abbr>{user.email}</Abbr>
|
||||
</ItemDescription>
|
||||
|
||||
<div className="mt-1">
|
||||
<ul className="lg:flex gap-2.5 text-muted-foreground text-sm *:flex *:gap-1 *:items-center">
|
||||
<li>
|
||||
<CalendarIcon className="size-3.5" />{' '}
|
||||
{datetime.format(new Date(scheduled_at))}
|
||||
</li>
|
||||
<li>
|
||||
<UserIcon className="size-3.5" /> {created_by.name}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ItemContent>
|
||||
|
||||
<ItemActions className="self-start">
|
||||
<ActionMenu sk={sk} />
|
||||
</ItemActions>
|
||||
</Item>
|
||||
|
||||
{index !== items.length - 1 && <ItemSeparator />}
|
||||
</Fragment>
|
||||
)
|
||||
)}
|
||||
</ItemGroup>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function ActionMenu({ sk }: { sk: string }) {
|
||||
const { revalidate } = useRevalidator()
|
||||
|
||||
@@ -286,6 +337,13 @@ function CancelItem({ sk, onSuccess }: { sk: string; onSuccess?: () => void }) {
|
||||
)
|
||||
}
|
||||
|
||||
function filtering(items, status) {
|
||||
return items.filter(({ sk }: { sk: string }) => {
|
||||
const [, , s] = sk.split('#')
|
||||
return s == status
|
||||
})
|
||||
}
|
||||
|
||||
function grouping(items) {
|
||||
const newItems = Object.entries(
|
||||
items.reduce((acc, item) => {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { Route } from './+types'
|
||||
import type { Route } from './+types/route'
|
||||
|
||||
import { redirect } from 'react-router'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user