init

2023-10-02 23:10:49 +03:00
commit c6cb488379
255 changed files with 18731 additions and 0 deletions
@@ -0,0 +1,35 @@
+<script>
+
+    import BlockButtons from "./BlockButtons.svelte";
+    import BlockElements from "./BlockElements.svelte";
+    import {flip} from "svelte/animate";
+    import {quintOut} from 'svelte/easing';
+
+    export let record;
+    export let field;
+    export let value = [];
+    export let schemas;
+    export let graph;
+
+
+</script>
+
+<div class="inline-card-wrapper">
+    <BlockButtons
+        bind:blockData={value}
+    />
+</div>
+{#each value as blockItemData (blockItemData.id)}
+    <div class="block-field-wrapper" animate:flip="{{delay: 250, duration: 250, easing: quintOut}}">
+        <BlockElements
+            bind:block={blockItemData}
+            {record}
+            {field}
+            {schemas}
+            bind:graph
+        />
+        <BlockButtons
+            bind:blockData={value}
+        />
+    </div>
+{/each}
@@ -0,0 +1,69 @@
+<script>
+    import Icon from "../../common/Icon.svelte";
+    import {randomId} from "../../../helpers";
+
+    export let blockId;
+    export let blockData;
+    $: showOptions = false;
+    let validUis = ["text", "textarea", "rich", "reference"];
+
+    function createBlock(e, validUI) {
+        e.preventDefault();
+        blockData = [...blockData, {
+            ui: validUI,
+            id: randomId(),
+            key: "",
+            value: null
+        }];
+        showOptions = false;
+
+    }
+</script>
+
+<button
+    type="button"
+    class:is-first={!blockId}
+    class=" btn btn-lg btn-link text-decoration-none block-buttons"
+    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 validUis as validUi}
+
+            <div class="me-2">
+                <button
+                    class="btn btn-sm btn-primary"
+                    on:click={(e) => createBlock(e, validUi)}
+                >{validUi}
+                </button>
+            </div>
+        {/each}
+    </div>
+{/if}
+
+<style>
+    :global(.block-field-wrapper) {
+        display: flex;
+        flex-direction: column;
+    }
+
+    :global(.block-field-wrapper .block-buttons) {
+        visibility: hidden;
+    }
+
+
+    :global(.block-field-wrapper:hover .block-buttons) {
+        visibility: visible;
+    }
+
+    .block-buttons {
+        /* padding: 0 5px; */
+        display: inline-block;
+        z-index: 1;
+        margin: 10px auto 0;
+    }
+</style>
@@ -0,0 +1,44 @@
+<script>
+    import Text from "./elements/Text.svelte";
+    import Textarea from "./elements/Textarea.svelte";
+    import Rich from "./elements/Rich.svelte";
+    import Reference from "./elements/Reference.svelte";
+
+    export let record;
+    export let field;
+    export let schemas;
+    export let graph;
+
+    export let block;
+
+</script>
+
+<div class="card editor-field bg-light lx-card d-flex">
+    <span class="text-muted d-block fs-6 mb-1">{block.ui}</span>
+    {#if block.ui === "text"}
+
+        <Text
+            bind:block={block}
+        />
+
+    {:else if block.ui === "textarea"}
+
+        <Textarea
+            bind:block={block}
+        />
+
+    {:else if block.ui === "rich"}
+        <Rich
+            bind:block={block}
+        />
+    {:else if block.ui === "reference"}
+        <Reference
+            {record}
+            {field}
+            {schemas}
+            bind:graph
+            bind:block={block}
+        />
+    {/if}
+
+</div>
@@ -0,0 +1,92 @@
+<script>
+    import {uniq, uniqBy} from "lodash";
+    import PreviewCard from "../../PreviewCard.svelte";
+    import {sortByField} from "../../../edges/sortEdges";
+    import ReferenceInlineButtons from "../../elements/ReferenceInlineButtons.svelte"
+    import Sortable from "../../../libs/Sortable.svelte";
+
+    export let block;
+    export let record;
+    export let field;
+    export let schemas;
+    export let graph;
+
+    $: references = graph.edges
+        .filter((edge) => edge.field === field.name && block.value?.includes(edge.target))
+        .map((edge) => {
+            return graph.records.find((increc) => increc.data.id === edge.target && record.data.id === edge.source);
+        }).filter((rec) => (rec?.data?.id ? true : false)) ?? [];
+
+    let collections = schemas.filter((aschema) =>
+        field.collections.includes(aschema.name)
+    );
+
+    function removeReference(e) {
+        e.preventDefault();
+        graph.edges = graph.edges.filter(
+            (edge) => !(edge.target === e.detail && edge.field === field.name)
+        );
+        block.value = graph.edges.filter(edge => edge.field === field.name && block.value?.includes(edge.target)).map((edge) => edge.target) ?? [];
+
+    }
+
+    function reorder(e) {
+        graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, field.name);
+    }
+
+    function insert(e) {
+        e.preventDefault();
+        const recordsToInsert = e.detail.records;
+        const action = e.detail.action;
+        let newEdges = recordsToInsert.map((r) => {
+            return {
+                schema: r._sys.schema,
+                target: r.data.id,
+                source: record.data.id,
+                field: field.name,
+                rank: ""
+            };
+        });
+
+        let replacedEdges = graph.edges;
+        let newBlockValue = [];
+        if (action === "replace") {
+            newBlockValue = newEdges.map(edge => edge.target)
+            replacedEdges = replacedEdges.filter((edge) => edge.field !== field.name);
+        } else {
+            newBlockValue = [...block.value ?? [], ...newEdges.map(edge => edge.target)]
+        }
+        block.value = uniq(newBlockValue);
+        graph.records = uniqBy([...graph.records, ...recordsToInsert], (r) => r.data.id);
+        graph.edges = uniqBy([...replacedEdges, ...newEdges], (edge) => edge.target + edge.field);
+
+    }
+
+</script>
+
+<div class="inline-card-wrapper">
+    <ReferenceInlineButtons
+        {field}
+        buttonClass="mt-2"
+        recordId={null}
+        schemas={collections}
+        on:insert={insert}
+        on:save={insert}
+    />
+</div>
+{#if references.length > 0}
+    <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
+        {#each references as reference (reference.data.id)}
+            <div class="col mb-3">
+                <PreviewCard
+                    classes="h-100"
+                    {schemas}
+                    record={reference}
+                    hasDelete={true}
+                    on:remove={removeReference}
+                />
+            </div>
+        {/each}
+    </Sortable>
+{/if}
+
@@ -0,0 +1,10 @@
+<script>
+    import Tinymce from "../../../libs/Tinymce.svelte";
+
+    export let block;
+    let additionalConfig = {};
+</script>
+
+<div class="mb-0">
+    <Tinymce bind:value={block.value} {additionalConfig}/>
+</div>
@@ -0,0 +1,13 @@
+<script>
+    export let block;
+</script>
+
+<div class="mb-0">
+    <input
+        type="text"
+        id={block.id}
+        class="form-control"
+        bind:value={block.value}
+        autocomplete="off"
+    />
+</div>
@@ -0,0 +1,39 @@
+<script>
+    import {onMount} from "svelte";
+
+    export let block;
+    let thisEl;
+
+    function resize(e) {
+        let el;
+        if (e.target) {
+            el = e.target;
+        } else {
+            el = e;
+        }
+
+        el.style.overflow = "hidden";
+        el.style.height = "1px";
+        el.style.height = +el.scrollHeight + "px";
+    }
+
+    onMount(() => {
+        resize(thisEl);
+    });
+</script>
+
+<div class="mb-0">
+
+    <textarea
+        bind:value={block.value}
+        bind:this={thisEl}
+        on:input={resize}
+        id={block.id}
+        class="form-control"
+        autocomplete="off"></textarea>
+</div>
+<style>
+    textarea {
+        resize: none;
+    }
+</style>