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,13 +97,19 @@ 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}
           />
 
+          {searched ? (
             <CommandList>
               <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
 
@@ -153,6 +163,7 @@ export function AsyncCombobox({
                 ))}
               </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}>
+          <div className="flex">
+            <div className="flex-1">
               <CommandInput
                 placeholder="Curso"
                 autoComplete="off"
                 onValueChange={setSearch}
               />
-          <CommandList>
+            </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)