feat(forms): Add client-side limit checks for skills and links

amananand20 · Oct 20, 2024 · f4db616 · f4db616
1 parent 721e98d
commit f4db616
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/src/lib/components/MyProfile/LinkForm.svelte b/src/lib/components/MyProfile/LinkForm.svelte
@@ -4,15 +4,19 @@
 	import { linksSchema, type LinksSchema } from '$lib/schemas/links';
 	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
+	import type { Link } from '@prisma/client';
 
 	export let data: SuperValidated<Infer<LinksSchema>>;
 	export let linksLength: number;
+	export let links: Link[] = []; 
+	let isLimitReached = false;
+	$: isLimitReached = links.length >= 15;
 
 	const form = superForm(data, {
 		validators: zodClient(linksSchema)
 	});
 
-	const { form: formData, enhance } = form;
+	const { form: formData, enhance, message } = form;
 
 	$: $formData.order = linksLength;
 </script>
@@ -49,5 +53,11 @@
 		</Form.Control>
 	</Form.Field>
 
-	<Form.Button class="mt-5 flex align-bottom">Add</Form.Button>
+	<Form.Button disabled = {isLimitReached} class="mt-5 flex align-bottom">Add</Form.Button>
 </form>
+
+{#if isLimitReached}
+  <p class="text-red-500 mt-2 text-center">You have reached the maximum limit of 15 links.</p>
+{:else if $message}
+  <p class="text-red-500 mt-2 text-center">{$message}</p>
+{/if}
diff --git a/src/lib/components/MyProfile/SkillsForm.svelte b/src/lib/components/MyProfile/SkillsForm.svelte
@@ -5,10 +5,13 @@
 	import { Select } from 'bits-ui';
 	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
+	import type { Skill } from '@prisma/client';
 
 	export let data: SuperValidated<Infer<SkillsSchema>>;
 	export let skillsLength: number;
-
+	export let skills: Skill[] = [];
+	let isLimitReached = false;
+	$: isLimitReached = skills.length >= 15;
 	const form = superForm(data, {
 		validators: zodClient(skillsSchema),
 		resetForm: false,
@@ -20,7 +23,7 @@
 		}
 	});
 
-	const { form: formData, enhance } = form;
+	const { form: formData, enhance ,message} = form;
 
 	$: $formData.order = skillsLength;
 	$: selectedLevel = $formData.level
@@ -81,5 +84,11 @@
 		</Form.Control>
 	</Form.Field>
 
-	<Form.Button>Add</Form.Button>
+	<Form.Button disabled = {isLimitReached}>Add</Form.Button>
 </form>
+
+{#if isLimitReached}
+  <p class="text-red-500 mt-2 text-center">You have reached the maximum limit of 15 links.</p>
+{:else if $message}
+  <p class="text-red-500 mt-2 text-center">{$message}</p>
+{/if}