build

composer.json

@@ -11,16 +11,13 @@
         "php": "^8.2",
         "guzzlehttp/guzzle": "^7.2",
         "intervention/image": "^2.7",
+        "phpoption/phpoption": "^1.9",
         "spatie/image-optimizer": "^1.6",
         "staudenmeir/laravel-cte": "^1.0",
-        "ext-pdo": "*",
+        "ext-pdo": "*"
-        "opis/json-schema": "^2.3",
-        "symfony/yaml": "^7.0",
-        "spatie/laravel-data": "^4.4"
     },
     "require-dev": {
-        "phpstan/phpstan": "^1.8",
+        "phpstan/phpstan": "^1.8"
-        "laravel/framework": "^10.10"
     },
     "autoload": {
         "psr-4": {

front/dist/manifest.json

@@ -1,6 +1,6 @@
 {
   "main.js": {
-    "file": "assets/main.7c3e8b7b.js",
+    "file": "assets/main.c1fd60c7.js",
     "src": "main.js",
     "isEntry": true,
     "css": [

front/js/svelte/Channel.svelte

@@ -23,7 +23,7 @@
     export let data;
     // export let layout;
     export let channel;
-    export let sidebar;
+
     export let axios;
     export let readableSchemas;
 
@@ -35,7 +35,7 @@
 
 </script>
 
-<Navbar  {sidebar}/>
+<Navbar schema={data.schema}/>
 
 <svelte:component this={components[view]} {title} {...data}/>
 

front/js/svelte/Navbar.svelte

@@ -1,11 +1,26 @@
 <script>
     import Avatar from "./account/Avatar.svelte";
+    import NavbarMenu from "./NavbarMenu.svelte";
     import {getContext} from "svelte";
 
-    export let sidebar;
+    export let schema;
     const channel = getContext("channel");
+    const readableSchemas = getContext("readableSchemas");
     const user = getContext("user");
+
     let contentIsOpen = false;
+    const fileSchemas = readableSchemas.filter((sc) => sc.type === "files");
+    const otherSchemas = readableSchemas.filter((sc) => !sc.isEntry && sc.type === "collection");
+
+    let filesIsActive = false;
+    let otherIsActive = false;
+    if(schema){
+        filesIsActive = fileSchemas.filter(s => s.name === schema.name).length > 0;
+        otherIsActive = otherSchemas.filter(s => s.name === schema.name).length > 0;
+    }
+
+
+
 </script>
 
 <nav class="lx-nav">
@@ -14,7 +29,12 @@
         <button on:click={(e) => contentIsOpen = true} class="btn btn-primary btn-sm d-xxl-none">« Content</button>
     </div>
     <div class="d-flex  align-items-center ">
+        <a class="nav-item" href="{channel.lucentUrl}">{channel.name}</a>
+        <a class="nav-item" href="{channel.lucentUrl}/members">Members</a>
 
+        {#if channel.generateCommand}
+            <a href="{channel.lucentUrl}/build-report" class="btn btn-outline-primary btn-sm d-">Build website</a>
+        {/if}
 <!--        <div>-->
 <!--            <form method="GET">-->
 <!--                <input type="search" name="filter[search_regex]" placeholder="Search"-->
@@ -22,12 +42,7 @@
 <!--            </form>-->
 <!--        </div>-->
     </div>
-    <div class="d-flex  align-items-center ">
+    <div>
-        <a class="nav-item" href="{channel.lucentUrl}/members">Members</a>
-
-        {#if channel.generateCommand}
-            <a href="{channel.lucentUrl}/build-report" class="btn btn-outline-primary btn-sm d-">Build website</a>
-        {/if}
         <a class="nav-item" href="{channel.lucentUrl}/profile">
             <Avatar side="28" name={user.name}/>
         </a>
@@ -36,12 +51,76 @@
 
 </nav>
 
-<div class="offcanvas offcanvas-start  d-xxl-block show border-0  bg-primary-subtle " class:d-none={!contentIsOpen}
+<div class="offcanvas offcanvas-start  d-xxl-block show border-0 bg-light-subtle" class:d-none={!contentIsOpen}
-      data-bs-scroll="true"
+     style="padding-top:36px " data-bs-scroll="true"
      data-bs-backdrop="false"
      tabindex="-1" aria-labelledby="offcanvasScrollingLabel">
+    <!--        <div class="offcanvas-header">-->
+    <!--            <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Content</h5>-->
+    <!--        </div>-->
     <div class="offcanvas-body">
         <button on:click={(e) => contentIsOpen = false} class="btn btn-primary btn-sm d-xxl-none mb-4">« close</button>
-        {@html sidebar}
+        <div class="accordion">
+            <div class="accordion-item">
+                <h2 class="accordion-header" id="panelsStayOpen-headingMain">
+                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                            data-bs-target="#panelsStayOpen-collapseMain" aria-expanded="true"
+                            aria-controls="panelsStayOpen-collapseMain">
+                        Main
+                    </button>
+                </h2>
+                <div id="panelsStayOpen-collapseMain" class="accordion-collapse collapse show"
+                     aria-labelledby="panelsStayOpen-headingMain">
+                    <div class="accordion-body">
+                        <NavbarMenu
+                                schemas={ readableSchemas.filter((sc) => sc.isEntry)}
+                                schema={schema}
+                        />
+                    </div>
+                </div>
+            </div>
+            {#if otherSchemas.length > 0}
+                <div class="accordion-item">
+                    <h2 class="accordion-header" id="panelsStayOpen-headingOther">
+                        <button class="accordion-button" class:collapsed={!otherIsActive} type="button" data-bs-toggle="collapse"
+                                data-bs-target="#panelsStayOpen-collapseOther" aria-expanded={otherIsActive}
+                                aria-controls="panelsStayOpen-collapseOther">
+                            Other
+                        </button>
+                    </h2>
+                    <div id="panelsStayOpen-collapseOther" class="accordion-collapse collapse"
+                         class:show={otherIsActive}
+                         aria-labelledby="panelsStayOpen-headingOther">
+                        <div class="accordion-body">
+                            <NavbarMenu
+                                    schemas={ otherSchemas}
+                                    schema={schema}
+                            />
+                        </div>
+                    </div>
+                </div>
+            {/if}
+            {#if fileSchemas.length > 0}
+                <div class="accordion-item">
+                    <h2 class="accordion-header" id="panelsStayOpen-headingFS">
+                        <button class="accordion-button "  class:collapsed={!filesIsActive} type="button" data-bs-toggle="collapse"
+                                data-bs-target="#panelsStayOpen-collapseFS" aria-expanded={filesIsActive}
+                                aria-controls="panelsStayOpen-collapseFS">
+                            Filesystem
+                        </button>
+                    </h2>
+                    <div id="panelsStayOpen-collapseFS" class="accordion-collapse collapse"  class:show={filesIsActive}
+                         aria-labelledby="panelsStayOpen-headingFS">
+                        <div class="accordion-body">
+                            <NavbarMenu
+                                    schemas={ fileSchemas}
+                                    schema={schema}
+                            />
+                        </div>
+                    </div>
+                </div>
+            {/if}
+
+        </div>
     </div>
 </div>

front/js/svelte/NavbarMenu.svelte

@@ -0,0 +1,16 @@
+<script>
+    import {getContext} from "svelte";
+
+    const channel = getContext("channel");
+    export let schemas;
+    export let schema;
+</script>
+
+<div class="list-group list-group-flush">
+
+    {#each schemas as aschema}
+        <a class="list-group-item list-group-item-action" class:active={aschema.name === schema?.name}
+           aria-current="page"
+           href="{channel.lucentUrl}/content/{aschema.name}">{aschema.label}</a>
+    {/each}
+</div>

front/js/svelte/common/OffCanvas.svelte

@@ -1,33 +0,0 @@
-<script>
-
-    import {onDestroy, onMount} from "svelte";
-    import offcanvas from "bootstrap/js/src/offcanvas.js";
-    export let title = "";
-    let offCanvasEl;
-    let offCanvasInstance;
-
-    export function show() {
-        if(!offCanvasInstance){
-            offCanvasInstance = new offcanvas(offCanvasEl);
-        }
-        offCanvasInstance.show();
-    }
-    onMount(()=>{
-        offCanvasInstance = new offcanvas(offCanvasEl);
-    });
-
-    export function hide() {
-        offCanvasInstance.hide();
-    }
-</script>
-
-<div bind:this={offCanvasEl} class="offcanvas  offcanvas-end"  tabindex="-1"
-     aria-labelledby="offcanvasEditContent">
-    <div class="offcanvas-header">
-        <h5 class="offcanvas-title">{title}</h5>
-        <button type="button" on:click={hide} class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-    </div>
-    <div class="offcanvas-body" style="overflow: auto">
-        <slot/>
-    </div>
-</div>

front/js/svelte/common/SwitchButton.svelte

@@ -1,13 +0,0 @@
-<script>
-    import {uniqueId} from "lodash";
-
-    export let label = "";
-    let id = uniqueId();
-</script>
-
-
-<div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" id={id} checked>
-    <label class="form-check-label" for={id}>{label}</label>
-</div>
-

front/js/svelte/content/Grid.svelte

@@ -1,10 +1,11 @@
 <script>
     import {getContext} from "svelte";
+    import Preview from "../files/Preview.svelte";
     import {selectRecord} from "./functions/recordSelect.js";
-    import Preview from "../newPreview/Preview.svelte";
 
     const channel = getContext("channel");
 
+    export let schema;
     export let records;
     export let isWritable;
     export let selected = [];
@@ -16,42 +17,42 @@
 
 </script>
 <div class="row" style="max-width:1000px">
-    {#each records as queryRecord (queryRecord.record.id)}
+    {#each records as record (record.id)}
         <div class="col-6 col-md-4">
             <div
                     class="file-wrapper rounded p-2 mb-4 bg-light"
-                    class:selected={selected.includes(queryRecord)}
+                    class:selected={selected.includes(record)}
             >
                 {#if isWritable}
                     <div class="form-check">
                         <input
-                                on:change={() => select(queryRecord.record)}
+                                on:change={() => select(record)}
                                 class="form-check-input "
                                 type="checkbox"
                                 checked={selected.find(
-                                        (r) => r.id === queryRecord.record.id
+                                        (r) => r.id === record.id
                                     )}
-                                value={queryRecord}
+                                value={record}
                         />
                     </div>
                 {/if}
                 <div class="d-flex justify-content-center">
-                    <Preview record={queryRecord.record}  />
+                    <Preview {record} size="medium"/>
                 </div>
 
                 <a
-                        href="{channel.lucentUrl}/records/{queryRecord.record.id}"
+                        href="{channel.lucentUrl}/records/{record.id}"
-                        title={queryRecord.record._file.path}
+                        title={record._file.path}
                         class="d-block text-center overflow-hidden text-nowrap my-2 "
                         style="
                                         text-overflow: ellipsis;
                                         font-size: 13px;
                                         color: #333;
-                                    ">{queryRecord.record._file.path}</a
+                                    ">{record._file.path}</a
                 >
                 <span
                         class="lx-small-text text-muted d-block text-center"
-                >{queryRecord.record._file.mime}</span
+                >{record._file.mime}</span
                 >
             </div>
         </div>

front/js/svelte/content/Index.svelte

@@ -1,16 +1,16 @@
 <script>
-    // import Tools from "./tools/Tools.svelte";
+    import Tools from "./tools/Tools.svelte";
     import Pagination from "./pagination/Pagination.svelte";
     import ActionsOnSelected from "./ActionsOnSelected.svelte";
     import Table from "./Table.svelte";
     import {getContext} from "svelte";
     import Grid from "./Grid.svelte";
-    import Tools from "./tools/Tools.svelte";
 
     const axios = getContext("axios");
     export let schema;
     export let users;
     export let records;
+    export let graph;
     // export let visibleFields;
     export let systemFields;
     export let sortParam;
@@ -47,7 +47,7 @@
 </script>
 
 <div class="wrapper-large transparent ">
-    <div class="lx-card  mb-4  mt-0">
+    <div class="lx-card  mb-4  {inModal ? 'mt-0' : 'mt-5'}">
         <h3 class="header-normal mb-5 ">
             {schema.label}
         </h3>
@@ -62,6 +62,7 @@
                     {sortField}
                     {operators}
                     {filter}
+                    {graph}
                     {inModal}
                     {modalUrl}
                     {isWritable}
@@ -72,6 +73,7 @@
         {#if schema.type === "collection"}
             <Table
                     {records}
+                    {graph}
                     {schema}
                     {sortParam}
                     {sortField}

front/js/svelte/content/RecordRow.svelte

@@ -7,7 +7,8 @@
 
     export let schema;
     export let users;
-    export let queryRecord;
+    export let graph;
+    export let record;
     export let sortParam;
     export let sortField;
     export let visibleColumns;
@@ -19,7 +20,7 @@
         class="field-ui-{field.info.name}"
         class:is-sort={field.name === sortField.name}
     >
-        <RenderField {queryRecord}   {field}/>
+        <RenderField {record} {schema} {graph} {field}/>
     </td>
 {/each}
 {#if schema.visible.includes("status")}
@@ -27,7 +28,7 @@
         class="text-center"
         class:is-sort={"-status" == sortParam || "status" == sortParam}
     >
-        <Status status={queryRecord.record.status}/>
+        <Status status={record.status}/>
     </td>
 {/if}
 {#if schema.visible.includes("_sys.createdBy")}
@@ -35,7 +36,7 @@
         class="text-center"
         class:is-sort={"-_sys.createdBy" == sortParam || "_sys.createdBy" == sortParam}
     >
-        <Avatar name={usernameById(users, queryRecord.record._sys.createdBy)} side={24}/>
+        <Avatar name={usernameById(users, record._sys.createdBy)} side={24}/>
     </td>
 {/if}
 {#if schema.visible.includes("_sys.updatedBy")}
@@ -43,16 +44,16 @@
         class="text-center"
         class:is-sort={"-_sys.updatedBy" == sortParam || "_sys.updatedBy" == sortParam}
     >
-        <Avatar name={usernameById(users, queryRecord.record._sys.updatedBy)} side={24}/>
+        <Avatar name={usernameById(users, record._sys.updatedBy)} side={24}/>
     </td>
 {/if}
 {#if schema.visible.includes("_sys.createdAt")}
     <td class:is-sort={"-_sys.createdAt" == sortParam || "_sys.createdAt" == sortParam}>
-        {friendlyDate(queryRecord.record._sys.createdAt)}
+        {friendlyDate(record._sys.createdAt)}
     </td>
 {/if}
 {#if schema.visible.includes("_sys.updatedAt")}
     <td class:is-sort={"-_sys.updatedAt" == sortParam || "_sys.updatedAt" == sortParam}>
-        {friendlyDate(queryRecord.record._sys.updatedAt)}
+        {friendlyDate(record._sys.updatedAt)}
     </td>
 {/if}

front/js/svelte/content/RenderField.svelte

@@ -29,13 +29,17 @@
         file: File,
     };
     export let field;
-    export let queryRecord;
+    export let schema;
+    export let record;
+    export let graph;
 
 </script>
 
 <svelte:component
     this={renderElements[field.info.name]}
-    value={queryRecord.record.data[field.name]}
+    value={record.data[field.name]}
-    {queryRecord}
+    {record}
+    {graph}
+    {schema}
     {field}
 />

front/js/svelte/content/Table.svelte

@@ -11,6 +11,7 @@
     export let schema;
     export let users;
     export let records;
+    export let graph;
     export let systemFields;
     export let sortParam;
     export let sortField;
@@ -63,7 +64,7 @@
         </tr>
         </thead>
         <tbody>
-        {#each records as queryRecord (queryRecord.record.id)}
+        {#each records as record (record.id)}
             <tr>
                 <td class="title-td">
                     <div
@@ -73,13 +74,13 @@
                             {#if isWritable}
                                 <div class="form-check">
                                     <input
-                                            on:change={() => select(queryRecord.record)}
+                                            on:change={() => select(record)}
                                             class="form-check-input "
                                             type="checkbox"
                                             checked={selected.find(
-                                            (r) => r.id === queryRecord.record.id
+                                            (r) => r.id === record.id
                                         )}
-                                            value={queryRecord}
+                                            value={record}
                                     />
                                 </div>
                             {/if}
@@ -87,20 +88,20 @@
                             <a
 
                                     class="me-2 text-decoration-none text-dark fs-6"
-                                    href="{channel.lucentUrl}/records/{queryRecord.record.id}"
+                                    href="{channel.lucentUrl}/records/{record.id}"
                                     target={inModal ? "_blank" : "_self"}
-                                    title={previewTitle(queryRecord.record)}
+                                    title={previewTitle(channel.schemas, record, graph)}
                                     data-bs-toggle="tooltip" data-bs-placement="left"
 
                             >
-                                {previewTitle(queryRecord.record)}
+                                {previewTitle(channel.schemas, record, graph)}
                             </a>
                         </div>
                         <div>
                             <Avatar
                                     name={usernameById(
                                         users,
-                                        queryRecord.record._sys.updatedBy
+                                        record._sys.updatedBy
                                     )}
                                     side={24}
                             />
@@ -108,7 +109,8 @@
                     </div>
                 </td>
                 <RecordRow
-                        {queryRecord}
+                        {record}
+                        {graph}
                         {schema}
                         {visibleColumns}
                         {sortParam}

front/js/svelte/content/elements/File.svelte

@@ -1,11 +1,18 @@
 <script>
     import Preview from "../../files/Preview.svelte";
 
-    export let queryRecord;
+    export let record;
     export let field;
+    export let graph;
 
-    let filePreviews = queryRecord?._children[field.name];
 
+    let filePreviews = graph.edges?.filter((ed) => ed.field === field.name && ed.source === record.id)
+        .map((ed) => graph.records.find((r) => r.id === ed.target));
+    // if (edges[0]) {
+    //     firstRecord = record._children.find((r) => r.data.id === edges[0].to);
+    // }
+
+    console.log(filePreviews)
 </script>
 
 <!-- {#if firstRecord}

front/js/svelte/content/elements/Reference.svelte

@@ -1,16 +1,25 @@
 <script>
     import PreviewCardSmall from "../../records/PreviewCardSmall.svelte";
 
-    export let queryRecord;
+    export let record;
     export let field;
-    $: recordEdges = queryRecord?._children[field.name];
+    export let schemas;
+    export let graph;
+
+    $: recordEdges =
+        graph.edges
+            ?.filter((ed) => ed.field === field.name && ed.source === record.id)
+            .map((edge) => {
+                return graph.records.find((r) => r.id === edge.target);
+            })
+            .filter((record) => (!record ? false : true)) ?? [];
 
 </script>
 
 <div class="references">
     {#each recordEdges as recordEdge}
         <span class="mr-3">
-            <PreviewCardSmall record={recordEdge}/>
+            <PreviewCardSmall {schemas} {graph} record={recordEdge}/>
         </span>
     {/each}
 </div>

front/js/svelte/content/tools/AppliedFilter.svelte

@@ -10,7 +10,7 @@
     export let value;
     export let inModal;
     export let modalUrl;
-    export let records
+    export let graph;
 
     let filter = {
         label: "",
@@ -51,13 +51,13 @@
 
     }
 
-    const filterRecord = extractFilterRecord(records, value);
+    const filterRecord = extractFilterRecord(graph, value);
 
-    function extractFilterRecord(records, value) {
+    function extractFilterRecord(graph, value) {
         if (!filter.isReference) {
             return null;
         }
-        return records.find(r => r.id === value);
+        return graph.records.find(r => r.id === value);
     }
 
     function removeFilter(k) {
@@ -76,7 +76,7 @@
 <span class="applied-filter d-inline-block border border-primary rounded lx-small-text  me-1 px-2 py-1">
     <div class="d-flex align-items-center justify-content-center">
         {#if filter.isReference && filterRecord}
-              {filter.label} is {previewTitle(filterRecord)}
+              {filter.label} is {previewTitle(channel.schemas, filterRecord)}
         {:else}
               {filter.label} {operators.find((o) => o.name === filter.operator)?.symbol ?? ""} {value}
         {/if}

front/js/svelte/content/tools/FilterReferenceInput.svelte

@@ -62,7 +62,7 @@
                     on:keypress={(e) => apply(e, option)}
             >
             <span class="dropdown-item">
-                {previewTitle(  option)}
+                {previewTitle(channel.schemas, option)}
             </span>
             </div>
 

front/js/svelte/content/tools/Tools.svelte

@@ -18,6 +18,7 @@
     export let modalUrl;
     export let isWritable;
     export let records;
+    export let graph;
     export let systemFields = [];
     // export let visibleFields = [];
 
@@ -36,7 +37,7 @@
         if (inModal) {
             dispatch("refresh", url);
         } else {
-            window.location.href = url;
+            window.location = url;
         }
 
     }
@@ -151,7 +152,7 @@
                     value={v}
                     {inModal}
                     {modalUrl}
-                    {records}
+                    {graph}
                     on:refresh
             />
         {/each}

front/js/svelte/edges/EdgeModal.svelte

@@ -1,54 +0,0 @@
-<script>
-    import {createEventDispatcher, getContext} from "svelte";
-
-    const dispatch = createEventDispatcher();
-    const channel = getContext("channel");
-    let isOpen = false;
-
-    export function open() {
-        isOpen = true;
-    }
-</script>
-
-<div
-        class="modal fade show"
-        tabindex="-1"
-        class:d-block={isOpen}
-        aria-modal="true"
-        role="dialog"
-        style="background: rgba(100,100,100,.6);"
->
-    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
-        <div class="modal-content">
-            <div class="modal-header">
-
-
-                <button
-                        on:click|preventDefault={(e) => (isOpen = false)}
-                        type="button"
-                        class="btn-close"
-                        data-bs-dismiss="modal"
-                        aria-label="Close"
-                />
-            </div>
-            <div class="modal-body">
-
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<style>
-    .modal-dialog {
-        width: auto;
-        max-width: 100%;
-
-    }
-
-    .modal-content {
-        margin: 40px auto;
-        width: auto;
-        height: 100%;
-    }
-</style>

front/js/svelte/edges/sortEdges.js

@@ -1,9 +1,13 @@
-export function sortByField(from, to, queryRecords, fieldName) {
+
+
+
+export function sortByField(from, to, edges, fieldName, references) {
     if (from === to) {
-        return queryRecords;
+        return edges;
     }
-    let edgesTosort = queryRecords?.filter((qr) => qr.edge.field === fieldName && qr.edge.depth === 1 ) ?? [];
+    let referenceIds = references.map(r => r.id);
-    let remainingEdge = queryRecords?.filter((qr) => !(qr.edge.field === fieldName && qr.edge.depth === 1)) ?? [];
+    let edgesTosort = edges?.filter((ed) => ed.field === fieldName && ed.depth === 1 && referenceIds.includes(ed.target)) ?? [];
+    let remainingEdge = edges?.filter((ed) => !(ed.field === fieldName && ed.depth === 1)) ?? [];
 
     edgesTosort = array_move(edgesTosort,from, to);
     return [...remainingEdge, ...edgesTosort];

front/js/svelte/home/Index.svelte

@@ -23,7 +23,7 @@
 
 <div class="wrapper-normal transparent">
 
-    <h3 class="header-small mb-4 ">Latest Content changes</h3>
+    <h3 class="header-small mb-4 mt-5">Latest Content changes</h3>
     {#if records.length > 0}
         <div class="lx-card  mb-4">
             <div class="lx-table p-0">

front/js/svelte/libs/Sortable.svelte

@@ -4,7 +4,7 @@
     export let sortableClass = "";
     // export let handle;
     export let isTable = false;
-    export let sortableInstance = null;
+    export let sortableInstance;
     const dispatch = createEventDispatcher();
     let sortableContainer;
 

front/js/svelte/newPreview/Preview.svelte

@@ -1,65 +0,0 @@
-<script>
-    import File from "./includes/File.svelte";
-    import {previewTitle} from "../records/Preview.js";
-    import {getContext} from "svelte";
-    import Status from "../records/Status.svelte";
-
-    const channel = getContext("channel");
-    export let record;
-
-    export let edge = null;
-    let schema = channel.schemas.find(s => s.name === record.schema);
-    let types = ["inline", "card"];
-    export let type = "inline";
-    if (!types.includes(type)) {
-        console.error("unknown preview type")
-    }
-    export let editable = false;
-
-</script>
-<div class="preview-card">
-    {#if edge?.data}
-        <div class="preview-card-edge">Edge Data</div>
-    {/if}
-    <div class="d-flex column-gap-3">
-        {#if record._file}
-            <div>
-                <File {record}/>
-            </div>
-        {/if}
-        <div class="d-flex flex-md-column " style="line-height: 22px">
-            <a class="text-decoration-none" target="_blank" href="{channel.lucentUrl}/records/{record.id}">{previewTitle(record)}</a>
-            <span class="d-flex gap-1 text-muted">
-                {#if record.status === "draft"}
-                    <Status status={record.status}/>
-                {/if}
-                {schema.label}
-            </span>
-        </div>
-    </div>
-</div>
-
-<style>
-    .preview-card {
-        position: relative
-    }
-
-    .preview-card-edge {
-        position: absolute;
-        top: -28px;
-        background: #fff;
-        padding: 0px 5px;
-        border: 1px solid #ccc;
-        border-radius: 7px;
-        font-size: 14px;
-    }
-</style>
-<!--{#if record._file && type === "inline"}-->
-<!--&lt;!&ndash;    <FilePreviewInline {record} {edge} {editable}/>&ndash;&gt;-->
-<!--{:else if record._file && type === "card"}-->
-<!--    <FilePreviewCard {record} {edge} {editable}/>-->
-<!--{:else if type === "inline"}-->
-<!--&lt;!&ndash;    <DocPreviewCard {record} {edge} {editable}/>&ndash;&gt;-->
-<!--{:else if type === "card"}-->
-<!--&lt;!&ndash;    <DocPreviewCard {record} {edge} {editable}/>&ndash;&gt;-->
-<!--{/if}-->

front/js/svelte/newPreview/includes/File.svelte

@@ -1,60 +0,0 @@
-<script>
-    import {imgurl} from "../../files/imageserver.js";
-    import {getContext} from "svelte";
-    import Icon from "../../common/Icon.svelte";
-    const channel = getContext("channel");
-    export let record;
-
-
-    export let size = "tiny";
-    let imageSide;
-    let fileSide;
-    let fontSize;
-    if (size === "large") {
-        imageSide = 256;
-        fileSide = 32;
-        fontSize = "20";
-    } else if (size === "medium") {
-        imageSide = 128;
-        fileSide = 12;
-        fontSize = "17";
-    } else if (size === "small") {
-        imageSide = 64;
-        fileSide = 12;
-        fontSize = "15";
-    } else if (size === "tiny") {
-        imageSide = 42;
-        fileSide = 12;
-        fontSize = "13";
-    }
-</script>
-
-{#if record}
-    {#if record._file.mime.startsWith("image")}
-        <!-- href={imgurl(record)} -->
-        <a
-                href="{channel.lucentUrl}/records/{record.id}"
-                title={record._file.path}
-                class="d-flex  align-items-center justify-content-center "
-                style="width:{imageSide}px;height:{imageSide}px"
-        >
-            <img
-                    class="rounded w-100"
-                    src={imgurl(record)}
-                    alt={record._file.path}
-            />
-        </a>
-    {:else}
-        <a
-                href="{channel.lucentUrl}/records/{record.id}"
-                title={record._file.path}
-                class="btn btn-outline-primary btn-sm d-flex align-items-center justify-content-center"
-                style="width:{imageSide}px;height:{imageSide}px"
-        >
-            <Icon icon="file" width={fileSide} height={fileSide}/>
-            <span class="ms-2" style="font-size:{fontSize}px"
-            >.{record._file.path.split(".").pop()}</span
-            >
-        </a>
-    {/if}
-{/if}

front/js/svelte/records/ContentTabs.svelte

@@ -1,5 +1,7 @@
 <script>
+
     export let schema;
+    export let isCreateMode;
     export let active = "";
 
     let tabs = schema.groups?.map((group) => {
@@ -9,13 +11,29 @@
         label: "Main",
         name: "",
     };
-
+    let graphTab = {
+        label: "Graph",
+        name: "_graph",
+    };
+    if (isCreateMode) {
         tabs = [mainTab, ...tabs];
+    } else {
+        tabs = [mainTab, ...tabs, graphTab];
+    }
+
+    function showGraph(e) {
+        e.preventDefault();
+        active = "_graph";
+    }
 
     function changeTab(e, tabName) {
         e.preventDefault();
+        if (tabName == "_graph") {
+            showGraph(e);
+        } else {
             active = tabName;
         }
+    }
 </script>
 
 {#if tabs.length > 1}

front/js/svelte/records/Edit.svelte

@@ -1,60 +1,131 @@
 <script>
-    import {getContext} from "svelte";
+    import {afterUpdate, getContext, onMount} from "svelte";
+    import {isEqual} from "lodash";
     import Manager from "./Manager.svelte";
+    import EditHeader from "./EditHeader.svelte"
+    import StatusSelect from "./StatusSelect.svelte"
     import FilePreview from "./FilePreview.svelte"
-    import Form from "./form/Form.svelte";
+    import ContentTabs from "./ContentTabs.svelte"
-    import axios from "axios";
+    import FormField from "./FormField.svelte"
+    import Graph from "./Graph.svelte"
+    import Info from "./Info.svelte"
+    import ErrorAlert from "../common/ErrorAlert.svelte"
 
     const channel = getContext("channel");
 
     export let schema;
     export let record;
-    export let graph = [];
+    export let graph = {
+        records: [],
+        edges: []
+    };
     export let recordHistory;
     export let isCreateMode;
-    // export let isWritable = false;
+    export let isWritable = false;
-    // export let users;
+    export let users;
+    let originalContent;
+    let activeContentTab = "";
+    $: hasUnsavedData = false;
     $: validationErrors = null;
-    $: errorMessage = null;
+    $: errorMessage = validationErrors
+        ? `Record submission failed. ${
+            Object.entries(validationErrors).length
+        } error(s)`
+        : null;
 
-    let form;
+    let activeFields = schema.fields.filter(
+        (f) => f.name !== "id"
+    );
+
+
+    onMount(() => {
+        setOriginalContent();
+    });
+
+    function setOriginalContent() {
+        originalContent = {
+            data: JSON.parse(JSON.stringify(record.data)),
+            schema: record.schema,
+            status: record.status,
+            _sys: JSON.parse(JSON.stringify(record._sys)),
+            _file: JSON.parse(JSON.stringify(record._file)),
+            edges: JSON.parse(JSON.stringify(graph.edges)),
+        };
+    }
+
+    afterUpdate(() => {
+        hasUnsavedData = checkUnsavedData();
+    });
+
+    function beforeUnload(e) {
+        // Cancel the event as stated by the standard.
+        // e.preventDefault();
+        // console.log(hasUnsavedData);
+        if (hasUnsavedData) {
+            return (e.returnValue =
+                "You have unsaved changes. Are you sure you want to exit?");
+        }
+        // Chrome requires returnValue to be set.
+        // e.returnValue = "";
+        delete e["returnValue"];
+        // more compatibility
+        // return true;
+        return "...";
+    }
+
+    function checkUnsavedData() {
+        if (isCreateMode) {
+            return false;
+        }
+        return !isEqual(originalContent, {
+            data: record.data,
+            schema: record.schema,
+            status: record.status,
+            _sys: record._sys,
+            _file: record._file,
+            edges: graph.edges,
+        });
+    }
 
     function save(e) {
         e.preventDefault();
-        let status = e.detail.status
+
         console.log("SAVE: Attempt");
         validationErrors = null;
+        errorMessage = "";
         return new Promise(function (resolve, reject) {
+            if (!hasUnsavedData && !isCreateMode) {
+                resolve(null);
+                return;
+            }
+            if (!record) {
+                resolve(null);
+                return;
+            }
 
             // remove trashed edges
-            let replaceEdges = graph
+            graph.edges = graph.edges?.filter((edge) => !edge._isTrashed && edge.source === record.id);
-                .map((queryRecord) => queryRecord.edge)
-                .filter((edge) => !edge._isTrashed && edge.source === record.id);
-
             axios
                 .post(channel.lucentUrl + "/records", {
-                    schemaName: record.schema,
+                    record: record,
-                    updateEdges: true,
+                    edges: graph.edges,
-                    id: record.id,
-                    data: record.data,
-                    edges: replaceEdges,
-                    status: status,
                     isCreateMode: isCreateMode,
                 })
                 .then(function (response) {
                     console.log("SAVE: SAVED");
 
                     if (isCreateMode) {
-                        window.location.href = channel.lucentUrl + "/records/" + record.id;
+                        window.location = channel.lucentUrl + "/records/" + record.id;
                     } else {
-                        record = response.data.record ?? null;
+                        record = response.data.records[0] ?? null;
                         if (!record) {
                             // means trashed
+                            hasUnsavedData = false;
                             window.location = channel.lucentUrl;
                             return;
                         }
-                        graph = [...response.data.graph];
+                        graph = response.data;
-                        form.setOriginalData();
+                        setOriginalContent();
                     }
 
                     resolve(null);
@@ -66,36 +137,91 @@
                             errorMessage = error.response.data.error;
                         } else {
                             validationErrors = error.response.data.error;
-                            // console.log(validationErrors)
+                            console.log(validationErrors)
                         }
                     }
                     resolve(null);
-
+                    // msgSuccess = null;
+                    // msgError = error.response.data.error;
+                    // submitted = false;
                 });
         });
     }
 </script>
 
+<svelte:window on:beforeunload={beforeUnload}/>
 
 <div class="wrapper-normal transparent">
     <Manager managerRecords={recordHistory} {graph}/>
+    <EditHeader {schema} {record} {isCreateMode} {graph} bind:activeContentTab/>
 
-    <FilePreview {record} {schema}/>
+    {#if !["_graph", "_info"].includes(activeContentTab) && isWritable}
+        <div class="shadow-lg "
+             style="position:fixed;bottom:0;left:0px;width:100%;background: rgb(206, 223, 210);z-index:1050"
+        >
+            <div
+                    class="d-flex mt-3 mb-3  align-items-center justify-content-center"
+            >
+                <StatusSelect bind:status={record.status} {record} {schema}/>
+                {#if isCreateMode}
+                    <button
+                            class="ms-2 btn btn-primary btn-spinner"
+                            on:click={save}
+                    >
+                            <span
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                            />
+                        Create
+                    </button>
+                {:else if hasUnsavedData}
+                    <button
+                            type="button"
+                            class="ms-2 btn btn-primary btn-spinner"
+                            on:click={save}
+                    >
+                            <span
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                            />
+                        Save
+                    </button>
+                {/if}
+            </div>
+        </div>
+    {/if}
+
+    <ErrorAlert message={errorMessage}/>
 
     <div class=" mt-4" style="margin-bottom:150px">
-            <Form
+        <ContentTabs
-                    bind:this={form}
+                {schema}
-                    data={record.data}
+                {isCreateMode}
-                    status={record.status}
+                bind:active={activeContentTab}
-                    bind:graph
+        />
+        {#if !["_graph", "_info"].includes(activeContentTab)}
+            <FilePreview {record} {schema}/>
+            <!-- <fieldset disabled="disabled"> -->
+            {#each activeFields as field (field.name)}
+                {#if activeContentTab === field.group}
+                    <FormField
+                            bind:data={record.data}
+                            bind:graph={graph}
+                            {field}
                             {schema}
                             {record}
-                    {isCreateMode}
-                    {errorMessage}
                             {validationErrors}
-                    on:save={save}
+                            {isCreateMode}
                     />
-<!--            <Graph {graph} {record}/>-->
+                {/if}
-        <!--            <Info {record} {graph} {users} {schema}/>-->
+            {/each}
+            <!-- </fieldset> -->
+        {:else if activeContentTab === "_graph"}
+            <Graph {graph} {record}/>
+        {:else if activeContentTab === "_info"}
+            <Info {record} {graph} {users} {schema}/>
+        {/if}
     </div>
 </div>

front/js/svelte/records/EditHeader.svelte

@@ -2,25 +2,25 @@
     import {getContext} from "svelte";
     import Icon from "../common/Icon.svelte";
     import {previewTitle} from "./Preview";
-    import axios from "axios";
 
     const channel = getContext("channel");
     export let schema;
+    export let graph;
     export let record;
-    export let title;
     export let isCreateMode;
+    export let activeContentTab;
 
     function clone(e) {
         e.preventDefault();
         axios.post(channel.lucentUrl + "/records/clone/" + record.id).then(response => {
-            window.location.href = channel.lucentUrl + "/records/" + response.data.id;
+            window.location = channel.lucentUrl + "/records/" + response.data.id;
         }).catch(error => {
 
         });
     }
 </script>
 
-<h3 class="header-normal  mb-0">
+<h3 class="header-normal mt-5 mb-0">
     <a
         class="text-muted d-block text-decoration-none fs-6 mb-1"
         href="{channel.lucentUrl}/content/{schema.name}"
@@ -29,16 +29,12 @@
 
     <span class="text-dark d-block">
         {#if !isCreateMode}
-            {#if record}
+            {previewTitle(channel.schemas, record, graph)}
-                {previewTitle(record)}
-            {:else}
-                { title}
-            {/if}
         {:else}
             New Record
         {/if}
     </span>
-    {#if !isCreateMode && !!record}
+    {#if !isCreateMode}
         <div class="dropdown d-inline-block">
             <button
                 class="btn btn-link btn-sm"
@@ -65,12 +61,12 @@
                         Clone
                     </a>
                 {/if}
-                <!--                <a-->
+                <a
-                <!--                    on:click|preventDefault={(e) =>-->
+                    on:click|preventDefault={(e) =>
-                <!--                        (activeContentTab = "_info")}-->
+                        (activeContentTab = "_info")}
-                <!--                    class="dropdown-item"-->
+                    class="dropdown-item"
-                <!--                    href="{channel.lucentUrl}">Revisions</a-->
+                    href="{channel.lucentUrl}">Revisions</a
-                <!--                >-->
+                >
             </div>
         </div>
     {/if}

front/js/svelte/records/FormField.svelte

@@ -1,23 +1,24 @@
 <script>
-    import Text from "./form/fields/Text.svelte";
+    import Text from "./elements/Text.svelte";
-    import Slug from "./form/fields/Slug.svelte";
+    import Slug from "./elements/Slug.svelte";
     import Reference from "./elements/Reference.svelte";
     import ReferenceInline from "./elements/ReferenceInline.svelte";
     import Block from "./block/Block.svelte";
-    import Color from "./form/fields/Color.svelte";
+    import Color from "./elements/Color.svelte";
-    import Checkbox from "./form/fields/Checkbox.svelte";
+    import Checkbox from "./elements/Checkbox.svelte";
-    import Number from "./form/fields/Number.svelte";
+    import Number from "./elements/Number.svelte";
-    import Date from "./form/fields/Date.svelte";
+    import Url from "./elements/Url.svelte";
-    import UUID from "./form/fields/UUID.svelte";
+    import Date from "./elements/Date.svelte";
-    import File from "./form/references/File.svelte";
+    import UUID from "./elements/UUID.svelte";
-    import Textarea from "./form/fields/Textarea.svelte";
+    import File from "./elements/File.svelte";
-    import Datetime from "./form/fields/Datetime.svelte";
+    import Textarea from "./elements/Textarea.svelte";
-    import RichEditor from "./form/fields/RichEditor.svelte";
+    import Datetime from "./elements/Datetime.svelte";
-    import Json from "./form/fields/JSON.svelte";
+    import RichEditor from "./elements/RichEditor.svelte";
-    import Markdown from "./form/fields/Markdown.svelte";
+    import Json from "./elements/JSON.svelte";
-    import FieldHeader from "./form/FieldHeader.svelte";
+    import Markdown from "./elements/Markdown.svelte";
+    import FieldHeader from "./elements/FieldHeader.svelte";
     import ReferenceTable from "./elements/ReferenceTable.svelte";
-    import ReferenceTags from "./form/references/ReferenceTags.svelte";
+    import ReferenceTags from "./elements/ReferenceTags.svelte";
 
     const formElements = {
         text: Text,
@@ -27,6 +28,7 @@
         color: Color,
         checkbox: Checkbox,
         number: Number,
+        url: Url,
         date: Date,
         datetime: Datetime,
         uuid: UUID,
@@ -46,7 +48,7 @@
 </script>
 
 <div class="card editor-field">
-    <FieldHeader {field} {id}/>
+    <FieldHeader {schema} {field} {id}/>
     {#if field.info.name === "reference" && field.layout === "inline"}
         <ReferenceInline
             bind:graph
@@ -70,8 +72,16 @@
                 {field}
                 {validationErrors}
         />
-    {:else if ["reference","file"].includes(field.info.name)}
+    {:else if field.info.name === "reference"}
-        <File bind:graph {record} {field} />
+        <Reference
+            bind:graph
+            {id}
+            {record}
+            {field}
+            {validationErrors}
+        />
+    {:else if field.info.name === "file"}
+        <File bind:graph {record} {field} {validationErrors}/>
     {:else if field.info.name === "block"}
         <Block
             bind:graph

front/js/svelte/records/InlineEdit.svelte

@@ -5,7 +5,7 @@
     import FormField from "./FormField.svelte";
     import FilePreview from "./FilePreview.svelte";
     import ContentTabs from "./ContentTabs.svelte";
-    import StatusSelect from "./form/StatusSelect.svelte";
+    import StatusSelect from "./StatusSelect.svelte";
     import ErrorAlert from "../common/ErrorAlert.svelte";
 
     const channel = getContext("channel");

front/js/svelte/records/Preview.js

@@ -1,17 +1,31 @@
 import Mustache from "mustache";
 import {stripHtml} from "../../helpers";
-import {getContext} from "svelte";
 
-export function previewTitle(record) {
+export function previewTitle(schemas, record, graph) {
-    const channel = getContext("channel");
+    let schema = schemas.find((aSchema) => aSchema.name === record?.schema);
-    let schema = channel.schemas.find((aSchema) => aSchema.name === record?.schema);
 
     if (!schema?.titleTemplate) {
         return noTemplate(schema, record);
     }
 
+    let recordData = record.data;
     let template = Mustache.parse(schema.titleTemplate);
-    let render = Mustache.render(schema.titleTemplate, record.data);
+
+    let referencePreviews = template
+        .filter(segment => segment[0] === "name") // keep only template tags
+        .map((segment) => segment[1]) // map to fieldNames
+        .filter(fieldName => { // keep only references
+            let schemaField = schema.fields.find(f => f.name === fieldName)
+            return schemaField?.info.name === "reference";
+        }).reduce((carry, field) => {  // map to records
+            let edge = graph.edges.find(edge => edge.source === record.id && edge.field === field)
+            let referenceRecord = graph.records.find(rec => rec.id === edge?.target)
+            carry[field] = previewTitle(schemas, referenceRecord, graph);
+            return carry;
+        }, {});
+    recordData = {...recordData, ...referencePreviews}
+
+    let render = Mustache.render(schema.titleTemplate, recordData);
 
     if (!render || render === "") {
         return noTemplate(schema, record);
@@ -20,26 +34,6 @@ export function previewTitle(record) {
     return stripHtml(render.slice(0, 300));
 }
 
-export function previewEdgeTitle(edge) {
-    const channel = getContext("channel");
-    let edgeSchemaName = channel.schemas
-        .find((aSchema) => aSchema.name === edge?.sourceSchema)
-        .fields.find(f => f.name === edge.field).data;
-    let schema = channel.schemas.find((aSchema) => aSchema.name === edgeSchemaName);
-    if (!schema?.titleTemplate) {
-        return noTemplate(schema, edge);
-    }
-
-    let template = Mustache.parse(schema.titleTemplate);
-    let render = Mustache.render(schema.titleTemplate, edge.data);
-
-    if (!render || render === "") {
-        return noTemplate(schema, edge);
-    }
-
-    return stripHtml(render.slice(0, 300));
-}
-
 function noTemplate(schema, record) {
     if (schema?.type === "files") {
         return record._file.path;
@@ -48,7 +42,8 @@ function noTemplate(schema, record) {
     let title =  stripHtml(
         record?.data[schema.fields.filter((f) => f.info.name === "text")[0]?.name]
     ).slice(0, 300);
-    if (title === "") {
+
+    if(title == ""){
         return "Untitled";
     }
 

front/js/svelte/records/PreviewCard.svelte

@@ -2,92 +2,74 @@
     import Icon from "../common/Icon.svelte";
 
     import { getContext, createEventDispatcher } from "svelte";
-    import {previewEdgeTitle, previewTitle} from "./Preview";
+    import Preview from "../files/Preview.svelte";
+    import { previewTitle } from "./Preview";
     import Status from "./Status.svelte";
-    import Preview from "../newPreview/Preview.svelte";
-    import EdgeData from "./form/references/EdgeData.svelte";
-
     const dispatch = createEventDispatcher();
     const channel = getContext("channel");
+    export let graph;
     export let record;
-    export let field;
-    export let edge = null;
-    export let editable = false;
     export let classes = "";
     export let hasDelete = false;
 
-    let edgeData;
-
     let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
-    let cardTitle = previewTitle(record);
+    let cardTitle = previewTitle(channel.schemas, record, graph);
-
     function remove(e) {
         e.preventDefault();
+
         dispatch("remove", record.id);
     }
-
-    function edit(e) {
-        e.preventDefault();
-        edgeData.openEdit();
-
-    }
 </script>
-<div class="d-flex gap-2">
+
-    {#if editable}
 <div
-                class="card mb-2 bg-light w-50 "
+
+    class="card mb-2 bg-light  {classes}"
     style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
 >
-            <div class="card-body">
+    <div class="card-body d-flex">
-                <span class="text-muted d-block">Relation Data</span>
+        {#if schema.type === "files"}
-                {previewEdgeTitle(edge)}
+            <div style="max-width:94px;margin-right:15px">
-                <div class="position-absolute d-flex end-0" style="top:5px">
+                <Preview {record} size="small" />
-                    <button
-                            class="trash-button  text-dark btn btn-sm btn-link"
-                            on:click={edit}
-                    >
-                        <Icon icon="pencil"/>
-                    </button>
             </div>
-            </div>
-        </div>
-
-        <EdgeData bind:this={edgeData} {record} {field} bind:edge/>
         {/if}
-
+        <div class="overflow-hidden">
-    <div
+            <a
-            class="card mb-2 bg-light  w-100 {classes}"
+                class="title-link m-0 fs-5 text-decoration-none text-dark d-block"
-            style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
+                href="{channel.lucentUrl}/records/{record.id}"
+                title={cardTitle}
             >
-        <div class="card-body">
+                {cardTitle}
-            <Preview {record} type="card"/>
+            </a>
+            <small class="text-muted">
+                {schema.label}
+            </small>
+            <small class="text-muted">
+                {#if record.status === "draft"}
+                    <Status status={record.status} />
+                {/if}
+            </small>
+        </div>
     </div>
 
     {#if hasDelete}
-            <div class="position-absolute d-flex end-0" style="top:5px">
+        <div class="position-absolute end-0" style="top:5px">
-
             <button
                 class="trash-button  text-dark btn btn-sm btn-link"
                 on:click={remove}
-                >
+                ><Icon icon="trash-can" />
-                    <Icon icon="trash-can"/>
             </button>
-
         </div>
     {/if}
 </div>
-</div>
 
 <style>
 
     .card .trash-button {
         display: none;
     }
-
     .card:hover .trash-button {
         display: block;
     }
-
     .title-link {
         overflow: hidden;
         white-space: nowrap;

front/js/svelte/records/PreviewCardSmall.svelte

@@ -4,9 +4,10 @@
 
     const channel = getContext("channel");
     export let record;
+    export let graph;
     $: schema = channel.schemas.find((aschema) => aschema.name === record.schema);
 
-    $: title = previewTitle(  record);
+    $: title = previewTitle(channel.schemas, record, graph);
 </script>
 
 {#if record?.data}

front/js/svelte/records/StatusSelect.svelte

@@ -0,0 +1,57 @@
+<script>
+    import {getContext} from "svelte";
+    import {getStatus, getStatusList} from "./StatusText";
+
+    const channel = getContext("channel");
+    export let status = "draft";
+    export let record;
+    export let schema;
+    let dropdown;
+    $: currentStatus = getStatus(status);
+    const statusList = Object.values(getStatusList());
+
+    function updateStatus(e, statusValue) {
+        // e.preventDefault();
+        status = statusValue;
+        dropdown.click();
+    }
+</script>
+
+<!-- Example split danger button -->
+<div class="d-flex justify-content-between">
+    <div class="btn-group dropup">
+        <button type="button" class="btn btn-{currentStatus.bg}"
+        >{currentStatus.text}</button
+        >
+        <button
+                bind:this={dropdown}
+                type="button"
+                class="btn btn-{currentStatus.bg} dropdown-toggle dropdown-toggle-split"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+        >
+            <span class="visually-hidden">Toggle Dropdown</span>
+        </button>
+        <div class="dropdown-menu">
+            <div class="dropdown-header">Change status to</div>
+            {#each statusList as astatus}
+                {#if astatus.value !== status}
+                    <button
+                            type="button"
+                            class="dropdown-item my-2 rounded w-100 bg-{astatus.bg} text-{astatus.color}"
+                            on:click={(e) => updateStatus(e, astatus.value)}
+                    >
+                        {astatus.text}
+                    </button>
+                {/if}
+            {/each}
+        </div>
+
+
+    </div>
+    {#if channel.previewTarget}
+        <a href="{channel.previewTargetUrl}?schema={schema.name}&id={record.id}" target="_blank" class="btn btn-info ms-3">
+            Preview
+        </a>
+    {/if}
+</div>

front/js/svelte/records/block/elements/File.svelte

@@ -4,8 +4,8 @@
     import {sortByField} from "../../../edges/sortEdges";
     import ReferenceInlineButtons from "../../elements/ReferenceInlineButtons.svelte"
     import Sortable from "../../../libs/Sortable.svelte";
-    import {insertEdges} from "../../form/references/reference.js";
+    import {insertEdges} from "../../elements/reference";
-    import BrowseModal from "../../form/references/BrowseModal.svelte";
+    import BrowseModal from "../../elements/BrowseModal.svelte";
 
 
     const channel = getContext("channel");
@@ -41,7 +41,7 @@
     }
 
     function reorder(e) {
-        graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, blockFieldName);
+        graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, blockFieldName, references);
     }
 
     function insert(e) {

front/js/svelte/records/block/elements/Reference.svelte

@@ -4,7 +4,7 @@
     import {sortByField} from "../../../edges/sortEdges";
     import ReferenceInlineButtons from "../../elements/ReferenceInlineButtons.svelte"
     import Sortable from "../../../libs/Sortable.svelte";
-    import {insertEdges} from "../../form/references/reference.js";
+    import {insertEdges} from "../../elements/reference";
 
 
     const channel = getContext("channel");
@@ -35,7 +35,7 @@
     }
 
     function reorder(e) {
-        graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, blockFieldName);
+        graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, blockFieldName, references);
     }
 
     function insert(e) {

front/js/svelte/records/deepEquality.js

@@ -1,34 +0,0 @@
-import { deepEqual } from 'fast-equals';
-export function isEqual(obj1, obj2) {
-    return deepEqual(obj1, obj2);
-    // if (obj1 === obj2) return true;
-    //
-    // if (Array.isArray(obj1) && Array.isArray(obj2)) {
-    //
-    //     if(obj1.length !== obj2.length) return false;
-    //
-    //     return obj1.every((elem, index) => {
-    //         return isEqual(elem, obj2[index]);
-    //     })
-    //
-    //
-    // }
-    //
-    // if(typeof obj1 === "object" && typeof obj2 === "object" && obj1 !== null && obj2 !== null) {
-    //     if(Array.isArray(obj1) || Array.isArray(obj2)) return false;
-    //
-    //     const keys1 = Object.keys(obj1)
-    //     const keys2 = Object.keys(obj2)
-    //
-    //     if(keys1.length !== keys2.length || !keys1.every(key => keys2.includes(key))) return false;
-    //
-    //     for(let key in obj1) {
-    //         if (!isEqual(obj1[key], obj2[key])) { return false; }
-    //     }
-    //
-    //     return true;
-    //
-    // }
-    //
-    // return false;
-}

front/js/svelte/records/elements/BrowseModal.svelte

@@ -1,6 +1,6 @@
 <script>
     import {createEventDispatcher, getContext} from "svelte";
-    import Index from "../../../content/Index.svelte";
+    import Index from "../../content/Index.svelte";
 
     const dispatch = createEventDispatcher();
     const channel = getContext("channel");

front/js/svelte/records/elements/Checkbox.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { getErrorMessage } from "../form.js";
+    import { getErrorMessage } from "./errorMessage";
     export let id;
     export let field;
     export let value;

front/js/svelte/records/elements/Color.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { getErrorMessage } from "../form.js";
+    import { getErrorMessage } from "./errorMessage";
     export let field;
     export let value;
     export let isCreateMode;

front/js/svelte/records/elements/Datalist.svelte

@@ -1,7 +1,7 @@
 <script>
     import {getContext} from "svelte";
     import {debounce} from "lodash";
-    import {previewTitle} from "../../Preview.js";
+    import {previewTitle} from "../Preview";
 
     const channel = getContext("channel");
     export let field;

front/js/svelte/records/elements/Date.svelte

@@ -4,8 +4,8 @@
     import flatpickr from "flatpickr";
     import "flatpickr/dist/flatpickr.css";
     import "flatpickr/dist/themes/light.css";
-    import { getErrorMessage } from "../form.js";
+    import {getErrorMessage} from "./errorMessage";
-    import Icon from "../../../common/Icon.svelte";
+    import Icon from "../../common/Icon.svelte";
 
     export let field;
     export let value;

front/js/svelte/records/elements/Datetime.svelte

@@ -4,8 +4,8 @@
     import flatpickr from "flatpickr";
     import "flatpickr/dist/flatpickr.css";
     import "flatpickr/dist/themes/light.css";
-    import { getErrorMessage } from "../form.js";
+    import {getErrorMessage} from "./errorMessage";
-    import Icon from "../../../common/Icon.svelte";
+    import Icon from "../../common/Icon.svelte";
 
     export let field;
     export let value;

front/js/svelte/records/elements/File.svelte

@@ -1,18 +1,22 @@
 <script>
     import {getContext} from "svelte";
-    import PreviewCard from "../../PreviewCard.svelte";
+    import {uniqBy} from "lodash";
-    import Sortable from "../../../libs/Sortable.svelte";
+    import {sortByField} from "../../edges/sortEdges";
+    import PreviewCard from "../PreviewCard.svelte";
+    import Sortable from "../../libs/Sortable.svelte";
     import BrowseModal from "./BrowseModal.svelte";
-    import {insertEdges} from "./reference.js";
-    import {sortByField} from "../../../edges/sortEdges.js";
 
     const channel = getContext("channel");
     export let field;
     export let record;
-    export let graph;
+    export let graph
 
     let browseModal;
-    $: currentReferences = graph.filter((queryRecord)=> field.name === queryRecord.edge.field) ?? [];
+    $: references = graph?.edges
+        .filter((edge) => edge.field === field.name)
+        .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) =>
         field.collections.includes(aschema.name)
@@ -20,8 +24,8 @@
 
     function removeReference(e) {
         e.preventDefault();
-        graph = graph.filter(
+        graph.edges = graph.edges.filter(
-            (queryRecord) => !(queryRecord.edge.target === e.detail && queryRecord.edge.field === field.name)
+            (edge) => !(edge.target === e.detail && edge.field === field.name)
         );
     }
 
@@ -31,17 +35,34 @@
     }
 
     async function reorder(e) {
-        graph = await sortByField(e.detail.source, e.detail.target, graph, field.name);
+
+        graph.edges = await sortByField(e.detail.source, e.detail.target, graph.edges, field.name, references);
+
     }
 
     function insert(e) {
         e.preventDefault();
         browseModal.close();
-
         const recordsToInsert = e.detail.records;
         const action = e.detail.action;
-        graph = insertEdges(graph, record, recordsToInsert, field.name, action);
+        let newEdges = recordsToInsert.map((r) => {
+            return {
+                target: r.id,
+                source: record.id,
+                sourceSchema: record.schema,
+                targetSchema: r.schema,
+                field: field.name,
+                rank: ""
+            };
+        });
 
+        let replacedEdges = graph.edges ?? [];
+        if (action === "replace") {
+            replacedEdges = replacedEdges.filter((e) => e.field !== field.name);
+        }
+
+        graph.records = uniqBy([...graph.records, ...recordsToInsert], (r) => r.id);
+        graph.edges = uniqBy([...replacedEdges, ...newEdges], (e) => e.target + e.field);
     }
 </script>
 
@@ -79,16 +100,14 @@
         </div>
     {/if}
 </div>
-{#if currentReferences.length > 0}
+{#if references.length > 0}
-    <Sortable sortableClass="mt-3" on:update={reorder}>
+    <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
-        {#each currentReferences as reference (reference.record.id)}
+        {#each references as reference (reference.id)}
-            <div class="mb-1">
+            <div class="col mb-3">
                 <PreviewCard
-                        record={reference.record}
+                        classes="h-100"
+                        record={reference}
                         hasDelete={true}
-                        editable={!!field?.data}
-                        {field}
-                        bind:edge={reference.edge}
                         on:remove={removeReference}
                 />
             </div>

front/js/svelte/records/elements/JSON.svelte

@@ -1,6 +1,6 @@
 <script>
-    import Codemirror from "../../../libs/Codemirror.svelte";
+    import Codemirror from "../../libs/Codemirror.svelte";
-    import { getErrorMessage } from "../form.js";
+    import { getErrorMessage } from "./errorMessage";
 
 
     export let value;

front/js/svelte/records/elements/Markdown.svelte

@@ -1,6 +1,6 @@
 <script>
-    import Codemirror from "../../../libs/CodemirrorMarkdown.svelte";
+    import Codemirror from "../../libs/CodemirrorMarkdown.svelte";
-    import { getErrorMessage } from "../form.js";
+    import { getErrorMessage } from "./errorMessage";
 
 
     export let value;

front/js/svelte/records/elements/Number.svelte

@@ -1,6 +1,6 @@
 <script>
     import Datalist from "./Datalist.svelte";
-    import { getErrorMessage } from "../form.js";
+    import {getErrorMessage} from "./errorMessage";
 
     export let field;
     export let value;

front/js/svelte/records/elements/Reference.svelte

@@ -1,8 +1,8 @@
 <script>
     import {getContext} from "svelte";
-    import {insertEdges} from "../form/references/reference.js";
+    import {insertEdges} from "./reference";
     import PreviewCard from "../PreviewCard.svelte";
-    import {getErrorMessage} from "../form/errorMessage.js";
+    import {getErrorMessage} from "./errorMessage";
     import {sortByField} from "../../edges/sortEdges";
     import ReferenceInlineButtons from "./ReferenceInlineButtons.svelte";
     import Sortable from "../../libs/Sortable.svelte";
@@ -14,7 +14,12 @@
     export let validationErrors;
     $: errorMessage = getErrorMessage(validationErrors, field.name);
 
-    $: currentReferences  = graph._children[field.name] ?? [];
+
+    $: references = graph.edges
+        .filter((edge) => edge.field === field.name)
+        .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) =>
         field.collections.includes(aschema.name)
@@ -28,7 +33,8 @@
     }
 
     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, field.name, references);
     }
 
     function insert(e) {
@@ -52,9 +58,9 @@
         on:save={insert}
     />
 </div>
-{#if currentReferences.length > 0}
+{#if references.length > 0}
     <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
-        {#each currentReferences as reference (reference.id)}
+        {#each references as reference (reference.id)}
             <div class="col mb-3">
                 <PreviewCard
                     classes="h-100"

front/js/svelte/records/elements/ReferenceInline.svelte

@@ -2,7 +2,7 @@
     import {getContext} from "svelte";
     import {uniqBy} from "lodash";
     import PreviewCardInline from "../PreviewCardInline.svelte";
-    import {getErrorMessage} from "../form/errorMessage.js";
+    import {getErrorMessage} from "./errorMessage";
     import {sortByField} from "../../edges/sortEdges";
     import ReferenceInlineButtons from "./ReferenceInlineButtons.svelte";
     import {flip} from "svelte/animate";
@@ -119,7 +119,7 @@
     }
 
     function move(e, from, to) {
-        graph.edges = sortByField(from, to, graph.edges, field.name);
+        graph.edges = sortByField(from, to, graph.edges, field.name, references);
     }
 </script>
 

front/js/svelte/records/elements/ReferenceInlineButtons.svelte

@@ -2,7 +2,7 @@
     import {createEventDispatcher, getContext} from "svelte";
     import Icon from "../../common/Icon.svelte";
     import InlineEdit from "../InlineEdit.svelte";
-    import BrowseModal from "../form/references/BrowseModal.svelte";
+    import BrowseModal from "./BrowseModal.svelte";
 
     const dispatch = createEventDispatcher();
     // export let field;

front/js/svelte/records/elements/ReferenceTable.svelte

@@ -1,13 +1,13 @@
 <script>
     import {getContext} from "svelte";
     import {previewTitle} from "../Preview";
-    import {getErrorMessage} from "../form/errorMessage.js";
+    import {getErrorMessage} from "./errorMessage";
     import {sortByField} from "../../edges/sortEdges";
     import ReferenceInlineButtons from "./ReferenceInlineButtons.svelte";
     import Sortable from "../../libs/Sortable.svelte";
     import RenderField from "../../content/RenderField.svelte";
     import Icon from "../../common/Icon.svelte";
-    import {insertEdges} from "../form/references/reference.js";
+    import {insertEdges} from "./reference.js";
 
     const channel = getContext("channel");
     export let field;
@@ -57,7 +57,7 @@
 
 
     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, field.name, references);
     }
 
 

front/js/svelte/records/elements/ReferenceTags.svelte

@@ -1,14 +1,8 @@
 <script>
     import {getContext} from "svelte";
-    import {uniqBy, debounce} from "lodash";
+    import {debounce} from "lodash";
-    import {previewTitle} from "../../Preview.js";
+    import {previewTitle} from "../Preview";
-    import {getErrorMessage} from "../errorMessage.js";
+    import {getErrorMessage} from "./errorMessage";
-    import {sortByField} from "../../../edges/sortEdges.js";
-    import ReferenceInlineButtons from "../../elements/ReferenceInlineButtons.svelte";
-    import Sortable from "../../../libs/Sortable.svelte";
-    import RenderField from "../../../content/RenderField.svelte";
-    import Icon from "../../../common/Icon.svelte";
-    import Datalist from "../fields/Datalist.svelte";
     import {insertEdges} from "./reference.js";
 
     const channel = getContext("channel");

front/js/svelte/records/elements/RichEditor.svelte

@@ -1,6 +1,6 @@
 <script>
-    import Tinymce from "../../../libs/Tinymce.svelte";
+    import Tinymce from "../../libs/Tinymce.svelte";
-    import { getErrorMessage } from "../form.js";
+    import {getErrorMessage} from "./errorMessage";
 
     export let value;
     export let field;

front/js/svelte/records/elements/Slug.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { getErrorMessage } from "../form.js";
+    import { getErrorMessage } from "./errorMessage";
     export let field;
     export let value;
     export let isCreateMode;

front/js/svelte/records/elements/Text.svelte

@@ -1,7 +1,7 @@
 <script>
     import Datalist from "./Datalist.svelte";
     import Selectlist from "./Selectlist.svelte";
-    import { getErrorMessage } from "../form.js";
+    import {getErrorMessage} from "./errorMessage";
 
     export let field;
     export let value;

front/js/svelte/records/elements/Textarea.svelte

@@ -1,6 +1,6 @@
 <script>
     import { onMount } from "svelte";
-    import { getErrorMessage } from "../form.js";
+    import { getErrorMessage } from "./errorMessage";
     export let field;
     export let value;
     export let isCreateMode;

front/js/svelte/records/elements/UUID.svelte

@@ -1,8 +1,8 @@
 <script>
     import { v4 as uuidv4 } from "uuid";
     import { getContext } from "svelte";
-    import Icon from "../../../common/Icon.svelte";
+    import Icon from "../../common/Icon.svelte";
-    import { getErrorMessage } from "../form.js";
+    import { getErrorMessage } from "./errorMessage";
     const channelurl = getContext("channelurl");
     export let validationErrors;
     $: errorMessage = getErrorMessage(validationErrors, field.name);

front/js/svelte/records/elements/Url.svelte

@@ -0,0 +1,30 @@
+<script>
+    import { uniqueId } from "lodash";
+    import { getContext } from "svelte";
+    const channelurl = getContext("channelurl");
+    export let field;
+    export let value;
+    export let schema;
+    let id = uniqueId();
+</script>
+
+<div class="mb-0">
+    <div class="d-flex justify-content-between">
+        <label for={id} class="form-label">{field.label}</label>
+        <a
+            class="text-decoration-none"
+            href="{channelurl}/schemas/{schema.name}/fields/edit/{field.name}"
+            ><code class="text-primary opacity-50">{field.name}</code></a
+        >
+    </div>
+    <input
+        type="url"
+        {id}
+        class="form-control"
+        bind:value
+        placeholder="https://www.example.com"
+    />
+    {#if field.help}
+        <small class=" text-primary  opacity-50">{field.help}</small>
+    {/if}
+</div>

front/js/svelte/records/elements/errorMessage.js

@@ -0,0 +1,5 @@
+export function getErrorMessage(validationErrors, fieldName) {
+    return validationErrors && validationErrors[fieldName]
+        ? validationErrors[fieldName].message
+        : null;
+}

front/js/svelte/records/elements/reference.js

@@ -0,0 +1,24 @@
+import {uniqBy} from "lodash";
+
+export function insertEdges(graph, sourceRecord, targetRecords, fieldName, action = "") {
+    let newEdges = targetRecords.map((r) => {
+        return {
+            target: r.id,
+            source: sourceRecord.id,
+            sourceSchema: sourceRecord.schema,
+            targetSchema: r.schema,
+            field: fieldName,
+            depth: 1,
+            rank: ""
+        };
+    });
+
+    let replacedEdges = graph.edges;
+    if (action === "replace") {
+        replacedEdges = replacedEdges.filter((edge) => edge.field !== field.name);
+    }
+
+    graph.records = uniqBy([...graph.records, ...targetRecords], (r) => r.id);
+    graph.edges = uniqBy([...replacedEdges, ...newEdges], (edge) =>  edge.source +  edge.target + edge.field + edge.depth);
+    return graph;
+}

front/js/svelte/records/form/Form.svelte

@@ -1,119 +0,0 @@
-<script>
-    import {afterUpdate, createEventDispatcher, onMount} from "svelte";
-    import {isEqual} from "../deepEquality.js";
-    import ContentTabs from "../ContentTabs.svelte"
-    import ErrorAlert from "../../common/ErrorAlert.svelte"
-    import FormField from "./FormField.svelte";
-    import ReferenceField from "./ReferenceField.svelte";
-    import SaveButtons from "./SaveButtons.svelte";
-    import EditHeader from "../EditHeader.svelte";
-    const dispatch = createEventDispatcher();
-
-    function save() {
-        dispatch("save", {
-            status: status
-        });
-    }
-
-    export let title = null;
-    export let schema;
-    export let record;
-    export let data;
-    export let status = null;
-    export let graph;
-    export let isCreateMode;
-    let originalContent;
-    let activeContentTab = "";
-    $: hasUnsavedData = false;
-    export let validationErrors = null;
-    export let errorMessage = validationErrors
-        ? `Record submission failed. ${
-            Object.entries(validationErrors).length
-        } error(s)`
-        : null;
-
-    export function setOriginalData() {
-        originalContent = {
-            data: JSON.parse(JSON.stringify(data)),
-            status: status,
-            edges: JSON.parse(JSON.stringify(graph?.map(r => r.edge.target+r.edge.field) ?? [])).sort(),
-        };
-        hasUnsavedData = checkUnsavedData();
-
-    }
-
-    onMount(() => {
-        setOriginalData()
-    })
-
-    afterUpdate(() => {
-        hasUnsavedData = checkUnsavedData();
-    });
-
-    function beforeUnload(e) {
-        // Cancel the event as stated by the standard.
-        // e.preventDefault();
-        // console.log(hasUnsavedData);
-        if (hasUnsavedData) {
-            return (e.returnValue =
-                "You have unsaved changes. Are you sure you want to exit?");
-        }
-        // Chrome requires returnValue to be set.
-        // e.returnValue = "";
-        delete e["returnValue"];
-        // more compatibility
-        // return true;
-        return "...";
-    }
-
-    function checkUnsavedData() {
-
-        if (isCreateMode) {
-            return false;
-        }
-
-        return !isEqual(originalContent, {
-            data: data,
-            status: status,
-            edges: graph?.map(r => r.edge.target+r.edge.field).sort() ?? [],
-        });
-    }
-</script>
-
-<svelte:window on:beforeunload={beforeUnload}/>
-
-<div>
-    <EditHeader {schema} {record} {isCreateMode} {title}/>
-
-    <div class=" mt-4" style="margin-bottom:150px">
-        <SaveButtons on:save={save} bind:status {hasUnsavedData} {isCreateMode}/>
-        <ErrorAlert message={errorMessage}/>
-        <ContentTabs
-                {schema}
-                bind:active={activeContentTab}
-        />
-
-        <!-- <fieldset disabled="disabled"> -->
-        {#each schema.fields as field (field.name)}
-            {#if activeContentTab === field.group}
-                {#if ["reference", "file"].includes(field.info.name)}
-                    <ReferenceField
-                            bind:graph={graph}
-                            {field}
-                            {record}
-                    />
-                {:else}
-                    <FormField
-                            bind:data={data}
-                            {field}
-                            {validationErrors}
-                            {isCreateMode}
-
-                    />
-                {/if}
-            {/if}
-        {/each}
-        <!-- </fieldset> -->
-
-    </div>
-</div>

front/js/svelte/records/form/FormField.svelte

@@ -1,51 +0,0 @@
-<script>
-    import Text from "./fields/Text.svelte";
-    import Slug from "./fields/Slug.svelte";
-    import Color from "./fields/Color.svelte";
-    import Checkbox from "./fields/Checkbox.svelte";
-    import Number from "./fields/Number.svelte";
-    import Date from "./fields/Date.svelte";
-    import UUID from "./fields/UUID.svelte";
-    import Textarea from "./fields/Textarea.svelte";
-    import Datetime from "./fields/Datetime.svelte";
-    import RichEditor from "./fields/RichEditor.svelte";
-    import Json from "./fields/JSON.svelte";
-    import Markdown from "./fields/Markdown.svelte";
-    import FieldHeader from "./FieldHeader.svelte";
-
-    const formElements = {
-        text: Text,
-        slug: Slug,
-        textarea: Textarea,
-        rich: RichEditor,
-        color: Color,
-        checkbox: Checkbox,
-        number: Number,
-        date: Date,
-        datetime: Datetime,
-        uuid: UUID,
-        json: Json,
-        markdown: Markdown,
-    };
-
-    export let field;
-    export let data;
-    export let validationErrors;
-    export let isCreateMode;
-
-    let formElement = formElements[field.info.name];
-    const uniqueId = `field-${field.name}-id`;
-</script>
-
-<div class="card editor-field">
-    <FieldHeader {field} id={uniqueId}/>
-
-    <svelte:component
-            this={formElement}
-            bind:value={data[field.name]}
-            {field}
-            {validationErrors}
-            {isCreateMode}
-            id={uniqueId}
-    />
-</div>

front/js/svelte/records/form/ReferenceField.svelte

@@ -1,17 +0,0 @@
-<script>
-
-    import File from "./references/Reference.svelte";
-    import FieldHeader from "./FieldHeader.svelte";
-
-    export let field;
-    export let record;
-    export let graph;
-    // export let validationErrors;
-    // export let isCreateMode;
-    const id = `field-${field.name}-${record.id}`;
-</script>
-
-<div class="card editor-field">
-    <FieldHeader {field} {id}/>
-    <File bind:graph {record} {field} />
-</div>

front/js/svelte/records/form/SaveButtons.svelte

@@ -1,47 +0,0 @@
-<script>
-    import StatusSelect from "./StatusSelect.svelte"
-    import {createEventDispatcher} from "svelte";
-    export let status;
-    export let isCreateMode;
-    export let hasUnsavedData;
-
-    const dispatch = createEventDispatcher();
-    function save(){
-        dispatch("save");
-    }
-</script>
-
-<div class="record-status-bar">
-    <div
-            class="d-flex mt-3 mb-3  align-items-center justify-content-between"
-    >
-
-        <StatusSelect bind:status={status}/>
-        {#if isCreateMode}
-            <button
-                    class="ms-2 btn btn-primary btn-spinner"
-                    on:click={save}
-            >
-                            <span
-                                    class="spinner-border spinner-border-sm"
-                                    role="status"
-                                    aria-hidden="true"
-                            />
-                Create
-            </button>
-        {:else if hasUnsavedData}
-            <button
-                    type="button"
-                    class="ms-2 btn btn-primary btn-spinner"
-                    on:click={save}
-            >
-                            <span
-                                    class="spinner-border spinner-border-sm"
-                                    role="status"
-                                    aria-hidden="true"
-                            />
-                Save
-            </button>
-        {/if}
-    </div>
-</div>

front/js/svelte/records/form/StatusSelect.svelte

@@ -1,64 +0,0 @@
-<script>
-    import {getStatus, getStatusList} from "../StatusText.js";
-    import SwitchButton from "../../common/SwitchButton.svelte";
-
-    export let status = "draft";
-    let dropdown;
-    $: currentStatus = getStatus(status);
-    const statusList = Object.values(getStatusList());
-
-    function updateStatus(e, statusValue) {
-        // e.preventDefault();
-        status = statusValue;
-        dropdown.click();
-    }
-
-    function switchStatus(e){
-        console.log("Asf")
-        if(currentStatus.value === "draft"){
-            status = "published"
-        }
-
-        if(currentStatus.value === "published"){
-            status = "draft"
-        }
-    }
-</script>
-{#if status}
-    <!-- Example split danger button -->
-    <div class="form-check form-switch" >
-        <input on:click={switchStatus} class="form-check-input" type="checkbox" role="switch" id="record-status-switch" checked={status === "published"}>
-        <label class="form-check-label" for=record-status-switch>{currentStatus.text}</label>
-    </div>
-
-    <!--    <div class="d-flex justify-content-between">-->
-<!--        <div class="btn-group dropup">-->
-<!--            <button type="button" class="btn btn-{currentStatus.bg}"-->
-<!--            >{currentStatus.text}</button-->
-<!--            >-->
-<!--            <button-->
-<!--                    bind:this={dropdown}-->
-<!--                    type="button"-->
-<!--                    class="btn btn-{currentStatus.bg} dropdown-toggle dropdown-toggle-split"-->
-<!--                    data-bs-toggle="dropdown"-->
-<!--                    aria-expanded="false"-->
-<!--            >-->
-<!--                <span class="visually-hidden">Toggle Dropdown</span>-->
-<!--            </button>-->
-<!--            <div class="dropdown-menu">-->
-<!--                <div class="dropdown-header">Change status to</div>-->
-<!--                {#each statusList as astatus}-->
-<!--                    {#if astatus.value !== status}-->
-<!--                        <button-->
-<!--                                type="button"-->
-<!--                                class="dropdown-item my-2 rounded w-100 bg-{astatus.bg} text-{astatus.color}"-->
-<!--                                on:click={(e) => updateStatus(e, astatus.value)}-->
-<!--                        >-->
-<!--                            {astatus.text}-->
-<!--                        </button>-->
-<!--                    {/if}-->
-<!--                {/each}-->
-<!--            </div>-->
-<!--        </div>-->
-<!--    </div>-->
-{/if}

front/js/svelte/records/form/form.js

@@ -1,3 +0,0 @@
-export function getErrorMessage(validationErrors, fieldName) {
-    return validationErrors?.find((e) => e.fieldName ===  fieldName)?.message;
-}

front/js/svelte/records/form/references/EdgeData.svelte

@@ -1,75 +0,0 @@
-<script>
-
-    import {getContext} from "svelte";
-    import Form from "../Form.svelte";
-    import OffCanvas from "../../../common/OffCanvas.svelte";
-    import PreviewCard from "../../PreviewCard.svelte";
-    import axios from "axios";
-
-    export let field;
-    export let record;
-    export let edge;
-    let form;
-    let offCanvas;
-    $: validationErrors = null;
-    $: errorMessage = null;
-    const channel = getContext("channel");
-    let schema  = channel.schemas.find(s => s.name === field.data);
-
-    export function openEdit() {
-        offCanvas.show();
-    }
-
-    function save(e){
-        e.preventDefault();
-        console.log("SAVE: Attempt");
-        validationErrors = null;
-        return new Promise(function (resolve, reject) {
-            axios
-                .put(channel.lucentUrl + "/edges", edge)
-                .then(function (response) {
-                    console.log("SAVE: SAVED");
-                    edge = response.data;
-                    form.setOriginalData();
-                    resolve(null);
-                    offCanvas.hide();
-                })
-                .catch(function (error) {
-                    // setOriginalContent();
-                    if (error.response) {
-                        if (typeof error.response.data.error === "string") {
-                            errorMessage = error.response.data.error;
-                        } else {
-                            validationErrors = error.response.data.error;
-                            console.log(validationErrors)
-                        }
-                    }
-                    resolve(null);
-
-                });
-        });
-
-    }
-</script>
-
-<OffCanvas bind:this={offCanvas}>
-    <div class="p-4">
-        <PreviewCard
-                {record}
-                hasDelete={false}
-                editable={false}
-                {field}
-        />
-    </div>
-
-    <Form
-            bind:this={form}
-            data={edge.data}
-            title={"Relational Data for " + field.info.label}
-            {schema}
-            isCreateMode={false}
-            {errorMessage}
-            {validationErrors}
-            on:save={save}
-    />
-</OffCanvas>

front/js/svelte/records/form/references/reference.js

@@ -1,24 +0,0 @@
-import {uniqBy} from "lodash";
-
-export function insertEdges(existingRecords, sourceRecord, targetRecords, fieldName, action = "") {
-    let newQueryRecords = targetRecords.map((r) => {
-        return {
-            record: r,
-            edge: {
-                target: r.id,
-                source: sourceRecord.id,
-                sourceSchema: sourceRecord.schema,
-                targetSchema: r.schema,
-                field: fieldName,
-                data: {},
-                rank: ""
-            }
-
-        };
-    });
-    if (action === "replace") {
-        existingRecords = existingRecords.filter(queryRecord => queryRecord.edge.field !== fieldName)
-    }
-    existingRecords = [...existingRecords ?? [], ...newQueryRecords];
-    return uniqBy(existingRecords, (r) => r.record.id);
-}

front/package-lock.json

@@ -5,8 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
-                "@codemirror/lang-markdown": "^6.2.2",
+                "@codemirror/lang-markdown": "^6.2.2"
-                "fast-equals": "^5.0.1"
             },
             "devDependencies": {
                 "@codemirror/commands": "^6.1.2",
@@ -854,14 +853,6 @@
                 "node": ">=12"
             }
         },
-        "node_modules/fast-equals": {
-            "version": "5.0.1",
-            "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
-            "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==",
-            "engines": {
-                "node": ">=6.0.0"
-            }
-        },
         "node_modules/fill-range": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",

front/package.json

@@ -29,7 +29,6 @@
         "vite": "^3.2.3"
     },
     "dependencies": {
-        "@codemirror/lang-markdown": "^6.2.2",
+        "@codemirror/lang-markdown": "^6.2.2"
-        "fast-equals": "^5.0.1"
     }
 }

front/sass/_nav.scss

@@ -2,73 +2,15 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-  //background-color: rgba(255,255,255,1);
+    background-color: rgba(255,255,255,1);
     margin-bottom:0px ;
-
     .nav-item{
         padding:16px 0;
         margin: 0 16px;
         color: $primary;
 
     }
-
     a{
         text-decoration: none;
     }
-
-
-}
-
-
-.accordion {
-  border: none;
-}
-
-.accordion-item {
-  border: none;
-  background: transparent;
-}
-
-.accordion-button:not(.collapsed) {
-  box-shadow: none;
-}
-
-
-.offcanvas-body {
-  padding: 0;
-  overflow: hidden;
-}
-
-.accordion-button:not(.collapsed) {
-  background: rgba(var(--lucent-bg), 0.2) !important;
-  font-weight: bold;
-}
-
-.accordion .list-group-item {
-  margin-left: 20px;
-  border-left: 2px solid rgba(var(--lucent-bg-dark), 0.2);
-  border-top: none;
-  border-bottom: none;
-}
-
-.accordion .list-group-item:hover {
-  background: rgba(var(--lucent-bg-dark), 0.1) !important;
-}
-
-.accordion .list-group-item.active {
-  border-left: 2px solid rgba(var(--lucent-bg-dark), 0.8);
-  border-top: none;
-  border-bottom: none;
-  background: rgba(var(--lucent-bg-dark), 0.1) !important;
-  color: var(--bs-primary);
-}
-
-.sidebar-logo{
-  padding: 5px 20px;
-  border-bottom:  1px solid rgba(var(--lucent-bg-dark), 0.2);
-}
-.sidebar-logo a{
-  text-decoration: none;
-  font-size: 25px;
-  color: var(--bs-primary);
 }

front/sass/_record-status-bar.scss

@@ -1,8 +0,0 @@
-.record-status-bar {
-  //position: fixed;
-  //bottom: 0;
-  //left: 0px;
-  //width: 100%;
-  //background: rgb(var(--lucent-bg-dark)); // old 206, 223, 210
-  //z-index: 1050;
-}

front/sass/app.scss

@@ -3,21 +3,86 @@
 /* SCSS HEX */
 $green-crayola: #0dab76ff;
 $green-pigment: #139a43ff;
-$lincoln-green: #3e5d8f;
+$lincoln-green: #0b5d1eff;
 $forest-green-traditional: #053b06ff;
 $black: #000000ff;
 
-:root {
+/* SCSS Gradient */
-    /* #f0f0f0 in decimal RGB */
+$gradient-top: linear-gradient(
-    --lucent-bg:216, 223, 233; //old 11, 93, 30
+    0deg,
-    --lucent-bg-dark:34, 44, 60; //old 11, 93, 30
+    #0dab76ff,
-}
+    #139a43ff,
-
+    #0b5d1eff,
+    #053b06ff,
+    #000000ff
+);
+$gradient-right: linear-gradient(
+    90deg,
+    #0dab76ff,
+    #139a43ff,
+    #0b5d1eff,
+    #053b06ff,
+    #000000ff
+);
+$gradient-bottom: linear-gradient(
+    180deg,
+    #0dab76ff,
+    #139a43ff,
+    #0b5d1eff,
+    #053b06ff,
+    #000000ff
+);
+$gradient-left: linear-gradient(
+    270deg,
+    #0dab76ff,
+    #139a43ff,
+    #0b5d1eff,
+    #053b06ff,
+    #000000ff
+);
+$gradient-top-right: linear-gradient(
+    45deg,
+    #0dab76ff,
+    #139a43ff,
+    #0b5d1eff,
+    #053b06ff,
+    #000000ff
+);
+$gradient-bottom-right: linear-gradient(
+    135deg,
+    #0dab76ff,
+    #139a43ff,
+    #0b5d1eff,
+    #053b06ff,
+    #000000ff
+);
+$gradient-top-left: linear-gradient(
+    225deg,
+    #0dab76ff,
+    #139a43ff,
+    #0b5d1eff,
+    #053b06ff,
+    #000000ff
+);
+$gradient-bottom-left: linear-gradient(
+    315deg,
+    #0dab76ff,
+    #139a43ff,
+    #0b5d1eff,
+    #053b06ff,
+    #000000ff
+);
+$gradient-radial: radial-gradient(
+    #0dab76ff,
+    #139a43ff,
+    #0b5d1eff,
+    #053b06ff,
+    #000000ff
+);
 
 $primary: $lincoln-green;
 $table-striped-bg-factor: 0.03;
-$dropdown-bg: rgb(var(--lucent-bg)); //rgb(206, 223, 210)
+$dropdown-bg: rgb(206, 223, 210);
-
 
 @import "../node_modules/bootstrap/scss/bootstrap";
 @import "./sidebar";
@@ -31,9 +96,6 @@ $dropdown-bg: rgb(var(--lucent-bg)); //rgb(206, 223, 210)
 @import "./nav";
 @import "./files";
 @import "./revisions";
-@import "./record-status-bar";
-
-
 
 body {
     background-color: rgba(11, 93, 30, 0.04);

package-lock.json

@@ -1,6 +0,0 @@
-{
-  "name": "lucent-package",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

src/Account/AccountService.php

@@ -3,7 +3,7 @@
 namespace Lucent\Account;
 
 use Lucent\Channel\ChannelService;
-use Lucent\Support\Collection;
+use Lucent\Primitive\Collection;
 
 readonly class AccountService
 {

src/Account/UserRepo.php

@@ -4,8 +4,8 @@ namespace Lucent\Account;
 
 use Carbon\Carbon;
 use Illuminate\Support\Facades\DB;
-use Lucent\Support\Collection;
+use Lucent\Primitive\Collection;
-use Lucent\Support\Option\Option;
+use PhpOption\Option;
 
 class UserRepo
 {

src/ArrayContainer.php

@@ -14,7 +14,10 @@ class ArrayContainer implements ArrayAccess, JsonSerializable
     {
     }
 
-
+    public function get(string $key, mixed $default = null): mixed
+    {
+        return $this->data[$key] ?? $default;
+    }
 
     public function offsetSet($offset, $value): void
     {

src/Channel/Channel.php

@@ -2,8 +2,8 @@
 
 namespace Lucent\Channel;
 
-use Lucent\Schema\Schema\Schema;
+use Lucent\Primitive\Collection;
-use Lucent\Support\Collection;
+use Lucent\Schema\Schema;
 
 final class Channel
 {

src/Channel/ChannelService.php

@@ -3,10 +3,10 @@
 namespace Lucent\Channel;
 
 
-use Lucent\Schema\Schema\Schema;
+use Lucent\Primitive\Collection;
+use Lucent\Schema\Schema;
 use Lucent\Schema\SchemaService;
-use Lucent\Support\Collection;
+use PhpOption\Option;
-use Lucent\Support\Option\Option;
 
 final class ChannelService
 {

src/Commands/CompileSchemas.php

@@ -1,12 +1,12 @@
 <?php
 
-namespace Lucent\Schema\Commands;
+namespace Lucent\Commands;
 
 use DirectoryIterator;
 use Illuminate\Console\Command;
-use Lucent\Schema\Schema\Schema;
+use Lucent\Schema\Schema;
-use Lucent\Schema\Schema\Type;
 use Lucent\Schema\SchemaService;
+use Lucent\Schema\Type;
 
 class CompileSchemas extends Command
 {

src/Commands/RebuildThumbnails.php

@@ -7,8 +7,8 @@ use Exception;
 use Illuminate\Console\Command;
 use Intervention\Image\ImageManager;
 use Lucent\Channel\ChannelService;
-use Lucent\Schema\Schema\Schema;
+use Lucent\Schema\Schema;
-use Lucent\Schema\Schema\Type;
+use Lucent\Schema\Type;
 
 class RebuildThumbnails extends Command
 {

src/Commands/RemoveOrphanEdges.php

@@ -3,7 +3,7 @@
 namespace Lucent\Commands;
 
 use Illuminate\Console\Command;
-use Lucent\Graph\Edge\EdgeService;
+use Lucent\Edge\EdgeService;
 use Lucent\Query\Query;
 
 class RemoveOrphanEdges extends Command

src/Config/main.php

@@ -3,8 +3,6 @@
 return [
     "env" => env("LUCENT_ENV",  "production"),
     "schemas_path" => env("LUCENT_SCHEMAS_PATH",  "app/Lucent"),
-    "json_schemas_path" => env("LUCENT_JSON_SCHEMA_PATH", "json_schema"),
-    "sidebar_path" => env("LUCENT_SIDEBAR_PATH", "app/Lucent"),
     "database" => env('LUCENT_DB_CONNECTION', env('DB_CONNECTION',"sqlite")),
     "name" => env("LUCENT_NAME",  "Lucent"),
     "url" => env("LUCENT_URL", env('APP_URL')),

src/Database/migrations/07_EdgeData.php

@@ -1,32 +0,0 @@
-<?php
-
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\Schema;
-
-return new class extends Migration {
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::table('edges', function (Blueprint $table) {
-            $table->jsonb('data')->nullable();
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::table('records', function (Blueprint $table) {
-
-            $table->dropColumn("data");
-        });
-    }
-};

src/Database/migrations/08_EdgeRevisions.php

@@ -1,33 +0,0 @@
-<?php
-
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\Schema;
-
-return new class extends Migration {
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::table('revisions', function (Blueprint $table) {
-            $table->dropColumn("schema");
-            $table->dropColumn("_file");
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::table('revisions', function (Blueprint $table) {
-            $table->string('schema');
-            $table->jsonb('_file');
-        });
-    }
-};

src/Database/migrations/2023_01_20_162322_records.php

@@ -18,7 +18,7 @@ return new class extends Migration {
             $table->string('status');
             $table->jsonb('data');
             $table->jsonb('_sys');
-            $table->jsonb('_file')->nullable();
+            $table->jsonb('_file');
 
             $table->index(['schema', 'status']);
         });

src/Database/migrations/2023_03_02_152122_revisions.php

@@ -21,7 +21,6 @@ return new class extends Migration {
             $table->jsonb('_file');
             $table->jsonb('_edges');
         });
-
     }
 
     /**

src/Edge/Edge.php

@@ -0,0 +1,61 @@
+<?php
+
+namespace Lucent\Edge;
+
+use Lucent\LucentException;
+use Lucent\Validator\Validator as LucentValidator;
+
+final class Edge
+{
+    /**
+     * @throws LucentException
+     */
+    public function __construct(
+
+        public string $source,
+        public string $target,
+        public string $sourceSchema,
+        public string $targetSchema,
+        public string $field,
+        public string $rank = "a",
+        public int    $depth = 0,
+    )
+    {
+
+
+        LucentValidator::single("source", $source, "required|uuid");
+        LucentValidator::single("target", $target, "required|uuid");
+    }
+
+    public function equal(Edge $edge): bool
+    {
+        return $this->targetSchema === $edge->targetSchema && $this->field === $edge->field && $this->target === $edge->target && $this->source === $edge->source;
+    }
+
+    public function toArray(): array
+    {
+        return json_decode(json_encode($this), true);
+    }
+
+    public function toDB(): array
+    {
+        $data = $this->toArray();
+        unset($data["depth"]);
+        return $data;
+    }
+
+    public static function fromArray(array $data): Edge
+    {
+
+        return new Edge(
+
+            source: data_get($data, 'source'),
+            target: data_get($data, 'target'),
+            sourceSchema: data_get($data, 'sourceSchema'),
+            targetSchema: data_get($data, 'targetSchema'),
+            field: data_get($data, 'field'),
+            rank: data_get($data, 'rank'),
+            depth: data_get($data, 'depth', 0),
+        );
+    }
+}

src/Edge/EdgeCollection.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace Lucent\Edge;
+
+use Illuminate\Support\Collection;
+
+/**
+ * @extends \Illuminate\Support\Collection<int|string, Edge>
+ */
+final class EdgeCollection extends Collection
+{
+
+    public function __construct(
+        Edge ...$array
+    ) {
+        parent::__construct($array);
+    }
+
+    /**
+     * @return Edge[]
+     **/
+    public function toArray(): array
+    {
+        return collect($this)->values()->toArray();
+    }
+
+    public static function fromArray(array $data): EdgeCollection
+    {
+        $edges = array_map([Edge::class, 'fromArray'], $data);
+        return new EdgeCollection(...$edges);
+    }
+
+  
+}

src/Edge/EdgeRepo.php

@@ -0,0 +1,68 @@
+<?php namespace Lucent\Edge;
+
+use Illuminate\Support\Facades\DB;
+use Lucent\LucentException;
+use PDOException;
+use stdClass;
+
+class EdgeRepo
+{
+
+    public function __construct()
+    {
+    }
+
+    public function insert(Edge $edge): void
+    {
+        try {
+            DB::table("edges")->insert($edge->toDB());
+        } catch (PDOException $e) {
+            if ($e->getCode() == 23505) {
+                throw new LucentException("Edge already exists");
+            }
+            throw $e;
+        }
+
+    }
+
+    public function update(string $from, EdgeCollection $edges): void
+    {
+        $edgesDB = collect($edges)->map(fn($e) => $e->toDB())->toArray();
+        DB::table("edges")->where("source", $from)->delete();
+        DB::table("edges")->insert($edgesDB);
+    }
+
+
+    public function findAll(): EdgeCollection
+    {
+        $edges = DB::table("edges")->get();
+        return new EdgeCollection(...$edges->map([$this, 'mapEdge'])->toArray());
+    }
+
+    public function mapEdge(stdClass $edge): Edge
+    {
+
+        return new Edge(
+            source: $edge->source,
+            target: $edge->target,
+            sourceSchema: $edge->sourceSchema,
+            targetSchema: $edge->targetSchema,
+            field: $edge->field,
+            rank: $edge->rank,
+            depth: $edge->depth ?? 0
+        );
+
+    }
+
+    public function remove(Edge $edge): void
+    {
+        DB::table("edges")
+            ->where("source", $edge->source)
+            ->where("target", $edge->target)
+            ->where("sourceSchema", $edge->sourceSchema)
+            ->where("targetSchema", $edge->targetSchema)
+            ->where("field", $edge->field)
+            ->delete();
+    }
+
+}

src/Edge/EdgeService.php

@@ -0,0 +1,53 @@
+<?php namespace Lucent\Edge;
+
+use Lucent\LucentException;
+
+class EdgeService
+{
+    public function __construct(public EdgeRepo $edgeRepo)
+    {
+    }
+
+    /**
+     * @throws LucentException
+     */
+    public function create(
+        string $source,
+        string $target,
+        string $sourceSchema,
+        string $targetSchema,
+        string $field,
+        string $rank,
+    ): Edge
+    {
+
+
+        $edge = new Edge(
+
+            source: $source,
+            target: $target,
+            sourceSchema: $sourceSchema,
+            targetSchema: $targetSchema,
+            field: $field,
+            rank: $rank,
+        );
+        $this->edgeRepo->insert($edge);
+        return $edge;
+    }
+
+    public function update(string $from, EdgeCollection $edges): void
+    {
+        $this->edgeRepo->update($from, $edges);
+    }
+
+    public function findAll(): EdgeCollection
+    {
+        return $this->edgeRepo->findAll();
+    }
+
+    public function remove(Edge $edge): void
+    {
+        $this->edgeRepo->remove($edge);
+    }
+
+}

src/File/FileService.php

@@ -4,12 +4,11 @@ namespace Lucent\File;
 
 use Illuminate\Http\UploadedFile;
 use Lucent\Channel\ChannelService;
-use Lucent\Graph\Record\FileInfo;
-use Lucent\Graph\Record\QueryRecord;
 use Lucent\LucentException;
-use Lucent\Schema\Schema\Schema;
+use Lucent\Record\File;
-use Lucent\Schema\Schema\Type;
+use Lucent\Record\QueryRecord;
-use Lucent\Support\Result\Result;
+use Lucent\Schema\Schema;
+use Lucent\Schema\Type;
 
 class FileService
 {
@@ -25,15 +24,6 @@ class FileService
         return $this->channelService->channel->url. "/storage/".$file->_file->path;
     }
 
-    /**
-     * @param Schema $schema
-     * @param string $uploadFromUrl
-     * @return Result<FileInfo|string>
-     */
-    public function createFromUrl(Schema $schema, string $uploadFromUrl): Result{
-
-    }
-
     /**
      * @throws LucentException
      */
@@ -58,7 +48,7 @@ class FileService
         }
 
         return new FileUploadResult(
-            recordFile: FileInfo::fromArray($file), duplicateId: "", isDuplicate: false
+            recordFile: File::fromArray($file), duplicateId: "", isDuplicate: false
         );
     }
 

src/File/FileUploadResult.php

@@ -2,13 +2,13 @@
 
 namespace Lucent\File;
 
-use Lucent\Graph\Record\FileInfo;
+use Lucent\Record\File;
 
 class FileUploadResult
 {
 
     public function __construct(
-        public ?FileInfo $recordFile,
+        public ?File  $recordFile,
         public string $duplicateId,
         public bool   $isDuplicate,
     )

src/File/ImageService.php

@@ -6,7 +6,7 @@ use Exception;
 use Illuminate\Log\Logger;
 use Intervention\Image\ImageManager;
 use Lucent\Channel\ChannelService;
-use Lucent\Graph\Record\QueryRecord;
+use Lucent\Record\QueryRecord;
 
 class ImageService
 {