update search command

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/async-combobox.tsx

@@ -1,4 +1,4 @@
-import { useRequest, useToggle } from 'ahooks'
+import { useBoolean, useRequest, useToggle } from 'ahooks'
 import { CheckIcon, UserIcon, XIcon, AlertTriangleIcon } from 'lucide-react'
 import { formatCPF } from '@brazilian-utils/brazilian-utils'
 
@@ -29,18 +29,21 @@ import { Button } from '@repo/ui/components/ui/button'
 interface AsyncComboboxProps {
   value: any
   title: string
+  placeholder?: string
   onChange: (props: any) => void
   onSearch: (search: string) => Promise<any[]>
   error?: any
 }
 export function AsyncCombobox({
   title,
+  placeholder,
   value,
   onSearch,
   onChange,
   error
 }: AsyncComboboxProps) {
   const [open, { set }] = useToggle()
+  const [searched, { setTrue }] = useBoolean()
   const {
     data = [],
     loading,
@@ -48,7 +51,8 @@ export function AsyncCombobox({
   } = useRequest(onSearch, {
     manual: true,
     debounceWait: 300,
-    defaultParams: ['']
+    defaultParams: [''],
+    onSuccess: setTrue
   })
 
   return (
@@ -72,7 +76,7 @@ export function AsyncCombobox({
               <Button
                 variant="link"
                 size="icon-sm"
-                className="cursor-pointer text-black dark:text-white"
+                className="cursor-pointer text-muted-foreground"
                 onClick={(e) => {
                   e.preventDefault()
                   onChange?.(undefined)
@@ -93,66 +97,73 @@ export function AsyncCombobox({
       </PopoverTrigger>
 
       <PopoverContent className="lg:w-84 p-0" align="start">
-        <Command shouldFilter={false}>
+        <Command
+          shouldFilter={false}
+          className={cn(
+            !searched && '**:data-[slot=command-input-wrapper]:border-b-0'
+          )}
+        >
           <CommandInput
-            placeholder={title}
+            placeholder={placeholder}
             autoComplete="off"
             onValueChange={runAsync}
           />
 
-          <CommandList>
-            <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+          {searched ? (
+            <CommandList>
+              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
 
-            <CommandGroup>
-              {data.map(({ id, name, email, cpf }) => (
-                <CommandItem
-                  key={id}
-                  value={id}
-                  className="cursor-pointer"
-                  disabled={!cpf}
-                  onSelect={() => {
-                    onChange?.({ id, name, email, cpf })
-                    set(false)
-                  }}
-                >
-                  <div className="flex gap-2.5 items-start">
-                    <Avatar className="size-10 hidden lg:block">
-                      <AvatarFallback className="border">
-                        {initials(name)}
-                      </AvatarFallback>
-                    </Avatar>
+              <CommandGroup>
+                {data.map(({ id, name, email, cpf }) => (
+                  <CommandItem
+                    key={id}
+                    value={id}
+                    className="cursor-pointer"
+                    disabled={!cpf}
+                    onSelect={() => {
+                      onChange?.({ id, name, email, cpf })
+                      set(false)
+                    }}
+                  >
+                    <div className="flex gap-2.5 items-start">
+                      <Avatar className="size-10 hidden lg:block">
+                        <AvatarFallback className="border">
+                          {initials(name)}
+                        </AvatarFallback>
+                      </Avatar>
 
-                    <ul>
-                      <li className="font-bold">
-                        <Abbr>{name}</Abbr>
-                      </li>
-                      <li className="text-muted-foreground text-sm">
-                        <Abbr>{email}</Abbr>
-                      </li>
-
-                      {cpf ? (
+                      <ul>
+                        <li className="font-bold">
+                          <Abbr>{name}</Abbr>
+                        </li>
                         <li className="text-muted-foreground text-sm">
-                          {formatCPF(cpf)}
+                          <Abbr>{email}</Abbr>
                         </li>
-                      ) : (
-                        <li className="flex gap-1 items-center text-red-400">
-                          <AlertTriangleIcon className="text-red-400" />
-                          Inelegível
-                        </li>
-                      )}
-                    </ul>
-                  </div>
 
-                  <CheckIcon
-                    className={cn(
-                      'ml-auto',
-                      value?.id === id ? 'opacity-100' : 'opacity-0'
-                    )}
-                  />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
+                        {cpf ? (
+                          <li className="text-muted-foreground text-sm">
+                            {formatCPF(cpf)}
+                          </li>
+                        ) : (
+                          <li className="flex gap-1 items-center text-red-400">
+                            <AlertTriangleIcon className="text-red-400" />
+                            Inelegível
+                          </li>
+                        )}
+                      </ul>
+                    </div>
+
+                    <CheckIcon
+                      className={cn(
+                        'ml-auto',
+                        value?.id === id ? 'opacity-100' : 'opacity-0'
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          ) : null}
         </Command>
       </PopoverContent>
     </Popover>

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

@@ -11,11 +11,13 @@ import {
   XIcon,
   ChevronsUpDownIcon,
   CheckIcon,
-  BookIcon
+  BookIcon,
+  ArrowDownAZIcon,
+  ArrowDownZAIcon
 } from 'lucide-react'
 import { Link, useParams, useFetcher } from 'react-router'
 import { Controller, useFieldArray, useForm } from 'react-hook-form'
-import { Fragment, use, useEffect, useMemo, useState } from 'react'
+import { Fragment, use, useEffect, useMemo, useRef, useState } from 'react'
 import { format } from 'date-fns'
 import { ptBR } from 'react-day-picker/locale'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -348,7 +350,9 @@ function FacetedFilter({
 }: FacetedFilterProps) {
   const [search, setSearch] = useState<string>('')
   const [open, { set }] = useToggle()
+  const [sort, { toggle }] = useToggle('a-z', 'z-a')
   const { hits } = use(options)
+  const listRef = useRef<HTMLDivElement | null>(null)
   const fuse = useMemo(() => {
     return new Fuse(hits, {
       keys: ['name'],
@@ -358,12 +362,13 @@ function FacetedFilter({
   }, [hits])
 
   const filtered = useMemo(() => {
-    if (!search) {
-      return hits
-    }
+    const results = !search ? hits : fuse.search(search).map(({ item }) => item)
 
-    return fuse.search(search).map(({ item }) => item)
-  }, [search, fuse, hits])
+    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}>
@@ -386,12 +391,27 @@ function FacetedFilter({
 
       <PopoverContent className="lg:w-84 p-0" align="start">
         <Command shouldFilter={false}>
-          <CommandInput
-            placeholder="Curso"
-            autoComplete="off"
-            onValueChange={setSearch}
-          />
-          <CommandList>
+          <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"
+                className="cursor-pointer text-muted-foreground"
+                onClick={toggle}
+              >
+                {sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowDownZAIcon />}
+              </Button>
+            </div>
+          </div>
+          {/* Force rerender to reset the scroll position  */}
+          <CommandList key={sort}>
             <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
             <CommandGroup>
               {filtered
@@ -439,7 +459,7 @@ function FacetedFilter({
 
 interface ScheduledForInputProps {
   value?: Date
-  onChange?: (value: any) => void
+  onChange?: (value: Date | undefined) => void
 }
 
 function ScheduledForInput({ value, onChange }: ScheduledForInputProps) {
@@ -459,15 +479,17 @@ function ScheduledForInput({ value, onChange }: ScheduledForInputProps) {
             placeholder="Imediatamente"
             value={displayValue}
           />
+
           <InputGroupAddon>
             <CalendarIcon />
           </InputGroupAddon>
+
           {selected && (
             <InputGroupAddon align="inline-end" className="mr-0">
               <Button
                 variant="link"
                 size="icon-sm"
-                className="cursor-pointer text-black dark:text-white"
+                className="cursor-pointer text-muted-foreground"
                 onClick={(e) => {
                   e.preventDefault()
                   setDate(undefined)
@@ -481,11 +503,12 @@ function ScheduledForInput({ value, onChange }: ScheduledForInputProps) {
           )}
         </InputGroup>
       </PopoverTrigger>
+
       <PopoverContent className="w-full p-0" align="start">
         <Calendar
           mode="single"
           selected={selected}
-          onSelect={(date: Date) => {
+          onSelect={(date: Date | undefined) => {
             setDate(date)
             onChange?.(date)
             set(false)