From f1a7a839e8ff533ca17697b5b856f6f2843e0d76 Mon Sep 17 00:00:00 2001
From: Raja Oktafrianto <rajaoktafrianto3.com>
Date: Tue, 25 Mar 2025 14:53:54 +0700
Subject: [PATCH] fixing add dialog manage user & manage position and edit
 dialog manage user

---
 .../user/manage-position/blocks/AddDialog.tsx | 24 +++++++++++---
 .../user/manage-user/blocks/AddDialog.tsx     | 10 ++++--
 .../user/manage-user/blocks/EditDialog.tsx    | 32 +++++++++++++------
 3 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/src/pages/settings/user/manage-position/blocks/AddDialog.tsx b/src/pages/settings/user/manage-position/blocks/AddDialog.tsx
index 6c32480..b24a4b3 100644
--- a/src/pages/settings/user/manage-position/blocks/AddDialog.tsx
+++ b/src/pages/settings/user/manage-position/blocks/AddDialog.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import {
   Dialog,
@@ -59,6 +59,10 @@ const MenuItemComponent: React.FC<{
   );
 };
 
+const initialState = {
+  name: ''
+};
+
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { showAddDialog, handleAddDialog, menus } = useManagePositionContext();
@@ -69,9 +73,7 @@ const AddDialog = () => {
     message: ''
   });
   const [selectMenus, setSelectMenus] = useState<string[]>([]);
-  const [formField, setFormField] = useState({
-    name: ''
-  });
+  const [formField, setFormField] = useState(initialState);
 
   /* actions */
   const handleCheckboxChange = useCallback((key: string) => {
@@ -80,6 +82,12 @@ const AddDialog = () => {
     );
   }, []);
 
+  const resetForm = () => {
+    setFormField(() => ({ name: '' }));
+    setAlert({ show: false, message: '' });
+    setSelectMenus([]);
+  };
+
   const doCreatePosition = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -96,7 +104,7 @@ const AddDialog = () => {
       });
 
       if (response?.status) {
-        setAlert((prev) => ({ ...prev, show: false, message: '' }));
+        resetForm();
         handleAddDialog(false);
         toast.success('Success Create Position');
         reload();
@@ -114,6 +122,12 @@ const AddDialog = () => {
     [formField, selectMenus]
   );
 
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
+
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-screen-lg flex flex-col p-10 overflow-hidden [&>button]:hidden">
diff --git a/src/pages/settings/user/manage-user/blocks/AddDialog.tsx b/src/pages/settings/user/manage-user/blocks/AddDialog.tsx
index a7647cc..ac69750 100644
--- a/src/pages/settings/user/manage-user/blocks/AddDialog.tsx
+++ b/src/pages/settings/user/manage-user/blocks/AddDialog.tsx
@@ -59,6 +59,7 @@ const AddDialog = () => {
   const [formField, setFormField] = useState(initialState);
   const resetForm = () => {
     setFormField(initialState);
+    setAlert({ show: false, message: '' });
   };
   const [showPassword, setShowPassword] = useState({
     password: false,
@@ -104,6 +105,12 @@ const AddDialog = () => {
 
   const isButtonDisabled = !messagePassword || isSubmitting || passwordErrors.length > 0;
 
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
+
   /* actions */
   const doCreateUser = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
@@ -118,7 +125,7 @@ const AddDialog = () => {
           `${API_URL}/user/add_role/${response?.message?.id}/${formField.id_role}`,
           {}
         );
-        setAlert((prev) => ({ ...prev, show: false, message: '' }));
+        resetForm();
         handleAddDialog(false);
         toast.success('Success Create User');
         reload();
@@ -336,7 +343,6 @@ const AddDialog = () => {
                     </div>
                   </div>
                 </div>
-                
 
                 <div className="flex justify-end pt-2.5">
                   <Button className="btn btn-primary" type="submit" disabled={isButtonDisabled}>
diff --git a/src/pages/settings/user/manage-user/blocks/EditDialog.tsx b/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
index c5e550c..e0110d3 100644
--- a/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
+++ b/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
@@ -26,6 +26,15 @@ import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_dashboard;
 
+const initialState = {
+  name: '',
+  username: '',
+  email: '',
+  id_role: '',
+  id_role_old: '',
+  status: ''
+};
+
 const EditDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { showEditDialog, selectedUser, handleEditDialog, roles } = useUserContext();
@@ -35,16 +44,14 @@ const EditDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
-    name: '',
-    username: '',
-    email: '',
-    id_role: '',
-    id_role_old: '',
-    status: ''
-  };
+
   const [formField, setFormField] = useState(initialState);
 
+  const resetForm = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+  };
+
   /* actions */
   const doResetForm = () => {
     setAlert({ show: false, message: '' });
@@ -58,7 +65,14 @@ const EditDialog = () => {
         ...formField,
         id_role_old: undefined
       });
+
+      if (formField.name.trim() === '') {
+        setAlert({ show: true, message: 'Please fill all required field' });
+        return;
+      }
+
       if (response?.status) {
+        resetForm();
         handleEditDialog(false, null);
         toast.success('Success Update User');
         reload();
@@ -111,7 +125,7 @@ const EditDialog = () => {
 
   useEffect(() => {
     if (showEditDialog === false) {
-      doResetForm();
+      resetForm();
     }
   }, [showEditDialog]);