Implement Links and Skills order modification via Drag and Drop

Added '/profile/links/order' and '/profile/skills/order' endpoints.

prisma/schema.prisma

@@ -30,6 +30,7 @@ model Link {
   url       String
   postedBy  User     @relation(fields: [userId], references: [githubId])
   userId    Int
+  order     Int      @default(0)
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 }
@@ -40,6 +41,7 @@ model Skill {
   level     String
   postedBy  User     @relation(fields: [userId], references: [githubId])
   userId    Int
+  order     Int      @default(0)
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 }

src/lib/components/MyProfile/LinkForm.svelte

@@ -6,12 +6,15 @@
 	import { zodClient } from 'sveltekit-superforms/adapters';
 
 	export let data: SuperValidated<Infer<LinksSchema>>;
+	export let linksLength: number;
 
 	const form = superForm(data, {
 		validators: zodClient(linksSchema)
 	});
 
 	const { form: formData, enhance } = form;
+
+	$: $formData.order = linksLength;
 </script>
 
 <form
@@ -40,5 +43,11 @@
 		</Form.Field>
 	</div>
 
+	<Form.Field {form} name="order">
+		<Form.Control let:attrs>
+			<Input {...attrs} bind:value={$formData.order} type="hidden" />
+		</Form.Control>
+	</Form.Field>
+
 	<Form.Button class="mt-5 flex align-bottom">Add</Form.Button>
 </form>

src/lib/components/MyProfile/SkillsForm.svelte

@@ -7,6 +7,7 @@
 	import { zodClient } from 'sveltekit-superforms/adapters';
 
 	export let data: SuperValidated<Infer<SkillsSchema>>;
+	export let skillsLength: number;
 
 	const form = superForm(data, {
 		validators: zodClient(skillsSchema),
@@ -21,6 +22,7 @@
 
 	const { form: formData, enhance } = form;
 
+	$: $formData.order = skillsLength;
 	$: selectedLevel = $formData.level
 		? {
 				label: $formData.level,
@@ -73,5 +75,11 @@
 		</Form.Field>
 	</div>
 
+	<Form.Field {form} name="order">
+		<Form.Control let:attrs>
+			<Input {...attrs} bind:value={$formData.order} type="hidden" />
+		</Form.Control>
+	</Form.Field>
+
 	<Form.Button>Add</Form.Button>
 </form>

src/lib/components/MyProfile/UserLinks.svelte

@@ -7,8 +7,22 @@
 	import { Trash2, Copy } from 'lucide-svelte';
 	import { copyToClipboard } from '$lib/utils/copyToClipboard';
 	import { confirmDelete } from '$lib/utils/confirmDelete';
+	import DnD from '$lib/components/Shared/DnD.svelte';
+	import type { Link } from '@prisma/client';
 
-	export let links; // Use the Link type for the links prop
+	export let links: Link[]; // Use the Link type for the links prop
+	let dragDisabled = false;
+	async function handleDrop() {
+		dragDisabled = true;
+		await fetch('/profile/links/order', {
+			method: 'PATCH',
+			body: JSON.stringify({ links }),
+			headers: {
+				'content-type': 'application/json',
+			},
+		});
+		dragDisabled = false;
+	}
 </script>
 
 <Card.Root>
@@ -26,8 +40,8 @@
 					<Table.Head>Actions</Table.Head>
 				</Table.Row>
 			</Table.Header>
-			<Table.Body>
-				{#each links as link}
+			<DnD items={links} dndOptions={{ dragDisabled }} updateNewItems={(newLinks) => links = newLinks} containerTag="tbody" class="[&_tr:last-child]:border-0" onDrop={handleDrop}>
+				{#each links as link(link.id)}
 					<Table.Row>
 						<Table.Cell>
 							<div class="font-medium">{link.title}</div>
@@ -56,7 +70,7 @@
 						</Table.Cell>
 					</Table.Row>
 				{/each}
-			</Table.Body>
+			</DnD>
 		</Table.Root>
 	</Card.Content>
 </Card.Root>

src/lib/components/MyProfile/UserSkills.svelte

@@ -1,16 +1,36 @@
 <script lang="ts">
 	import { BriefcaseBusiness, Trash2 } from 'lucide-svelte';
-
-	export let skills;
-
 	import { masteryLevels } from '$lib/constants/masteryLevel';
 	import { enhance } from '$app/forms';
 	import { Button } from '$lib/components/ui/button';
 	import { confirmDelete } from '$lib/utils/confirmDelete';
+	import DnD from '$lib/components/Shared/DnD.svelte';
+	import type { Skill } from '@prisma/client/wasm';
+
+	export let skills: Skill[];
+
+	let dragDisabled = false;
+	async function handleDrop() {
+		dragDisabled = true;
+		await fetch('/profile/skills/order', {
+			method: 'PATCH',
+			body: JSON.stringify({ skills }),
+			headers: {
+				'content-type': 'application/json'
+			}
+		});
+		dragDisabled = false;
+	}
 </script>
 
-<div class="grid gap-4">
-	{#each skills as skill}
+<DnD
+	items={skills}
+	dndOptions={{ dragDisabled }}
+	updateNewItems={(newSkills) => (skills = newSkills)}
+	class="grid gap-4"
+	onDrop={handleDrop}
+>
+	{#each skills as skill(skill.id)}
 		<div class="flex items-center gap-4">
 			<BriefcaseBusiness />
 			<div class="grid gap-1">
@@ -28,4 +48,4 @@
 			</div>
 		</div>
 	{/each}
-</div>
+</DnD>

src/lib/schemas/links.ts

@@ -8,7 +8,8 @@ export const linksSchema = z.object({
 		.max(200)
 		.refine((val) => val.startsWith('http://') || val.startsWith('https://'), {
 			message: 'Oops! URLs usually start with http:// or https:// :P'
-		})
+		}),
+	order: z.number()
 });
 
 export type LinksSchema = typeof linksSchema;

src/lib/schemas/skills.ts

@@ -2,7 +2,8 @@ import { z } from 'zod';
 
 export const skillsSchema = z.object({
 	title: z.string().min(1).max(50),
-	level: z.string()
+	level: z.string(),
+	order: z.number()
 });
 
 export type SkillsSchema = typeof skillsSchema;

src/routes/profile/+page.server.ts

@@ -45,11 +45,13 @@ export const load: PageServerLoad = async (event) => {
 
 	// Fetch links and skills related to the user
 	const links = await prisma.link.findMany({
-		where: { userId: user.githubId }
+		where: { userId: user.githubId },
+		orderBy: [{ order: 'asc' }]
 	});
 
 	const skills = await prisma.skill.findMany({
-		where: { userId: user.githubId }
+		where: { userId: user.githubId },
+		orderBy: [{ order: 'asc' }]
 	});
 
 	// Create userStats object
@@ -83,15 +85,16 @@ export const actions: Actions = {
 		}
 
 		// If no errors, get data
-		const { title, url } = form.data;
+		const { title, url, order } = form.data;
 
 		if (user) {
 			try {
 				await prisma.link.create({
 					data: {
 						title,
 						url,
-						userId: user.githubId
+						userId: user.githubId,
+						order
 					}
 				});
 			} catch (error) {
@@ -137,15 +140,16 @@ export const actions: Actions = {
 		}
 
 		// If no errors, get data
-		const { title, level } = form.data;
+		const { title, level, order } = form.data;
 
 		if (user) {
 			try {
 				await prisma.skill.create({
 					data: {
 						title,
 						level,
-						userId: user.githubId
+						userId: user.githubId,
+						order
 					}
 				});
 			} catch (error) {

src/routes/profile/+page.svelte

@@ -68,7 +68,7 @@
 					<div class="grid gap-2">
 						<Card.Title>Links</Card.Title>
 						<Card.Description>The links visible on your profile</Card.Description>
-						<LinkForm data={data.form} />
+						<LinkForm data={data.form} linksLength={data.links.length} />
 					</div>
 				</Card.Header>
 				<Card.Content>
@@ -79,7 +79,7 @@
 			<Card.Root>
 				<Card.Header>
 					<Card.Title>Tech Stack</Card.Title>
-					<SkillsForm data={data.skillsForm} />
+					<SkillsForm data={data.skillsForm} skillsLength={data.skills.length} />
 				</Card.Header>
 				<Card.Content class="grid gap-8">
 					<UserSkills skills={data.skills} />

src/routes/profile/links/order/+server.ts

@@ -0,0 +1,21 @@
+import type { RequestHandler } from './$types';
+import { prisma } from '$lib/server/prisma';
+import type { Link } from '@prisma/client/wasm';
+
+export const PATCH: RequestHandler = async (event) => {
+	const json = await event.request.json();
+	const links: Link[] = json.links;
+
+	links.forEach(async (link, idx) => {
+		await prisma.link.update({
+			where: {
+				id: link.id
+			},
+			data: {
+				order: idx
+			}
+		});
+	});
+
+	return new Response();
+};

src/routes/profile/skills/order/+server.ts

@@ -0,0 +1,21 @@
+import type { RequestHandler } from './$types';
+import { prisma } from '$lib/server/prisma';
+import type { Skill } from '@prisma/client/wasm';
+
+export const PATCH: RequestHandler = async (event) => {
+	const json = await event.request.json();
+	const skills: Skill[] = json.skills;
+
+	skills.forEach(async (skill, idx) => {
+		await prisma.skill.update({
+			where: {
+				id: skill.id
+			},
+			data: {
+				order: idx
+			}
+		});
+	});
+
+	return new Response();
+};