pocketbase/ui/src/components/collections/docs/ViewApiDocs.svelte

163 lines
4.5 KiB
Svelte

<script>
import { Collection } from "pocketbase";
import ApiClient from "@/utils/ApiClient";
import CommonHelper from "@/utils/CommonHelper";
import CodeBlock from "@/components/base/CodeBlock.svelte";
import SdkTabs from "@/components/collections/docs/SdkTabs.svelte";
export let collection = new Collection();
let responseTab = 200;
let responses = [];
$: adminsOnly = collection?.viewRule === null;
$: backendAbsUrl = CommonHelper.getApiExampleUrl(ApiClient.baseUrl);
$: if (collection?.id) {
responses.push({
code: 200,
body: JSON.stringify(CommonHelper.dummyCollectionRecord(collection), null, 2),
});
if (adminsOnly) {
responses.push({
code: 403,
body: `
{
"code": 403,
"message": "Only admins can access this action.",
"data": {}
}
`,
});
}
responses.push({
code: 404,
body: `
{
"code": 404,
"message": "The requested resource wasn't found.",
"data": {}
}
`,
});
}
</script>
<div class="alert alert-info">
<strong class="label label-primary">GET</strong>
<div class="content">
<p>
/api/collections/<strong>{collection.name}</strong>/records/<strong>:id</strong>
</p>
</div>
{#if adminsOnly}
<p class="txt-hint txt-sm txt-right">Requires <code>Authorization: Admin TOKEN</code> header</p>
{/if}
</div>
<div class="content m-b-base">
<p>Fetch a single <strong>{collection.name}</strong> record.</p>
</div>
<div class="section-title">Client SDKs example</div>
<SdkTabs
js={`
import PocketBase from 'pocketbase';
const client = new PocketBase('${backendAbsUrl}');
...
const record = await client.records.getOne('${collection?.name}', 'RECORD_ID', {
expand: 'some_relation'
});
`}
dart={`
import 'package:pocketbase/pocketbase.dart';
final client = PocketBase('${backendAbsUrl}');
...
final record = await client.records.getOne('${collection?.name}', 'RECORD_ID', query: {
'expand': 'some_relation',
});
`}
/>
<div class="section-title">Path Parameters</div>
<table class="table-compact table-border m-b-lg">
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th width="60%">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>
<span class="label">String</span>
</td>
<td>ID of the record to view.</td>
</tr>
</tbody>
</table>
<div class="section-title">Query parameters</div>
<table class="table-compact table-border m-b-lg">
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th width="60%">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>expand</td>
<td>
<span class="label">String</span>
</td>
<td>
Auto expand record relations. Ex.:
<CodeBlock
content={`
?expand=rel1,rel2.subrel21.subrel22
`}
/>
Supports up to 6-levels depth nested relations expansion. <br />
The expanded relations will be appended to the record under the
<code>@expand</code> property (eg. <code>{`"@expand": {"rel1": {...}, ...}`}</code>). Only the
relations that the user has permissions to <strong>view</strong> will be expanded.
</td>
</tr>
</tbody>
</table>
<div class="section-title">Responses</div>
<div class="tabs">
<div class="tabs-header compact left">
{#each responses as response (response.code)}
<button
class="tab-item"
class:active={responseTab === response.code}
on:click={() => (responseTab = response.code)}
>
{response.code}
</button>
{/each}
</div>
<div class="tabs-content">
{#each responses as response (response.code)}
<div class="tab-item" class:active={responseTab === response.code}>
<CodeBlock content={response.body} />
</div>
{/each}
</div>
</div>