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

add filter

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-12-16 13:02:34 -03:00
parent 62b5340b20
commit ab5bf50900
7 changed files with 230 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
apps/admin.saladeaula.digital/app/routes/_.$orgid.scheduled/route.tsx
View File

@@ -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) => {