|
|
@@ -22,6 +22,7 @@
|
|
|
import { atelierForest } from "svelte-highlight/styles";
|
|
|
import { Loader, PlusIcon, TrashIcon } from "@lucide/svelte";
|
|
|
import CodeMirror from "./CodeMirror.svelte";
|
|
|
+ import * as Resizable from "$lib/components/ui/resizable/index";
|
|
|
|
|
|
let isSending = $state(false);
|
|
|
let response: any = $state();
|
|
|
@@ -144,244 +145,245 @@
|
|
|
</div>
|
|
|
{/snippet}
|
|
|
|
|
|
-<main class="w-full h-full p-4 space-y-4">
|
|
|
- {#if _state.entry?.type === "Collection"}
|
|
|
- <!-- COLLECTION VIEW -->
|
|
|
+{#if _state.entry?.type === "Collection"}
|
|
|
+ <!-- COLLECTION VIEW -->
|
|
|
|
|
|
- {@render entryPath()}
|
|
|
- <section class="space-y-4">
|
|
|
- <h1 class="text-xl font-semibold">{_state.entry.name}</h1>
|
|
|
+ {@render entryPath()}
|
|
|
+ <section class="space-y-4">
|
|
|
+ <h1 class="text-xl font-semibold">{_state.entry.name}</h1>
|
|
|
|
|
|
- <div class="rounded-md border p-4 space-y-2">
|
|
|
- <h2 class="font-medium">Variables</h2>
|
|
|
+ <div class="rounded-md p-4 space-y-2">
|
|
|
+ <h2 class="font-medium">Variables</h2>
|
|
|
|
|
|
- <div class="grid grid-cols-3 gap-2 text-sm">
|
|
|
- <div class="font-medium text-muted-foreground">Key</div>
|
|
|
- <div class="font-medium text-muted-foreground col-span-2">Value</div>
|
|
|
+ <div class="grid grid-cols-3 gap-2 text-sm">
|
|
|
+ <div class="font-medium text-muted-foreground">Key</div>
|
|
|
+ <div class="font-medium text-muted-foreground col-span-2">Value</div>
|
|
|
|
|
|
- <div>baseUrl</div>
|
|
|
- <div class="col-span-2">https://api.example.com</div>
|
|
|
+ <div>baseUrl</div>
|
|
|
+ <div class="col-span-2">https://api.example.com</div>
|
|
|
|
|
|
- <div>token</div>
|
|
|
- <div class="col-span-2">••••••••</div>
|
|
|
- </div>
|
|
|
+ <div>token</div>
|
|
|
+ <div class="col-span-2">••••••••</div>
|
|
|
</div>
|
|
|
- </section>
|
|
|
- {:else if _state.entry?.type === "Request"}
|
|
|
- <!-- REQUEST WORK AREA -->
|
|
|
-
|
|
|
- {@render entryPath()}
|
|
|
-
|
|
|
- <section class="space-y-4">
|
|
|
- <!-- URL BAR -->
|
|
|
-
|
|
|
- <div class="flex flex-wrap gap-3">
|
|
|
- <Input
|
|
|
- class="w-10/12 flex font-mono"
|
|
|
- bind:value={_state.entry.url}
|
|
|
- placeholder="https://api.example.com/resource"
|
|
|
- onblur={() => {
|
|
|
- handleUrlUpdate(true);
|
|
|
- }}
|
|
|
- />
|
|
|
-
|
|
|
- <Button
|
|
|
- class="w-1/12 flex items-center justify-center gap-2"
|
|
|
- disabled={isSending}
|
|
|
- onclick={handleSendRequest}
|
|
|
- >
|
|
|
- {#if isSending}
|
|
|
- <Loader class="h-4 w-4 animate-spin" />
|
|
|
- Sending
|
|
|
- {:else}
|
|
|
- Send
|
|
|
- {/if}
|
|
|
- </Button>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+{:else if _state.entry?.type === "Request"}
|
|
|
+ <!-- REQUEST WORK AREA -->
|
|
|
+
|
|
|
+ {@render entryPath()}
|
|
|
+
|
|
|
+ <section class="h-[90%] space-y-4">
|
|
|
+ <!-- URL BAR -->
|
|
|
+
|
|
|
+ <div class="flex flex-wrap gap-3 mx-auto">
|
|
|
+ <Input
|
|
|
+ class="w-10/12 flex font-mono"
|
|
|
+ bind:value={_state.entry.url}
|
|
|
+ placeholder="https://api.example.com/resource"
|
|
|
+ oninput={() => {
|
|
|
+ handleUrlUpdate(true);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+
|
|
|
+ <Button
|
|
|
+ class="w-1/12 flex items-center justify-center gap-2"
|
|
|
+ disabled={isSending}
|
|
|
+ onclick={handleSendRequest}
|
|
|
+ >
|
|
|
+ {#if isSending}
|
|
|
+ <Loader class="h-4 w-4 animate-spin" />
|
|
|
+ Sending
|
|
|
+ {:else}
|
|
|
+ Send
|
|
|
+ {/if}
|
|
|
+ </Button>
|
|
|
|
|
|
- <p class="w-full pl-1 text-xs text-muted-foreground">
|
|
|
- {_state.entry.expandedUrl ?? ""}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ <p class="w-full pl-1 text-xs text-muted-foreground">
|
|
|
+ {_state.entry.expandedUrl ?? ""}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- COLLAPSIBLE SECTIONS -->
|
|
|
+ <!-- ================= REQUEST PANEL ================= -->
|
|
|
|
|
|
- <Accordion.Root
|
|
|
- type="multiple"
|
|
|
- value={["auth", "params", "headers", "body", "response"]}
|
|
|
- class="w-full"
|
|
|
- >
|
|
|
- <!-- URL PARAMS -->
|
|
|
+ <Resizable.PaneGroup direction="vertical" class="flex-1 w-full rounded-lg">
|
|
|
+ <Resizable.Pane defaultSize={100}>
|
|
|
+ <Accordion.Root
|
|
|
+ type="multiple"
|
|
|
+ value={["auth", "params", "headers", "body"]}
|
|
|
+ >
|
|
|
+ <!-- URL PARAMS -->
|
|
|
|
|
|
- {#if _state.entry.path.length > 0 || _state.entry.workingUrl?.query_params?.length > 0}
|
|
|
- <Accordion.Item value="params">
|
|
|
- <Accordion.Trigger class="transition-none!"
|
|
|
- >Parameters</Accordion.Trigger
|
|
|
- >
|
|
|
+ {#if _state.entry.path.length > 0 || _state.entry.workingUrl?.query_params?.length > 0}
|
|
|
+ <Accordion.Item value="params">
|
|
|
+ <Accordion.Trigger class="transition-none!"
|
|
|
+ >Parameters</Accordion.Trigger
|
|
|
+ >
|
|
|
|
|
|
- <!-- PATH PARAMS -->
|
|
|
+ <!-- PATH PARAMS -->
|
|
|
|
|
|
- <Accordion.Content
|
|
|
- class="flex-col justify-center items-center space-y-4 "
|
|
|
- >
|
|
|
- <div class="flex flex-wrap">
|
|
|
- <h3 class="w-full mb-2 text-sm font-medium">Path</h3>
|
|
|
- <div class="w-1/2 grid grid-cols-2 gap-2 text-sm">
|
|
|
- {#each _state.entry.path as param}
|
|
|
- <Input
|
|
|
- bind:value={param.name}
|
|
|
- placeholder="key"
|
|
|
- oninput={() => handleUrlUpdate()}
|
|
|
- />
|
|
|
- <Input
|
|
|
- bind:value={param.value}
|
|
|
- placeholder="value"
|
|
|
- oninput={() => handleUrlUpdate()}
|
|
|
- />
|
|
|
- {/each}
|
|
|
+ <Accordion.Content
|
|
|
+ class="flex-col justify-center items-center space-y-4 "
|
|
|
+ >
|
|
|
+ <div class="flex flex-wrap">
|
|
|
+ <h3 class="w-full mb-2 text-sm font-medium">Path</h3>
|
|
|
+ <div class="w-1/2 grid grid-cols-2 gap-2 text-sm">
|
|
|
+ {#each _state.entry.path as param}
|
|
|
+ <Input
|
|
|
+ bind:value={param.name}
|
|
|
+ placeholder="key"
|
|
|
+ oninput={() => handleUrlUpdate()}
|
|
|
+ />
|
|
|
+ <Input
|
|
|
+ bind:value={param.value}
|
|
|
+ placeholder="value"
|
|
|
+ oninput={() => handleUrlUpdate()}
|
|
|
+ />
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- QUERY PARAMS -->
|
|
|
|
|
|
- {#if _state.entry.workingUrl?.query_params.length > 0}
|
|
|
- <h3 class="w-full border-b mb-2 text-sm font-medium">Query</h3>
|
|
|
- <div class="grid items-center grid-cols-2 gap-2 text-sm">
|
|
|
- {#each _state.entry.workingUrl!!.query_params as param}
|
|
|
- <Input
|
|
|
- bind:value={param[0]}
|
|
|
- placeholder="key"
|
|
|
- oninput={() => handleUrlUpdate()}
|
|
|
- />
|
|
|
- <Input
|
|
|
- bind:value={param[1]}
|
|
|
- placeholder="value"
|
|
|
- oninput={() => handleUrlUpdate()}
|
|
|
- />
|
|
|
- {/each}
|
|
|
- </div>
|
|
|
- {/if}
|
|
|
- </Accordion.Content>
|
|
|
- </Accordion.Item>
|
|
|
- {/if}
|
|
|
+ <!-- QUERY PARAMS -->
|
|
|
+
|
|
|
+ {#if _state.entry.workingUrl?.query_params.length > 0}
|
|
|
+ <h3 class="w-full mb-2 text-sm font-medium">Query</h3>
|
|
|
+ <div class="grid items-center grid-cols-2 gap-2 text-sm">
|
|
|
+ {#each _state.entry.workingUrl!!.query_params as param}
|
|
|
+ <Input
|
|
|
+ bind:value={param[0]}
|
|
|
+ placeholder="key"
|
|
|
+ oninput={() => handleUrlUpdate()}
|
|
|
+ />
|
|
|
+ <Input
|
|
|
+ bind:value={param[1]}
|
|
|
+ placeholder="value"
|
|
|
+ oninput={() => handleUrlUpdate()}
|
|
|
+ />
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ {/if}
|
|
|
+ </Accordion.Content>
|
|
|
+ </Accordion.Item>
|
|
|
+ {/if}
|
|
|
|
|
|
- <!-- HEADERS -->
|
|
|
-
|
|
|
- <Accordion.Item value="headers">
|
|
|
- <Accordion.Trigger>Headers</Accordion.Trigger>
|
|
|
- <Accordion.Content>
|
|
|
- <div class="grid grid-cols-3 gap-2 text-sm">
|
|
|
- {#each _state.entry.headers as header}
|
|
|
- <div class="contents">
|
|
|
- <Input
|
|
|
- class="w-full"
|
|
|
- bind:value={header.name}
|
|
|
- placeholder="Name"
|
|
|
- oninput={() =>
|
|
|
- updateHeader(header.id, header.name, header.value)}
|
|
|
- />
|
|
|
+ <!-- HEADERS -->
|
|
|
|
|
|
- <div class="flex gap-2 col-span-2 items-center">
|
|
|
+ <Accordion.Item value="headers">
|
|
|
+ <Accordion.Trigger>Headers</Accordion.Trigger>
|
|
|
+ <Accordion.Content>
|
|
|
+ <div class="grid grid-cols-3 gap-2 text-sm">
|
|
|
+ {#each _state.entry.headers as header}
|
|
|
+ <div class="contents">
|
|
|
<Input
|
|
|
- bind:value={header.value}
|
|
|
- placeholder="Value"
|
|
|
- class="flex-1"
|
|
|
+ class="w-full"
|
|
|
+ bind:value={header.name}
|
|
|
+ placeholder="Name"
|
|
|
oninput={() =>
|
|
|
updateHeader(header.id, header.name, header.value)}
|
|
|
/>
|
|
|
|
|
|
- <TrashIcon
|
|
|
- class="h-4 w-4 cursor-pointer text-muted-foreground hover:text-destructive"
|
|
|
- onclick={() => deleteHeader(header.id)}
|
|
|
- />
|
|
|
+ <div class="flex gap-2 col-span-2 items-center">
|
|
|
+ <Input
|
|
|
+ bind:value={header.value}
|
|
|
+ placeholder="Value"
|
|
|
+ class="flex-1"
|
|
|
+ oninput={() =>
|
|
|
+ updateHeader(header.id, header.name, header.value)}
|
|
|
+ />
|
|
|
+
|
|
|
+ <TrashIcon
|
|
|
+ class="h-4 w-4 cursor-pointer text-muted-foreground hover:text-destructive"
|
|
|
+ onclick={() => deleteHeader(header.id)}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- {/each}
|
|
|
- <PlusIcon
|
|
|
- class="col-span-3 mt-2 cursor-pointer text-muted-foreground hover:text-primary"
|
|
|
- onclick={() => insertHeader()}
|
|
|
- />
|
|
|
- </div>
|
|
|
- </Accordion.Content>
|
|
|
- </Accordion.Item>
|
|
|
-
|
|
|
- <!-- BODY -->
|
|
|
-
|
|
|
- <Accordion.Item value="body">
|
|
|
- <Accordion.Trigger>Body</Accordion.Trigger>
|
|
|
- <Accordion.Content class="space-y-4">
|
|
|
- <Tabs.Root value={_state.entry.body === null ? "none" : "json"}>
|
|
|
- <Tabs.List>
|
|
|
- <Tabs.Trigger value="none" onclick={() => deleteBody()}
|
|
|
- >None</Tabs.Trigger
|
|
|
- >
|
|
|
- <Tabs.Trigger value="json">JSON</Tabs.Trigger>
|
|
|
- <Tabs.Trigger value="form">Form</Tabs.Trigger>
|
|
|
- <Tabs.Trigger value="text">Text</Tabs.Trigger>
|
|
|
- </Tabs.List>
|
|
|
-
|
|
|
- <Tabs.Content value="none">No body</Tabs.Content>
|
|
|
-
|
|
|
- <Tabs.Content value="json">
|
|
|
- <CodeMirror
|
|
|
- input={_state.entry.body?.body}
|
|
|
- onStateChange={(update) => {
|
|
|
- // console.log(update);
|
|
|
- if (
|
|
|
- update.docChanged &&
|
|
|
- _state.entry!!.body?.body !== update.state.doc.toString()
|
|
|
- ) {
|
|
|
- updateBodyContent(update.state.doc.toString(), "Json");
|
|
|
- }
|
|
|
- }}
|
|
|
+ {/each}
|
|
|
+ <PlusIcon
|
|
|
+ class="col-span-3 mt-2 cursor-pointer text-muted-foreground hover:text-primary"
|
|
|
+ onclick={() => insertHeader()}
|
|
|
/>
|
|
|
- </Tabs.Content>
|
|
|
-
|
|
|
- <Tabs.Content value="form">
|
|
|
- <p class="text-sm text-muted-foreground">
|
|
|
- Form body editor coming soon.
|
|
|
- </p>
|
|
|
- </Tabs.Content>
|
|
|
-
|
|
|
- <Tabs.Content value="text">
|
|
|
- <textarea
|
|
|
- class="w-full min-h-[200px] rounded-md border bg-background p-2 font-mono text-sm"
|
|
|
- placeholder="Raw text body"
|
|
|
- ></textarea>
|
|
|
- </Tabs.Content>
|
|
|
- </Tabs.Root>
|
|
|
- </Accordion.Content>
|
|
|
- </Accordion.Item>
|
|
|
-
|
|
|
- <!-- RESPONSE -->
|
|
|
+ </div>
|
|
|
+ </Accordion.Content>
|
|
|
+ </Accordion.Item>
|
|
|
|
|
|
+ <!-- BODY -->
|
|
|
+
|
|
|
+ <Accordion.Item value="body">
|
|
|
+ <Accordion.Trigger>Body</Accordion.Trigger>
|
|
|
+ <Accordion.Content class="space-y-4">
|
|
|
+ <Tabs.Root value={_state.entry.body === null ? "none" : "json"}>
|
|
|
+ <Tabs.List>
|
|
|
+ <Tabs.Trigger value="none" onclick={() => deleteBody()}
|
|
|
+ >None</Tabs.Trigger
|
|
|
+ >
|
|
|
+ <Tabs.Trigger value="json">JSON</Tabs.Trigger>
|
|
|
+ <Tabs.Trigger value="form">Form</Tabs.Trigger>
|
|
|
+ <Tabs.Trigger value="text">Text</Tabs.Trigger>
|
|
|
+ </Tabs.List>
|
|
|
+
|
|
|
+ <Tabs.Content value="none"></Tabs.Content>
|
|
|
+
|
|
|
+ <Tabs.Content value="json">
|
|
|
+ <CodeMirror
|
|
|
+ input={_state.entry.body?.body}
|
|
|
+ onStateChange={(update) => {
|
|
|
+ // console.log(update);
|
|
|
+ if (
|
|
|
+ update.docChanged &&
|
|
|
+ _state.entry!!.body?.body !==
|
|
|
+ update.state.doc.toString()
|
|
|
+ ) {
|
|
|
+ updateBodyContent(update.state.doc.toString(), "Json");
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Tabs.Content>
|
|
|
+
|
|
|
+ <Tabs.Content value="form">
|
|
|
+ <p class="text-sm text-muted-foreground">
|
|
|
+ Form body editor coming soon.
|
|
|
+ </p>
|
|
|
+ </Tabs.Content>
|
|
|
+
|
|
|
+ <Tabs.Content value="text">
|
|
|
+ <textarea
|
|
|
+ class="w-full min-h-[200px] rounded-md border bg-background p-2 font-mono text-sm"
|
|
|
+ placeholder="Raw text body"
|
|
|
+ ></textarea>
|
|
|
+ </Tabs.Content>
|
|
|
+ </Tabs.Root>
|
|
|
+ </Accordion.Content>
|
|
|
+ </Accordion.Item>
|
|
|
+ </Accordion.Root>
|
|
|
+ </Resizable.Pane>
|
|
|
+
|
|
|
+ <Resizable.Handle withHandle class="p-1.5" />
|
|
|
+
|
|
|
+ <!-- RESPONSE -->
|
|
|
+
|
|
|
+ <Resizable.Pane defaultSize={0}>
|
|
|
{#if isSending}
|
|
|
<div class="flex justify-center py-8">
|
|
|
<Loader class="h-6 w-6 animate-spin text-muted-foreground" />
|
|
|
</div>
|
|
|
{:else if response}
|
|
|
- <Accordion.Item value="response">
|
|
|
- <Accordion.Trigger>Response</Accordion.Trigger>
|
|
|
- <Accordion.Content class="space-y-4 mx-auto w-full max-w-6xl">
|
|
|
- <!-- Prevents line number selection -->
|
|
|
- <div
|
|
|
- class="
|
|
|
+ <!-- Prevents line number selection -->
|
|
|
+ <div
|
|
|
+ class="
|
|
|
w-full
|
|
|
[&_td:first-child]:select-none
|
|
|
[&_td:first-child]:pointer-events-none
|
|
|
"
|
|
|
- >
|
|
|
- <Highlight
|
|
|
- language={json}
|
|
|
- code={response.body.Json}
|
|
|
- let:highlighted
|
|
|
- >
|
|
|
- <LineNumbers {highlighted} wrapLines hideBorder />
|
|
|
- </Highlight>
|
|
|
- </div>
|
|
|
- </Accordion.Content>
|
|
|
- </Accordion.Item>
|
|
|
+ >
|
|
|
+ <Highlight
|
|
|
+ language={json}
|
|
|
+ code={response.body.Json}
|
|
|
+ let:highlighted
|
|
|
+ >
|
|
|
+ <LineNumbers {highlighted} wrapLines hideBorder />
|
|
|
+ </Highlight>
|
|
|
+ </div>
|
|
|
{/if}
|
|
|
- </Accordion.Root>
|
|
|
- </section>
|
|
|
- {/if}
|
|
|
-</main>
|
|
|
+ </Resizable.Pane>
|
|
|
+ </Resizable.PaneGroup>
|
|
|
+ </section>
|
|
|
+{/if}
|
