init

front/js/svelte/records/block/elements/Reference.svelte

@@ -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}
+

front/js/svelte/records/block/elements/Rich.svelte

@@ -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>

front/js/svelte/records/block/elements/Text.svelte

@@ -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>

front/js/svelte/records/block/elements/Textarea.svelte

@@ -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>