cleanup and add path renaming

TODO.md

@@ -1,3 +1,4 @@
+- [x] Add path renaming
 - [ ] Add path sub-page for editing a specific route
 - [ ] Check that a path variable can only be included once
 - [ ] Add schema editor component
@@ -53,5 +54,5 @@
 
 ---
 
-- [ ] Replace prompt and confirms with skeleton-modals
+- [ ] Replace prompt, alert and confirms with skeleton-modals
 - [ ] Add extensions

src/lib/components/atoms/PathListItem.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { openApiStore } from '$lib';
+	import { pathTemplate } from '$lib/pathTemplate';
+	import { openApiStore, pathRegex, sortPathsAlphabetically } from '$lib';
 
 	/** The actual pathname */
 	export let pathName: string;
@@ -7,19 +8,95 @@
 	export let id: number;
 
 	const removeRoute = () => {
+		if (!confirm('Are you sure you want to delete this route?')) return;
 		let tempPathObject = {
 			...$openApiStore.paths
 		};
 		delete tempPathObject[pathName];
 		$openApiStore.paths = tempPathObject;
 	};
+
+	const addSubRoute = () => {
+		// prompt user to enter path
+		const path = prompt(
+			`Enter path. Wrap path parameters in curly braces.\nIs directly appended to "${pathName}".`
+		);
+		if (!path) return;
+		let newPath = pathName + path;
+
+		// check that path is valid
+		if (!newPath.match(pathRegex)) {
+			alert('Invalid path name');
+			return;
+		}
+
+		// check if path already exists
+		// @ts-expect-error - we are creating a new key
+		if ($openApiStore.paths[newPath]) {
+			alert('Path already exists');
+			return;
+		}
+		// TODO: check if variables are duplicated
+		// add path to paths object
+		$openApiStore.paths = {
+			...$openApiStore.paths,
+			[newPath]: pathTemplate
+		};
+
+		// sort paths object
+		sortPathsAlphabetically();
+	};
+
+	const renamePath = () => {
+		const newName = prompt('Edit the path name', pathName);
+		if (!newName) return;
+		// check that path is valid
+		if (!newName.match(pathRegex)) {
+			alert('Invalid path name');
+			return;
+		}
+
+		// check if path already exists
+		// @ts-expect-error - we are creating a new key
+		if ($openApiStore.paths[newName]) {
+			alert('Path already exists');
+			return;
+		}
+
+		// if pathName is empty, show error
+		// @ts-expect-error - we are checking if the value is defined
+		if (!$openApiStore.paths[pathName]) {
+			alert('Previous value cannot be empty');
+			return;
+		}
+
+		// create new object with new key and old value
+		$openApiStore.paths = {
+			...$openApiStore.paths,
+			[newName]: $openApiStore.paths![pathName]
+		};
+
+		// delete old key
+		delete $openApiStore.paths[pathName];
+		$openApiStore.paths = {
+			...$openApiStore.paths
+		};
+
+		// sort paths object
+		sortPathsAlphabetically();
+	};
 </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>
+		<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-filled-warning" on:click={renamePath}
+			>Rename</button
+		>
+		<button type="button" class="btn btn-sm variant-filled-secondary" on:click={addSubRoute}>
+			Add Sub-Route
+		</button>
 		<button
 			type="button"
 			class="btn btn-sm variant-ringed-error hover:variant-filled-error"

src/lib/components/sections/Paths.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { openApiStore } from '$lib';
+	import { openApiStore, pathRegex, sortPathsAlphabetically } 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 = () => {
@@ -27,30 +26,15 @@
 		}
 
 		// create a temporary object to store paths
-		let tempPathObject = {
+		// add path to paths object
-			...$openApiStore.paths
+		$openApiStore.paths = {
+			...$openApiStore.paths,
+			[path]: pathTemplate
 		};
 
-		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

src/lib/index.ts

@@ -1,5 +1,6 @@
 import { persisted } from 'svelte-persisted-store';
 import type { OpenAPIV3_1 } from './openAPITypes';
+import { get } from 'svelte/store';
 
 export const localStoragePrefix = 'openapigen-';
 
@@ -38,3 +39,23 @@ export const openApiStore = persisted<OpenAPIV3_1.Document>(`${localStoragePrefi
 		url: ''
 	}
 });
+
+export const pathRegex = /\/([/]*[{]?[a-zA-Z]+[}]?)*/gm;
+
+export const sortPathsAlphabetically = () => {
+	const tempPathObject = {};
+	const store = get(openApiStore);
+	// @ts-expect-error - we are working with an initially empty object
+	Object.keys(store.paths)
+		.sort()
+		.forEach((key) => {
+			// @ts-expect-error - we are working with initially empty objects
+			tempPathObject[key] = store.paths[key];
+		});
+
+	// update path object
+	openApiStore.update((data) => {
+		data.paths = tempPathObject;
+		return data;
+	});
+};