add select dropdown on search

src/pages/master/postoadms/blocks/SearchDialog.tsx

@@ -11,14 +11,16 @@ import { Alert, KeenIcon } from '@/components';
 import { Button } from '@/components/ui/button';
 import { apiConfig } from '@/config/api.config';
 import axios from 'axios';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select';
 import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 
 interface SucosProps {
   id: number;
@@ -29,6 +31,7 @@ const API_URL = apiConfig.service_master_data;
 
 const SearchDialog = () => {
   const parentRef = useRef<any | null>(null);
+  const [open, setOpen] = useState(false);
   const { showSearchDialog, handleSearchDialog, postoAdms } = useManagePostoAdmsContext();
   const [alert, setAlert] = useState({
     show: false,
@@ -60,6 +63,7 @@ const SearchDialog = () => {
 
       if (response.data.status) {
         setSucos(response.data.data);
+        console.log(sucos);
         setIsFound(true);
         console.log('Found postoadms: ', response.data.data);
       } else {
@@ -79,25 +83,22 @@ const SearchDialog = () => {
     setIsFound(false);
     setSucos([]);
   };
-  // console.log(municipios);
+  
   return (
-    <Dialog open={showSearchDialog} onOpenChange={(open) => handleSearchDialog(open)}>
+    <Dialog open={showSearchDialog} onOpenChange={handleSearchDialog}>
       <DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogHeader className="p-2 border-0">
           <DialogTitle></DialogTitle>
           <DialogDescription></DialogDescription>
-        <DialogHeader className="p-2 border-0">
           <div className="flex items-center justify-between flex-wrap grow">
             <div className="flex flex-col justify-center">
-              <h1 className="text-xl font-semibold leading-none text-gray-900">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">Search Sucos</h1>
-                Search Sucos
-              </h1>
-              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
             </div>
             <div
               className="cursor-pointer hover:opacity-100 opacity-50"
               onClick={() => {
                 handleSearchDialog(false);
-                resetForm();
+                handleReset();
               }}
             >
               <KeenIcon icon="cross" className="text-1.5xl" />
@@ -105,49 +106,51 @@ const SearchDialog = () => {
           </div>
         </DialogHeader>
         <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
-          <div className="flex flex-col px-0">
+          <form onSubmit={handleSubmit} className="flex flex-col px-5 gap-5">
-            {alert.show && (
+            {alert.show && <Alert variant="danger">{alert.message}</Alert>}
-              <Alert variant="danger" className="mb-5">
+
-                {alert.message}
+            <div className="grid grid-cols-8 gap-1 w-full items-center">
-              </Alert>
+              <label className="form-label flex items-center col-span-3">
-            )}
-            <form action="" onSubmit={handleSubmit}>
-              <div className="card-body grid-cols-6 gap-5 p-0">
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
-                  <label className="form-label flex items-center gap-1 col-span-2">
                 Postu Administrativo Name<span className="text-red-500">*</span>
               </label>
 
-                  <Select
+              <Popover open={open} onOpenChange={setOpen}>
-                    value={formField.id.toString()}
+                <PopoverTrigger asChild>
-                    onValueChange={(target) => {
+                  <button type="button" className="input col-span-5 text-left">
-                      const selectedPostoadms = postoAdms.find((m) => m.posto_adms_id.toString() === target);
+                    {formField.name || 'Select PostoAdms'}
-                      if (selectedPostoadms) {
+                  </button>
+                </PopoverTrigger>
+                <PopoverContent className="w-[400px] p-0">
+                  <Command>
+                    <CommandInput placeholder="Search PostoAdms..." />
+                    <CommandList>
+                      <CommandEmpty>No PostoAdms found.</CommandEmpty>
+                      <CommandGroup>
+                        {postoAdms.map((postoAdm) => (
+                          <CommandItem
+                            key={postoAdm.posto_adms_id}
+                            value={postoAdm.posto_adms_name}
+                            onSelect={() => {
                               setFormField({
-                          ...formField,
+                                id: postoAdm.posto_adms_id,
-                          id: selectedPostoadms.posto_adms_id,
+                                name: postoAdm.posto_adms_name
-                          name: selectedPostoadms.posto_adms_name
                               });
-                      }
+                              setOpen(false);
                             }}
                           >
-                    <SelectTrigger className="col-span-6">
-                      <SelectValue placeholder="Select Municipios" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {postoAdms.map((postoAdm) => (
-                        <SelectItem key={postoAdm.posto_adms_id} value={postoAdm.posto_adms_id.toString()}>
                             {postoAdm.posto_adms_name}
-                        </SelectItem>
+                          </CommandItem>
                         ))}
-                    </SelectContent>
+                      </CommandGroup>
-                  </Select>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
             </div>
 
             {isFound && sucos.length > 0 && (
               <div className="mt-4 border-t pt-4">
                 <h2 className="text-md font-semibold">Sucos: </h2>
-                    <br />
                 <div className="flex flex-col">
                   <span className="text-sm form-hint">
                     {sucos.map((suco) => suco.name).join(', ')}
@@ -156,17 +159,15 @@ const SearchDialog = () => {
               </div>
             )}
 
-                <div className="flex justify-end pt-2.5 gap-5 col-span-6">
+            <div className="flex justify-end gap-4">
-                  <Button variant={'outline'} type="reset" onClick={handleReset}>
+              <Button type="reset" variant="outline" onClick={handleReset}>
                 Reset
               </Button>
-                  <Button variant={'default'} type="submit">
+              <Button type="submit" variant="default">
                 Search
               </Button>
             </div>
-              </div>
           </form>
-          </div>
         </DialogBody>
       </DialogContent>
     </Dialog>