Add custom validation for contact name and display type badge in contact list
This commit is contained in:
@@ -59,6 +59,17 @@ const DetailContact = memo(function DetailContact(props) {
|
|||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
setConfirmLoading(true);
|
setConfirmLoading(true);
|
||||||
|
|
||||||
|
// Custom validation untuk name - minimal 3 karakter
|
||||||
|
if (formData.name && formData.name.length < 3) {
|
||||||
|
NotifOk({
|
||||||
|
icon: 'warning',
|
||||||
|
title: 'Peringatan',
|
||||||
|
message: 'Nama contact minimal 3 karakter',
|
||||||
|
});
|
||||||
|
setConfirmLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Custom validation untuk phone - Indonesian phone format
|
// Custom validation untuk phone - Indonesian phone format
|
||||||
const phoneRegex = /^(?:\+62|0)8\d{7,10}$/;
|
const phoneRegex = /^(?:\+62|0)8\d{7,10}$/;
|
||||||
if (formData.phone && !phoneRegex.test(formData.phone.replace(/[\s\-\(\)]/g, ''))) {
|
if (formData.phone && !phoneRegex.test(formData.phone.replace(/[\s\-\(\)]/g, ''))) {
|
||||||
|
|||||||
@@ -43,6 +43,22 @@ const ContactCard = memo(function ContactCard({ contact, showEditModal, showDele
|
|||||||
position: 'relative',
|
position: 'relative',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
{/* Type Badge - Top Left */}
|
||||||
|
<div style={{ position: 'absolute', top: 0, left: 0, zIndex: 1 }}>
|
||||||
|
<Tag
|
||||||
|
color={
|
||||||
|
contact.contact_type === 'operator'
|
||||||
|
? 'blue'
|
||||||
|
: contact.contact_type === 'gudang'
|
||||||
|
? 'orange'
|
||||||
|
: 'default'
|
||||||
|
}
|
||||||
|
style={{ fontSize: '11px' }}
|
||||||
|
>
|
||||||
|
{contact.contact_type === 'operator' ? 'Operator' : contact.contact_type === 'gudang' ? 'Gudang' : 'Unknown'}
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Status Badge - Top Right */}
|
{/* Status Badge - Top Right */}
|
||||||
<div style={{ position: 'absolute', top: 0, right: 0, zIndex: 1 }}>
|
<div style={{ position: 'absolute', top: 0, right: 0, zIndex: 1 }}>
|
||||||
{contact.status === 'active' ? (
|
{contact.status === 'active' ? (
|
||||||
@@ -63,7 +79,7 @@ const ContactCard = memo(function ContactCard({ contact, showEditModal, showDele
|
|||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
gap: 12,
|
gap: 12,
|
||||||
flex: 1,
|
flex: 1,
|
||||||
paddingTop: '4px',
|
paddingTop: '28px',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user