block editor

2023-10-14 18:06:36 +03:00
parent 9e37a7f730
commit 2e81d27ff6
21 changed files with 523 additions and 141 deletions
@@ -0,0 +1,105 @@
+<script>
+    import {getContext} from "svelte";
+    import PreviewCard from "../../PreviewCard.svelte";
+    import {sortByField} from "../../../edges/sortEdges";
+    import ReferenceInlineButtons from "../../elements/ReferenceInlineButtons.svelte"
+    import Sortable from "../../../libs/Sortable.svelte";
+    import {insertEdges} from "../../elements/reference";
+    import BrowseModal from "../../elements/BrowseModal.svelte";
+
+
+    const channel = getContext("channel");
+    export let block;
+    export let record;
+    export let field;
+    export let graph;
+    let browseModal;
+    let blockFieldName = field.name + ":" + block.id;
+
+    $: references = graph.edges
+        .filter((edge) => edge.field === blockFieldName)
+        .map((edge) => {
+            return graph.records.find((increc) => increc.id === edge.target && record.id === edge.source);
+        }).filter((rec) => (rec?.id ? true : false)) ?? [];
+
+    let collections = channel.schemas.filter((aschema) =>
+        block.meta.collections.includes(aschema.name)
+    );
+
+    function removeReference(e) {
+        e.preventDefault();
+        graph.edges = graph.edges.filter(
+            (edge) => !(edge.target === e.detail && edge.field === blockFieldName)
+        );
+        block.value = graph.edges.filter(edge => edge.field === blockFieldName) ?? [];
+
+    }
+
+    function openBrowseModal(e, schema) {
+        e.preventDefault();
+        browseModal.open(schema);
+    }
+
+    function reorder(e) {
+        graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, blockFieldName);
+    }
+
+    function insert(e) {
+        e.preventDefault();
+        browseModal.close();
+        graph = insertEdges(graph,record,e.detail.records,blockFieldName,e.detail.action);
+    }
+
+</script>
+
+
+<div class="mb-0">
+    {#if block.meta.collections.length === 1}
+        <button
+                class="btn btn-outline-primary"
+                on:click={(e) => openBrowseModal(e, collections[0].name)}
+        >
+            Browse
+        </button>
+    {:else}
+        <div class="dropdown d-inline-block">
+            <button
+                    class="btn btn-outline-primary btn-sm"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+            >
+                Browse
+            </button>
+            <ul class="dropdown-menu">
+                {#each collections as collection}
+                    <li>
+                        <!-- {`${channelurl}/content/${collection.name}?parent=${record.id}&parentfield=${field.name}`} -->
+                        <a
+                                class="dropdown-item"
+                                on:click={(e) =>
+                                openBrowseModal(e, collection.name)}
+                                href="/">{collection.label}</a
+                        >
+                    </li>
+                {/each}
+            </ul>
+        </div>
+    {/if}
+</div>
+{#if references.length > 0}
+    <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
+        {#each references as reference (reference.id)}
+            <div class="col mb-3">
+                <PreviewCard
+                    classes="h-100"
+                    record={reference}
+                    hasDelete={true}
+                    on:remove={removeReference}
+                />
+            </div>
+        {/each}
+    </Sortable>
+{/if}
+
+<BrowseModal bind:this={browseModal} on:insert={insert}/>
@@ -1,72 +1,52 @@
 <script>
-    import {uniq, uniqBy} from "lodash";
+    import {getContext} from "svelte";
    import PreviewCard from "../../PreviewCard.svelte";
    import {sortByField} from "../../../edges/sortEdges";
    import ReferenceInlineButtons from "../../elements/ReferenceInlineButtons.svelte"
    import Sortable from "../../../libs/Sortable.svelte";
+    import {insertEdges} from "../../elements/reference";

+
+    const channel = getContext("channel");
    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 blockFieldName = field.name + ":" + block.id;

-    let collections = schemas.filter((aschema) =>
-        field.collections.includes(aschema.name)
+    $: references = graph.edges
+        .filter((edge) => edge.field === blockFieldName)
+        .map((edge) => {
+            return graph.records.find((increc) => increc.id === edge.target && record.id === edge.source);
+        }).filter((rec) => (rec?.id ? true : false)) ?? [];
+
+    let collections = channel.schemas.filter((aschema) =>
+        block.meta.collections.includes(aschema.name)
    );

    function removeReference(e) {
        e.preventDefault();
        graph.edges = graph.edges.filter(
-            (edge) => !(edge.target === e.detail && edge.field === field.name)
+            (edge) => !(edge.target === e.detail && edge.field === blockFieldName)
        );
-        block.value = graph.edges.filter(edge => edge.field === field.name && block.value?.includes(edge.target)).map((edge) => edge.target) ?? [];
+        block.value = graph.edges.filter(edge => edge.field === blockFieldName) ?? [];

    }

    function reorder(e) {
-        graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, field.name);
+        graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, blockFieldName);
    }

    function insert(e) {
        e.preventDefault();
-        const recordsToInsert = e.detail.records;
-        const action = e.detail.action;
-        let newEdges = recordsToInsert.map((r) => {
-            return {
-                schema: r.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);
-
+        graph = insertEdges(graph,record,e.detail.records,blockFieldName,e.detail.action);
    }

 </script>

 <div class="inline-card-wrapper">
    <ReferenceInlineButtons
-        {field}
        buttonClass="mt-2"
        recordId={null}
        schemas={collections}
@@ -76,11 +56,10 @@
 </div>
 {#if references.length > 0}
    <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
-        {#each references as reference (reference.data.id)}
+        {#each references as reference (reference.id)}
            <div class="col mb-3">
                <PreviewCard
                    classes="h-100"
-                    {schemas}
                    record={reference}
                    hasDelete={true}
                    on:remove={removeReference}