dst/dstpabuaran.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add PhoneNumberInput component and integrate it into employee create and edit forms

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-29 22:42:35 +07:00
parent da30f12fc2
commit d0b288a117
3 changed files with 62 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
resources/js/components/phone-number-input.tsx Normal file
View File

@ -0,0 +1,58 @@
import { useCallback, useRef, useState } from 'react';
import { Input } from '@/components/ui/input';
type PhoneNumberInputProps = {
name?: string;
defaultValue?: string;
placeholder?: string;
disabled?: boolean;
className?: string;
};
function formatPhone(value: string): string {
const digits = value.replace(/[^0-9]/g, '');
const groups: string[] = [];
for (let i = 0; i < digits.length; i += 4) {
groups.push(digits.slice(i, i + 4));
}
return groups.join(' ');
}
export function PhoneNumberInput({
name,
defaultValue = '',
placeholder = '0812 3456 7890',
disabled = false,
className,
}: PhoneNumberInputProps) {
const [displayValue, setDisplayValue] = useState(formatPhone(defaultValue));
const lastValidRef = useRef(displayValue);
const handleChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
const formatted = formatPhone(e.target.value);
lastValidRef.current = formatted;
setDisplayValue(formatted);
},
[],
);
const handleBlur = useCallback(() => {
setDisplayValue(lastValidRef.current);
}, []);
return (
<Input
name={name}
type="text"
inputMode="tel"
value={displayValue}
onChange={handleChange}
onBlur={handleBlur}
placeholder={placeholder}
disabled={disabled}
className={className}
autoComplete="off"
/>
);
}

7
resources/js/pages/admin/hr/employee/create.tsx
View File

@ -1,5 +1,6 @@
import { DatePicker } from '@/components/date-picker';
import InputError from '@/components/input-error';
import { PhoneNumberInput } from '@/components/phone-number-input';
import { RupiahInput } from '@/components/rupiah-input';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
@ -108,11 +109,7 @@ export default function EmployeeCreate() {
<Label htmlFor="phone_number">
Nomor HP
</Label>
<Input
id="phone_number"
name="phone_number"
placeholder="Masukkan nomor HP"
/>
<PhoneNumberInput name="phone_number"/>
<InputError message={errors.phone_number} />
</div>
<div className="grid gap-2">

8
resources/js/pages/admin/hr/employee/edit.tsx
View File

@ -1,5 +1,6 @@
import { DatePicker } from '@/components/date-picker';
import InputError from '@/components/input-error';
import { PhoneNumberInput } from '@/components/phone-number-input';
import { RupiahInput } from '@/components/rupiah-input';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@ -133,12 +134,7 @@ export default function EmployeeEdit({ employee }: Props) {
<Label htmlFor="phone_number">
Nomor HP
</Label>
<Input
id="phone_number"
name="phone_number"
placeholder="Masukkan nomor HP"
defaultValue={employee.user_profile?.phone_number ?? ''}
/>
<PhoneNumberInput name="phone_number"/>
<InputError message={errors.phone_number} />
</div>
<div className="grid gap-2">