move block elements

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

@@ -5,7 +5,8 @@
     import Reference from "./elements/Reference.svelte";
     import Icon from "../../common/Icon.svelte";
     import {insertBlock} from "./block";
-    import { getContext} from "svelte";
+    import {getContext} from "svelte";
+    import {findIndex} from "lodash";
     import File from "./elements/File.svelte";
 
     const channel = getContext("channel");
@@ -14,8 +15,10 @@
     export let field;
     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);
@@ -26,6 +29,30 @@
         blockData = blockData.filter(b => b.id !== blockId)
     }
 
+    function upBlock(e, blockId) {
+        e.preventDefault();
+        let blockIndex = findIndex(blockData, (b) => b.id === blockId);
+        let tempBlock = blockData[blockIndex];
+        blockData[blockIndex] = blockData[blockIndex - 1];
+        blockData[blockIndex - 1] = tempBlock;
+    }
+
+    function downBlock(e, blockId) {
+        e.preventDefault();
+        let blockIndex = findIndex(blockData, (b) => b.id === blockId);
+        let tempBlock = blockData[blockIndex];
+        blockData[blockIndex] = blockData[blockIndex + 1];
+        blockData[blockIndex + 1] = tempBlock;
+    }
+
+    function blockIsFirst(blockId) {
+        return findIndex(blockData, (b) => b.id === blockId) === 0;
+    }
+
+    function blockIsLast(blockId) {
+        return findIndex(blockData, (b) => b.id === blockId) === blockData.length - 1;
+    }
+
 </script>
 
 <div class="card editor-field d-flex">
@@ -46,8 +73,23 @@
                     Block id: <input class="form-control-plaintext" readonly value={block.id}/>
                     Block name: <input class="form-control-plaintext" readonly value={block.meta.name}/>
                 </h6>
-                <li><hr class="dropdown-divider"></li>
+                <div>
+                    <hr class="dropdown-divider">
+                </div>
                 <h6 class="dropdown-header">Actions</h6>
+                <button
+
+                        class="dropdown-item"
+                        class:d-none={blockIsFirst(block.id)}
+                        on:click={(e) => upBlock(e, block.id)}
+                >Move up
+                </button>
+                <button
+                        class="dropdown-item"
+                        class:d-none={blockIsLast(block.id)}
+                        on:click={(e) => downBlock(e, block.id)}
+                >Move down
+                </button>
                 <button
                         class="dropdown-item text-danger"
                         on:click={(e) => deleteBlock(e, block.id)}

front/js/svelte/records/elements/FieldHeader.svelte

@@ -1,9 +1,5 @@
 <script>
-    import {getContext} from "svelte";
-
-    const channel = getContext("channel");
     export let field;
-    export let schema;
     export let id;
 </script>
 
@@ -17,11 +13,10 @@
                 <small class=" text-primary  opacity-50">{field.help}</small>
             {/if}
         </div>
-        <a
+        <span
             tabindex="-1"
             class="text-decoration-none"
-            href="{channel.lucentUrl}/schemas/{schema.name}/fields/edit/{field.name}"
         ><code class="text-primary opacity-50">{field.name}</code>
-        </a>
+        </span>
     </div>
 </div>

src/Database/migrations/2023_03_02_152122_revisions.php

@@ -19,6 +19,7 @@ return new class extends Migration {
             $table->jsonb('data');
             $table->jsonb('_sys');
             $table->jsonb('_file');
+            $table->jsonb('_edges');
         });
     }