santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add shared validation for chainage and coordinates

Browse Source
This commit is contained in:
santasri.pachhal
2026-06-23 18:32:38 +05:30
parent 066374bebc
commit b282fdf56d
7 changed files with 219 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/(modules)/package/components/PackageDialog.tsx
View File

@@ -74,7 +74,11 @@ export function PackageDialog({
</DialogDescription>
</DialogHeader>
<form noValidate onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
<form
noValidate
onSubmit={onSubmit}
className="flex min-h-0 flex-1 flex-col"
>
<div className="max-h-[58vh] space-y-6 overflow-y-auto px-6 py-4">
<section className="space-y-4">
<div className="space-y-1">
@@ -120,7 +124,7 @@ export function PackageDialog({
<FormField id="package-region" label="Region">
<Input
id="package-region"
placeholder="North Zone"
placeholder="Enter region"
{...register('region')}
/>
</FormField>
@@ -131,21 +135,22 @@ export function PackageDialog({
<div className="space-y-1">
<h3 className="text-sm font-semibold">Chainage range</h3>
<p className="text-sm text-muted-foreground">
Optional start and end kilometre values.
start and end kilometre values.
</p>
</div>
<div className="grid gap-4 md:grid-cols-2">
<FormField
id="package-start"
label="Start (km)"
label="Start Chainage"
error={startErrorMessage}
>
<Input
id="package-start"
type="number"
step="0.01"
placeholder="0.00"
step="1"
min="0"
placeholder="Enter start chainage"
aria-invalid={!!startErrorMessage}
{...register('chainage_start_km')}
/>
@@ -153,14 +158,15 @@ export function PackageDialog({
<FormField
id="package-end"
label="End (km)"
label="End Chainage"
error={endErrorMessage}
>
<Input
id="package-end"
type="number"
step="0.01"
placeholder="0.00"
step="1"
min="0"
placeholder="Enter end chainage"
aria-invalid={!!endErrorMessage}
{...register('chainage_end_km')}
/>
@@ -179,7 +185,9 @@ export function PackageDialog({
Cancel
</Button>
<Button type="submit" disabled={isSaving || !canSubmit}>
{isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
{isSaving ? (
<Loader2 className="mr-2 size-4 animate-spin" />
) : null}
{packageId ? 'Update Package' : 'Create Package'}
</Button>
</DialogFooter>

32
src/app/(modules)/package/hooks/usePackageForm.ts
View File

@@ -7,29 +7,25 @@ import { useForm, useWatch } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';
import {
optionalIntegerNumber,
validateChainageRange,
} from '@/lib/validation/numberField';
import { packageService } from '@/services/api';
import type { Package, PackageCreate, PackageUpdate } from '@/types';
import { packageKeys } from '../queries/packageKeys';
const optionalNumber = z.string().refine(
(value) => {
if (!value.trim()) {
return true;
}
return Number.isFinite(Number(value));
},
{ message: 'Enter a valid number' },
);
const packageFormSchema = z.object({
id: z.string().optional(),
project_id: z.string().trim().min(1, 'Project is required'),
name: z.string().trim().min(1, 'Package name is required'),
region: z.string().optional(),
chainage_start_km: optionalNumber,
chainage_end_km: optionalNumber,
});
const packageFormSchema = z
.object({
id: z.string().optional(),
project_id: z.string().trim().min(1, 'Project is required'),
name: z.string().trim().min(1, 'Package name is required'),
region: z.string().optional(),
chainage_start_km: optionalIntegerNumber,
chainage_end_km: optionalIntegerNumber,
})
.superRefine(validateChainageRange);
export type PackageFormValues = z.infer<typeof packageFormSchema>;

30
src/app/(modules)/project/components/ProjectDialog.tsx
View File

@@ -66,7 +66,11 @@ export function ProjectDialog({
</DialogDescription>
</DialogHeader>
<form noValidate onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
<form
noValidate
onSubmit={onSubmit}
className="flex min-h-0 flex-1 flex-col"
>
<div className="max-h-[58vh] space-y-6 overflow-y-auto px-6 py-4">
<section className="space-y-4">
<div className="space-y-1">
@@ -94,14 +98,14 @@ export function ProjectDialog({
<FormField id="project-state" label="State">
<Input
id="project-state"
placeholder="Maharashtra"
placeholder="Enter state"
{...register('state')}
/>
</FormField>
<FormField id="project-corridor" label="Corridor Name">
<Input
id="project-corridor"
placeholder="Mumbai-Goa Highway"
placeholder="Enter corridor name"
{...register('corridor_name')}
/>
</FormField>
@@ -127,7 +131,9 @@ export function ProjectDialog({
id="project-start-lat"
type="number"
step="any"
placeholder="0.0000"
min="-90"
max="90"
placeholder="Enter start latitude"
aria-invalid={!!startLatErrorMessage}
{...register('start_lat')}
/>
@@ -141,7 +147,9 @@ export function ProjectDialog({
id="project-start-lng"
type="number"
step="any"
placeholder="0.0000"
min="-180"
max="180"
placeholder="Enter start longitude"
aria-invalid={!!startLngErrorMessage}
{...register('start_lng')}
/>
@@ -158,7 +166,9 @@ export function ProjectDialog({
id="project-end-lat"
type="number"
step="any"
placeholder="0.0000"
min="-90"
max="90"
placeholder="Enter end latitude"
aria-invalid={!!endLatErrorMessage}
{...register('end_lat')}
/>
@@ -172,7 +182,9 @@ export function ProjectDialog({
id="project-end-lng"
type="number"
step="any"
placeholder="0.0000"
min="-180"
max="180"
placeholder="Enter end longitude"
aria-invalid={!!endLngErrorMessage}
{...register('end_lng')}
/>
@@ -192,7 +204,9 @@ export function ProjectDialog({
Cancel
</Button>
<Button type="submit" disabled={isSaving || !canSubmit}>
{isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
{isSaving ? (
<Loader2 className="mr-2 size-4 animate-spin" />
) : null}
{projectId ? 'Update Project' : 'Create Project'}
</Button>
</DialogFooter>

22
src/app/(modules)/project/hooks/useProjectForm.ts
View File

@@ -7,30 +7,24 @@ import { useForm, useWatch } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';
import {
optionalLatitude,
optionalLongitude,
} from '@/lib/validation/numberField';
import { projectService } from '@/services/api';
import type { Project, ProjectCreate, ProjectUpdate } from '@/types';
import { projectKeys } from '../queries/projectKeys';
const optionalCoordinate = z.string().refine(
(value) => {
if (!value.trim()) {
return true;
}
return Number.isFinite(Number(value));
},
{ message: 'Enter a valid number' },
);
const projectFormSchema = z.object({
id: z.string().optional(),
name: z.string().trim().min(1, 'Project name is required'),
state: z.string().optional(),
corridor_name: z.string().optional(),
start_lat: optionalCoordinate,
start_lng: optionalCoordinate,
end_lat: optionalCoordinate,
end_lng: optionalCoordinate,
start_lat: optionalLatitude,
start_lng: optionalLongitude,
end_lat: optionalLatitude,
end_lng: optionalLongitude,
});
export type ProjectFormValues = z.infer<typeof projectFormSchema>;

16
src/app/(modules)/segment/components/SegmentDialog.tsx
View File

@@ -182,16 +182,16 @@ export function SegmentDialog({
<div className="grid gap-4 md:grid-cols-2">
<FormField
id="segment-start-km"
label="Start (km)"
label="Start Chainage"
required
error={getError('chainage_start_km')}
>
<Input
id="segment-start-km"
type="number"
step="any"
step="1"
min="0"
placeholder="0.0"
placeholder="Enter start chainage"
aria-invalid={!!getError('chainage_start_km')}
{...register('chainage_start_km')}
/>
@@ -199,16 +199,16 @@ export function SegmentDialog({
<FormField
id="segment-end-km"
label="End (km)"
label="End Chainage"
required
error={getError('chainage_end_km')}
>
<Input
id="segment-end-km"
type="number"
step="any"
step="1"
min="0"
placeholder="1.0"
placeholder="Enter end chainage"
aria-invalid={!!getError('chainage_end_km')}
{...register('chainage_end_km')}
/>
@@ -312,7 +312,9 @@ export function SegmentDialog({
Cancel
</Button>
<Button type="submit" disabled={isSaving || !canSubmit}>
{isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
{isSaving ? (
<Loader2 className="mr-2 size-4 animate-spin" />
) : null}
{segmentId ? 'Update Segment' : 'Create Segment'}
</Button>
</DialogFooter>

59
src/app/(modules)/segment/hooks/useSegmentForm.ts
View File

@@ -7,49 +7,32 @@ import { useForm, useWatch } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';
import {
requiredIntegerNumber,
requiredLatitude,
requiredLongitude,
validateChainageRange,
} from '@/lib/validation/numberField';
import { chainageService } from '@/services/api';
import type { Chainage, ChainageCreate, ChainageUpdate } from '@/types';
import { segmentKeys } from '../queries/segmentKeys';
const requiredNumber = (message: string) =>
z
.string()
.trim()
.min(1, message)
.refine((value) => Number.isFinite(Number(value)), {
message: 'Enter a valid number',
});
const latitude = requiredNumber('Latitude is required').refine(
(value) => {
const numberValue = Number(value);
return numberValue >= -90 && numberValue <= 90;
},
{ message: 'Latitude must be between -90 and 90' },
);
const longitude = requiredNumber('Longitude is required').refine(
(value) => {
const numberValue = Number(value);
return numberValue >= -180 && numberValue <= 180;
},
{ message: 'Longitude must be between -180 and 180' },
);
const segmentFormSchema = z.object({
id: z.string().optional(),
project_id: z.string().trim().min(1, 'Project is required'),
package_id: z.string().trim().min(1, 'Package is required'),
segment_name: z.string().trim().min(1, 'Segment name is required'),
chainage_start_km: requiredNumber('Start km is required'),
chainage_end_km: requiredNumber('End km is required'),
start_lat: latitude,
start_lng: longitude,
end_lat: latitude,
end_lng: longitude,
direction: z.enum(['UP', 'DOWN']),
});
const segmentFormSchema = z
.object({
id: z.string().optional(),
project_id: z.string().trim().min(1, 'Project is required'),
package_id: z.string().trim().min(1, 'Package is required'),
segment_name: z.string().trim().min(1, 'Segment name is required'),
chainage_start_km: requiredIntegerNumber('Start km is required'),
chainage_end_km: requiredIntegerNumber('End km is required'),
start_lat: requiredLatitude,
start_lng: requiredLongitude,
end_lat: requiredLatitude,
end_lng: requiredLongitude,
direction: z.enum(['UP', 'DOWN']),
})
.superRefine(validateChainageRange);
export type SegmentFormValues = z.infer<typeof segmentFormSchema>;