move block elements

This commit is contained in:
2023-10-15 13:04:02 +03:00
parent 965c9fc1c0
commit 1faac31372
3 changed files with 53 additions and 15 deletions
@@ -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)}
@@ -84,12 +126,12 @@
bind:block={block}
/>
{:else if block.meta.info.name === "file"}
<File
{record}
{field}
bind:graph
bind:block={block}
/>
<File
{record}
{field}
bind:graph
bind:block={block}
/>
{:else if block.meta.info.name === "reference"}
<Reference
{record}
@@ -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>
@@ -19,6 +19,7 @@ return new class extends Migration {
$table->jsonb('data');
$table->jsonb('_sys');
$table->jsonb('_file');
$table->jsonb('_edges');
});
}