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

iupdate

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-12-23 13:05:03 -03:00
parent 6eff69f168
commit 22a2046fb1
5 changed files with 218 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/admin.saladeaula.digital/app/app.css
View File

@@ -9,3 +9,17 @@
* https://github.com/tailwindlabs/tailwindcss/issues/16733 * https://github.com/tailwindlabs/tailwindcss/issues/16733
*/ */
@source '../../../packages/ui'; @source '../../../packages/ui';
@layer utilities {
/* Chrome, Safari, Edge, Opera */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
.no-spinner {
-moz-appearance: textfield;
}
}

219
apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/assigned.tsx
View File

@@ -36,7 +36,7 @@ export function Assigned({ courses }: AssignedProps) {
// resolver: zodResolver(formSchema), // resolver: zodResolver(formSchema),
defaultValues: { enrollments: [emptyRow] } defaultValues: { enrollments: [emptyRow] }
}) })
const { formState, control, handleSubmit, getValues, watch } = form const { formState, control, handleSubmit } = form
const { fields, insert, remove, append } = useFieldArray({ const { fields, insert, remove, append } = useFieldArray({
control, control,
name: 'enrollments' name: 'enrollments'
@@ -53,119 +53,132 @@ export function Assigned({ courses }: AssignedProps) {
return hits return hits
} }
const onSubmit = async (data: any) => {
console.log(data)
}
return ( return (
<Form {...form}> <Form {...form}>
<div className="grid w-full gap-1.5 lg:grid-cols-[repeat(4,1fr)_auto]"> <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
{/* Header */} <div className="grid w-full gap-1.5 lg:grid-cols-[3fr_3fr_2fr_2fr_auto]">
<> {/* Header */}
<Cell>Colaborador</Cell> <>
<Cell>Curso</Cell> <Cell>Colaborador</Cell>
<Cell>Matricular em</Cell> <Cell>Curso</Cell>
<Cell>Valor unit.</Cell> <Cell>Matricular em</Cell>
<Cell>{/**/}</Cell> <Cell>Valor unit.</Cell>
</> <Cell>{/**/}</Cell>
</>
{/* Rows */} {/* Rows */}
{fields.map((field, index) => { {fields.map((field, index) => {
const course = items?.[index]?.course const { unit_price } = items?.[index]?.course || { unit_price: 0 }
return (
<Fragment key={field.id}>
<Controller
control={control}
name={`enrollments.${index}.user`}
render={({ field: { name, value, onChange }, fieldState }) => (
<div className="grid gap-1">
<UserPicker
value={value}
onChange={onChange}
onSearch={onSearch}
fieldState={fieldState}
/>
<ErrorMessage return (
errors={formState.errors} <Fragment key={field.id}>
name={name} {/* Separator only for mobile */}
render={({ message }) => ( {index >= 1 && <div className="h-2.5 lg:hidden"></div>}
<p className="text-destructive text-sm">{message}</p>
)}
/>
</div>
)}
/>
<Controller <Controller
control={control} control={control}
name={`enrollments.${index}.course`} name={`enrollments.${index}.user`}
render={({ field: { name, value, onChange }, fieldState }) => ( render={({
<div className="grid gap-1"> field: { name, value, onChange },
<CoursePicker fieldState
value={value} }) => (
onChange={onChange} <div className="grid gap-1">
options={courses} <UserPicker
error={fieldState.error} value={value}
/> onChange={onChange}
onSearch={onSearch}
fieldState={fieldState}
/>
<ErrorMessage <ErrorMessage
errors={formState.errors} errors={formState.errors}
name={name} name={name}
render={({ message }) => ( render={({ message }) => (
<p className="text-destructive text-sm">{message}</p> <p className="text-destructive text-sm">{message}</p>
)} )}
/> />
</div> </div>
)} )}
/>
<Controller
control={control}
name={`enrollments.${index}.scheduled_for`}
render={({ field: { value, onChange } }) => (
<ScheduledForInput value={value} onChange={onChange} />
)}
/>
<InputGroup>
{/*<InputGroupAddon>
<InputGroupText>R$</InputGroupText>
</InputGroupAddon>*/}
<InputGroupInput
className="pointer-events-none"
value={currency.format(course?.unit_price || 0)}
/> />
</InputGroup>
<Button <Controller
tabIndex={-1} control={control}
variant="destructive" name={`enrollments.${index}.course`}
className="cursor-pointer" render={({
disabled={fields.length == 1} field: { name, value, onChange },
onClick={() => remove(index)} fieldState
> }) => (
<Trash2Icon /> <div className="grid gap-1">
</Button> <CoursePicker
</Fragment> value={value}
) onChange={onChange}
})} options={courses}
</div> error={fieldState.error}
/>
<Button <ErrorMessage
type="button" errors={formState.errors}
// @ts-ignore name={name}
onClick={() => append(emptyRow)} render={({ message }) => (
className="cursor-pointer" <p className="text-destructive text-sm">{message}</p>
disabled={fields.length == MAX_ITEMS} )}
variant="outline" />
size="sm" </div>
> )}
<PlusIcon /> Adicionar />
</Button>
<Separator /> <Controller
control={control}
name={`enrollments.${index}.scheduled_for`}
render={({ field: { value, onChange } }) => (
<ScheduledForInput value={value} onChange={onChange} />
)}
/>
<Button type="submit" className="cursor-pointer"> <InputGroup>
Continuar <InputGroupInput
</Button> className="pointer-events-none"
readOnly
value={currency.format(unit_price)}
/>
</InputGroup>
<Button
tabIndex={-1}
variant="destructive"
className="cursor-pointer"
disabled={fields.length == 1}
onClick={() => remove(index)}
>
<Trash2Icon />
</Button>
</Fragment>
)
})}
</div>
<Button
type="button"
// @ts-ignore
onClick={() => append(emptyRow)}
className="cursor-pointer"
disabled={fields.length == MAX_ITEMS}
variant="outline"
size="sm"
>
<PlusIcon /> Adicionar
</Button>
<Separator />
<Button type="submit" className="cursor-pointer">
Continuar
</Button>
</form>
</Form> </Form>
) )
} }

93
apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/bulk.tsx
View File

@@ -1,14 +1,18 @@
import { Fragment } from 'react' import { Fragment } from 'react'
import { PlusIcon, Trash2Icon } from 'lucide-react' import { MinusIcon, PlusIcon, Trash2Icon } from 'lucide-react'
import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form' import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form'
import { ErrorMessage } from '@hookform/error-message' import { ErrorMessage } from '@hookform/error-message'
import { zodResolver } from '@hookform/resolvers/zod' import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod' import { z } from 'zod'
import { Form } from '@repo/ui/components/ui/form' import { Form } from '@repo/ui/components/ui/form'
import { Input } from '@repo/ui/components/ui/input'
import { Button } from '@repo/ui/components/ui/button' import { Button } from '@repo/ui/components/ui/button'
import { InputGroup, InputGroupInput } from '@repo/ui/components/ui/input-group' import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput
} from '@repo/ui/components/ui/input-group'
import { Separator } from '@repo/ui/components/ui/separator' import { Separator } from '@repo/ui/components/ui/separator'
import { Cell } from '../_.$orgid.enrollments.add/route' import { Cell } from '../_.$orgid.enrollments.add/route'
@@ -36,7 +40,7 @@ const item = z.object({
{ error: 'Escolha um curso' } { error: 'Escolha um curso' }
) )
.required(), .required(),
quantity: z.number() quantity: z.number().min(1)
}) })
const formSchema = z.object({ const formSchema = z.object({
@@ -50,7 +54,8 @@ export function Bulk({ courses }: BulkProps) {
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
defaultValues: { items: [emptyRow] } defaultValues: { items: [emptyRow] }
}) })
const { formState, control, handleSubmit } = form const { formState, control, handleSubmit, register, setValue, getValues } =
form
const { fields, remove, append } = useFieldArray({ const { fields, remove, append } = useFieldArray({
control, control,
name: 'items' name: 'items'
@@ -67,21 +72,26 @@ export function Bulk({ courses }: BulkProps) {
return ( return (
<Form {...form}> <Form {...form}>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4"> <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
<div className="grid w-full gap-1.5 lg:grid-cols-[repeat(3,1fr)_auto]"> <div className="grid w-full gap-1.5 lg:grid-cols-[4fr_2fr_2fr_2fr_auto]">
{/* Header */} {/* Header */}
<> <>
<Cell>Curso</Cell> <Cell>Curso</Cell>
<Cell>Quantidade</Cell> <Cell>Quantidade</Cell>
<Cell>Valor unit.</Cell> <Cell>Valor unit.</Cell>
<Cell>Total</Cell>
<Cell>{/**/}</Cell> <Cell>{/**/}</Cell>
</> </>
{/* Rows */} {/* Rows */}
{fields.map((field, index) => { {fields.map((field, index) => {
const course = items?.[index]?.course const item = items?.[index] || { course: {}, quantity: 1 }
const { course, quantity } = item
return ( return (
<Fragment key={field.id}> <Fragment key={field.id}>
{/* Separator only for mobile */}
{index >= 1 && <div className="h-2.5 lg:hidden"></div>}
<Controller <Controller
control={control} control={control}
name={`items.${index}.course`} name={`items.${index}.course`}
@@ -108,18 +118,79 @@ export function Bulk({ courses }: BulkProps) {
)} )}
/> />
<Input type="number" defaultValue={1} />
<InputGroup> <InputGroup>
{/*<InputGroupAddon> <InputGroupInput
<InputGroupText>R$</InputGroupText> type="number"
</InputGroupAddon>*/} min={1}
defaultValue={1}
className="no-spinner"
{...register(`items.${index}.quantity`, {
valueAsNumber: true,
onBlur: (e) => {
const value = Number(e.target.value)
if (!value || value < 1) {
setValue(`items.${index}.quantity`, 1)
}
}
})}
/>
<InputGroupAddon align="inline-end">
<InputGroupButton
type="button"
size="icon-xs"
className="border cursor-pointer"
onClick={() => {
const quantity =
getValues(`items.${index}.quantity`) || 1
setValue(
`items.${index}.quantity`,
Math.max(1, quantity - 1)
)
}}
>
<MinusIcon />
</InputGroupButton>
</InputGroupAddon>
<InputGroupAddon align="inline-end">
<InputGroupButton
type="button"
size="icon-xs"
className="border cursor-pointer"
onClick={() => {
const quantity =
getValues(`items.${index}.quantity`) || 1
setValue(`items.${index}.quantity`, quantity + 1)
}}
>
<PlusIcon />
</InputGroupButton>
</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupInput <InputGroupInput
className="pointer-events-none" className="pointer-events-none"
readOnly
value={currency.format(course?.unit_price || 0)} value={currency.format(course?.unit_price || 0)}
/> />
</InputGroup> </InputGroup>
<InputGroup>
<InputGroupInput
className="pointer-events-none"
readOnly
value={currency.format(
(course?.unit_price || 0) *
(Number.isFinite(quantity) && quantity > 0
? quantity
: 1)
)}
/>
</InputGroup>
<Button <Button
tabIndex={-1} tabIndex={-1}
variant="destructive" variant="destructive"

3
apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/route.tsx
View File

@@ -16,6 +16,7 @@ import { Label } from '@repo/ui/components/ui/label'
import { Assigned } from './assigned' import { Assigned } from './assigned'
import { Bulk } from './bulk' import { Bulk } from './bulk'
import type { Course } from '../_.$orgid.enrollments.add/data'
export function meta({}: Route.MetaArgs) { export function meta({}: Route.MetaArgs) {
return [{ title: '' }] return [{ title: '' }]
@@ -23,7 +24,7 @@ export function meta({}: Route.MetaArgs) {
export async function loader({ params, context, request }: Route.LoaderArgs) { export async function loader({ params, context, request }: Route.LoaderArgs) {
const cloudflare = context.get(cloudflareContext) const cloudflare = context.get(cloudflareContext)
const courses = createSearch({ const courses = createSearch<Course>({
index: 'saladeaula_courses', index: 'saladeaula_courses',
sort: ['created_at:desc'], sort: ['created_at:desc'],
filter: 'unlisted NOT EXISTS', filter: 'unlisted NOT EXISTS',

8
packages/util/src/meili.ts
View File

@@ -2,9 +2,9 @@ import { Meilisearch, type SearchResponse } from 'meilisearch'
const MAX_HITS_PER_PAGE = 100 const MAX_HITS_PER_PAGE = 100
export async function createSearch({ export async function createSearch<T extends Record<string, any>>({
query, query,
filter = undefined, filter,
index, index,
page, page,
hitsPerPage = 25, hitsPerPage = 25,
@@ -18,11 +18,11 @@ export async function createSearch({
hitsPerPage?: number hitsPerPage?: number
sort: string[] sort: string[]
env: any env: any
}): Promise<SearchResponse> { }): Promise<SearchResponse<T>> {
const host = env.MEILI_HOST const host = env.MEILI_HOST
const apiKey = env.MEILI_API_KEY const apiKey = env.MEILI_API_KEY
const client = new Meilisearch({ host, apiKey }) const client = new Meilisearch({ host, apiKey })
const index_ = client.index(index) const index_ = client.index<T>(index)
return index_.search(query, { return index_.search(query, {
sort, sort,