update

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

@@ -15,6 +15,20 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+
+interface MunicipioProps {
+  id: number;
+  name: string;
+}
 
 const API_URL = apiConfig.service_master_data;
 
@@ -22,9 +36,10 @@ const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { showAddDialog, handleAddDialog } = useManagePostoAdmsContext();
   const { reload } = useDataGrid();
-  const { PostData } = useCallApi();
+  const { PostData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
-
+  const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -88,6 +103,34 @@ const AddDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
+
+  useEffect(() => {
+    const fetchMunicipios = async (sorting: any) => {
+      try {
+        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL}/municipios/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        // console.log(response?.data);
+        setMunicipios(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching municipios', error);
+      }
+    };
+
+    fetchMunicipios([{ id: 'name', desc: false }]);
+  }, []);
+
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -122,18 +165,41 @@ const AddDialog = () => {
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">
-                      Municipio ID<span className="text-red-500">*</span>
+                      Municipio Name<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      min={0}
-                      value={formField.municipio_id === 0 ? '' : formField.municipio_id}
-                      onChange={(e) => {
-                        const value = parseInt(e.target.value, 10);
-                        setFormField({ ...formField, municipio_id: isNaN(value) ? 0 : value });
-                      }}
-                    />
+                    <Popover open={open} onOpenChange={setOpen}>
+                      <PopoverTrigger asChild>
+                        <button type="button" className="input col-span-5 text-left">
+                          {municipios.find((municipio) => municipio.id === formField.municipio_id)
+                            ?.name || 'Select Municipios'}
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="Search Municipios..." />
+                          <CommandList>
+                            <CommandEmpty>No Municipio found.</CommandEmpty>
+                            <CommandGroup>
+                              {municipios.map((municipio) => (
+                                <CommandItem
+                                  key={municipio.id}
+                                  value={municipio.name}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      municipio_id: municipio.id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {municipio.name}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </div>