iupdate
This commit is contained in:
@@ -9,3 +9,17 @@
|
||||
* https://github.com/tailwindlabs/tailwindcss/issues/16733
|
||||
*/
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,14 +1,18 @@
|
||||
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 { ErrorMessage } from '@hookform/error-message'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
|
||||
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 { 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 { Cell } from '../_.$orgid.enrollments.add/route'
|
||||
@@ -36,7 +40,7 @@ const item = z.object({
|
||||
{ error: 'Escolha um curso' }
|
||||
)
|
||||
.required(),
|
||||
quantity: z.number()
|
||||
quantity: z.number().min(1)
|
||||
})
|
||||
|
||||
const formSchema = z.object({
|
||||
@@ -50,7 +54,8 @@ export function Bulk({ courses }: BulkProps) {
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: { items: [emptyRow] }
|
||||
})
|
||||
const { formState, control, handleSubmit } = form
|
||||
const { formState, control, handleSubmit, register, setValue, getValues } =
|
||||
form
|
||||
const { fields, remove, append } = useFieldArray({
|
||||
control,
|
||||
name: 'items'
|
||||
@@ -67,21 +72,26 @@ export function Bulk({ courses }: BulkProps) {
|
||||
return (
|
||||
<Form {...form}>
|
||||
<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 */}
|
||||
<>
|
||||
<Cell>Curso</Cell>
|
||||
<Cell>Quantidade</Cell>
|
||||
<Cell>Valor unit.</Cell>
|
||||
<Cell>Total</Cell>
|
||||
<Cell>{/**/}</Cell>
|
||||
</>
|
||||
|
||||
{/* Rows */}
|
||||
{fields.map((field, index) => {
|
||||
const course = items?.[index]?.course
|
||||
const item = items?.[index] || { course: {}, quantity: 1 }
|
||||
const { course, quantity } = item
|
||||
|
||||
return (
|
||||
<Fragment key={field.id}>
|
||||
{/* Separator only for mobile */}
|
||||
{index >= 1 && <div className="h-2.5 lg:hidden"></div>}
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name={`items.${index}.course`}
|
||||
@@ -108,18 +118,79 @@ export function Bulk({ courses }: BulkProps) {
|
||||
)}
|
||||
/>
|
||||
|
||||
<Input type="number" defaultValue={1} />
|
||||
<InputGroup>
|
||||
{/*<InputGroupAddon>
|
||||
<InputGroupText>R$</InputGroupText>
|
||||
</InputGroupAddon>*/}
|
||||
<InputGroupInput
|
||||
type="number"
|
||||
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
|
||||
className="pointer-events-none"
|
||||
readOnly
|
||||
value={currency.format(course?.unit_price || 0)}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup>
|
||||
<InputGroupInput
|
||||
className="pointer-events-none"
|
||||
readOnly
|
||||
value={currency.format(
|
||||
(course?.unit_price || 0) *
|
||||
(Number.isFinite(quantity) && quantity > 0
|
||||
? quantity
|
||||
: 1)
|
||||
)}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<Button
|
||||
tabIndex={-1}
|
||||
variant="destructive"
|
||||
|
||||
@@ -16,6 +16,7 @@ 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: '' }]
|
||||
@@ -23,7 +24,7 @@ export function meta({}: Route.MetaArgs) {
|
||||
|
||||
export async function loader({ params, context, request }: Route.LoaderArgs) {
|
||||
const cloudflare = context.get(cloudflareContext)
|
||||
const courses = createSearch({
|
||||
const courses = createSearch<Course>({
|
||||
index: 'saladeaula_courses',
|
||||
sort: ['created_at:desc'],
|
||||
filter: 'unlisted NOT EXISTS',
|
||||
|
||||
Reference in New Issue
Block a user