fix double click problem

This commit is contained in:
Raja Oktafrianto
2025-04-28 09:40:03 +07:00
parent ffcd56f127
commit fe390a3f6f
3 changed files with 70 additions and 42 deletions

View File

@ -259,8 +259,10 @@ const EditDialog = () => {
</div>
</div> */}
<div className="flex justify-end">
<Button className="btn btn-primary">Save Changes</Button>
<div className="flex justify-end pt-2.5">
<Button className="btn btn-primary" type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Saving...' : 'Save Changes'}
</Button>
</div>
</div>
</form>

View File

@ -71,6 +71,7 @@ const EditDialog = () => {
const { showEditDialog, handleEditDialog, menus, selectedPosition } = useManagePositionContext();
const { reload } = useDataGrid();
const { PutData } = useCallApi();
const [isSubmitting, setIsSubmitting] = useState(false);
const [alert, setAlert] = useState({
show: false,
message: ''
@ -91,6 +92,7 @@ const EditDialog = () => {
const doEditPosition = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitting(true);
if (formField.name.trim() === '') {
setAlert((prev) => ({ ...prev, show: true, message: 'Please fill name field.' }));
@ -102,26 +104,32 @@ const EditDialog = () => {
return;
}
const response = await PutData(`${API_URL}/user_role/update/${selectedPosition.id}`, {
name: formField.name,
roles: selectMenus,
status: formField.status
});
try {
const response = await PutData(`${API_URL}/user_role/update/${selectedPosition.id}`, {
name: formField.name,
roles: selectMenus,
status: formField.status
});
if (response?.status) {
setAlert((prev) => ({ ...prev, show: false, message: '' }));
handleEditDialog(false, null);
toast.success('Success Update Position');
reload();
const createActivity = {
module: 'Manage Position',
description: `Edit Position => ${selectedPosition.name}`,
action: 'U'
};
if (response?.status) {
setAlert((prev) => ({ ...prev, show: false, message: '' }));
handleEditDialog(false, null);
toast.success('Success Update Position');
reload();
const createActivity = {
module: 'Manage Position',
description: `Edit Position => ${selectedPosition.name}`,
action: 'U'
};
doSaveLogActivity(createActivity);
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
doSaveLogActivity(createActivity);
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
}
} catch (error) {
toast.error('Something went wrong, please try again.');
} finally {
setIsSubmitting(false);
}
},
[formField, selectMenus, selectedPosition]
@ -217,9 +225,9 @@ const EditDialog = () => {
))}
</div>
<hr />
<div className="flex justify-end">
<Button className="btn btn-primary" type="submit">
Save Changes
<div className="flex justify-end pt-2.5">
<Button className="btn btn-primary" type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Saving...' : 'Save Changes'}
</Button>
</div>
</div>

View File

@ -60,6 +60,7 @@ const EditDialog = () => {
const [open, setOpen] = useState(false);
const [roles, setRoles] = useState<RoleListProps[]>([]);
const [customers, setCustomers] = useState<CustomerProps[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false);
const [alert, setAlert] = useState({
show: false,
message: ''
@ -76,29 +77,44 @@ const EditDialog = () => {
const doUpdateUser = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await PutData(`${API_URL}/user/update/${selectedUser}`, {
...formField
});
setIsSubmitting(true);
if (formField.name.trim() === '') {
if (
!formField.name.trim() ||
!formField.username.trim() ||
!formField.email.trim() ||
!formField.id_role ||
!formField.status ||
!formField.customerid
) {
setAlert({ show: true, message: 'Please fill all required field' });
return;
}
if (response?.status) {
resetForm();
handleEditDialog(false, null);
toast.success('Success Update User');
reload();
const createActivity = {
module: 'Manage User',
description: `Edit User => ${formField.username}`,
action: 'U'
};
try {
const response = await PutData(`${API_URL}/user/update/${selectedUser}`, {
...formField
});
doSaveLogActivity(createActivity);
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
if (response?.status) {
resetForm();
handleEditDialog(false, null);
toast.success('Success Update User');
reload();
const createActivity = {
module: 'Manage User',
description: `Edit User => ${formField.username}`,
action: 'U'
};
doSaveLogActivity(createActivity);
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
}
} catch (error) {
toast.error('Something went wrong, please try again.');
} finally {
setIsSubmitting(false);
}
},
[selectedUser, formField]
@ -362,8 +378,10 @@ const EditDialog = () => {
</div>
</div>
<div className="flex justify-end">
<Button className="btn btn-primary">Save Changes</Button>
<div className="flex justify-end pt-2.5">
<Button className="btn btn-primary" type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Saving...' : 'Save Changes'}
</Button>
</div>
</div>
</form>