added request panel and collections sidebar
This commit is contained in:
xyroscar
261
src/lib/components/request-panel.svelte
Normal file
261
src/lib/components/request-panel.svelte
Normal file
@@ -0,0 +1,261 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "$lib/components/ui/button/index.js";
|
||||
import { Input } from "$lib/components/ui/input/index.js";
|
||||
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
|
||||
import SendIcon from "@lucide/svelte/icons/send";
|
||||
import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
|
||||
import type { Request, HttpMethod } from "$lib/types/request";
|
||||
|
||||
type Props = {
|
||||
request: Request;
|
||||
onSend: (request: Request) => void;
|
||||
onUpdate: (request: Request) => void;
|
||||
};
|
||||
|
||||
let { request, onSend, onUpdate }: Props = $props();
|
||||
|
||||
let localRequest = $state<Request>({ ...request });
|
||||
let activeTab = $state<"params" | "headers" | "body">("params");
|
||||
|
||||
$effect(() => {
|
||||
localRequest = { ...request };
|
||||
});
|
||||
|
||||
const methods: HttpMethod[] = [
|
||||
"GET",
|
||||
"POST",
|
||||
"PUT",
|
||||
"PATCH",
|
||||
"DELETE",
|
||||
"HEAD",
|
||||
"OPTIONS",
|
||||
];
|
||||
|
||||
function getMethodColor(method: string): string {
|
||||
const colors: Record<string, string> = {
|
||||
GET: "bg-green-500/10 text-green-500 hover:bg-green-500/20",
|
||||
POST: "bg-blue-500/10 text-blue-500 hover:bg-blue-500/20",
|
||||
PUT: "bg-orange-500/10 text-orange-500 hover:bg-orange-500/20",
|
||||
PATCH: "bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20",
|
||||
DELETE: "bg-red-500/10 text-red-500 hover:bg-red-500/20",
|
||||
HEAD: "bg-purple-500/10 text-purple-500 hover:bg-purple-500/20",
|
||||
OPTIONS: "bg-gray-500/10 text-gray-500 hover:bg-gray-500/20",
|
||||
};
|
||||
return colors[method] || "bg-gray-500/10 text-gray-500";
|
||||
}
|
||||
|
||||
function handleMethodChange(method: HttpMethod) {
|
||||
localRequest.method = method;
|
||||
onUpdate(localRequest);
|
||||
}
|
||||
|
||||
function handleUrlChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
localRequest.url = target.value;
|
||||
onUpdate(localRequest);
|
||||
}
|
||||
|
||||
function handleSend() {
|
||||
onSend(localRequest);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="border-b p-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Button
|
||||
variant="outline"
|
||||
class={`font-mono font-semibold min-w-[100px] ${getMethodColor(localRequest.method)}`}
|
||||
{...props}
|
||||
>
|
||||
{localRequest.method}
|
||||
<ChevronDownIcon class="ml-1 size-4" />
|
||||
</Button>
|
||||
{/snippet}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content>
|
||||
{#each methods as method (method)}
|
||||
<DropdownMenu.Item onclick={() => handleMethodChange(method)}>
|
||||
<span
|
||||
class={`font-mono font-semibold ${getMethodColor(method).split(" ")[1]}`}
|
||||
>
|
||||
{method}
|
||||
</span>
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
<Input
|
||||
class="flex-1 font-mono text-sm"
|
||||
placeholder="Enter request URL"
|
||||
value={localRequest.url}
|
||||
oninput={handleUrlChange}
|
||||
/>
|
||||
|
||||
<Button onclick={handleSend}>
|
||||
<SendIcon class="size-4 mr-2" />
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<div class="border-b">
|
||||
<div class="flex">
|
||||
<button
|
||||
class={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === "params"
|
||||
? "border-primary text-primary"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
onclick={() => (activeTab = "params")}
|
||||
>
|
||||
Params
|
||||
</button>
|
||||
<button
|
||||
class={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === "headers"
|
||||
? "border-primary text-primary"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
onclick={() => (activeTab = "headers")}
|
||||
>
|
||||
Headers
|
||||
</button>
|
||||
<button
|
||||
class={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === "body"
|
||||
? "border-primary text-primary"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
onclick={() => (activeTab = "body")}
|
||||
>
|
||||
Body
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 p-4 overflow-auto">
|
||||
{#if activeTab === "params"}
|
||||
<div class="space-y-2">
|
||||
{#each localRequest.params as param, i (i)}
|
||||
<div class="flex items-center gap-2">
|
||||
<Input
|
||||
class="flex-1"
|
||||
placeholder="Key"
|
||||
value={param.key}
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
localRequest.params[i].key = target.value;
|
||||
onUpdate(localRequest);
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
class="flex-1"
|
||||
placeholder="Value"
|
||||
value={param.value}
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
localRequest.params[i].value = target.value;
|
||||
onUpdate(localRequest);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onclick={() => {
|
||||
localRequest.params = localRequest.params.filter(
|
||||
(_, idx) => idx !== i
|
||||
);
|
||||
onUpdate(localRequest);
|
||||
}}
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
{/each}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => {
|
||||
localRequest.params = [
|
||||
...localRequest.params,
|
||||
{ key: "", value: "", enabled: true },
|
||||
];
|
||||
onUpdate(localRequest);
|
||||
}}
|
||||
>
|
||||
Add Parameter
|
||||
</Button>
|
||||
</div>
|
||||
{:else if activeTab === "headers"}
|
||||
<div class="space-y-2">
|
||||
{#each localRequest.headers as header, i (i)}
|
||||
<div class="flex items-center gap-2">
|
||||
<Input
|
||||
class="flex-1"
|
||||
placeholder="Key"
|
||||
value={header.key}
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
localRequest.headers[i].key = target.value;
|
||||
onUpdate(localRequest);
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
class="flex-1"
|
||||
placeholder="Value"
|
||||
value={header.value}
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
localRequest.headers[i].value = target.value;
|
||||
onUpdate(localRequest);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onclick={() => {
|
||||
localRequest.headers = localRequest.headers.filter(
|
||||
(_, idx) => idx !== i
|
||||
);
|
||||
onUpdate(localRequest);
|
||||
}}
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
{/each}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => {
|
||||
localRequest.headers = [
|
||||
...localRequest.headers,
|
||||
{ key: "", value: "", enabled: true },
|
||||
];
|
||||
onUpdate(localRequest);
|
||||
}}
|
||||
>
|
||||
Add Header
|
||||
</Button>
|
||||
</div>
|
||||
{:else if activeTab === "body"}
|
||||
<textarea
|
||||
class="w-full h-64 p-3 font-mono text-sm border rounded-md bg-background resize-none focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
placeholder="Request body (JSON, XML, etc.)"
|
||||
value={localRequest.body}
|
||||
oninput={(e) => {
|
||||
const target = e.target as HTMLTextAreaElement;
|
||||
localRequest.body = target.value;
|
||||
onUpdate(localRequest);
|
||||
}}
|
||||
></textarea>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
247
src/lib/components/workspace-sidebar.svelte
Normal file
247
src/lib/components/workspace-sidebar.svelte
Normal file
@@ -0,0 +1,247 @@
|
||||
<script lang="ts">
|
||||
import * as Collapsible from "$lib/components/ui/collapsible/index.js";
|
||||
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
|
||||
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
|
||||
import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
|
||||
import FolderIcon from "@lucide/svelte/icons/folder";
|
||||
import FolderOpenIcon from "@lucide/svelte/icons/folder-open";
|
||||
import PlusIcon from "@lucide/svelte/icons/plus";
|
||||
import MoreHorizontalIcon from "@lucide/svelte/icons/more-horizontal";
|
||||
import FileIcon from "@lucide/svelte/icons/file";
|
||||
import ArrowLeftIcon from "@lucide/svelte/icons/arrow-left";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import type { Collection } from "$lib/types/collection";
|
||||
import type { Request } from "$lib/types/request";
|
||||
|
||||
type Props = ComponentProps<typeof Sidebar.Root> & {
|
||||
workspaceName: string;
|
||||
collections: Collection[];
|
||||
standaloneRequests: Request[];
|
||||
selectedRequestId: string | null;
|
||||
onRequestSelect: (request: Request) => void;
|
||||
onCreateCollection: () => void;
|
||||
onCreateRequest: (collectionId: string | null) => void;
|
||||
onEditCollection: (collection: Collection) => void;
|
||||
onDeleteCollection: (collection: Collection) => void;
|
||||
onEditRequest: (request: Request) => void;
|
||||
onDeleteRequest: (request: Request) => void;
|
||||
onBack: () => void;
|
||||
};
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
workspaceName,
|
||||
collections,
|
||||
standaloneRequests,
|
||||
selectedRequestId,
|
||||
onRequestSelect,
|
||||
onCreateCollection,
|
||||
onCreateRequest,
|
||||
onEditCollection,
|
||||
onDeleteCollection,
|
||||
onEditRequest,
|
||||
onDeleteRequest,
|
||||
onBack,
|
||||
...restProps
|
||||
}: Props = $props();
|
||||
|
||||
function getMethodColor(method: string): string {
|
||||
const colors: Record<string, string> = {
|
||||
GET: "text-green-500",
|
||||
POST: "text-blue-500",
|
||||
PUT: "text-orange-500",
|
||||
PATCH: "text-yellow-500",
|
||||
DELETE: "text-red-500",
|
||||
HEAD: "text-purple-500",
|
||||
OPTIONS: "text-gray-500",
|
||||
};
|
||||
return colors[method] || "text-gray-500";
|
||||
}
|
||||
</script>
|
||||
|
||||
<Sidebar.Root bind:ref {...restProps}>
|
||||
<Sidebar.Header>
|
||||
<Sidebar.Menu>
|
||||
<Sidebar.MenuItem>
|
||||
<Sidebar.MenuButton size="lg" onclick={onBack}>
|
||||
<div
|
||||
class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
|
||||
>
|
||||
<ArrowLeftIcon class="size-4" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-0.5 leading-none">
|
||||
<span class="font-medium truncate">{workspaceName}</span>
|
||||
<span class="text-xs text-muted-foreground">Back to workspaces</span
|
||||
>
|
||||
</div>
|
||||
</Sidebar.MenuButton>
|
||||
</Sidebar.MenuItem>
|
||||
</Sidebar.Menu>
|
||||
</Sidebar.Header>
|
||||
|
||||
<Sidebar.Content class="gap-0">
|
||||
<Sidebar.Group>
|
||||
<Sidebar.GroupLabel class="flex items-center justify-between pr-2">
|
||||
<span>Collections</span>
|
||||
<button
|
||||
class="hover:bg-sidebar-accent rounded p-1"
|
||||
onclick={onCreateCollection}
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
</button>
|
||||
</Sidebar.GroupLabel>
|
||||
<Sidebar.GroupContent>
|
||||
<Sidebar.Menu>
|
||||
{#each collections as collection (collection.id)}
|
||||
<Collapsible.Root open class="group/collapsible">
|
||||
<Sidebar.MenuItem>
|
||||
<Collapsible.Trigger class="w-full">
|
||||
{#snippet child({ props })}
|
||||
<Sidebar.MenuButton {...props}>
|
||||
<FolderIcon
|
||||
class="size-4 group-data-[state=closed]/collapsible:block hidden"
|
||||
/>
|
||||
<FolderOpenIcon
|
||||
class="size-4 group-data-[state=open]/collapsible:block hidden"
|
||||
/>
|
||||
<span class="truncate">{collection.name}</span>
|
||||
<ChevronRightIcon
|
||||
class="ms-auto size-4 transition-transform group-data-[state=open]/collapsible:rotate-90"
|
||||
/>
|
||||
</Sidebar.MenuButton>
|
||||
{/snippet}
|
||||
</Collapsible.Trigger>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Sidebar.MenuAction {...props}>
|
||||
<MoreHorizontalIcon class="size-4" />
|
||||
</Sidebar.MenuAction>
|
||||
{/snippet}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content side="right" align="start">
|
||||
<DropdownMenu.Item
|
||||
onclick={() => onCreateRequest(collection.id)}
|
||||
>
|
||||
Add Request
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
onclick={() => onEditCollection(collection)}
|
||||
>
|
||||
Edit Collection
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item
|
||||
class="text-destructive"
|
||||
onclick={() => onDeleteCollection(collection)}
|
||||
>
|
||||
Delete Collection
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</Sidebar.MenuItem>
|
||||
<Collapsible.Content>
|
||||
<Sidebar.MenuSub>
|
||||
{#each collection.requests as request (request.id)}
|
||||
<Sidebar.MenuSubItem>
|
||||
<Sidebar.MenuSubButton
|
||||
isActive={selectedRequestId === request.id}
|
||||
onclick={() => onRequestSelect(request)}
|
||||
>
|
||||
<span
|
||||
class={`text-xs font-mono font-semibold ${getMethodColor(request.method)}`}
|
||||
>
|
||||
{request.method.substring(0, 3)}
|
||||
</span>
|
||||
<span class="truncate">{request.name}</span>
|
||||
</Sidebar.MenuSubButton>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Sidebar.MenuAction {...props}>
|
||||
<MoreHorizontalIcon class="size-4" />
|
||||
</Sidebar.MenuAction>
|
||||
{/snippet}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content side="right" align="start">
|
||||
<DropdownMenu.Item
|
||||
onclick={() => onEditRequest(request)}
|
||||
>
|
||||
Edit Request
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item
|
||||
class="text-destructive"
|
||||
onclick={() => onDeleteRequest(request)}
|
||||
>
|
||||
Delete Request
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</Sidebar.MenuSubItem>
|
||||
{/each}
|
||||
</Sidebar.MenuSub>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
{/each}
|
||||
</Sidebar.Menu>
|
||||
</Sidebar.GroupContent>
|
||||
</Sidebar.Group>
|
||||
|
||||
<Sidebar.Separator />
|
||||
|
||||
<Sidebar.Group>
|
||||
<Sidebar.GroupLabel class="flex items-center justify-between pr-2">
|
||||
<span>Requests</span>
|
||||
<button
|
||||
class="hover:bg-sidebar-accent rounded p-1"
|
||||
onclick={() => onCreateRequest(null)}
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
</button>
|
||||
</Sidebar.GroupLabel>
|
||||
<Sidebar.GroupContent>
|
||||
<Sidebar.Menu>
|
||||
{#each standaloneRequests as request (request.id)}
|
||||
<Sidebar.MenuItem>
|
||||
<Sidebar.MenuButton
|
||||
isActive={selectedRequestId === request.id}
|
||||
onclick={() => onRequestSelect(request)}
|
||||
>
|
||||
<span
|
||||
class={`text-xs font-mono font-semibold ${getMethodColor(request.method)}`}
|
||||
>
|
||||
{request.method.substring(0, 3)}
|
||||
</span>
|
||||
<span class="truncate">{request.name}</span>
|
||||
</Sidebar.MenuButton>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Sidebar.MenuAction {...props}>
|
||||
<MoreHorizontalIcon class="size-4" />
|
||||
</Sidebar.MenuAction>
|
||||
{/snippet}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content side="right" align="start">
|
||||
<DropdownMenu.Item onclick={() => onEditRequest(request)}>
|
||||
Edit Request
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item
|
||||
class="text-destructive"
|
||||
onclick={() => onDeleteRequest(request)}
|
||||
>
|
||||
Delete Request
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</Sidebar.MenuItem>
|
||||
{/each}
|
||||
</Sidebar.Menu>
|
||||
</Sidebar.GroupContent>
|
||||
</Sidebar.Group>
|
||||
</Sidebar.Content>
|
||||
|
||||
<Sidebar.Rail />
|
||||
</Sidebar.Root>
|
||||
180
src/lib/services/collections.ts
Normal file
180
src/lib/services/collections.ts
Normal file
@@ -0,0 +1,180 @@
|
||||
import type { Collection } from "$lib/types/collection";
|
||||
import type { Request, HttpMethod } from "$lib/types/request";
|
||||
|
||||
const collections: Map<string, Collection> = new Map<string, Collection>([
|
||||
[
|
||||
"col-1",
|
||||
{
|
||||
id: "col-1",
|
||||
name: "User API",
|
||||
description: "User management endpoints",
|
||||
workspaceId: "1",
|
||||
requests: [
|
||||
{
|
||||
id: "req-1",
|
||||
name: "Get Users",
|
||||
method: "GET",
|
||||
url: "https://api.example.com/users",
|
||||
headers: [],
|
||||
params: [],
|
||||
body: "",
|
||||
collectionId: "col-1",
|
||||
workspaceId: "1",
|
||||
},
|
||||
{
|
||||
id: "req-2",
|
||||
name: "Create User",
|
||||
method: "POST",
|
||||
url: "https://api.example.com/users",
|
||||
headers: [
|
||||
{ key: "Content-Type", value: "application/json", enabled: true },
|
||||
],
|
||||
params: [],
|
||||
body: '{"name": "John", "email": "john@example.com"}',
|
||||
collectionId: "col-1",
|
||||
workspaceId: "1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
[
|
||||
"col-2",
|
||||
{
|
||||
id: "col-2",
|
||||
name: "Products API",
|
||||
description: "Product catalog endpoints",
|
||||
workspaceId: "1",
|
||||
requests: [
|
||||
{
|
||||
id: "req-3",
|
||||
name: "List Products",
|
||||
method: "GET",
|
||||
url: "https://api.example.com/products",
|
||||
headers: [],
|
||||
params: [{ key: "limit", value: "10", enabled: true }],
|
||||
body: "",
|
||||
collectionId: "col-2",
|
||||
workspaceId: "1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
const standaloneRequests: Map<string, Request> = new Map<string, Request>([
|
||||
[
|
||||
"req-standalone-1",
|
||||
{
|
||||
id: "req-standalone-1",
|
||||
name: "Health Check",
|
||||
method: "GET",
|
||||
url: "https://api.example.com/health",
|
||||
headers: [],
|
||||
params: [],
|
||||
body: "",
|
||||
collectionId: null,
|
||||
workspaceId: "1",
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
export async function get_collections_by_workspace(
|
||||
workspaceId: string
|
||||
): Promise<Collection[]> {
|
||||
return [...collections.values()].filter((c) => c.workspaceId === workspaceId);
|
||||
}
|
||||
|
||||
export async function get_collection(
|
||||
id: string
|
||||
): Promise<Collection | undefined> {
|
||||
return collections.get(id);
|
||||
}
|
||||
|
||||
export async function create_collection(
|
||||
collection: Omit<Collection, "id" | "requests">
|
||||
): Promise<Collection> {
|
||||
const newCollection: Collection = {
|
||||
...collection,
|
||||
id: crypto.randomUUID(),
|
||||
requests: [],
|
||||
};
|
||||
collections.set(newCollection.id, newCollection);
|
||||
return newCollection;
|
||||
}
|
||||
|
||||
export async function update_collection(
|
||||
id: string,
|
||||
updates: Partial<Pick<Collection, "name" | "description">>
|
||||
): Promise<boolean> {
|
||||
const collection = collections.get(id);
|
||||
if (!collection) return false;
|
||||
|
||||
if (updates.name !== undefined) collection.name = updates.name;
|
||||
if (updates.description !== undefined)
|
||||
collection.description = updates.description;
|
||||
return true;
|
||||
}
|
||||
|
||||
export async function delete_collection(id: string): Promise<boolean> {
|
||||
return collections.delete(id);
|
||||
}
|
||||
|
||||
export async function get_standalone_requests_by_workspace(
|
||||
workspaceId: string
|
||||
): Promise<Request[]> {
|
||||
return [...standaloneRequests.values()].filter(
|
||||
(r) => r.workspaceId === workspaceId
|
||||
);
|
||||
}
|
||||
|
||||
export async function get_request(id: string): Promise<Request | undefined> {
|
||||
for (const collection of collections.values()) {
|
||||
const request = collection.requests.find((r) => r.id === id);
|
||||
if (request) return request;
|
||||
}
|
||||
return standaloneRequests.get(id);
|
||||
}
|
||||
|
||||
export async function create_request(
|
||||
request: Omit<Request, "id">
|
||||
): Promise<Request> {
|
||||
const newRequest: Request = {
|
||||
...request,
|
||||
id: crypto.randomUUID(),
|
||||
};
|
||||
|
||||
if (request.collectionId) {
|
||||
const collection = collections.get(request.collectionId);
|
||||
if (collection) {
|
||||
collection.requests.push(newRequest);
|
||||
}
|
||||
} else {
|
||||
standaloneRequests.set(newRequest.id, newRequest);
|
||||
}
|
||||
|
||||
return newRequest;
|
||||
}
|
||||
|
||||
export async function update_request(
|
||||
id: string,
|
||||
updates: Partial<Omit<Request, "id">>
|
||||
): Promise<boolean> {
|
||||
const request = await get_request(id);
|
||||
if (!request) return false;
|
||||
|
||||
Object.assign(request, updates);
|
||||
return true;
|
||||
}
|
||||
|
||||
export async function delete_request(id: string): Promise<boolean> {
|
||||
if (standaloneRequests.delete(id)) return true;
|
||||
|
||||
for (const collection of collections.values()) {
|
||||
const index = collection.requests.findIndex((r) => r.id === id);
|
||||
if (index !== -1) {
|
||||
collection.requests.splice(index, 1);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@@ -52,6 +52,10 @@ export async function get_workspaces(): Promise<Workspace[]> {
|
||||
return convert_to_list(ws);
|
||||
}
|
||||
|
||||
export async function get_workspace(id: string): Promise<Workspace | null> {
|
||||
return ws.get(id) ?? null;
|
||||
}
|
||||
|
||||
export async function update_workspace(workspace: Workspace): Promise<boolean> {
|
||||
let w = ws.get(workspace.Id);
|
||||
if (w != undefined) {
|
||||
|
||||
9
src/lib/types/collection.ts
Normal file
9
src/lib/types/collection.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import type { Request } from "./request";
|
||||
|
||||
export type Collection = {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
workspaceId: string;
|
||||
requests: Request[];
|
||||
};
|
||||
32
src/lib/types/request.ts
Normal file
32
src/lib/types/request.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
export type HttpMethod =
|
||||
| "GET"
|
||||
| "POST"
|
||||
| "PUT"
|
||||
| "PATCH"
|
||||
| "DELETE"
|
||||
| "HEAD"
|
||||
| "OPTIONS";
|
||||
|
||||
export type RequestHeader = {
|
||||
key: string;
|
||||
value: string;
|
||||
enabled: boolean;
|
||||
};
|
||||
|
||||
export type RequestParam = {
|
||||
key: string;
|
||||
value: string;
|
||||
enabled: boolean;
|
||||
};
|
||||
|
||||
export type Request = {
|
||||
id: string;
|
||||
name: string;
|
||||
method: HttpMethod;
|
||||
url: string;
|
||||
headers: RequestHeader[];
|
||||
params: RequestParam[];
|
||||
body: string;
|
||||
collectionId: string | null;
|
||||
workspaceId: string;
|
||||
};
|
||||
@@ -1,23 +1,344 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import { onMount } from "svelte";
|
||||
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
|
||||
import * as Dialog from "$lib/components/ui/dialog/index.js";
|
||||
import { Button } from "$lib/components/ui/button/index.js";
|
||||
import { Input } from "$lib/components/ui/input/index.js";
|
||||
import { Label } from "$lib/components/ui/label/index.js";
|
||||
import WorkspaceSidebar from "$lib/components/workspace-sidebar.svelte";
|
||||
import RequestPanel from "$lib/components/request-panel.svelte";
|
||||
import * as Empty from "$lib/components/ui/empty/index.js";
|
||||
import SendIcon from "@lucide/svelte/icons/send";
|
||||
import { get_workspace } from "$lib/services/workspaces";
|
||||
import {
|
||||
get_collections_by_workspace,
|
||||
get_standalone_requests_by_workspace,
|
||||
create_collection,
|
||||
update_collection,
|
||||
delete_collection,
|
||||
create_request,
|
||||
update_request,
|
||||
delete_request,
|
||||
} from "$lib/services/collections";
|
||||
import type { Workspace } from "$lib/types/workspace";
|
||||
import type { Collection } from "$lib/types/collection";
|
||||
import type { Request, HttpMethod } from "$lib/types/request";
|
||||
|
||||
const { params } = $props<{ params: { id: string } }>();
|
||||
|
||||
let workspace = $state<Workspace | null>(null);
|
||||
let collections = $state<Collection[]>([]);
|
||||
let standaloneRequests = $state<Request[]>([]);
|
||||
let selectedRequest = $state<Request | null>(null);
|
||||
|
||||
let collectionDialogOpen = $state(false);
|
||||
let collectionDialogMode = $state<"create" | "edit">("create");
|
||||
let editingCollection = $state<Collection | null>(null);
|
||||
let collectionName = $state("");
|
||||
let collectionDescription = $state("");
|
||||
|
||||
let requestDialogOpen = $state(false);
|
||||
let requestDialogMode = $state<"create" | "edit">("create");
|
||||
let editingRequest = $state<Request | null>(null);
|
||||
let requestName = $state("");
|
||||
let requestMethod = $state<HttpMethod>("GET");
|
||||
let requestCollectionId = $state<string | null>(null);
|
||||
|
||||
let deleteDialogOpen = $state(false);
|
||||
let deleteTarget = $state<{
|
||||
type: "collection" | "request";
|
||||
item: Collection | Request;
|
||||
} | null>(null);
|
||||
|
||||
onMount(async () => {
|
||||
await loadData();
|
||||
});
|
||||
|
||||
async function loadData() {
|
||||
workspace = await get_workspace(params.id);
|
||||
collections = await get_collections_by_workspace(params.id);
|
||||
standaloneRequests = await get_standalone_requests_by_workspace(params.id);
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
goto("/workspaces");
|
||||
}
|
||||
|
||||
function handleRequestSelect(request: Request) {
|
||||
selectedRequest = request;
|
||||
}
|
||||
|
||||
function handleCreateCollection() {
|
||||
collectionDialogMode = "create";
|
||||
editingCollection = null;
|
||||
collectionName = "";
|
||||
collectionDescription = "";
|
||||
collectionDialogOpen = true;
|
||||
}
|
||||
|
||||
function handleEditCollection(collection: Collection) {
|
||||
collectionDialogMode = "edit";
|
||||
editingCollection = collection;
|
||||
collectionName = collection.name;
|
||||
collectionDescription = collection.description;
|
||||
collectionDialogOpen = true;
|
||||
}
|
||||
|
||||
function handleDeleteCollection(collection: Collection) {
|
||||
deleteTarget = { type: "collection", item: collection };
|
||||
deleteDialogOpen = true;
|
||||
}
|
||||
|
||||
function handleCreateRequest(collectionId: string | null) {
|
||||
requestDialogMode = "create";
|
||||
editingRequest = null;
|
||||
requestName = "";
|
||||
requestMethod = "GET";
|
||||
requestCollectionId = collectionId;
|
||||
requestDialogOpen = true;
|
||||
}
|
||||
|
||||
function handleEditRequest(request: Request) {
|
||||
requestDialogMode = "edit";
|
||||
editingRequest = request;
|
||||
requestName = request.name;
|
||||
requestMethod = request.method;
|
||||
requestCollectionId = request.collectionId;
|
||||
requestDialogOpen = true;
|
||||
}
|
||||
|
||||
function handleDeleteRequest(request: Request) {
|
||||
deleteTarget = { type: "request", item: request };
|
||||
deleteDialogOpen = true;
|
||||
}
|
||||
|
||||
async function handleCollectionSubmit() {
|
||||
if (collectionDialogMode === "create") {
|
||||
await create_collection({
|
||||
name: collectionName,
|
||||
description: collectionDescription,
|
||||
workspaceId: params.id,
|
||||
});
|
||||
} else if (editingCollection) {
|
||||
await update_collection(editingCollection.id, {
|
||||
name: collectionName,
|
||||
description: collectionDescription,
|
||||
});
|
||||
}
|
||||
await loadData();
|
||||
collectionDialogOpen = false;
|
||||
}
|
||||
|
||||
async function handleRequestSubmit() {
|
||||
if (requestDialogMode === "create") {
|
||||
await create_request({
|
||||
name: requestName,
|
||||
method: requestMethod,
|
||||
url: "",
|
||||
headers: [],
|
||||
params: [],
|
||||
body: "",
|
||||
collectionId: requestCollectionId,
|
||||
workspaceId: params.id,
|
||||
});
|
||||
} else if (editingRequest) {
|
||||
await update_request(editingRequest.id, {
|
||||
name: requestName,
|
||||
method: requestMethod,
|
||||
});
|
||||
}
|
||||
await loadData();
|
||||
requestDialogOpen = false;
|
||||
}
|
||||
|
||||
async function handleDeleteConfirm() {
|
||||
if (!deleteTarget) return;
|
||||
|
||||
if (deleteTarget.type === "collection") {
|
||||
await delete_collection((deleteTarget.item as Collection).id);
|
||||
} else {
|
||||
const request = deleteTarget.item as Request;
|
||||
await delete_request(request.id);
|
||||
if (selectedRequest?.id === request.id) {
|
||||
selectedRequest = null;
|
||||
}
|
||||
}
|
||||
await loadData();
|
||||
deleteDialogOpen = false;
|
||||
deleteTarget = null;
|
||||
}
|
||||
|
||||
function handleSendRequest(request: Request) {
|
||||
console.log("Sending request:", request);
|
||||
}
|
||||
|
||||
async function handleUpdateRequest(request: Request) {
|
||||
await update_request(request.id, request);
|
||||
await loadData();
|
||||
}
|
||||
|
||||
const methods: HttpMethod[] = [
|
||||
"GET",
|
||||
"POST",
|
||||
"PUT",
|
||||
"PATCH",
|
||||
"DELETE",
|
||||
"HEAD",
|
||||
"OPTIONS",
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="min-h-[calc(100vh-4rem)] p-6 space-y-4">
|
||||
<h1 class="text-2xl font-semibold">Workspace ID</h1>
|
||||
<p class="text-muted-foreground">
|
||||
Current workspace id: <strong>{params.id}</strong>
|
||||
</p>
|
||||
<Sidebar.Provider>
|
||||
<WorkspaceSidebar
|
||||
workspaceName={workspace?.Name ?? "Loading..."}
|
||||
{collections}
|
||||
{standaloneRequests}
|
||||
selectedRequestId={selectedRequest?.id ?? null}
|
||||
onRequestSelect={handleRequestSelect}
|
||||
onCreateCollection={handleCreateCollection}
|
||||
onCreateRequest={handleCreateRequest}
|
||||
onEditCollection={handleEditCollection}
|
||||
onDeleteCollection={handleDeleteCollection}
|
||||
onEditRequest={handleEditRequest}
|
||||
onDeleteRequest={handleDeleteRequest}
|
||||
onBack={goBack}
|
||||
/>
|
||||
|
||||
<button
|
||||
class="mt-4 inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
|
||||
onclick={goBack}
|
||||
<Sidebar.Inset>
|
||||
<main class="flex flex-col h-screen">
|
||||
<header class="flex h-14 shrink-0 items-center gap-2 border-b px-4">
|
||||
<Sidebar.Trigger class="-ml-1" />
|
||||
<div class="flex-1">
|
||||
{#if selectedRequest}
|
||||
<h1 class="text-sm font-medium">{selectedRequest.name}</h1>
|
||||
{:else}
|
||||
<h1 class="text-sm font-medium text-muted-foreground">
|
||||
Select a request
|
||||
</h1>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex-1 overflow-hidden">
|
||||
{#if selectedRequest}
|
||||
<RequestPanel
|
||||
request={selectedRequest}
|
||||
onSend={handleSendRequest}
|
||||
onUpdate={handleUpdateRequest}
|
||||
/>
|
||||
{:else}
|
||||
<Empty.Root class="flex h-full items-center justify-center">
|
||||
<Empty.Header>
|
||||
<Empty.Media variant="icon">
|
||||
<SendIcon />
|
||||
</Empty.Media>
|
||||
<Empty.Title>No Request Selected</Empty.Title>
|
||||
<Empty.Description>
|
||||
Select a request from the sidebar or create a new one to get
|
||||
started.
|
||||
</Empty.Description>
|
||||
</Empty.Header>
|
||||
</Empty.Root>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
</Sidebar.Inset>
|
||||
</Sidebar.Provider>
|
||||
|
||||
<Dialog.Root bind:open={collectionDialogOpen}>
|
||||
<Dialog.Content class="sm:max-w-[425px]">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>
|
||||
{collectionDialogMode === "create"
|
||||
? "Create Collection"
|
||||
: "Edit Collection"}
|
||||
</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
{collectionDialogMode === "create"
|
||||
? "Create a new collection to organize your requests."
|
||||
: "Update your collection details."}
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
<form class="grid gap-4 py-4" onsubmit={handleCollectionSubmit}>
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label for="collection-name" class="text-end">Name</Label>
|
||||
<Input
|
||||
id="collection-name"
|
||||
class="col-span-3"
|
||||
bind:value={collectionName}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label for="collection-description" class="text-end">Description</Label>
|
||||
<Input
|
||||
id="collection-description"
|
||||
class="col-span-3"
|
||||
bind:value={collectionDescription}
|
||||
/>
|
||||
</div>
|
||||
<Dialog.Footer>
|
||||
<Button type="submit">
|
||||
{collectionDialogMode === "create" ? "Create" : "Save"}
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</form>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
|
||||
<Dialog.Root bind:open={requestDialogOpen}>
|
||||
<Dialog.Content class="sm:max-w-[425px]">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>
|
||||
{requestDialogMode === "create" ? "Create Request" : "Edit Request"}
|
||||
</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
{requestDialogMode === "create"
|
||||
? "Create a new API request."
|
||||
: "Update your request details."}
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
<form class="grid gap-4 py-4" onsubmit={handleRequestSubmit}>
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label for="request-name" class="text-end">Name</Label>
|
||||
<Input id="request-name" class="col-span-3" bind:value={requestName} />
|
||||
</div>
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label for="request-method" class="text-end">Method</Label>
|
||||
<select
|
||||
id="request-method"
|
||||
class="col-span-3 flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
bind:value={requestMethod}
|
||||
>
|
||||
Back to workspaces
|
||||
</button>
|
||||
</div>
|
||||
{#each methods as method (method)}
|
||||
<option value={method}>{method}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<Dialog.Footer>
|
||||
<Button type="submit">
|
||||
{requestDialogMode === "create" ? "Create" : "Save"}
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</form>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
|
||||
<Dialog.Root bind:open={deleteDialogOpen}>
|
||||
<Dialog.Content class="sm:max-w-[425px]">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Confirm Delete</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
Are you sure you want to delete this {deleteTarget?.type}? This action
|
||||
cannot be undone.
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
<Dialog.Footer>
|
||||
<Button variant="outline" onclick={() => (deleteDialogOpen = false)}
|
||||
>Cancel</Button
|
||||
>
|
||||
<Button variant="destructive" onclick={handleDeleteConfirm}>Delete</Button
|
||||
>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
|
||||
Reference in New Issue
Block a user