add enrollment form

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

@@ -1,6 +1,6 @@
 import type { Route } from './+types/route'
 
-import { useToggle } from 'ahooks'
+import { useRequest, useToggle } from 'ahooks'
 import {
   CalendarIcon,
   CopyIcon,
@@ -10,15 +10,15 @@ import {
   XIcon,
   ChevronsUpDownIcon,
   CheckIcon,
-  BookIcon,
-  UserIcon
+  BookIcon
 } from 'lucide-react'
-import { Link } from 'react-router'
+import { Link, useParams } from 'react-router'
 import { Controller, useFieldArray, useForm } from 'react-hook-form'
-import { Fragment, use, useMemo, useState } from 'react'
+import { Fragment, use, useEffect, useMemo, useState } from 'react'
 import { format } from 'date-fns'
 import { ptBR } from 'react-day-picker/locale'
 import { zodResolver } from '@hookform/resolvers/zod'
+import Fuse from 'fuse.js'
 
 import {
   Command,
@@ -61,10 +61,10 @@ import { Label } from '@repo/ui/components/ui/label'
 import { Calendar } from '@repo/ui/components/ui/calendar'
 import { createSearch } from '@repo/util/meili'
 import { cn } from '@repo/ui/lib/utils'
-import Fuse from 'fuse.js'
 import { useIsMobile } from '@repo/ui/hooks/use-mobile'
 
 import { formSchema, type Schema, MAX_ITEMS } from './data'
+import { AsyncCombobox } from './async-combobox'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Adicionar matrícula' }]
@@ -86,16 +86,20 @@ export async function action({}: Route.ActionArgs) {
   return {}
 }
 
+const emptyRow = {
+  user: undefined,
+  course: undefined,
+  scheduled_for: undefined
+}
+
 export default function Route({
   loaderData: { courses }
 }: Route.ComponentProps) {
+  const { orgid } = useParams()
+  const [data, setData] = useState({})
   const form = useForm({
     resolver: zodResolver(formSchema),
-    defaultValues: {
-      enrollments: [
-        { user: undefined, course: undefined, scheduled_for: undefined }
-      ]
-    }
+    defaultValues: { enrollments: [emptyRow] }
   })
   const { formState, control, handleSubmit, getValues } = form
   const { fields, insert, remove, append } = useFieldArray({
@@ -104,17 +108,25 @@ export default function Route({
   })
 
   const onSubmit = async (data: Schema) => {
-    console.log(data)
+    setData(data)
+  }
+
+  const onSearch = async (search: string) => {
+    const params = new URLSearchParams({ q: search })
+    const r = await fetch(`/${orgid}/users.json?${params.toString()}`)
+    const { hits } = (await r.json()) as { hits: any[] }
+    return hits
   }
 
   const duplicateRow = (index: number, times: number = 1) => {
     if (fields.length + times > MAX_ITEMS) {
-      return
+      return null
     }
 
-    const values = getValues(`enrollments.${index}`)
+    const { user, ...rest } = getValues(`enrollments.${index}`)
     Array.from({ length: times }, (_, i) => {
-      insert(index + 1 + i, values)
+      // @ts-ignore
+      insert(index + 1 + i, rest)
     })
   }
 
@@ -145,7 +157,7 @@ export default function Route({
           <CardHeader>
             <CardTitle className="text-2xl">Adicionar matrícula</CardTitle>
             <CardDescription>
-              Siga os passos abaixo para adicionar uma nova matrícula
+              Siga os passos abaixo para adicionar novas matrículas.
             </CardDescription>
           </CardHeader>
 
@@ -162,21 +174,28 @@ export default function Route({
                 <div className="max-lg:hidden text-foreground font-medium text-sm">
                   Matriculado em
                 </div>
-                <div></div>
+                <div>{/**/}</div>
               </>
 
               {/* Rows */}
               <>
                 {fields.map((field, index) => (
                   <Fragment key={field.id}>
+                    {/* Separator only for mobile */}
                     {index >= 1 && <div className="h-2.5 lg:hidden"></div>}
 
-                    <InputGroup>
-                      <InputGroupInput placeholder="Colaborador" />
-                      <InputGroupAddon>
-                        <UserIcon />
-                      </InputGroupAddon>
-                    </InputGroup>
+                    <Controller
+                      control={control}
+                      name={`enrollments.${index}.user`}
+                      render={({ field: { value, onChange } }) => (
+                        <AsyncCombobox
+                          value={value}
+                          title="Colaborador"
+                          onChange={onChange}
+                          onSearch={onSearch}
+                        />
+                      )}
+                    />
 
                     <Controller
                       control={control}
@@ -233,15 +252,8 @@ export default function Route({
 
             <Button
               type="button"
-              onClick={() =>
-                append({
-                  // @ts-ignore
-                  user: undefined,
-                  // @ts-ignore
-                  course: undefined,
-                  scheduled_for: undefined
-                })
-              }
+              // @ts-ignore
+              onClick={() => append(emptyRow)}
               className="cursor-pointer"
               disabled={fields.length == MAX_ITEMS}
               variant="outline"
@@ -258,11 +270,17 @@ export default function Route({
               disabled={formState.isSubmitting}
             >
               {formState.isSubmitting && <Spinner />}
-              Continuar
+              Matricular
             </Button>
           </CardContent>
         </Card>
       </form>
+
+      {data && (
+        <pre className="whitespace-pre-wrap text-xs bg-muted p-2 rounded">
+          {JSON.stringify(data, null, 2)}
+        </pre>
+      )}
     </div>
   )
 }
@@ -281,7 +299,7 @@ interface FacetedFilterProps {
 }
 
 function FacetedFilter({ value, onChange, options }: FacetedFilterProps) {
-  const [search, setSearch] = useState('')
+  const [search, setSearch] = useState<string>('')
   const [open, { set }] = useToggle()
   const { hits } = use(options)
   const fuse = useMemo(() => {
@@ -318,7 +336,7 @@ function FacetedFilter({ value, onChange, options }: FacetedFilterProps) {
         </InputGroup>
       </PopoverTrigger>
 
-      <PopoverContent className="w-72 p-0" align="start">
+      <PopoverContent className="lg:w-84 p-0" align="start">
         <Command shouldFilter={false}>
           <CommandInput
             placeholder="Curso"
@@ -458,7 +476,7 @@ function DuplicateRowMultipleTimes({
         </Button>
       </PopoverTrigger>
 
-      <PopoverContent align={isMobile ? 'start' : 'end'} className="w-80">
+      <PopoverContent align={isMobile ? 'start' : 'end'} className="w-82">
         <form
           onSubmit={(e) => {
             e.stopPropagation()