123 lines
3.5 KiB
TypeScript
123 lines
3.5 KiB
TypeScript
import type { Route } from './+types/route'
|
|
|
|
import { Link } from 'react-router'
|
|
import { useToggle } from 'ahooks'
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardDescription,
|
|
CardTitle
|
|
} from '@repo/ui/components/ui/card'
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator
|
|
} from '@repo/ui/components/ui/breadcrumb'
|
|
import { Switch } from '@repo/ui/components/ui/switch'
|
|
import { createSearch } from '@repo/util/meili'
|
|
import { cloudflareContext } from '@repo/auth/context'
|
|
import { Label } from '@repo/ui/components/ui/label'
|
|
|
|
import { Assigned } from './assigned'
|
|
import { Bulk } from './bulk'
|
|
import type { Course } from '../_.$orgid.enrollments.add/data'
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [{ title: 'Comprar matrículas' }]
|
|
}
|
|
|
|
export async function loader({ params, context, request }: Route.LoaderArgs) {
|
|
const cloudflare = context.get(cloudflareContext)
|
|
const courses = createSearch<Course>({
|
|
index: 'saladeaula_courses',
|
|
sort: ['created_at:desc'],
|
|
filter: 'unlisted NOT EXISTS',
|
|
hitsPerPage: 100,
|
|
env: cloudflare.env
|
|
})
|
|
|
|
return { courses }
|
|
}
|
|
|
|
export async function action({ request }: Route.ActionArgs) {
|
|
const body = (await request.json()) as object
|
|
console.log(body)
|
|
}
|
|
|
|
export default function Route({
|
|
loaderData: { courses }
|
|
}: Route.ComponentProps) {
|
|
const [state, { toggle }] = useToggle('bulk', 'assigned')
|
|
|
|
const onSubmit = async (data: any) => {
|
|
await new Promise((r) => setTimeout(r, 2000))
|
|
console.log(data)
|
|
}
|
|
|
|
const props = { courses, onSubmit }
|
|
|
|
return (
|
|
<div className="space-y-2.5">
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink asChild>
|
|
<Link to="../enrollments">Matrículas</Link>
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>Comprar matrículas</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
|
|
<div className="lg:max-w-4xl mx-auto space-y-2.5">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">Comprar matrículas</CardTitle>
|
|
<CardDescription>
|
|
Siga os passos abaixo para comprar novas matrículas.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-4">
|
|
<Label
|
|
className="flex flex-row items-center justify-between cursor-pointer
|
|
bg-accent/50 hover:bg-accent rounded-lg border p-4
|
|
dark:has-aria-checked:border-blue-900
|
|
dark:has-aria-checked:bg-blue-950"
|
|
>
|
|
<div className="grid gap-1.5 font-normal">
|
|
<p className="text-sm leading-none font-medium">
|
|
Adicionar colaboradores
|
|
</p>
|
|
<p className="text-muted-foreground text-sm">
|
|
Você pode adicionar agora os colaboradores que irão fazer o
|
|
curso ou deixar isso para depois.
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={state === 'assigned'}
|
|
onCheckedChange={toggle}
|
|
className="cursor-pointer"
|
|
/>
|
|
</Label>
|
|
|
|
{state == 'assigned' ? (
|
|
<Assigned {...props} />
|
|
) : (
|
|
<Bulk {...props} />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|