From 03e33bc93739cfdaed18bbad7f624ac840165140 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Fri, 14 Mar 2025 13:59:49 +0700
Subject: [PATCH] add dropdown municipio list on form create and update

---
 .../master/postoadms/blocks/AddDialog.tsx     | 86 ++++++++++++++---
 .../master/postoadms/blocks/EditDialog.tsx    | 93 ++++++++++++++++---
 .../master/postoadms/blocks/ListToolbar.tsx   |  2 +-
 .../hooks/ManagePostoAdmsContext.tsx          |  4 +-
 4 files changed, 154 insertions(+), 31 deletions(-)

diff --git a/src/pages/master/postoadms/blocks/AddDialog.tsx b/src/pages/master/postoadms/blocks/AddDialog.tsx
index 6e47f25..6dc83d9 100644
--- a/src/pages/master/postoadms/blocks/AddDialog.tsx
+++ b/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,28 @@ const AddDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    try {
+      const fetchMunicipios = async (sorting: any) => {
+        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);
+      };
+
+      fetchMunicipios([{ id: 'name', desc: false }]);
+    } catch (error) {
+      console.error('Error fetching municipios', error);
+    }
+  }, []);
+
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -122,18 +159,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>
 
diff --git a/src/pages/master/postoadms/blocks/EditDialog.tsx b/src/pages/master/postoadms/blocks/EditDialog.tsx
index 8513d83..c1b85ba 100644
--- a/src/pages/master/postoadms/blocks/EditDialog.tsx
+++ b/src/pages/master/postoadms/blocks/EditDialog.tsx
@@ -15,15 +15,32 @@ 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;
 
 const EditDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showEditDialog, handleEditDialog, selectedPostoAdms } = useManagePostoAdmsContext();
+  const { showEditDialog, handleEditDialog, selectedPostoAdms, postoAdms } =
+    useManagePostoAdmsContext();
   const { reload } = useDataGrid();
-  const { PutData } = useCallApi();
+  const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [open, setOpen] = useState(false);
+  const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
 
   const [alert, setAlert] = useState({
     show: false,
@@ -35,7 +52,6 @@ const EditDialog = () => {
     updated_by: '',
     updated_at: ''
   };
-
   const [formField, setFormField] = useState(initialState);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@@ -72,7 +88,7 @@ const EditDialog = () => {
       return;
     }
 
-    doUpdatePostoAdm(e);
+    // doUpdatePostoAdm(e);
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
@@ -87,6 +103,30 @@ const EditDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    try {
+      const fetchMunicipios = async (sorting: any) => {
+        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);
+      };
+
+      fetchMunicipios([{ id: 'name', desc: false }]);
+    } catch (error) {
+      console.error('Error fetching municipios', error);
+    }
+  }, []);
+
+  console.log(selectedPostoAdms);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -121,18 +161,41 @@ const EditDialog = () => {
                 <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>
 
diff --git a/src/pages/master/postoadms/blocks/ListToolbar.tsx b/src/pages/master/postoadms/blocks/ListToolbar.tsx
index 0be25e2..19a9a65 100644
--- a/src/pages/master/postoadms/blocks/ListToolbar.tsx
+++ b/src/pages/master/postoadms/blocks/ListToolbar.tsx
@@ -16,7 +16,7 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Postu Administrativo"
+                placeholder="Search Postu"
                 value={(table.getColumn('posto_adms_name')?.getFilterValue() as string) ?? ''}
                 onChange={(event) =>
                   table.getColumn('posto_adms_name')?.setFilterValue(event.target.value)
diff --git a/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx b/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx
index 2b19adc..b639521 100644
--- a/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx
+++ b/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx
@@ -125,13 +125,13 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
             <>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleEditDialog(true, row.id)}
+                onClick={() => handleEditDialog(true, row.posto_adms_id)}
               >
                 <KeenIcon icon="notepad-edit" />
               </button>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleDeleteDialog(true, row.id)}
+                onClick={() => handleDeleteDialog(true, row.posto_adms_id)}
               >
                 <KeenIcon icon="trash" />
               </button>