update refresh, add data, navigasi all master

src/pages/master/sucos/blocks/EditDialog.tsx

@@ -2,7 +2,7 @@ import { Alert, useDataGrid } from '@/components';
 import { useManageSucosContext } from '../hooks/useManageSucosContext';
 import { useCallApi } from '@/hooks';
 import { getAuth } from '@/auth';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
 import {
@@ -15,21 +15,40 @@ 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 PostoAdmsProps {
+  PostoAdms_id: number; // Ubah ke PostoAdms_id
+  PostoAdms_name: string; // Ubah ke PostoAdms_name
+}
 
 const API_URL = apiConfig.service_master_data;
 
 const EditDialog = () => {
-  const { showEditDialog, handleEditDialog, selectedSucos } = useManageSucosContext();
+  const parentRef = useRef<any | null>(null);
+  const { showEditDialog, handleEditDialog, selectedSucos, sucos } = useManageSucosContext();
   const { reload } = useDataGrid();
-  const { PutData } = useCallApi();
+  const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [open, setOpen] = useState(false);
+  const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
+
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
+
   const initialState = {
     name: '',
-    posto_adm_id: 0,
+    posto_adm_id: 0, // Pastikan ini sesuai dengan PostoAdms_id
     updated_by: '',
     updated_at: ''
   };
@@ -65,6 +84,42 @@ const EditDialog = () => {
     [selectedSucos, formField]
   );
 
+  const doFetchPostoAdms = useCallback(async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL}/postoadms/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      setPostoadms(response?.data.list);
+      console.log('Data Posto Adms:', response?.data.list); // Log data postoadms
+    } catch (error) {
+      console.log('Error fetching postoadms', error);
+    }
+  }, []);
+
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/sucos/getdata/${id}`, { id });
+    console.log('Data Sucos:', response?.data); // Log data sucos
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name,
+        posto_adm_id: response.data.posto.id // Pastikan ini sesuai dengan PostoAdms_id
+      }));
+    } else {
+      setFormField((prev) => ({
+        ...prev,
+        name: ''
+      }));
+    }
+  }, []);
+
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -73,21 +128,40 @@ const EditDialog = () => {
       return;
     }
 
+    console.log('Form Field before update:', formField); // Log formField sebelum update
     doUpdateSucos(e);
-    console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
   useEffect(() => {
     if (showEditDialog) {
+      resetForm();
+      console.log('Edit Dialog Opened'); // Log ketika dialog dibuka
+    }
+  }, [showEditDialog]);
+
+  useEffect(() => {
+    if (selectedSucos) {
+      doFetchData(selectedSucos);
+      console.log('Selected Sucos ID:', selectedSucos); // Log selectedSucos ID
+    }
+  }, [selectedSucos]);
+
+  useEffect(() => {
+    if (selectedSucos) {
       setFormField({
         ...formField,
-        updated_by: parsedUser.username,
+        updated_by: parsedUser?.username,
         updated_at: formattedTime
       });
+      console.log('Form Field after update:', formField); // Log formField setelah update
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    doFetchPostoAdms([{ 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">
@@ -122,23 +196,49 @@ 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">
-                      Posto Adm ID
+                      Posto Administrativo Name
                       <span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      min={0}
-                      value={formField.posto_adm_id === 0 ? '' : formField.posto_adm_id}
-                      onChange={(e) => {
-                        const value = parseInt(e.target.value, 10);
-                        setFormField({ ...formField, posto_adm_id: isNaN(value) ? 0 : value });
-                      }}
-                    />
+                    <Popover open={open} onOpenChange={setOpen}>
+                      <PopoverTrigger asChild>
+                        <button type="button" className="input col-span-5 text-left">
+                          {postoadms.find((posto) => posto.PostoAdms_id === formField.posto_adm_id)
+                            ?.PostoAdms_name || 'Select Posto Adms'}
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="Search Posto Adms..." />
+                          <CommandList>
+                            <CommandEmpty>No Posto Adms Found.</CommandEmpty>
+                            <CommandGroup>
+                              {postoadms.map((posto) => (
+                                <CommandItem
+                                  key={posto.PostoAdms_id}
+                                  value={posto.PostoAdms_name}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      posto_adm_id: posto.PostoAdms_id // Gunakan PostoAdms_id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {posto.PostoAdms_name}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </div>
                 </div>
 
-                <div className="flex justify-end">
+                <div className="flex justify-end gap-5">
+                  <Button type="button" variant="outline" onClick={resetForm}>
+                    Reset
+                  </Button>
                   <Button className="btn btn-primary">Save Changes</Button>
                 </div>
               </div>