lucent/lucent-laravel
2
0
Fork 0
Code Issues 14 Pull Requests Releases 1 Activity

block editor

Browse Source
This commit is contained in:
Alex Lingris
2023-10-14 18:06:36 +03:00
parent 9e37a7f730
commit 2e81d27ff6
21 changed files with 523 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/Navbar.svelte
+1 -1
View File
@@ -71,7 +71,7 @@
aria-labelledby="panelsStayOpen-headingOther">
<div class="accordion-body">
<NavbarMenu
schemas={ channel.schemas.filter((sc) => !sc.isEntry && sc.type !== "files")}
schemas={ channel.schemas.filter((sc) => !sc.isEntry && sc.type === "collection")}
schema={schema}
/>
</div>
front/js/svelte/account/Login.svelte
+26 -17
View File
@@ -5,7 +5,7 @@
const channel = getContext("channel");
let email = "";
let successAlert;
let message = "";
function login(e) {
e.preventDefault();
@@ -15,7 +15,8 @@
email: email,
})
.then((response) => {
console.log(response)
message = "You will receive an email with a login link"
})
.catch((error) => {
});
@@ -23,24 +24,32 @@
</script>
<SuccessAlert bind:this={successAlert}/>
<div class="wrapper-tiny">
<form on:submit={login}>
<div class="mb-3">
<label for="emailaddress" class="form-label">Email address</label>
<input
type="email"
bind:value={email}
class="form-control"
id="emailaddress"
/>
{#if message}
<div class="alert alert-info" role="alert">
{message}
</div>
{:else}
<div class="text-center mt-5 d-block">
<SpinnerButton label="Login"/>
</div>
</form>
<form on:submit={login}>
<div class="mb-3">
<label for="emailaddress" class="form-label">Email address</label>
<input
type="email"
bind:value={email}
class="form-control"
id="emailaddress"
required
/>
</div>
<div class="text-center mt-5 d-block">
<SpinnerButton label="Login"/>
</div>
</form>
{/if}
</div>
front/js/svelte/records/Edit.svelte
+2 -2
View File
@@ -157,10 +157,10 @@
{#if !["_graph", "_info"].includes(activeContentTab)}
<div class="shadow-lg "
style="position:fixed;bottom:0;left:0px;width:100%;background:rgba(255,255,255,1);z-index:1050"
style="position:fixed;bottom:0;left:0px;width:100%;background: rgb(28, 28, 28);z-index:1050"
>
<div
class="d-flex mt-4 mb-3 align-items-center justify-content-center"
class="d-flex mt-3 mb-3 align-items-center justify-content-center"
>
<StatusSelect bind:status={record.status} {record} {schema}/>
{#if isCreateMode}
front/js/svelte/records/StatusSelect.svelte
+1 -1
View File
@@ -51,7 +51,7 @@
</div>
{#if channel.previewTarget}
<a href="{channel.previewTargetUrl}?schema={schema.name}&id={record.id}" target="_blank" class="btn btn-outline-info ms-3">
<a href="{channel.previewTargetUrl}?schema={schema.name}&id={record.id}" target="_blank" class="btn btn-info ms-3">
Preview
</a>
{/if}
front/js/svelte/records/block/Block.svelte
+22 -19
View File
@@ -4,32 +4,35 @@
import BlockElements from "./BlockElements.svelte";
import {flip} from "svelte/animate";
import {quintOut} from 'svelte/easing';
import {getContext} from "svelte";
const channel = getContext("channel");
export let record;
export let field;
export let value = [];
export let schemas;
export let graph;
let blockSchema = channel.schemas.find((s) => s.name === field.schema);
</script>
<div class="inline-card-wrapper">
<BlockButtons
bind:blockData={value}
/>
</div>
{#each value as blockItemData (blockItemData.id)}
<div class="block-field-wrapper" animate:flip="{{delay: 250, duration: 250, easing: quintOut}}">
<BlockElements
bind:block={blockItemData}
{record}
{field}
{schemas}
bind:graph
/>
<div class=" bg-light lx-card">
<div class="inline-card-wrapper">
<BlockButtons
bind:blockData={value}
bind:blockData={value}
{blockSchema}
/>
</div>
{/each}
{#each value as blockItemData (blockItemData.id)}
<div class="block-field-wrapper" animate:flip="{{delay: 250, duration: 250, easing: quintOut}}">
<BlockElements
bind:block={blockItemData}
bind:blockData={value}
{record}
{field}
bind:graph
/>
</div>
{/each}
</div>
front/js/svelte/records/block/BlockButtons.svelte
+31 -38
View File
@@ -1,50 +1,44 @@
<script>
import Icon from "../../common/Icon.svelte";
import {randomId} from "../../../helpers";
import {insertBlock} from "./block";
export let blockId;
export let blockData;
export let blockSchema;
$: showOptions = false;
let validUis = ["text", "textarea", "rich", "reference"];
let validUis = ["heading", "textarea", "rich", "reference"];
function createBlock(e, validUI) {
function createBlock(e, ui) {
e.preventDefault();
blockData = [...blockData, {
ui: validUI,
id: randomId(),
key: "",
value: null
}];
blockData = insertBlock(blockData,ui);
showOptions = false;
}
</script>
<div class="d-flex justify-content-left mb-2 ">
<button
type="button"
class:is-first={!blockId}
class=" btn btn-lg btn-link text-decoration-none block-buttons"
on:click|preventDefault={(e) => (showOptions = !showOptions)}
>
<Icon width={24} height={24} icon="circle-plus"/>
</button>
{#if showOptions}
<div class="d-flex ">
{#each blockSchema.fields as validUi}
<div class="ms-2">
<button
class="btn btn-sm btn-primary"
on:click={(e) => createBlock(e, validUi)}
>{validUi.label}
</button>
</div>
{/each}
</div>
<button
type="button"
class:is-first={!blockId}
class=" btn btn-lg btn-link text-decoration-none block-buttons"
on:click|preventDefault={(e) => (showOptions = !showOptions)}
>
<Icon width={24} height={24} icon="circle-plus"/>
</button>
{#if showOptions}
<div class="bg-light lx-card d-flex">
{#each validUis as validUi}
<div class="me-2">
<button
class="btn btn-sm btn-primary"
on:click={(e) => createBlock(e, validUi)}
>{validUi}
</button>
</div>
{/each}
</div>
{/if}
{/if}
</div>
<style>
:global(.block-field-wrapper) {
display: flex;
@@ -61,9 +55,8 @@
}
.block-buttons {
/* padding: 0 5px; */
display: inline-block;
padding: 0px;
z-index: 1;
margin: 10px auto 0;
margin: 0px ;
}
</style>
front/js/svelte/records/block/BlockElements.svelte
+74 -17
View File
@@ -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}
front/js/svelte/records/block/block.js
+25
View File
@@ -0,0 +1,25 @@
import {randomId} from "../../../helpers.js";
export function insertBlock(blockData, blockField, afterBlockId = null) {
if (!afterBlockId) {
return [{
meta: blockField,
id: randomId(),
value: null
}, ...blockData];
}
return blockData.reduce((carry, block) => {
carry.push(block)
if (block.id === afterBlockId) {
carry.push({
meta: blockField,
id: randomId(),
value: null
});
}
return carry;
}, []);
}
front/js/svelte/records/block/elements/File.svelte
+105
View File
@@ -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}/>
front/js/svelte/records/block/elements/Text.svelte → front/js/svelte/records/block/elements/Heading.svelte
View File
front/js/svelte/records/block/elements/Reference.svelte
+18 -39
View File
@@ -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}
src/Schema/BlockSchema.php
+24
View File
@@ -0,0 +1,24 @@
<?php
namespace Lucent\Schema;
use Lucent\Primitive\Collection;
class BlockSchema implements Schema
{
public Type $type = Type::BLOCK;
/**
* @param Collection<FieldInterface> $fields
*/
function __construct(
public string $name,
public string $label,
public Collection $fields
)
{
}
}
src/Schema/BlockUi/File.php
+54
View File
@@ -0,0 +1,54 @@
<?php
namespace Lucent\Schema\BlockUi;
use Lucent\Schema\FieldInfo;
use Lucent\Schema\FieldInterface;
use Lucent\Schema\FieldType;
use Lucent\Schema\Validator\MinMaxInterface;
class File implements FieldInterface, MinMaxInterface
{
public FieldInfo $info;
/**
* @param string[] $collections
*/
public function __construct(
public string $name,
public string $label,
public string $mime = "",
public ?int $min = null,
public ?int $max = null,
public array $collections = [],
)
{
$this->info = new FieldInfo("file", "File", FieldType::FILE);
}
public function format(array $input, array $output): array
{
return $output;
}
public function failMin(mixed $value): bool
{
if (is_null($value)) {
return false;
}
return count($value) < $this->min;
}
public function failMax(mixed $value): bool
{
if (is_null($value)) {
return false;
}
return count($value) < $this->min;
}
}
src/Schema/BlockUi/Heading.php
+33
View File
@@ -0,0 +1,33 @@
<?php
namespace Lucent\Schema\BlockUi;
use Lucent\Schema\FieldInfo;
use Lucent\Schema\FieldInterface;
use Lucent\Schema\FieldType;
use Lucent\Schema\Nullable;
use Lucent\Schema\Validator\RequiredInterface;
class Heading implements FieldInterface
{
public FieldInfo $info;
public function __construct(
public string $name,
public string $label,
public ?int $min = null,
public ?int $max = null,
public string $default = "",
)
{
$this->info = new FieldInfo("heading", "Heading", FieldType::STRING);
}
public function format(array $input, array $output): array
{
$output[$this->name] = $input[$this->name] ?? "";
return $output;
}
}
src/Schema/BlockUi/Reference.php
+54
View File
@@ -0,0 +1,54 @@
<?php
namespace Lucent\Schema\BlockUi;
use Lucent\Schema\FieldInfo;
use Lucent\Schema\FieldInterface;
use Lucent\Schema\FieldType;
use Lucent\Schema\Validator\MinMaxInterface;
class Reference implements FieldInterface, MinMaxInterface
{
public FieldInfo $info;
/**
* @param string[] $collections
*/
public function __construct(
public string $name,
public string $label,
public ?int $min = null,
public ?int $max = null,
public array $collections = [],
public string $searchField = "",
public string $layout = "",
)
{
$this->info = new FieldInfo("reference", "Reference", FieldType::REFERENCE);
}
public function format(array $input, array $output): array
{
return $output;
}
public function failMin(mixed $value): bool
{
if (is_null($value)) {
return false;
}
return count($value) < $this->min;
}
public function failMax(mixed $value): bool
{
if (is_null($value)) {
return false;
}
return count($value) < $this->min;
}
}
src/Schema/BlockUi/Textarea.php
+33
View File
@@ -0,0 +1,33 @@
<?php
namespace Lucent\Schema\BlockUi;
use Lucent\Schema\FieldInfo;
use Lucent\Schema\FieldInterface;
use Lucent\Schema\FieldType;
use Lucent\Schema\Nullable;
use Lucent\Schema\Validator\RequiredInterface;
class Textarea implements FieldInterface
{
public FieldInfo $info;
public function __construct(
public string $name,
public string $label,
public ?int $min = null,
public ?int $max = null,
public string $default = "",
)
{
$this->info = new FieldInfo("textarea", "Textarea", FieldType::STRING);
}
public function format(array $input, array $output): array
{
$output[$this->name] = $input[$this->name] ?? "";
return $output;
}
}
src/Schema/SchemaService.php
+12
View File
@@ -35,6 +35,11 @@ class SchemaService
isEntry: $schemaArr["isEntry"] ?? false,
color: $schemaArr["color"] ?? "",
titleTemplate: $schemaArr["titleTemplate"] ?? "",
),
"block" => new BlockSchema(
name: $schemaArr["name"],
label: $schemaArr["label"],
fields: (new Collection($schemaArr["fields"]))->map([$this, 'mapBlockFields'])
)
};
@@ -47,6 +52,13 @@ class SchemaService
return new $className(...$field);
}
public function mapBlockFields(array $field): FieldInterface
{
$className = "\\Lucent\Schema\BlockUi\\" . ucfirst($field["ui"]);
unset($field["ui"]);
return new $className(...$field);
}
//
// /**
src/Schema/Type.php
+1
View File
@@ -7,4 +7,5 @@ enum Type: string
{
case COLLECTION = 'collection';
case FILES = 'files';
case BLOCK = 'block';
}
src/Schema/Ui/Block.php
+1
View File
@@ -19,6 +19,7 @@ class Block implements FieldInterface, RequiredInterface
public bool $required = false,
public string $default = "",
public bool $readonly = false,
public string $schema = "",
public string $group = "",
)
{
src/Views/layouts/account.blade.php
-1
View File
@@ -14,7 +14,6 @@
<link rel="stylesheet" href="/vendor/lucent/dist/{{ $manifest['main.css']["file"] }}" />
<script type="module" src="/vendor/lucent/dist/{{ $manifest['main.js']["file"] }}"></script>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
src/Views/layouts/channel.blade.php
+6 -6
View File
@@ -7,13 +7,13 @@
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title') - Lucent Data Platform</title>
<!-- if development -->
{{-- @php--}}
{{-- echo '<script type="module" crossorigin src="http://127.0.0.1:5173/@vite/client"></script>';--}}
{{-- @endphp--}}
{{-- <script type="module" crossorigin src="http://127.0.0.1:5173/main.js"></script>--}}
@php
echo '<script type="module" crossorigin src="http://127.0.0.1:5173/@vite/client"></script>';
@endphp
<script type="module" crossorigin src="http://127.0.0.1:5173/main.js"></script>
<!-- if production -->
<link rel="stylesheet" href="/vendor/lucent/dist/{{ $manifest['main.css']["file"] }}" />
<script type="module" src="/vendor/lucent/dist/{{ $manifest['main.js']["file"] }}"></script>
{{-- <link rel="stylesheet" href="/vendor/lucent/dist/{{ $manifest['main.css']["file"] }}" />--}}
{{-- <script type="module" src="/vendor/lucent/dist/{{ $manifest['main.js']["file"] }}"></script>--}}
<link rel="icon" type="image/x-icon" href="/favicon.ico">