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

fix

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-12-23 13:42:50 -03:00
parent 22a2046fb1
commit 7ab0eab6bb
4 changed files with 150 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -118,6 +118,7 @@ export function Assigned({ courses }: AssignedProps) {
onChange={onChange}
options={courses}
error={fieldState.error}
readOnly
/>
<ErrorMessage
@@ -142,6 +143,7 @@ export function Assigned({ courses }: AssignedProps) {
<InputGroup>
<InputGroupInput
className="pointer-events-none"
tabIndex={-1}
readOnly
value={currency.format(unit_price)}
/>

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

@@ -20,8 +20,7 @@ import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
import { MAX_ITEMS, type Course } from '../_.$orgid.enrollments.add/data'
const emptyRow = {
course: undefined,
quantity: undefined
course: undefined
}
type BulkProps = {
@@ -54,8 +53,15 @@ export function Bulk({ courses }: BulkProps) {
resolver: zodResolver(formSchema),
defaultValues: { items: [emptyRow] }
})
const { formState, control, handleSubmit, register, setValue, getValues } =
form
const {
formState,
control,
handleSubmit,
register,
setValue,
getValues,
setFocus
} = form
const { fields, remove, append } = useFieldArray({
control,
name: 'items'
@@ -96,15 +102,19 @@ export function Bulk({ courses }: BulkProps) {
control={control}
name={`items.${index}.course`}
render={({
field: { name, value, onChange },
field: { name, value, onChange, ref },
fieldState
}) => (
<div className="grid gap-1">
<CoursePicker
ref={ref}
name={name}
autoFocus={index === 0}
value={value}
onChange={onChange}
options={courses}
error={fieldState.error}
readOnly
/>
<ErrorMessage
@@ -139,6 +149,7 @@ export function Bulk({ courses }: BulkProps) {
<InputGroupAddon align="inline-end">
<InputGroupButton
type="button"
tabIndex={-1}
size="icon-xs"
className="border cursor-pointer"
onClick={() => {
@@ -157,6 +168,7 @@ export function Bulk({ courses }: BulkProps) {
<InputGroupAddon align="inline-end">
<InputGroupButton
type="button"
tabIndex={-1}
size="icon-xs"
className="border cursor-pointer"
onClick={() => {
@@ -172,6 +184,7 @@ export function Bulk({ courses }: BulkProps) {
<InputGroup>
<InputGroupInput
tabIndex={-1}
className="pointer-events-none"
readOnly
value={currency.format(course?.unit_price || 0)}
@@ -180,6 +193,7 @@ export function Bulk({ courses }: BulkProps) {
<InputGroup>
<InputGroupInput
tabIndex={-1}
className="pointer-events-none"
readOnly
value={currency.format(
@@ -207,8 +221,13 @@ export function Bulk({ courses }: BulkProps) {
<Button
type="button"
// @ts-ignore
onClick={() => append(emptyRow)}
onClick={() => {
// @ts-ignore
append(emptyRow, { shouldFocus: false })
queueMicrotask(() => {
setFocus(`items.${fields.length}.course`)
})
}}
className="cursor-pointer"
disabled={fields.length == MAX_ITEMS}
variant="outline"

231
apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/course-picker.tsx
View File

@@ -1,4 +1,10 @@
import { use, useState, useMemo } from 'react'
import {
use,
useState,
useMemo,
forwardRef,
type InputHTMLAttributes
} from 'react'
import { useToggle } from 'ahooks'
import Fuse from 'fuse.js'
import {
@@ -32,124 +38,129 @@ import {
import { type Course } from './data'
interface CoursePickerProps {
interface CoursePickerProps extends Omit<
InputHTMLAttributes<HTMLInputElement>,
'value' | 'onChange'
> {
value?: Course
options: Promise<{ hits: any[] }>
onChange?: (value: any) => void
error?: any
}
export function CoursePicker({
value,
onChange,
options,
error
}: CoursePickerProps) {
const { hits } = use(options)
const [search, setSearch] = useState<string>('')
const [open, { set }] = useToggle()
const [sort, { toggle }] = useToggle('a-z', 'z-a')
const fuse = useMemo(() => {
return new Fuse(hits, {
keys: ['name'],
threshold: 0.3,
includeMatches: true
})
}, [hits])
export const CoursePicker = forwardRef<HTMLInputElement, CoursePickerProps>(
({ value, onChange, options, error, ...props }, ref) => {
const { hits } = use(options)
const [search, setSearch] = useState<string>('')
const [open, { set }] = useToggle()
const [sort, { toggle }] = useToggle('a-z', 'z-a')
const fuse = useMemo(() => {
return new Fuse(hits, {
keys: ['name'],
threshold: 0.3,
includeMatches: true
})
}, [hits])
const filtered = useMemo(() => {
const results = !search ? hits : fuse.search(search).map(({ item }) => item)
const filtered = useMemo(() => {
const results = !search
? hits
: fuse.search(search).map(({ item }) => item)
return results.sort((a, b) => {
const comparison = a.name.localeCompare(b.name)
return sort === 'a-z' ? comparison : -comparison
})
}, [search, fuse, hits, sort])
return results.sort((a, b) => {
const comparison = a.name.localeCompare(b.name)
return sort === 'a-z' ? comparison : -comparison
})
}, [search, fuse, hits, sort])
return (
<Popover open={open} onOpenChange={set}>
<PopoverTrigger asChild>
<InputGroup>
<InputGroupInput
readOnly
placeholder="Curso"
value={value?.name || ''}
aria-invalid={!!error}
/>
<InputGroupAddon>
<BookIcon />
</InputGroupAddon>
<InputGroupAddon align="inline-end">
<ChevronsUpDownIcon />
</InputGroupAddon>
</InputGroup>
</PopoverTrigger>
return (
<Popover open={open} onOpenChange={set}>
<PopoverTrigger asChild>
<InputGroup>
<InputGroupInput
ref={ref}
placeholder="Curso"
value={value?.name || ''}
aria-invalid={!!error}
{...props}
/>
<PopoverContent className="lg:w-84 p-0" align="start">
<Command shouldFilter={false}>
<div className="flex">
<div className="flex-1">
<CommandInput
placeholder="Curso"
autoComplete="off"
onValueChange={setSearch}
/>
<InputGroupAddon>
<BookIcon />
</InputGroupAddon>
<InputGroupAddon align="inline-end">
<ChevronsUpDownIcon />
</InputGroupAddon>
</InputGroup>
</PopoverTrigger>
<PopoverContent className="lg:w-84 p-0" align="start">
<Command shouldFilter={false}>
<div className="flex">
<div className="flex-1">
<CommandInput
placeholder="Curso"
autoComplete="off"
onValueChange={setSearch}
/>
</div>
<div className="border-b flex items-center justify-end">
<Button
variant="link"
size="icon-sm"
tabIndex={-1}
className="cursor-pointer text-muted-foreground"
onClick={toggle}
>
{sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowUpAZIcon />}
</Button>
</div>
</div>
<div className="border-b flex items-center justify-end">
<Button
variant="link"
size="icon-sm"
tabIndex={-1}
className="cursor-pointer text-muted-foreground"
onClick={toggle}
>
{sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowUpAZIcon />}
</Button>
</div>
</div>
{/* Force rerender to reset the scroll position */}
<CommandList key={sort}>
<CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
<CommandGroup>
{filtered
.filter(
({ metadata__unit_price = 0 }) => metadata__unit_price > 0
)
.map(
({
id,
name,
access_period,
metadata__unit_price: unit_price
}) => (
<CommandItem
key={id}
value={id}
className="cursor-pointer"
onSelect={() => {
onChange?.({
id,
name,
access_period: Number(access_period),
unit_price: Number(unit_price)
})
set(false)
}}
>
{name}
<CheckIcon
className={cn(
'ml-auto',
value?.id === id ? 'opacity-100' : 'opacity-0'
)}
/>
</CommandItem>
{/* Force rerender to reset the scroll position */}
<CommandList key={sort}>
<CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
<CommandGroup>
{filtered
.filter(
({ metadata__unit_price = 0 }) => metadata__unit_price > 0
)
)}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
}
.map(
({
id,
name,
access_period,
metadata__unit_price: unit_price
}) => (
<CommandItem
key={id}
value={id}
className="cursor-pointer"
onSelect={() => {
onChange?.({
id,
name,
access_period: Number(access_period),
unit_price: Number(unit_price)
})
set(false)
}}
>
{name}
<CheckIcon
className={cn(
'ml-auto',
value?.id === id ? 'opacity-100' : 'opacity-0'
)}
/>
</CommandItem>
)
)}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
}
)

1
apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx
View File

@@ -263,6 +263,7 @@ export default function Route({
onChange={onChange}
options={courses}
error={fieldState.error}
readOnly
/>
<ErrorMessage