added view collection type

2023-02-18 19:33:42 +02:00
parent 0052e2ab2a
commit a07f67002f
98 changed files with 3259 additions and 829 deletions
@@ -0,0 +1,105 @@
+<script>
+    import { onMount } from "svelte";
+    import { Collection } from "pocketbase";
+    import { errors, removeError } from "@/stores/errors";
+    import CommonHelper from "@/utils/CommonHelper";
+    import Field from "@/components/base/Field.svelte";
+
+    export let collection = new Collection();
+
+    let codeEditorComponent;
+    let isCodeEditorComponentLoading = false;
+    let schemaErrors = [];
+
+    $: checkSchemaErrors($errors);
+
+    function checkSchemaErrors(errs) {
+        schemaErrors = [];
+
+        const raw = CommonHelper.getNestedVal(errs, "schema", null);
+
+        if (CommonHelper.isEmpty(raw)) {
+            return;
+        }
+
+        // generic schema error
+        // ---
+        if (raw?.message) {
+            schemaErrors.push(raw?.message);
+            return;
+        }
+
+        // schema fields error
+        // ---
+        const columns = CommonHelper.extractColumnsFromQuery(collection?.options?.query);
+        // remove base system fields
+        CommonHelper.removeByValue(columns, "id");
+        CommonHelper.removeByValue(columns, "created");
+        CommonHelper.removeByValue(columns, "updated");
+
+        for (let idx in raw) {
+            for (let key in raw[idx]) {
+                const message = raw[idx][key].message;
+                const fieldName = columns[idx] || idx;
+
+                schemaErrors.push(CommonHelper.sentenize(fieldName + ": " + message));
+            }
+        }
+    }
+
+    onMount(async () => {
+        isCodeEditorComponentLoading = true;
+
+        try {
+            codeEditorComponent = (await import("@/components/base/CodeEditor.svelte")).default;
+        } catch (err) {
+            console.warn(err);
+        }
+
+        isCodeEditorComponentLoading = false;
+    });
+</script>
+
+<Field class="form-field required {schemaErrors.length ? 'error' : ''}" name="options.query" let:uniqueId>
+    <label for={uniqueId}>Select query</label>
+
+    {#if isCodeEditorComponentLoading}
+        <textarea disabled rows="7" placeholder="Loading..." />
+    {:else}
+        <svelte:component
+            this={codeEditorComponent}
+            id={uniqueId}
+            placeholder="eg. SELECT id, name from posts"
+            language="sql"
+            minHeight="150"
+            on:change={() => {
+                if (schemaErrors.length) {
+                    removeError("schema");
+                }
+            }}
+            bind:value={collection.options.query}
+        />
+    {/if}
+
+    <div class="help-block">
+        <ul>
+            <li>Wildcard (<code>*</code>) columns are not supported.</li>
+            <li>
+                The query must have a unique <code>id</code> column.
+                <br />
+                If your query doesn't have a suitable one, you can use
+                <code>(ROW_NUMBER() OVER()) as id</code>.
+            </li>
+        </ul>
+    </div>
+
+    {#if schemaErrors.length}
+        <div class="help-block help-block-error">
+            <div class="content">
+                {#each schemaErrors as err}
+                    <p>{err}</p>
+                {/each}
+            </div>
+        </div>
+    {/if}
+</Field>