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
@@ -3,12 +3,14 @@
    import { Record } from "pocketbase";
    import CommonHelper from "@/utils/CommonHelper";
    import ApiClient from "@/utils/ApiClient";
+    import tooltip from "@/actions/tooltip";
    import { setErrors } from "@/stores/errors";
    import { confirm } from "@/stores/confirmation";
    import { addSuccessToast } from "@/stores/toasts";
    import Field from "@/components/base/Field.svelte";
    import Toggler from "@/components/base/Toggler.svelte";
    import OverlayPanel from "@/components/base/OverlayPanel.svelte";
+    import AuthFields from "@/components/records/fields/AuthFields.svelte";
    import TextField from "@/components/records/fields/TextField.svelte";
    import NumberField from "@/components/records/fields/NumberField.svelte";
    import BoolField from "@/components/records/fields/BoolField.svelte";
@@ -19,10 +21,13 @@
    import JsonField from "@/components/records/fields/JsonField.svelte";
    import FileField from "@/components/records/fields/FileField.svelte";
    import RelationField from "@/components/records/fields/RelationField.svelte";
-    import UserField from "@/components/records/fields/UserField.svelte";
+    import ExternalAuthsList from "@/components/records/ExternalAuthsList.svelte";

    const dispatch = createEventDispatcher();
+
    const formId = "record_" + CommonHelper.randomString(5);
+    const TAB_FORM = "form";
+    const TAB_PROVIDERS = "providers";

    export let collection;

@@ -34,6 +39,7 @@
    let uploadedFilesMap = {}; // eg.: {"field1":[File1, File2], ...}
    let deletedFileIndexesMap = {}; // eg.: {"field1":[0, 1], ...}
    let initialFormHash = "";
+    let activeTab = TAB_FORM;

    $: hasFileChanges =
        CommonHelper.hasNonEmptyProps(uploadedFilesMap) ||
@@ -43,13 +49,13 @@

    $: canSave = record.isNew || hasChanges;

-    $: isProfileCollection = collection?.name !== import.meta.env.PB_PROFILE_COLLECTION;
-
    export function show(model) {
        load(model);

        confirmClose = true;

+        activeTab = TAB_FORM;
+
        return recordPanel?.show();
    }

@@ -60,7 +66,11 @@
    async function load(model) {
        setErrors({}); // reset errors
        original = model || {};
-        record = model?.clone ? model.clone() : new Record();
+        if (model?.clone) {
+            record = model.clone();
+        } else {
+            record = new Record();
+        }
        uploadedFilesMap = {};
        deletedFileIndexesMap = {};
        await tick(); // wait to populate the fields to get the normalized values
@@ -72,7 +82,7 @@
    }

    function save() {
-        if (isSaving || !canSave) {
+        if (isSaving || !canSave || !collection?.id) {
            return;
        }

@@ -82,13 +92,13 @@

        let request;
        if (record.isNew) {
-            request = ApiClient.records.create(collection?.id, data);
+            request = ApiClient.collection(collection.id).create(data);
        } else {
-            request = ApiClient.records.update(collection?.id, record.id, data);
+            request = ApiClient.collection(collection.id).update(record.id, data);
        }

        request
-            .then(async (result) => {
+            .then((result) => {
                addSuccessToast(
                    record.isNew ? "Successfully created record." : "Successfully updated record."
                );
@@ -110,7 +120,8 @@
        }

        confirm(`Do you really want to delete the selected record?`, () => {
-            return ApiClient.records.delete(original["@collectionId"], original.id)
+            return ApiClient.collection(original.collectionId)
+                .delete(original.id)
                .then(() => {
                    hide();
                    addSuccessToast("Successfully deleted record.");
@@ -126,15 +137,24 @@
        const data = record?.export() || {};
        const formData = new FormData();

-        const schemaMap = {};
+        const exportableFields = {};
        for (const field of collection?.schema || []) {
-            schemaMap[field.name] = field;
+            exportableFields[field.name] = true;
+        }
+
+        if (collection?.isAuth) {
+            exportableFields["username"] = true;
+            exportableFields["email"] = true;
+            exportableFields["emailVisibility"] = true;
+            exportableFields["password"] = true;
+            exportableFields["passwordConfirm"] = true;
+            exportableFields["verified"] = true;
        }

        // export base fields
        for (const key in data) {
            // skip non-schema fields
-            if (!schemaMap[key]) {
+            if (!exportableFields[key]) {
                continue;
            }

@@ -164,11 +184,45 @@

        return formData;
    }
+
+    function sendVerificationEmail() {
+        if (!collection?.id || !original?.email) {
+            return;
+        }
+
+        confirm(`Do you really want to sent verification email to ${original.email}?`, () => {
+            return ApiClient.collection(collection.id)
+                .requestVerification(original.email)
+                .then(() => {
+                    addSuccessToast(`Successfully sent verification email to ${original.email}.`);
+                })
+                .catch((err) => {
+                    ApiClient.errorResponseHandler(err);
+                });
+        });
+    }
+
+    function sendPasswordResetEmail() {
+        if (!collection?.id || !original?.email) {
+            return;
+        }
+
+        confirm(`Do you really want to sent password reset email to ${original.email}?`, () => {
+            return ApiClient.collection(collection.id)
+                .requestPasswordReset(original.email)
+                .then(() => {
+                    addSuccessToast(`Successfully sent password reset email to ${original.email}.`);
+                })
+                .catch((err) => {
+                    ApiClient.errorResponseHandler(err);
+                });
+        });
+    }
 </script>

 <OverlayPanel
    bind:this={recordPanel}
-    class="overlay-panel-lg record-panel"
+    class="overlay-panel-lg record-panel {collection?.isAuth && !record.isNew ? 'colored-header' : ''}"
    beforeHide={() => {
        if (hasChanges && confirmClose) {
            confirm("You have unsaved changes. Do you really want to close the panel?", () => {
@@ -177,6 +231,7 @@
            });
            return false;
        }
+        setErrors({});
        return true;
    }}
    on:hide
@@ -185,73 +240,143 @@
    <svelte:fragment slot="header">
        <h4>
            {record.isNew ? "New" : "Edit"}
-            {collection.name} record
+            <strong>{collection?.name}</strong> record
        </h4>

-        {#if !record.isNew && isProfileCollection}
+        {#if !record.isNew}
            <div class="flex-fill" />
            <button type="button" class="btn btn-sm btn-circle btn-secondary">
                <div class="content">
                    <i class="ri-more-line" />
-                    <Toggler class="dropdown dropdown-right m-t-5">
-                        <div tabindex="0" class="dropdown-item closable" on:click={() => deleteConfirm()}>
+                    <Toggler class="dropdown dropdown-right dropdown-nowrap">
+                        {#if collection.isAuth && !original.verified && original.email}
+                            <button
+                                type="button"
+                                class="dropdown-item closable"
+                                on:click={() => sendVerificationEmail()}
+                            >
+                                <i class="ri-mail-check-line" />
+                                <span class="txt">Send verification email</span>
+                            </button>
+                        {/if}
+                        {#if collection.isAuth && original.email}
+                            <button
+                                type="button"
+                                class="dropdown-item closable"
+                                on:click={() => sendPasswordResetEmail()}
+                            >
+                                <i class="ri-mail-lock-line" />
+                                <span class="txt">Send password reset email</span>
+                            </button>
+                        {/if}
+                        <button
+                            type="button"
+                            class="dropdown-item txt-danger closable"
+                            on:click|preventDefault|stopPropagation={() => deleteConfirm()}
+                        >
                            <i class="ri-delete-bin-7-line" />
                            <span class="txt">Delete</span>
-                        </div>
+                        </button>
                    </Toggler>
                </div>
            </button>
        {/if}
+
+        {#if collection.isAuth && !record.isNew}
+            <div class="tabs-header stretched">
+                <button
+                    type="button"
+                    class="tab-item"
+                    class:active={activeTab === TAB_FORM}
+                    on:click={() => (activeTab = TAB_FORM)}
+                >
+                    Account
+                </button>
+                <button
+                    type="button"
+                    class="tab-item"
+                    class:active={activeTab === TAB_PROVIDERS}
+                    on:click={() => (activeTab = TAB_PROVIDERS)}
+                >
+                    Authorized providers
+                </button>
+            </div>
+        {/if}
    </svelte:fragment>

-    <form id={formId} class="block" on:submit|preventDefault={save}>
-        {#if !record.isNew}
-            <Field class="form-field disabled" name="id" let:uniqueId>
-                <label for={uniqueId}>
-                    <i class={CommonHelper.getFieldTypeIcon("primary")} />
-                    <span class="txt">id</span>
-                    <span class="flex-fill" />
-                </label>
-                <input type="text" id={uniqueId} value={record.id} disabled />
-            </Field>
-        {/if}
-
-        {#each collection?.schema || [] as field (field.name)}
-            {#if field.type === "text"}
-                <TextField {field} bind:value={record[field.name]} />
-            {:else if field.type === "number"}
-                <NumberField {field} bind:value={record[field.name]} />
-            {:else if field.type === "bool"}
-                <BoolField {field} bind:value={record[field.name]} />
-            {:else if field.type === "email"}
-                <EmailField {field} bind:value={record[field.name]} />
-            {:else if field.type === "url"}
-                <UrlField {field} bind:value={record[field.name]} />
-            {:else if field.type === "date"}
-                <DateField {field} bind:value={record[field.name]} />
-            {:else if field.type === "select"}
-                <SelectField {field} bind:value={record[field.name]} />
-            {:else if field.type === "json"}
-                <JsonField {field} bind:value={record[field.name]} />
-            {:else if field.type === "file"}
-                <FileField
-                    {field}
-                    {record}
-                    bind:value={record[field.name]}
-                    bind:uploadedFiles={uploadedFilesMap[field.name]}
-                    bind:deletedFileIndexes={deletedFileIndexesMap[field.name]}
-                />
-            {:else if field.type === "relation"}
-                <RelationField {field} bind:value={record[field.name]} />
-            {:else if field.type === "user"}
-                <UserField {field} bind:value={record[field.name]} />
+    <div class="tabs-content">
+        <form
+            id={formId}
+            class="tab-item"
+            class:active={activeTab === TAB_FORM}
+            on:submit|preventDefault={save}
+        >
+            {#if !record.isNew}
+                <Field class="form-field disabled" name="id" let:uniqueId>
+                    <label for={uniqueId}>
+                        <i class={CommonHelper.getFieldTypeIcon("primary")} />
+                        <span class="txt">id</span>
+                        <span class="flex-fill" />
+                    </label>
+                    <div class="form-field-addon">
+                        <i
+                            class="ri-calendar-event-line txt-disabled"
+                            use:tooltip={{
+                                text: `Created: ${record.created}\nUpdated: ${record.updated}`,
+                                position: "left",
+                            }}
+                        />
+                    </div>
+                    <input type="text" id={uniqueId} value={record.id} readonly />
+                </Field>
            {/if}
-        {:else}
-            <div class="block txt-center txt-disabled">
-                <h5>No custom fields to be set</h5>
+
+            {#if collection?.isAuth}
+                <AuthFields bind:record {collection} />
+                <hr />
+            {/if}
+
+            {#each collection?.schema || [] as field (field.name)}
+                {#if field.type === "text"}
+                    <TextField {field} bind:value={record[field.name]} />
+                {:else if field.type === "number"}
+                    <NumberField {field} bind:value={record[field.name]} />
+                {:else if field.type === "bool"}
+                    <BoolField {field} bind:value={record[field.name]} />
+                {:else if field.type === "email"}
+                    <EmailField {field} bind:value={record[field.name]} />
+                {:else if field.type === "url"}
+                    <UrlField {field} bind:value={record[field.name]} />
+                {:else if field.type === "date"}
+                    <DateField {field} bind:value={record[field.name]} />
+                {:else if field.type === "select"}
+                    <SelectField {field} bind:value={record[field.name]} />
+                {:else if field.type === "json"}
+                    <JsonField {field} bind:value={record[field.name]} />
+                {:else if field.type === "file"}
+                    <FileField
+                        {field}
+                        {record}
+                        bind:value={record[field.name]}
+                        bind:uploadedFiles={uploadedFilesMap[field.name]}
+                        bind:deletedFileIndexes={deletedFileIndexesMap[field.name]}
+                    />
+                {:else if field.type === "relation"}
+                    <RelationField {field} bind:value={record[field.name]} />
+                {/if}
+            {:else}
+                <div class="block txt-center txt-disabled">
+                    <h5>No custom fields to be set</h5>
+                </div>
+            {/each}
+        </form>
+
+        {#if collection.isAuth && !record.isNew}
+            <div class="tab-item" class:active={activeTab === TAB_PROVIDERS}>
+                <ExternalAuthsList {record} />
            </div>
-        {/each}
-    </form>
+        {/if}
+    </div>

    <svelte:fragment slot="footer">
        <button type="button" class="btn btn-secondary" disabled={isSaving} on:click={() => hide()}>