add detailuser file
This commit is contained in:
472
src/pages/user/component/DetailUser.jsx
Normal file
472
src/pages/user/component/DetailUser.jsx
Normal file
@@ -0,0 +1,472 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
||||
import { createUser, updateUser } from '../../../api/user';
|
||||
|
||||
const { Text } = Typography;
|
||||
const { Option } = Select;
|
||||
|
||||
const DetailUser = (props) => {
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
|
||||
const defaultData = {
|
||||
user_id: '',
|
||||
user_name: '',
|
||||
user_fullname: '',
|
||||
user_email: '',
|
||||
user_phone: '',
|
||||
role_id: null,
|
||||
is_active: true,
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
};
|
||||
|
||||
const [FormData, setFormData] = useState(defaultData);
|
||||
const [errors, setErrors] = useState({});
|
||||
|
||||
const handleCancel = () => {
|
||||
props.setSelectedData(null);
|
||||
props.setActionMode('list');
|
||||
setFormData(defaultData);
|
||||
setErrors({});
|
||||
};
|
||||
|
||||
const validatePhone = (phone) => {
|
||||
const phoneRegex = /^(?:\+62|0)8\d{7,10}$/;
|
||||
return phoneRegex.test(phone);
|
||||
};
|
||||
|
||||
const validatePassword = (password) => {
|
||||
if (!password) return 'Password wajib diisi';
|
||||
if (password.length < 8) return 'Password minimal 8 karakter';
|
||||
if (!/[A-Z]/.test(password)) return 'Password harus ada huruf besar';
|
||||
if (!/[a-z]/.test(password)) return 'Password harus ada huruf kecil';
|
||||
if (!/\d/.test(password)) return 'Password harus ada angka';
|
||||
if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) return 'Password harus ada karakter spesial';
|
||||
return null;
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors = {};
|
||||
|
||||
// Required fields validation
|
||||
if (!FormData.user_fullname) {
|
||||
newErrors.user_fullname = 'Nama lengkap wajib diisi';
|
||||
} else if (FormData.user_fullname.length < 3) {
|
||||
newErrors.user_fullname = 'Nama minimal 3 karakter';
|
||||
} else if (FormData.user_fullname.length > 100) {
|
||||
newErrors.user_fullname = 'Nama maksimal 100 karakter';
|
||||
}
|
||||
|
||||
if (!FormData.user_name) {
|
||||
newErrors.user_name = 'Username wajib diisi';
|
||||
} else if (FormData.user_name.length < 3) {
|
||||
newErrors.user_name = 'Username minimal 3 karakter';
|
||||
} else if (FormData.user_name.length > 50) {
|
||||
newErrors.user_name = 'Username maksimal 50 karakter';
|
||||
} else if (!/^[a-zA-Z0-9]+$/.test(FormData.user_name)) {
|
||||
newErrors.user_name = 'Username hanya boleh huruf dan angka';
|
||||
}
|
||||
|
||||
if (!FormData.user_email) {
|
||||
newErrors.user_email = 'Email wajib diisi';
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(FormData.user_email)) {
|
||||
newErrors.user_email = 'Format email tidak valid';
|
||||
}
|
||||
|
||||
if (!FormData.user_phone) {
|
||||
newErrors.user_phone = 'Nomor telepon wajib diisi';
|
||||
} else if (!validatePhone(FormData.user_phone)) {
|
||||
newErrors.user_phone = 'Nomor harus format Indonesia (08xxxxxxxx atau +628xxxxxxxx)';
|
||||
}
|
||||
|
||||
// Password validation for add mode
|
||||
if (!FormData.user_id) {
|
||||
const passwordError = validatePassword(FormData.password);
|
||||
if (passwordError) {
|
||||
newErrors.password = passwordError;
|
||||
}
|
||||
|
||||
if (!FormData.confirmPassword) {
|
||||
newErrors.confirmPassword = 'Konfirmasi password wajib diisi';
|
||||
} else if (FormData.password !== FormData.confirmPassword) {
|
||||
newErrors.confirmPassword = 'Password tidak cocok';
|
||||
}
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!validateForm()) {
|
||||
NotifOk({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
message: 'Mohon periksa kembali form Anda',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setConfirmLoading(true);
|
||||
|
||||
// Format phone number
|
||||
let phone = FormData.user_phone;
|
||||
if (phone.startsWith('0')) {
|
||||
phone = '+62' + phone.slice(1);
|
||||
} else if (!phone.startsWith('+')) {
|
||||
phone = '+62' + phone;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
fullname: FormData.user_fullname,
|
||||
name: FormData.user_name,
|
||||
email: FormData.user_email,
|
||||
phone: phone,
|
||||
role_id: FormData.role_id || null,
|
||||
};
|
||||
|
||||
// Add password for new user (create mode)
|
||||
if (!FormData.user_id) {
|
||||
payload.password = FormData.password;
|
||||
// Don't send confirmPassword, is_sa, is_active for create
|
||||
} else {
|
||||
// Only send is_active for update mode (is_sa is immutable)
|
||||
payload.is_active = FormData.is_active ? 1 : 0;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('Payload being sent:', payload);
|
||||
|
||||
let response;
|
||||
if (!FormData.user_id) {
|
||||
response = await createUser(payload);
|
||||
} else {
|
||||
response = await updateUser(FormData.user_id, payload);
|
||||
}
|
||||
|
||||
console.log('Save User Response:', response);
|
||||
|
||||
// Check if response is successful
|
||||
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `User "${
|
||||
response.data?.user_fullname || FormData.user_fullname
|
||||
}" berhasil ${FormData.user_id ? 'diubah' : 'ditambahkan'}.`,
|
||||
});
|
||||
|
||||
props.setActionMode('list');
|
||||
setFormData(defaultData);
|
||||
setErrors({});
|
||||
} else {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Save User Error:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.',
|
||||
});
|
||||
}
|
||||
|
||||
setConfirmLoading(false);
|
||||
};
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData({
|
||||
...FormData,
|
||||
[name]: value,
|
||||
});
|
||||
// Clear error for this field
|
||||
if (errors[name]) {
|
||||
setErrors({
|
||||
...errors,
|
||||
[name]: null,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectChange = (value) => {
|
||||
setFormData({
|
||||
...FormData,
|
||||
role_id: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSwitchChange = (name, checked) => {
|
||||
setFormData({
|
||||
...FormData,
|
||||
[name]: checked,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
if (props.selectedData != null) {
|
||||
// Format phone untuk display
|
||||
let displayPhone = props.selectedData.user_phone || '';
|
||||
if (displayPhone.startsWith('+62')) {
|
||||
displayPhone = '0' + displayPhone.slice(3);
|
||||
}
|
||||
|
||||
setFormData({
|
||||
user_id: props.selectedData.user_id || '',
|
||||
user_name: props.selectedData.user_name || '',
|
||||
user_fullname: props.selectedData.user_fullname || '',
|
||||
user_email: props.selectedData.user_email || '',
|
||||
user_phone: displayPhone,
|
||||
role_id: props.selectedData.role_id || null,
|
||||
is_active:
|
||||
props.selectedData.is_active === 1 || props.selectedData.is_active === true,
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
});
|
||||
} else {
|
||||
setFormData(defaultData);
|
||||
}
|
||||
setErrors({});
|
||||
}
|
||||
}, [props.showModal]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`${
|
||||
props.actionMode === 'add'
|
||||
? 'Tambah'
|
||||
: props.actionMode === 'preview'
|
||||
? 'Preview'
|
||||
: 'Edit'
|
||||
} User`}
|
||||
open={props.showModal}
|
||||
onCancel={handleCancel}
|
||||
footer={[
|
||||
<React.Fragment key="modal-footer">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button onClick={handleCancel}>Batal</Button>
|
||||
</ConfigProvider>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorBgContainer: '#209652',
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
defaultHoverColor: '#FFFFFF',
|
||||
defaultHoverBorderColor: '#23a55a',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{!props.readOnly && (
|
||||
<Button loading={confirmLoading} onClick={handleSave}>
|
||||
Simpan
|
||||
</Button>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
</React.Fragment>,
|
||||
]}
|
||||
width={600}
|
||||
>
|
||||
{FormData && (
|
||||
<div>
|
||||
<div hidden>
|
||||
<Text strong>User ID</Text>
|
||||
<Input name="user_id" value={FormData.user_id} disabled />
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Nama Lengkap</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="user_fullname"
|
||||
value={FormData.user_fullname}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Masukkan nama lengkap"
|
||||
readOnly={props.readOnly}
|
||||
status={errors.user_fullname ? 'error' : ''}
|
||||
/>
|
||||
{errors.user_fullname && (
|
||||
<Text style={{ color: 'red', fontSize: '12px' }}>
|
||||
{errors.user_fullname}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Username</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="user_name"
|
||||
value={FormData.user_name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Masukkan username"
|
||||
readOnly={props.readOnly || FormData.user_id !== ''}
|
||||
disabled={FormData.user_id !== ''}
|
||||
status={errors.user_name ? 'error' : ''}
|
||||
/>
|
||||
{errors.user_name && (
|
||||
<Text style={{ color: 'red', fontSize: '12px' }}>
|
||||
{errors.user_name}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Email</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="user_email"
|
||||
value={FormData.user_email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Masukkan email"
|
||||
readOnly={props.readOnly}
|
||||
status={errors.user_email ? 'error' : ''}
|
||||
/>
|
||||
{errors.user_email && (
|
||||
<Text style={{ color: 'red', fontSize: '12px' }}>
|
||||
{errors.user_email}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Nomor WhatsApp</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="user_phone"
|
||||
value={FormData.user_phone}
|
||||
onChange={handleInputChange}
|
||||
placeholder="08xxxxxxxxxx atau +628xxxxxxxxxx"
|
||||
readOnly={props.readOnly}
|
||||
status={errors.user_phone ? 'error' : ''}
|
||||
/>
|
||||
{errors.user_phone && (
|
||||
<Text style={{ color: 'red', fontSize: '12px' }}>
|
||||
{errors.user_phone}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!FormData.user_id && (
|
||||
<>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Password</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input.Password
|
||||
name="password"
|
||||
value={FormData.password}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Masukkan password"
|
||||
readOnly={props.readOnly}
|
||||
status={errors.password ? 'error' : ''}
|
||||
/>
|
||||
{errors.password && (
|
||||
<Text style={{ color: 'red', fontSize: '12px' }}>
|
||||
{errors.password}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Konfirmasi Password</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input.Password
|
||||
name="confirmPassword"
|
||||
value={FormData.confirmPassword}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Konfirmasi password"
|
||||
readOnly={props.readOnly}
|
||||
status={errors.confirmPassword ? 'error' : ''}
|
||||
/>
|
||||
{errors.confirmPassword && (
|
||||
<Text style={{ color: 'red', fontSize: '12px' }}>
|
||||
{errors.confirmPassword}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Role</Text>
|
||||
<Select
|
||||
value={FormData.role_id}
|
||||
onChange={handleSelectChange}
|
||||
disabled={props.readOnly}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Pilih role"
|
||||
allowClear
|
||||
>
|
||||
<Option value={1}>Administrator</Option>
|
||||
<Option value={2}>Operator</Option>
|
||||
<Option value={3}>Engineer</Option>
|
||||
<Option value={4}>Guest</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{FormData.user_id && (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div>
|
||||
<Text strong>Status Aktif</Text>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginTop: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>
|
||||
<Switch
|
||||
disabled={props.readOnly}
|
||||
style={{
|
||||
backgroundColor: FormData.is_active
|
||||
? '#23A55A'
|
||||
: '#bfbfbf',
|
||||
}}
|
||||
checked={FormData.is_active}
|
||||
onChange={(checked) =>
|
||||
handleSwitchChange('is_active', checked)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text>{FormData.is_active ? 'Aktif' : 'Nonaktif'}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailUser;
|
||||
Reference in New Issue
Block a user