From 01dc095e6cd8d5eb2d09d7f6758bb882360bff81 Mon Sep 17 00:00:00 2001
From: Malte Teichert <malte@malteteichert.de>
Date: Mon, 20 May 2024 21:57:23 +0200
Subject: [PATCH] add basic path structure

---
 src/lib/components/atoms/PathListItem.svelte | 32 +++++++++
 src/lib/components/sections/Paths.svelte     | 74 ++++++++++++++++++++
 src/lib/index.ts                             |  4 +-
 src/lib/pathTemplate.ts                      | 17 +++++
 src/routes/+page.svelte                      |  3 +-
 5 files changed, 127 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/atoms/PathListItem.svelte
 create mode 100644 src/lib/components/sections/Paths.svelte
 create mode 100644 src/lib/pathTemplate.ts

diff --git a/src/lib/components/atoms/PathListItem.svelte b/src/lib/components/atoms/PathListItem.svelte
new file mode 100644
index 0000000..9280d55
--- /dev/null
+++ b/src/lib/components/atoms/PathListItem.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { openApiStore } from '$lib';
+
+	/** The actual pathname */
+	export let pathName: string;
+	/** The index of the pathname in the paths object */
+	export let id: number;
+
+	const removeRoute = () => {
+		let tempPathObject = {
+			...$openApiStore.paths
+		};
+		delete tempPathObject[pathName];
+		$openApiStore.paths = tempPathObject;
+	};
+</script>
+
+<div class="flex justify-between">
+	<h3 class="h3">{pathName}</h3>
+	<div class="flex gap-4">
+		<a href="/path/{id}" class="btn btn-sm variant-filled-primary">Edit</a>
+		<button type="button" class="btn btn-sm variant-filled-secondary"> Add SubRoute </button>
+		<button
+			type="button"
+			class="btn btn-sm variant-ringed-error hover:variant-filled-error"
+			on:click={removeRoute}
+		>
+			Remove
+		</button>
+	</div>
+</div>
+<hr />
diff --git a/src/lib/components/sections/Paths.svelte b/src/lib/components/sections/Paths.svelte
new file mode 100644
index 0000000..af9f3a4
--- /dev/null
+++ b/src/lib/components/sections/Paths.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { openApiStore } from '$lib';
+	import { pathTemplate } from '$lib/pathTemplate';
+	import PathListItem from '../atoms/PathListItem.svelte';
+
+	// match path with parameters
+	const pathRegex = /\/([\/]*[\{]?[a-zA-Z]+[\}]?)*/gm;
+
+	// add path
+	const addPath = () => {
+		// prompt user to enter path
+		const path = prompt(
+			'Enter path. Wrap path parameters in curly braces. Example: /users/{userId}'
+		);
+		if (!path) return;
+		// check if path is valid
+		if (!pathRegex.test(path)) {
+			alert('Invalid path');
+			return;
+		}
+
+		// check if path already exists
+		// @ts-expect-error - we are working with an initially empty object
+		if ($openApiStore.paths[path]) {
+			alert('Path already exists');
+			return;
+		}
+
+		// create a temporary object to store paths
+		let tempPathObject = {
+			...$openApiStore.paths
+		};
+
+		tempPathObject[path] = pathTemplate;
+
+		// update paths in store
+		$openApiStore.paths = tempPathObject;
+
+		// sort paths alphabetically
+		sortPathsAlphabetically();
+	};
+
+	const sortPathsAlphabetically = () => {
+		let tempPathObject = {};
+		// @ts-expect-error - we are working with an initially empty object
+		Object.keys($openApiStore.paths)
+			.sort()
+			.forEach((key) => {
+				// @ts-expect-error - we are working with initially empty objects
+				tempPathObject[key] = $openApiStore.paths[key];
+			});
+		$openApiStore.paths = tempPathObject;
+	};
+</script>
+
+<div
+	class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 space-y-4"
+>
+	{#each Object.keys($openApiStore.paths) as pathName, index}
+		<PathListItem {pathName} id={index} />
+	{/each}
+	<span class="w-full flex justify-center">
+		<button type="button" class="btn variant-filled-primary" on:click={addPath}>Add Path</button>
+	</span>
+	<span class="w-full flex justify-center">
+		<button
+			type="button"
+			class="btn btn-sm variant-filled-secondary"
+			on:click={sortPathsAlphabetically}
+		>
+			Sort paths
+		</button>
+	</span>
+</div>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 30c5e16..7d9086c 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -7,14 +7,14 @@ export const openApiStore = persisted<OpenAPIV3_1.Document>(`${localStoragePrefi
 	openapi: '3.0.0', // OpenAPI version
 	info: {
 		/** Title of the API (required) */
-		title: '', 
+		title: '',
 		/** Description of the API (optional) */
 		description: '',
 		/** Terms of service link (optional) */
 		termsOfService: '',
 		/** API Version (required) */
 		version: '',
-		/** Contact Information */ 
+		/** Contact Information */
 		contact: {
 			/** Name of the contact person/organization. */
 			name: '', // optional
diff --git a/src/lib/pathTemplate.ts b/src/lib/pathTemplate.ts
new file mode 100644
index 0000000..d5e29ee
--- /dev/null
+++ b/src/lib/pathTemplate.ts
@@ -0,0 +1,17 @@
+import type { OpenAPIV3_1 } from './openAPITypes';
+
+export const pathTemplate: OpenAPIV3_1.PathItemObject = {
+	$ref: undefined,
+	summary: undefined,
+	description: undefined,
+	servers: undefined,
+	parameters: undefined,
+	get: undefined,
+	put: undefined,
+	post: undefined,
+	delete: undefined,
+	options: undefined,
+	head: undefined,
+	patch: undefined,
+	trace: undefined
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 41a59a7..20f0e5e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,6 +4,7 @@
 	import { TabGroup, Tab } from '@skeletonlabs/skeleton';
 	import { persisted } from 'svelte-persisted-store';
 	import Authentication from '$lib/components/sections/Authentication.svelte';
+	import Paths from '$lib/components/sections/Paths.svelte';
 
 	// let tabSet: number = 0;
 	const tabSet = persisted<number>('tabSet', 0);
@@ -33,7 +34,7 @@
 		{:else if $tabSet === 2}
 			<Servers />
 		{:else if $tabSet === 3}
-			<p>Paths</p>
+			<Paths />
 		{:else if $tabSet === 4}
 			<p>Components</p>
 		{/if}