block editor

front/js/svelte/records/block/BlockElements.svelte

@@ -1,43 +1,100 @@
 <script>
-    import Text from "./elements/Text.svelte";
+    import Heading from "./elements/Heading.svelte";
     import Textarea from "./elements/Textarea.svelte";
     import Rich from "./elements/Rich.svelte";
     import Reference from "./elements/Reference.svelte";
+    import Icon from "../../common/Icon.svelte";
+    import {insertBlock} from "./block";
+    import { getContext} from "svelte";
+    import File from "./elements/File.svelte";
 
+    const channel = getContext("channel");
     export let record;
+    export let blockData;
     export let field;
-    export let schemas;
     export let graph;
 
     export let block;
+    let blockSchema = channel.schemas.find((s) => s.name === field.schema);
+    function createBlock(e, ui, blockId) {
+        e.preventDefault();
+        blockData = insertBlock(blockData, ui, blockId);
+    }
+
+    function deleteBlock(e, blockId) {
+        e.preventDefault();
+        blockData = blockData.filter(b => b.id !== blockId)
+    }
 
 </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"}
+<div class="card editor-field d-flex">
+    <div class="d-flex justify-content-between">
+        <span class="text-muted d-block fs-6 mb-1">{block.meta.label} <i>{block.meta.info.name}</i> </span>
+        <div class="dropdown d-inline-block">
+            <button
+                    class="btn btn-link btn-sm"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+            >
+                <Icon icon="ellipsis"/>
+            </button>
+            <div class="dropdown-menu">
 
-        <Text
-            bind:block={block}
+                <h6 class="dropdown-header">
+                    Block id: <input class="form-control-plaintext" readonly value={block.id}/>
+                    Block name: <input class="form-control-plaintext" readonly value={block.meta.name}/>
+                </h6>
+                <h6 class="dropdown-header">Actions</h6>
+                <button
+                        class="dropdown-item"
+                        on:click={(e) => deleteBlock(e, block.id)}
+                >Delete
+                </button
+                >
+                <h6 class="dropdown-header">Insert after</h6>
+
+                {#each blockSchema.fields as blockField}
+                    <button
+                            class="dropdown-item"
+                            on:click={(e) => createBlock(e, blockField, block.id)}
+                    >{blockField.label}
+                    </button
+                    >
+                {/each}
+            </div>
+        </div>
+    </div>
+    {#if block.meta.info.name === "heading"}
+
+        <Heading
+                bind:block={block}
         />
 
-    {:else if block.ui === "textarea"}
+    {:else if block.meta.info.name === "textarea"}
 
         <Textarea
-            bind:block={block}
+                bind:block={block}
         />
 
-    {:else if block.ui === "rich"}
+    {:else if block.meta.info.name === "rich"}
         <Rich
-            bind:block={block}
+                bind:block={block}
         />
-    {:else if block.ui === "reference"}
+    {:else if block.meta.info.name === "file"}
+                <File
+                    {record}
+                    {field}
+                    bind:graph
+                    bind:block={block}
+                />
+    {:else if block.meta.info.name === "reference"}
         <Reference
-            {record}
-            {field}
-            {schemas}
-            bind:graph
-            bind:block={block}
+                {record}
+                {field}
+                bind:graph
+                bind:block={block}
         />
     {/if}