yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: validation in DetailContact component

Browse Source
This commit is contained in:
Rafiafrzl
2025-11-20 15:55:03 +07:00
parent 1413d0ef33
commit 2d0c28bc48
1 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/pages/contact/component/DetailContact.jsx
View File

@@ -14,34 +14,22 @@ const DetailContact = memo(function DetailContact(props) {
name: '',
phone: '',
is_active: true,
contact_type: 'operator',
contact_type: '',
};
const [formData, setFormData] = useState(defaultData);
const handleInputChange = (e) => {
let name, value;
if (e && e.target) {
name = e.target.name;
value = e.target.value;
} else if (e && e.type === 'change') {
name = e.name || e.target?.name;
value = e.value !== undefined ? e.value : e.checked;
} else if (typeof e === 'string' || typeof e === 'number') {
// Handle Select onChange
value = e;
name = 'contact_type';
} else {
return;
}
const { name, value } = e.target;
// Validasi untuk field phone - hanya angka yang diperbolehkan
if (name === 'phone') {
value = value.replace(/[^0-9+\-\s()]/g, '');
}
if (name) {
const cleanedValue = value.replace(/[^0-9+\-\s()]/g, '');
setFormData((prev) => ({
...prev,
[name]: cleanedValue,
}));
} else {
setFormData((prev) => ({
...prev,
[name]: value,
@@ -49,6 +37,14 @@ const DetailContact = memo(function DetailContact(props) {
}
};
const handleContactTypeChange = (value) => {
setFormData((prev) => ({
...prev,
contact_type: value,
}));
};
const handleStatusToggle = (checked) => {
setFormData({
...formData,
@@ -59,6 +55,21 @@ const DetailContact = memo(function DetailContact(props) {
const handleSave = async () => {
setConfirmLoading(true);
// Validation rules
const validationRules = [
{ field: 'name', label: 'Contact Name', required: true },
{ field: 'phone', label: 'Phone', required: true },
{ field: 'contact_type', label: 'Contact Type', required: true },
];
if (
validateRun(formData, validationRules, (errorMessages) => {
NotifOk({ icon: 'warning', title: 'Peringatan', message: errorMessages });
setConfirmLoading(false);
})
)
return;
// Custom validation untuk name - minimal 3 karakter
if (formData.name && formData.name.length < 3) {
NotifOk({
@@ -82,21 +93,6 @@ const DetailContact = memo(function DetailContact(props) {
return;
}
// Validation rules
const validationRules = [
{ field: 'name', label: 'Contact Name', required: true },
{ field: 'phone', label: 'Phone', required: true },
{ field: 'contact_type', label: 'Contact Type', required: true },
];
if (
validateRun(formData, validationRules, (errorMessages) => {
NotifOk({ icon: 'warning', title: 'Peringatan', message: errorMessages });
setConfirmLoading(false);
})
)
return;
try {
const contactData = {
contact_name: formData.name,
@@ -107,7 +103,10 @@ const DetailContact = memo(function DetailContact(props) {
let response;
if (props.actionMode === 'edit') {
response = await updateContact(props.selectedData.contact_id || props.selectedData.id, contactData);
response = await updateContact(
props.selectedData.contact_id || props.selectedData.id,
contactData
);
} else {
response = await createContact(contactData);
}
@@ -145,15 +144,16 @@ const DetailContact = memo(function DetailContact(props) {
setFormData({
name: props.selectedData.contact_name || props.selectedData.name,
phone: props.selectedData.contact_phone || props.selectedData.phone,
is_active: props.selectedData.is_active || props.selectedData.status === 'active',
contact_type: props.selectedData.contact_type || props.contactType || 'operator',
is_active:
props.selectedData.is_active || props.selectedData.status === 'active',
contact_type: props.selectedData.contact_type || props.contactType || '',
});
} else if (props.actionMode === 'add') {
setFormData({
name: '',
phone: '',
is_active: true,
contact_type: props.contactType === 'all' ? 'operator' : props.contactType || 'operator',
contact_type: props.contactType === 'all' ? '' : props.contactType || '',
});
}
}
@@ -256,8 +256,8 @@ const DetailContact = memo(function DetailContact(props) {
<Text strong>Contact Type</Text>
<Text style={{ color: 'red' }}> *</Text>
<Select
value={formData.contact_type}
onChange={handleInputChange}
value={formData.contact_type || undefined}
onChange={handleContactTypeChange}
placeholder="Select Contact Type"
disabled={props.readOnly}
style={{ width: '100%' }}