move block elements
This commit is contained in:
@@ -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');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user