block editor

front/js/svelte/Navbar.svelte

@@ -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

@@ -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,8 +24,13 @@
 
 </script>
 
-<SuccessAlert bind:this={successAlert}/>
 <div class="wrapper-tiny">
+    {#if message}
+        <div class="alert alert-info" role="alert">
+            {message}
+        </div>
+
+    {:else}
 
         <form on:submit={login}>
             <div class="mb-3">
@@ -34,6 +40,7 @@
                         bind:value={email}
                         class="form-control"
                         id="emailaddress"
+                        required
                 />
             </div>
 
@@ -41,6 +48,8 @@
             <div class="text-center mt-5 d-block">
                 <SpinnerButton label="Login"/>
             </div>
-    </form>
 
+
+        </form>
+    {/if}
 </div>

front/js/svelte/records/Edit.svelte

@@ -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

@@ -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

@@ -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=" bg-light lx-card">
     <div class="inline-card-wrapper">
         <BlockButtons
                 bind:blockData={value}
+                {blockSchema}
         />
     </div>
     {#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}
-            {schemas}
                     bind:graph
             />
-        <BlockButtons
+
-            bind:blockData={value}
-        />
         </div>
     {/each}
+
+</div>

front/js/svelte/records/block/BlockButtons.svelte

@@ -1,25 +1,21 @@
 <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, {
+        blockData = insertBlock(blockData,ui);
-            ui: validUI,
-            id: randomId(),
-            key: "",
-            value: null
-        }];
         showOptions = false;
-
     }
-</script>
 
+</script>
+<div class="d-flex justify-content-left mb-2 ">
     <button
             type="button"
             class:is-first={!blockId}
@@ -28,23 +24,21 @@
     >
         <Icon width={24} height={24} icon="circle-plus"/>
     </button>
-
-
     {#if showOptions}
-    <div class="bg-light lx-card d-flex">
+        <div class="d-flex  ">
-        {#each validUis as validUi}
+            {#each blockSchema.fields as validUi}
-
+                <div class="ms-2">
-            <div class="me-2">
                     <button
                             class="btn btn-sm btn-primary"
                             on:click={(e) => createBlock(e, validUi)}
-                >{validUi}
+                    >{validUi.label}
                     </button>
                 </div>
             {/each}
         </div>
-{/if}
 
+    {/if}
+</div>
 <style>
     :global(.block-field-wrapper) {
         display: flex;
@@ -61,9 +55,8 @@
     }
 
     .block-buttons {
-        /* padding: 0 5px; */
+         padding: 0px;
-        display: inline-block;
         z-index: 1;
-        margin: 10px auto 0;
+        margin: 0px ;
     }
 </style>

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

@@ -1,41 +1,98 @@
 <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">
+<div class="card editor-field d-flex">
-    <span class="text-muted d-block fs-6 mb-1">{block.ui}</span>
+    <div class="d-flex justify-content-between">
-    {#if block.ui === "text"}
+        <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
+                <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}
         />
 
-    {:else if block.ui === "rich"}
+    {:else if block.meta.info.name === "rich"}
         <Rich
                 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}
         />

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

@@ -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

@@ -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/Reference.svelte

@@ -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
+    let blockFieldName = field.name + ":" + block.id;
-        .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 collections = schemas.filter((aschema) =>
+    $: references = graph.edges
-        field.collections.includes(aschema.name)
+        .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;
+        graph = insertEdges(graph,record,e.detail.records,blockFieldName,e.detail.action);
-        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);
-
     }
 
 </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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -7,4 +7,5 @@ enum Type: string
 {
     case COLLECTION = 'collection';
     case FILES = 'files';
+    case BLOCK = 'block';
 }

src/Schema/Ui/Block.php

@@ -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

@@ -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

@@ -7,13 +7,13 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>@yield('title') - Lucent Data Platform</title>
     <!-- if development -->
-{{--    @php--}}
+    @php
-{{--    echo '<script type="module" crossorigin src="http://127.0.0.1:5173/@vite/client"></script>';--}}
+    echo '<script type="module" crossorigin src="http://127.0.0.1:5173/@vite/client"></script>';
-{{--    @endphp--}}
+    @endphp
-{{--    <script type="module"  crossorigin src="http://127.0.0.1:5173/main.js"></script>--}}
+    <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"] }}" />
+{{--    <link rel="stylesheet" href="/vendor/lucent/dist/{{ $manifest['main.css']["file"] }}" />--}}
-    <script type="module" src="/vendor/lucent/dist/{{ $manifest['main.js']["file"] }}"></script>
+{{--    <script type="module" src="/vendor/lucent/dist/{{ $manifest['main.js']["file"] }}"></script>--}}
 
 
     <link rel="icon" type="image/x-icon" href="/favicon.ico">