From 1fc9d72dd63e59250cfd01a79a94997ecf44b663 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Sun, 16 Mar 2025 12:58:27 +0700
Subject: [PATCH] add dropdown for sucos id

---
 src/pages/master/aldeias/blocks/AddDialog.tsx | 89 +++++++++++++++---
 .../master/aldeias/blocks/EditDialog.tsx      | 91 ++++++++++++++++---
 .../master/aldeias/blocks/ListToolbar.tsx     |  4 +-
 .../aldeias/hooks/ManageAldeiasContext.tsx    |  2 +-
 src/pages/master/sucos/blocks/ListToolbar.tsx |  4 +-
 5 files changed, 156 insertions(+), 34 deletions(-)

diff --git a/src/pages/master/aldeias/blocks/AddDialog.tsx b/src/pages/master/aldeias/blocks/AddDialog.tsx
index 66286dd..d91ca21 100644
--- a/src/pages/master/aldeias/blocks/AddDialog.tsx
+++ b/src/pages/master/aldeias/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 SucosProps {
+  sucos_id: number;
+  sucos_name: string;
+}
 
 const API_URL = apiConfig.service_master_data;
 
@@ -22,15 +36,17 @@ const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { showAddDialog, handleAddDialog } = useManageAldeiasContext();
   const { reload } = useDataGrid();
-  const { PostData } = useCallApi();
+  const { PostData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [sucos, setSucos] = useState<SucosProps[]>([]);
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
   const initialState = {
     name: '',
-    sucos: 0,
+    sucos_id: 0,
     created_by: '',
     created_at: ''
   };
@@ -65,12 +81,12 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name === '' || formField.sucos === 0) {
+    if (formField.name === '' || formField.sucos_id === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
-    // doCreateAldeias(e);
+    doCreateAldeias(e);
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
@@ -85,6 +101,28 @@ const AddDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    const fetchSucos = async (sorting: any) => {
+      try {
+        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL}/sucos/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        // console.log('SUCOS', response?.data);
+        setSucos(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching municipios', error);
+      }
+    };
+
+    fetchSucos([{ 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">
@@ -121,16 +159,39 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Sucos ID<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      min={0}
-                      value={formField.sucos === 0 ? '' : formField.sucos}
-                      onChange={(e) => {
-                        const value = parseInt(e.target.value, 10);
-                        setFormField({ ...formField, sucos: isNaN(value) ? 0 : value });
-                      }}
-                    />
+                    <Popover open={open} onOpenChange={setOpen}>
+                      <PopoverTrigger asChild>
+                        <button type="button" className="input col-span-5 text-left">
+                          {sucos.find((suco) => suco.sucos_id === formField.sucos_id)?.sucos_name ||
+                            'Select Sucos'}
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="Search Sucos..." />
+                          <CommandList>
+                            <CommandEmpty>No Sucos found.</CommandEmpty>
+                            <CommandGroup>
+                              {sucos.map((suco) => (
+                                <CommandItem
+                                  key={suco.sucos_id}
+                                  value={suco.sucos_name}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      sucos_id: suco.sucos_id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {suco.sucos_name}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </div>
 
diff --git a/src/pages/master/aldeias/blocks/EditDialog.tsx b/src/pages/master/aldeias/blocks/EditDialog.tsx
index d34e30c..179208c 100644
--- a/src/pages/master/aldeias/blocks/EditDialog.tsx
+++ b/src/pages/master/aldeias/blocks/EditDialog.tsx
@@ -15,21 +15,37 @@ 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 SucosProps {
+  sucos_id: number;
+  sucos_name: string;
+}
 
 const API_URL = apiConfig.service_master_data;
 
 const EditDialog = () => {
-  const { showEditDialog, handleEditDialog, selectedAldeias } = useManageAldeiasContext();
+  const { showEditDialog, handleEditDialog, selectedAldeias, aldeias } = useManageAldeiasContext();
   const { reload } = useDataGrid();
-  const { PutData } = useCallApi();
+  const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [sucos, setSucos] = useState<SucosProps[]>([]);
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
   const initialState = {
     name: '',
-    sucos: 0,
+    sucos_id: 0,
     updated_by: '',
     updated_at: ''
   };
@@ -64,12 +80,12 @@ const EditDialog = () => {
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.name === '' || formField.sucos === 0) {
+    if (formField.name === '' || formField.sucos_id === 0) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
-    // doUpdateAldeias(e);
+    doUpdateAldeias(e);
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
@@ -84,6 +100,28 @@ const EditDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    const fetchSucos = async (sorting: any) => {
+      try {
+        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+        const response = await GetData(`${API_URL}/sucos/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+
+        // console.log('SUCOS', response?.data);
+        setSucos(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching municipios', error);
+      }
+    };
+
+    fetchSucos([{ id: 'name', desc: false }]);
+  }, []);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -120,16 +158,39 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Sucos ID<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      min={0}
-                      value={formField.sucos === 0 ? '' : formField.sucos}
-                      onChange={(e) => {
-                        const value = parseInt(e.target.value, 10);
-                        setFormField({ ...formField, sucos: isNaN(value) ? 0 : value });
-                      }}
-                    />
+                    <Popover open={open} onOpenChange={setOpen}>
+                      <PopoverTrigger asChild>
+                        <button type="button" className="input col-span-5 text-left">
+                          {sucos.find((suco) => suco.sucos_id === formField.sucos_id)?.sucos_name ||
+                            'Select Sucos'}
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="Search Sucos..." />
+                          <CommandList>
+                            <CommandEmpty>No Sucos found.</CommandEmpty>
+                            <CommandGroup>
+                              {sucos.map((suco) => (
+                                <CommandItem
+                                  key={suco.sucos_id}
+                                  value={suco.sucos_name}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      sucos_id: suco.sucos_id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {suco.sucos_name}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </div>
 
diff --git a/src/pages/master/aldeias/blocks/ListToolbar.tsx b/src/pages/master/aldeias/blocks/ListToolbar.tsx
index 7cc5369..70ababf 100644
--- a/src/pages/master/aldeias/blocks/ListToolbar.tsx
+++ b/src/pages/master/aldeias/blocks/ListToolbar.tsx
@@ -31,13 +31,13 @@ const ListToolbar = () => {
                 <KeenIcon icon="filter" />
               </Button>
             </DefaultTooltip>
-            <Button
+            {/* <Button
               variant="outline"
               className="h-7.5 text-[0.8rem]"
               onClick={() => handleSearchDialog(true)}
             >
               Search Sucos
-            </Button>
+            </Button> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button
diff --git a/src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx b/src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx
index d4cf6d3..80359b0 100644
--- a/src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx
+++ b/src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx
@@ -150,7 +150,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      console.log(response?.data);
+      // console.log(response?.data);
       setAldeias(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
diff --git a/src/pages/master/sucos/blocks/ListToolbar.tsx b/src/pages/master/sucos/blocks/ListToolbar.tsx
index f0a23b8..d5eaed2 100644
--- a/src/pages/master/sucos/blocks/ListToolbar.tsx
+++ b/src/pages/master/sucos/blocks/ListToolbar.tsx
@@ -33,13 +33,13 @@ const ListToolbar = () => {
                 <KeenIcon icon="filter" />
               </Button>
             </DefaultTooltip>
-            <Button
+            {/* <Button
               variant="outline"
               className="h-7.5 text-[0.8rem]"
               onClick={() => handleSearchDialog(true)}
             >
               Search Sucos
-            </Button>
+            </Button> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button