initial v0.8 pre-release

2022-10-30 10:28:14 +02:00
parent 9cbb2e750e
commit 90dba45d7c
388 changed files with 21580 additions and 13603 deletions
--- a/ui/src/components/collections/CollectionDocsPanel.svelte
+++ b/ui/src/components/collections/CollectionDocsPanel.svelte
@@ -0,0 +1,156 @@
+<script>
+    import { Collection } from "pocketbase";
+    import OverlayPanel from "@/components/base/OverlayPanel.svelte";
+
+    const baseTabs = {
+        list: {
+            label: "List/Search",
+            component: import("@/components/collections/docs/ListApiDocs.svelte"),
+        },
+        view: {
+            label: "View",
+            component: import("@/components/collections/docs/ViewApiDocs.svelte"),
+        },
+        create: {
+            label: "Create",
+            component: import("@/components/collections/docs/CreateApiDocs.svelte"),
+        },
+        update: {
+            label: "Update",
+            component: import("@/components/collections/docs/UpdateApiDocs.svelte"),
+        },
+        delete: {
+            label: "Delete",
+            component: import("@/components/collections/docs/DeleteApiDocs.svelte"),
+        },
+        realtime: {
+            label: "Realtime",
+            component: import("@/components/collections/docs/RealtimeApiDocs.svelte"),
+        },
+    };
+
+    const authTabs = {
+        "auth-with-password": {
+            label: "Auth with password",
+            component: import("@/components/collections/docs/AuthWithPasswordDocs.svelte"),
+        },
+        "auth-with-oauth2": {
+            label: "Auth with OAuth2",
+            component: import("@/components/collections/docs/AuthWithOAuth2Docs.svelte"),
+        },
+        refresh: {
+            label: "Auth refresh",
+            component: import("@/components/collections/docs/AuthRefreshDocs.svelte"),
+        },
+        "request-verification": {
+            label: "Request verification",
+            component: import("@/components/collections/docs/RequestVerificationDocs.svelte"),
+        },
+        "confirm-verification": {
+            label: "Confirm verification",
+            component: import("@/components/collections/docs/ConfirmVerificationDocs.svelte"),
+        },
+        "request-password-reset": {
+            label: "Request password reset",
+            component: import("@/components/collections/docs/RequestPasswordResetDocs.svelte"),
+        },
+        "confirm-password-reset": {
+            label: "Confirm password reset",
+            component: import("@/components/collections/docs/ConfirmPasswordResetDocs.svelte"),
+        },
+        "request-email-change": {
+            label: "Request email change",
+            component: import("@/components/collections/docs/RequestEmailChangeDocs.svelte"),
+        },
+        "confirm-email-change": {
+            label: "Confirm email change",
+            component: import("@/components/collections/docs/ConfirmEmailChangeDocs.svelte"),
+        },
+        "list-auth-methods": {
+            label: "List auth methods",
+            component: import("@/components/collections/docs/AuthMethodsDocs.svelte"),
+        },
+        "list-linked-accounts": {
+            label: "List OAuth2 accounts",
+            component: import("@/components/collections/docs/ListExternalAuthsDocs.svelte"),
+        },
+        "unlink-account": {
+            label: "Unlink OAuth2 account",
+            component: import("@/components/collections/docs/UnlinkExternalAuthDocs.svelte"),
+        },
+    };
+
+    let docsPanel;
+    let collection = new Collection();
+    let activeTab;
+    let tabs = [];
+
+    $: if (collection.isAuth) {
+        tabs = Object.assign({}, baseTabs, authTabs);
+        if (!collection?.options.allowUsernameAuth && !collection?.options.allowEmailAuth) {
+            delete tabs["auth-with-password"];
+        }
+        if (!collection?.options.allowOAuth2Auth) {
+            delete tabs["auth-with-oauth2"];
+        }
+    } else {
+        tabs = Object.assign({}, baseTabs);
+    }
+
+    // reset active tab on tabs list change
+    if (tabs.length) {
+        activeTab = Object.keys(tabs)[0];
+    }
+
+    export function show(model) {
+        collection = model;
+
+        changeTab(Object.keys(tabs)[0]);
+
+        return docsPanel?.show();
+    }
+
+    export function hide() {
+        return docsPanel?.hide();
+    }
+
+    export function changeTab(newTab) {
+        activeTab = newTab;
+    }
+</script>
+
+<OverlayPanel bind:this={docsPanel} on:hide on:show class="docs-panel">
+    <div class="docs-content-wrapper">
+        <aside class="docs-sidebar" class:compact={collection?.isAuth}>
+            <nav class="sidebar-content">
+                {#each Object.entries(tabs) as [key, tab] (key)}
+                    <button
+                        type="button"
+                        class="sidebar-item"
+                        class:active={activeTab === key}
+                        on:click={() => changeTab(key)}
+                    >
+                        {tab.label}
+                    </button>
+                {/each}
+            </nav>
+        </aside>
+
+        <div class="docs-content">
+            {#each Object.entries(tabs) as [key, tab] (key)}
+                {#if activeTab === key}
+                    {#await tab.component then { default: TabComponent }}
+                        <TabComponent {collection} />
+                    {/await}
+                {/if}
+            {/each}
+        </div>
+    </div>
+
+    <!-- visible only on small screens -->
+    <svelte:fragment slot="footer">
+        <button type="button" class="btn btn-secondary" on:click={() => hide()}>
+            <span class="txt">Close</span>
+        </button>
+    </svelte:fragment>
+</OverlayPanel>