tomas/pocketbase
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added Dart to the api preview examples

Browse Source
This commit is contained in:
Gani Georgiev
2022-07-30 21:00:18 +03:00
parent 4019ca5f00
commit 96b2c5fedf
21 changed files with 892 additions and 642 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/base/CodeBlock.svelte
+1
View File
@@ -1,6 +1,7 @@
<script>
import Prism from "prismjs";
import "prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js";
import "prismjs/components/prism-dart.js";
import "@/scss/prism_light.scss";
export let content = "";
ui/src/components/collections/docs/CreateApiDocs.svelte
+28 -39
View File
@@ -3,16 +3,18 @@
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 sdkTab = "JavaScript";
let responses = [];
let sdkExamples = [];
$: adminsOnly = collection?.createRule === null;
$: backendAbsUrl =
window.location.href.substring(0, window.location.href.indexOf("/_")) || ApiClient.baseUrl;
$: responses = [
{
code: 200,
@@ -44,23 +46,6 @@
`,
},
];
$: sdkExamples = [
{
lang: "JavaScript",
code: `
import PocketBase from 'pocketbase';
const client = new PocketBase("${ApiClient.baseUrl}");
...
const data = { ... };
const record = await client.Records.create("${collection?.name}", data);
`,
},
];
</script>
<div class="alert alert-success">
@@ -87,26 +72,30 @@
</div>
<div class="section-title">Client SDKs example</div>
<div class="tabs m-b-lg">
<div class="tabs-header compact left">
{#each sdkExamples as example (example.lang)}
<button
class="tab-item"
class:active={sdkTab === example.lang}
on:click={() => (sdkTab = example.lang)}
>
{example.lang}
</button>
{/each}
</div>
<div class="tabs-content">
{#each sdkExamples as example (example.lang)}
<div class="tab-item" class:active={sdkTab === example.lang}>
<CodeBlock content={example.code} />
</div>
{/each}
</div>
</div>
<SdkTabs
js={`
import PocketBase from 'pocketbase';
const client = new PocketBase('${backendAbsUrl}');
...
const data = { ... };
const record = await client.Records.create('${collection?.name}', data);
`}
dart={`
import 'package:pocketbase/pocketbase.dart';
final client = PocketBase('${backendAbsUrl}');
...
final body = <String, dynamic>{ ... };
final record = await client.records.create('${collection?.name}', body: body);
`}
/>
<div class="section-title">Body Parameters</div>
<table class="table-compact table-border m-b-lg">
ui/src/components/collections/docs/DeleteApiDocs.svelte
+24 -37
View File
@@ -2,16 +2,18 @@
import { Collection } from "pocketbase";
import ApiClient from "@/utils/ApiClient";
import CodeBlock from "@/components/base/CodeBlock.svelte";
import SdkTabs from "@/components/collections/docs/SdkTabs.svelte";
export let collection = new Collection();
let responseTab = 204;
let sdkTab = "JavaScript";
let responses = [];
let sdkExamples = [];
$: adminsOnly = collection?.deleteRule === null;
$: backendAbsUrl =
window.location.href.substring(0, window.location.href.indexOf("/_")) || ApiClient.baseUrl;
$: if (collection?.id) {
responses.push({
code: 204,
@@ -55,21 +57,6 @@
`,
});
}
$: sdkExamples = [
{
lang: "JavaScript",
code: `
import PocketBase from 'pocketbase';
const client = new PocketBase("${ApiClient.baseUrl}");
...
await client.Records.delete("${collection?.name}", "RECORD_ID");
`,
},
];
</script>
<div class="alert alert-danger">
@@ -89,26 +76,26 @@
</div>
<div class="section-title">Client SDKs example</div>
<div class="tabs m-b-lg">
<div class="tabs-header compact left">
{#each sdkExamples as example (example.lang)}
<button
class="tab-item"
class:active={sdkTab === example.lang}
on:click={() => (sdkTab = example.lang)}
>
{example.lang}
</button>
{/each}
</div>
<div class="tabs-content">
{#each sdkExamples as example (example.lang)}
<div class="tab-item" class:active={sdkTab === example.lang}>
<CodeBlock content={example.code} />
</div>
{/each}
</div>
</div>
<SdkTabs
js={`
import PocketBase from 'pocketbase';
const client = new PocketBase('${backendAbsUrl}');
...
await client.Records.delete('${collection?.name}', 'RECORD_ID');
`}
dart={`
import 'package:pocketbase/pocketbase.dart';
final client = PocketBase('${backendAbsUrl}');
...
await client.records.delete('${collection?.name}', 'RECORD_ID');
`}
/>
<div class="section-title">Path parameters</div>
<table class="table-compact table-border m-b-lg">
ui/src/components/collections/docs/ListApiDocs.svelte
+41 -45
View File
@@ -4,16 +4,18 @@
import CommonHelper from "@/utils/CommonHelper";
import CodeBlock from "@/components/base/CodeBlock.svelte";
import FilterSyntax from "@/components/collections/docs/FilterSyntax.svelte";
import SdkTabs from "@/components/collections/docs/SdkTabs.svelte";
export let collection = new Collection();
let responseTab = 200;
let sdkTab = "JavaScript";
let responses = [];
let sdkExamples = [];
$: adminsOnly = collection?.listRule === null;
$: backendAbsUrl =
window.location.href.substring(0, window.location.href.indexOf("/_")) || ApiClient.baseUrl;
$: if (collection?.id) {
responses.push({
code: 200,
@@ -67,29 +69,6 @@
`,
});
}
$: sdkExamples = [
{
lang: "JavaScript",
code: `
import PocketBase from 'pocketbase';
const client = new PocketBase("${ApiClient.baseUrl}");
...
// fetch a paginated records list
const resultList = await client.Records.getList("${collection?.name}", 1, 50, {
filter: "created >= '2022-01-01 00:00:00'",
});
// alternatively you can also fetch all records at once via getFullList:
const records = await client.Records.getFullList("${collection?.name}", 200 /* batch size */, {
sort: "-created",
});
`,
},
];
</script>
<div class="alert alert-info">
@@ -109,26 +88,43 @@
</div>
<div class="section-title">Client SDKs example</div>
<div class="tabs m-b-lg">
<div class="tabs-header compact left">
{#each sdkExamples as example (example.lang)}
<button
class="tab-item"
class:active={sdkTab === example.lang}
on:click={() => (sdkTab = example.lang)}
>
{example.lang}
</button>
{/each}
</div>
<div class="tabs-content">
{#each sdkExamples as example (example.lang)}
<div class="tab-item" class:active={sdkTab === example.lang}>
<CodeBlock content={example.code} />
</div>
{/each}
</div>
</div>
<SdkTabs
js={`
import PocketBase from 'pocketbase';
const client = new PocketBase('${backendAbsUrl}');
...
// fetch a paginated records list
const resultList = await client.Records.getList('${collection?.name}', 1, 50, {
filter: 'created >= '2022-01-01 00:00:00'',
});
// alternatively you can also fetch all records at once via getFullList:
const records = await client.Records.getFullList('${collection?.name}', 200 /* batch size */, {
sort: '-created',
});
`}
dart={`
import 'package:pocketbase/pocketbase.dart';
final client = PocketBase('${backendAbsUrl}');
...
// fetch a paginated records list
final result = await client.records.getList(
'${collection?.name}',
page: 1,
perPage: 50,
filter: 'created >= "2022-01-01 00:00:00"',
);
// alternatively you can also fetch all records at once via getFullList:
final records = await client.records.getFullList('${collection?.name}', batch: 200, sort: '-created');
`}
/>
<div class="section-title">Query parameters</div>
<table class="table-compact table-border m-b-lg">
ui/src/components/collections/docs/RealtimeApiDocs.svelte
+55 -51
View File
@@ -3,40 +3,12 @@
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 sdkTab = "JavaScript";
let sdkExamples = [];
$: sdkExamples = [
{
lang: "JavaScript",
code: `
import PocketBase from 'pocketbase';
const client = new PocketBase("${ApiClient.baseUrl}");
// (Optionally) authenticate
client.Users.authViaEmail("test@example.com", "123456");
// Subscribe to changes in any record from the collection
client.Realtime.subscribe("${collection?.name}", function (e) {
console.log(e.record);
});
// Subscribe to changes in a single record
client.Realtime.subscribe("${collection?.name}/RECORD_ID", function (e) {
console.log(e.record);
});
// Unsubscribe
client.Realtime.unsubscribe() // remove all subscriptions
client.Realtime.unsubscribe("${collection?.name}") // remove the collection subscription
client.Realtime.unsubscribe("${collection?.name}/RECORD_ID") // remove the record subscription
`,
},
];
$: backendAbsUrl =
window.location.href.substring(0, window.location.href.indexOf("/_")) || ApiClient.baseUrl;
</script>
<div class="alert">
@@ -75,26 +47,58 @@
</div>
<div class="section-title">Client SDKs example</div>
<div class="tabs m-b-base">
<div class="tabs-header compact left">
{#each sdkExamples as example (example.lang)}
<button
class="tab-item"
class:active={sdkTab === example.lang}
on:click={() => (sdkTab = example.lang)}
>
{example.lang}
</button>
{/each}
</div>
<div class="tabs-content">
{#each sdkExamples as example (example.lang)}
<div class="tab-item" class:active={sdkTab === example.lang}>
<CodeBlock content={example.code} />
</div>
{/each}
</div>
</div>
<SdkTabs
js={`
import PocketBase from 'pocketbase';
const client = new PocketBase('${backendAbsUrl}');
...
// (Optionally) authenticate
client.Users.authViaEmail('test@example.com', '123456');
// Subscribe to changes in any record from the collection
client.Realtime.subscribe('${collection?.name}', function (e) {
console.log(e.record);
});
// Subscribe to changes in a single record
client.Realtime.subscribe('${collection?.name}/RECORD_ID', function (e) {
console.log(e.record);
});
// Unsubscribe
client.Realtime.unsubscribe() // remove all subscriptions
client.Realtime.unsubscribe('${collection?.name}') // remove only the collection subscription
client.Realtime.unsubscribe('${collection?.name}/RECORD_ID') // remove only the record subscription
`}
dart={`
import 'package:pocketbase/pocketbase.dart';
final client = PocketBase('${backendAbsUrl}');
...
// (Optionally) authenticate
client.users.authViaEmail('test@example.com', '123456');
// Subscribe to changes in any record from the collection
client.realtime.subscribe('${collection?.name}', (e) {
print(e.record);
});
// Subscribe to changes in a single record
client.realtime.subscribe('${collection?.name}/RECORD_ID', (e) {
print(e.record);
});
// Unsubscribe
client.realtime.unsubscribe() // remove all subscriptions
client.realtime.unsubscribe('${collection?.name}') // remove only the collection subscription
client.realtime.unsubscribe('${collection?.name}/RECORD_ID') // remove only the record subscription
`}
/>
<div class="section-title">Event data format</div>
<CodeBlock
ui/src/components/collections/docs/SdkTabs.svelte
+55
View File
@@ -0,0 +1,55 @@
<script>
import CodeBlock from "@/components/base/CodeBlock.svelte";
const SDK_PREFERENCE_KEY = "pb_sdk_preference";
export let js = "";
export let dart = "";
let activeTab = localStorage.getItem(SDK_PREFERENCE_KEY) || "javascript";
$: if (activeTab) {
// store user preference
localStorage.setItem(SDK_PREFERENCE_KEY, activeTab);
}
$: sdkExamples = [
{
title: "JavaScript",
language: "javascript",
content: js,
},
{
title: "Dart",
language: "dart",
content: dart,
},
];
</script>
<div class="tabs sdk-tabs m-b-lg">
<div class="tabs-header compact left">
{#each sdkExamples as example (example.language)}
<button
class="tab-item"
class:active={activeTab === example.language}
on:click={() => (activeTab = example.language)}
>
<div class="txt">{example.title}</div>
</button>
{/each}
</div>
<div class="tabs-content">
{#each sdkExamples as example (example.language)}
<div class="tab-item" class:active={activeTab === example.language}>
<CodeBlock language={example.language} content={example.content} />
</div>
{/each}
</div>
</div>
<style>
.sdk-tabs .tabs-header .tab-item {
min-width: 100px;
}
</style>
ui/src/components/collections/docs/UpdateApiDocs.svelte
+28 -39
View File
@@ -3,16 +3,18 @@
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 sdkTab = "JavaScript";
let responses = [];
let sdkExamples = [];
$: adminsOnly = collection?.updateRule === null;
$: backendAbsUrl =
window.location.href.substring(0, window.location.href.indexOf("/_")) || ApiClient.baseUrl;
$: responses = [
{
code: 200,
@@ -54,23 +56,6 @@
`,
},
];
$: sdkExamples = [
{
lang: "JavaScript",
code: `
import PocketBase from 'pocketbase';
const client = new PocketBase("${ApiClient.baseUrl}");
...
const data = { ... };
const record = await client.Records.update("${collection?.name}", "RECORD_ID", data);
`,
},
];
</script>
<div class="alert alert-warning">
@@ -97,26 +82,30 @@
</div>
<div class="section-title">Client SDKs example</div>
<div class="tabs m-b-lg">
<div class="tabs-header compact left">
{#each sdkExamples as example (example.lang)}
<button
class="tab-item"
class:active={sdkTab === example.lang}
on:click={() => (sdkTab = example.lang)}
>
{example.lang}
</button>
{/each}
</div>
<div class="tabs-content">
{#each sdkExamples as example (example.lang)}
<div class="tab-item" class:active={sdkTab === example.lang}>
<CodeBlock content={example.code} />
</div>
{/each}
</div>
</div>
<SdkTabs
js={`
import PocketBase from 'pocketbase';
const client = new PocketBase('${backendAbsUrl}');
...
const data = { ... };
const record = await client.Records.update('${collection?.name}', 'RECORD_ID', data);
`}
dart={`
import 'package:pocketbase/pocketbase.dart';
final client = PocketBase('${backendAbsUrl}');
...
final body = <String, dynamic>{ ... };
final record = await client.records.update('${collection?.name}', 'RECORD_ID', body: body);
`}
/>
<div class="section-title">Path parameters</div>
<table class="table-compact table-border m-b-lg">
ui/src/components/collections/docs/ViewApiDocs.svelte
+28 -39
View File
@@ -3,16 +3,18 @@
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 sdkTab = "JavaScript";
let responses = [];
let sdkExamples = [];
$: adminsOnly = collection?.viewRule === null;
$: backendAbsUrl =
window.location.href.substring(0, window.location.href.indexOf("/_")) || ApiClient.baseUrl;
$: if (collection?.id) {
responses.push({
code: 200,
@@ -43,23 +45,6 @@
`,
});
}
$: sdkExamples = [
{
lang: "JavaScript",
code: `
import PocketBase from 'pocketbase';
const client = new PocketBase("${ApiClient.baseUrl}");
...
const record = await client.Records.getOne("${collection?.name}", "RECORD_ID", {
expand: "some_relation"
});
`,
},
];
</script>
<div class="alert alert-info">
@@ -79,26 +64,30 @@
</div>
<div class="section-title">Client SDKs example</div>
<div class="tabs m-b-lg">
<div class="tabs-header compact left">
{#each sdkExamples as example (example.lang)}
<button
class="tab-item"
class:active={sdkTab === example.lang}
on:click={() => (sdkTab = example.lang)}
>
{example.lang}
</button>
{/each}
</div>
<div class="tabs-content">
{#each sdkExamples as example (example.lang)}
<div class="tab-item" class:active={sdkTab === example.lang}>
<CodeBlock content={example.code} />
</div>
{/each}
</div>
</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">