fix: validate Patch Test modal inputs
This commit is contained in:
@@ -39,6 +39,21 @@ import { Button } from '$lib/components/ui/button';
|
|||||||
service_ids: [] as string[]
|
service_ids: [] as string[]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let formErrors = $state({
|
||||||
|
name: '',
|
||||||
|
notice_duration: '',
|
||||||
|
expiry: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
function validateForm(): boolean {
|
||||||
|
formErrors = {
|
||||||
|
name: !formData.name.trim() ? 'Name is required' : '',
|
||||||
|
notice_duration: (formData.notice_duration_hours < 0 || isNaN(formData.notice_duration_hours)) ? 'Must be a positive number' : '',
|
||||||
|
expiry: (formData.expiry_months < 1 || isNaN(formData.expiry_months)) ? 'Must be at least 1 month' : ''
|
||||||
|
};
|
||||||
|
return Object.values(formErrors).every(err => err === '');
|
||||||
|
}
|
||||||
|
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
loading = true;
|
loading = true;
|
||||||
try {
|
try {
|
||||||
@@ -331,8 +346,11 @@ import { Button } from '$lib/components/ui/button';
|
|||||||
type="text"
|
type="text"
|
||||||
placeholder="e.g. Standard Glue Patch Test"
|
placeholder="e.g. Standard Glue Patch Test"
|
||||||
bind:value={formData.name}
|
bind:value={formData.name}
|
||||||
class="w-full"
|
class="w-full {formErrors.name ? 'border-red-500' : ''}"
|
||||||
/>
|
/>
|
||||||
|
{#if formErrors.name}
|
||||||
|
<p class="text-xs text-red-600">{formErrors.name}</p>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
@@ -354,8 +372,11 @@ import { Button } from '$lib/components/ui/button';
|
|||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
bind:value={formData.notice_duration_hours}
|
bind:value={formData.notice_duration_hours}
|
||||||
class="w-full"
|
class="w-full {formErrors.notice_duration ? 'border-red-500' : ''}"
|
||||||
/>
|
/>
|
||||||
|
{#if formErrors.notice_duration}
|
||||||
|
<p class="text-xs text-red-600">{formErrors.notice_duration}</p>
|
||||||
|
{/if}
|
||||||
<p class="text-xs text-gray-500">Hours prior to booking required</p>
|
<p class="text-xs text-gray-500">Hours prior to booking required</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -366,8 +387,11 @@ import { Button } from '$lib/components/ui/button';
|
|||||||
type="number"
|
type="number"
|
||||||
min="1"
|
min="1"
|
||||||
bind:value={formData.expiry_months}
|
bind:value={formData.expiry_months}
|
||||||
class="w-full"
|
class="w-full {formErrors.expiry ? 'border-red-500' : ''}"
|
||||||
/>
|
/>
|
||||||
|
{#if formErrors.expiry}
|
||||||
|
<p class="text-xs text-red-600">{formErrors.expiry}</p>
|
||||||
|
{/if}
|
||||||
<p class="text-xs text-gray-500">How long the test remains valid</p>
|
<p class="text-xs text-gray-500">How long the test remains valid</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -397,7 +421,12 @@ import { Button } from '$lib/components/ui/button';
|
|||||||
<Button variant="outline" onclick={() => (showModal = false)} disabled={isSubmitting}>
|
<Button variant="outline" onclick={() => (showModal = false)} disabled={isSubmitting}>
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button onclick={savePatchTest} disabled={isSubmitting || !formData.name.trim()}>
|
<Button
|
||||||
|
onclick={() => {
|
||||||
|
if (validateForm()) savePatchTest();
|
||||||
|
}}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
{isSubmitting ? 'Saving...' : 'Save'}
|
{isSubmitting ? 'Saving...' : 'Save'}
|
||||||
</Button>
|
</Button>
|
||||||
</Modal.Footer>
|
</Modal.Footer>
|
||||||
|
|||||||
Reference in New Issue
Block a user