This commit is contained in:
2025-12-23 13:05:03 -03:00
parent 6eff69f168
commit 22a2046fb1
5 changed files with 218 additions and 119 deletions

View File

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