init

2023-10-02 23:10:49 +03:00
commit c6cb488379
255 changed files with 18731 additions and 0 deletions
@@ -0,0 +1,139 @@
+<script>
+    import { createEventDispatcher } from "svelte";
+    import Icon from "../../common/Icon.svelte";
+    import InlineEdit from "../InlineEdit.svelte";
+    import BrowseModal from "./BrowseModal.svelte";
+    const dispatch = createEventDispatcher();
+    // export let field;
+    // export let buttonLabel = "";
+    // export let buttonClass = "";
+    export let schemas;
+    export let recordId;
+    $: showOptions = false;
+    let browseModal;
+    let inLineCreateRecord;
+
+    function openBrowseModal(e, schema) {
+        e.preventDefault();
+        browseModal.open(schema);
+    }
+
+    function save(e) {
+        e.preventDefault();
+        console.log("Save inline");
+        inLineCreateRecord = null;
+        dispatch("save", {
+            records: e.detail.records,
+            after: recordId,
+        });
+    }
+
+    function insert(e) {
+        e.preventDefault();
+        browseModal.close();
+        showOptions = false;
+        dispatch("insert", {
+            records: e.detail.records,
+            after: recordId,
+        });
+    }
+
+    function createInlineReference(e, schemaUId) {
+        e.preventDefault();
+        axios
+            .get("/records/newInline?schema=" + schemaUId)
+            .then((response) => {
+                inLineCreateRecord = response.data;
+                showOptions = false;
+            })
+            .catch((error) => {
+                console.log(error);
+            });
+    }
+</script>
+
+{#if schemas.length > 1}
+    <button
+        type="button"
+        class:is-first={!recordId}
+        class=" btn btn-lg btn-link text-decoration-none inline-card-button"
+        on:click|preventDefault={(e) => (showOptions = !showOptions)}
+    >
+        <Icon width={24} height={24} icon="circle-plus" />
+    </button>
+
+    {#if showOptions}
+        <div class="bg-light lx-card d-flex">
+            {#each schemas as schema}
+                <div
+                    class="lx-card p-4 text-center me-4"
+                    style="max-width: 250px;"
+                >
+                    <p>{schema.label}</p>
+
+                    <div class="mb-2">
+                        <button
+                            class="btn btn-sm btn-primary"
+                            on:click={(e) =>
+                                createInlineReference(e, schema.name)}
+                            >New
+                        </button>
+                        <button
+                            class="btn btn-sm btn-outline-primary"
+                            on:click={(e) => openBrowseModal(e, schema.name)}
+                            ><Icon icon="magnifying-glass" /></button
+                        >
+                    </div>
+                </div>
+            {/each}
+        </div>
+    {/if}
+{:else}
+    <div class="pb-2 text-start">
+        <div class="mb-2">
+            <button
+                class="btn btn-sm btn-primary"
+                on:click={(e) => createInlineReference(e, schemas[0].name)}
+                >New
+            </button>
+            <button
+                class="btn btn-sm btn-outline-primary"
+                on:click={(e) => openBrowseModal(e, schemas[0].name)}
+                ><Icon icon="magnifying-glass" /></button
+            >
+        </div>
+    </div>
+{/if}
+
+{#if inLineCreateRecord}
+    <InlineEdit
+        {...inLineCreateRecord}
+        on:cancel={(e) => (inLineCreateRecord = null)}
+        on:inlinesaved={save}
+    />
+{/if}
+
+<BrowseModal bind:this={browseModal} on:insert={insert} />
+
+<style>
+    :global(.inline-card-wrapper) {
+        display: flex;
+        flex-direction: column;
+    }
+    :global(.inline-card-wrapper .inline-card-button) {
+        visibility: hidden;
+    }
+    :global(.inline-card-wrapper .inline-card-button.is-first) {
+        visibility: visible;
+    }
+    :global(.inline-card-wrapper:hover .inline-card-button) {
+        visibility: visible;
+    }
+
+    .inline-card-button {
+        /* padding: 0 5px; */
+        display: inline-block;
+        z-index: 1;
+        margin: 10px auto 0;
+    }
+</style>