menu crud

src/pages/menu/manage-menu/blocks/AddDIalog.tsx

@@ -12,13 +12,14 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog';
+import { FormControl,NativeSelect } from "@mui/material";
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.service_dashboard;
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showAddDialog, handleAddDialog } = useManageMenusContext();
+  const { showAddDialog, handleAddDialog, parents } = useManageMenusContext();
   const { reload } = useDataGrid();
   const { PostData } = useCallApi();
   const [alert, setAlert] = useState({
@@ -36,26 +37,7 @@ const AddDialog = () => {
   };
   const [formField, setFormField] = useState(initialState);
 
-  const doCreateMenu = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-
-      const response = await PostData(`${API_URL}/menus/create`, formField);
-
-      if (response?.status) {
-        handleAddDialog(false);
-        resetForm();
-        toast.success('Success Create Menu');
-        reload();
-      } else {
-        toast.error('Failed Create Menu');
-        setAlert({ show: true, message: 'Failed Create Menu' });
-      }
-    },
-    [formField]
-  );
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (
@@ -69,7 +51,17 @@ const AddDialog = () => {
       return;
     }
 
-    doCreateMenu(e);
+    const response = await PostData(`${API_URL}/menus/create`, formField);
+
+    if (response?.status) {
+      handleAddDialog(false);
+      resetForm();
+      toast.success('Success Create Menu');
+      reload();
+    } else {
+      toast.error('Failed Create Menu');
+      setAlert({ show: true, message: 'Failed Create Menu' });
+    }
     console.log(formField);
     setAlert({ show: false, message: '' });
   };
@@ -140,13 +132,24 @@ 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">ID Parent</label>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.id_parent}
-                      onChange={(e) => setFormField({ ...formField, id_parent: e.target.value })}
-                    />
+                    <label className="form-label flex items-center gap-1 max-w-56">Parent</label>
+                    <FormControl fullWidth margin="dense">
+                      <NativeSelect
+                        defaultValue={30}
+                        value={formField.id_parent}
+                        onChange={(e: any) => setFormField({ ...formField, id_parent: e.target.value })}
+                        inputProps={{
+                          name: 'id_parent',
+                          id: 'uncontrolled-native',
+                        }}
+                      >
+                      {
+                        parents ? parents.map((el: any) => (
+                          <option key={el.id} value={el.id}>{el.name}</option>
+                        )) : ''
+                      }
+                      </NativeSelect>
+                    </FormControl>
                   </div>
                 </div>
 
@@ -185,12 +188,20 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Status<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.status}
-                      onChange={(e) => setFormField({ ...formField, status: e.target.value })}
-                    />
+                    <FormControl fullWidth margin="dense">
+                      <NativeSelect
+                        defaultValue={30}
+                        value={formField.status}
+                        onChange={(e: any) => setFormField({ ...formField, status: e.target.value })}
+                        inputProps={{
+                          name: 'status',
+                          id: 'uncontrolled-native',
+                        }}
+                      >
+                        <option value={"Y"}>Active</option>
+                        <option value={"N"}>Inactive</option>
+                      </NativeSelect>
+                    </FormControl>
                   </div>
                 </div>