feat: enhance phone number input handling in Customer and Supplier components
This commit is contained in:
parent
f93bd17b2d
commit
c43713c41c
@ -31,7 +31,7 @@ public function rules(): array
|
|||||||
Rule::unique('users', 'username')->ignore($userId, 'id'),
|
Rule::unique('users', 'username')->ignore($userId, 'id'),
|
||||||
],
|
],
|
||||||
'full_name' => ['required', 'string', 'max:200'],
|
'full_name' => ['required', 'string', 'max:200'],
|
||||||
'phone_number' => ['nullable', 'string', 'max:20'],
|
'phone_number' => ['nullable', 'string', 'max:20', 'digits_between:1,20'],
|
||||||
'gender' => ['nullable', 'in:male,female'],
|
'gender' => ['nullable', 'in:male,female'],
|
||||||
'birth_date' => ['nullable', 'date'],
|
'birth_date' => ['nullable', 'date'],
|
||||||
'address' => ['nullable', 'string'],
|
'address' => ['nullable', 'string'],
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { Form, Head, router } from '@inertiajs/react';
|
import { ConfirmDialog } from '@/components/confirm-dialog';
|
||||||
import { Plus } from 'lucide-react';
|
import { DataTable } from '@/components/data-table';
|
||||||
import { useState } from 'react';
|
|
||||||
import InputError from '@/components/input-error';
|
import InputError from '@/components/input-error';
|
||||||
|
import { PhoneNumberInput } from '@/components/phone-number-input';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
@ -12,11 +12,12 @@ import {
|
|||||||
} from '@/components/ui/dialog';
|
} from '@/components/ui/dialog';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { destroy, index as customerIndex, store, update } from '@/routes/admin/master/customers';
|
import { index as customerIndex, destroy, store, update } from '@/routes/admin/master/customers';
|
||||||
import { createCustomerColumns } from './columns';
|
import { Form, Head, router } from '@inertiajs/react';
|
||||||
|
import { Plus } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
import type { Customer } from './columns';
|
import type { Customer } from './columns';
|
||||||
import { ConfirmDialog } from '@/components/confirm-dialog';
|
import { createCustomerColumns } from './columns';
|
||||||
import { DataTable } from '@/components/data-table';
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
customers: Customer[];
|
customers: Customer[];
|
||||||
@ -88,14 +89,7 @@ export default function CustomerIndex({ customers }: Props) {
|
|||||||
<Label htmlFor="phone_number">
|
<Label htmlFor="phone_number">
|
||||||
No. Telepon
|
No. Telepon
|
||||||
</Label>
|
</Label>
|
||||||
<Input
|
<PhoneNumberInput name="phone_number"/>
|
||||||
id="phone_number"
|
|
||||||
name="phone_number"
|
|
||||||
type="tel"
|
|
||||||
inputMode="numeric"
|
|
||||||
pattern="[0-9]*"
|
|
||||||
placeholder="Masukkan nomor telepon"
|
|
||||||
/>
|
|
||||||
<InputError message={errors.phone_number} />
|
<InputError message={errors.phone_number} />
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-2">
|
<div className="grid gap-2">
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { Form, Head, router } from '@inertiajs/react';
|
import { ConfirmDialog } from '@/components/confirm-dialog';
|
||||||
import { Plus } from 'lucide-react';
|
import { DataTable } from '@/components/data-table';
|
||||||
import { useState } from 'react';
|
|
||||||
import InputError from '@/components/input-error';
|
import InputError from '@/components/input-error';
|
||||||
|
import { PhoneNumberInput } from '@/components/phone-number-input';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
@ -12,11 +12,12 @@ import {
|
|||||||
} from '@/components/ui/dialog';
|
} from '@/components/ui/dialog';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { destroy, index as supplierIndex, store, update } from '@/routes/admin/master/suppliers';
|
import { destroy, store, index as supplierIndex, update } from '@/routes/admin/master/suppliers';
|
||||||
import { createSupplierColumns } from './columns';
|
import { Form, Head, router } from '@inertiajs/react';
|
||||||
|
import { Plus } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
import type { Supplier } from './columns';
|
import type { Supplier } from './columns';
|
||||||
import { ConfirmDialog } from '@/components/confirm-dialog';
|
import { createSupplierColumns } from './columns';
|
||||||
import { DataTable } from '@/components/data-table';
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
suppliers: Supplier[];
|
suppliers: Supplier[];
|
||||||
@ -88,14 +89,7 @@ export default function SupplierIndex({ suppliers }: Props) {
|
|||||||
<Label htmlFor="phone_number">
|
<Label htmlFor="phone_number">
|
||||||
No. Telepon
|
No. Telepon
|
||||||
</Label>
|
</Label>
|
||||||
<Input
|
<PhoneNumberInput name="phone_number"/>
|
||||||
id="phone_number"
|
|
||||||
name="phone_number"
|
|
||||||
type="tel"
|
|
||||||
inputMode="numeric"
|
|
||||||
pattern="[0-9]*"
|
|
||||||
placeholder="Masukkan nomor telepon"
|
|
||||||
/>
|
|
||||||
<InputError message={errors.phone_number} />
|
<InputError message={errors.phone_number} />
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-2">
|
<div className="grid gap-2">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user