edit form refactor

front/js/svelte/common/OffCanvas.svelte

@@ -1,9 +1,8 @@
 <script>
 
-    import {onMount} from "svelte";
+    import {onDestroy, onMount} from "svelte";
     import offcanvas from "bootstrap/js/src/offcanvas.js";
     export let title = "";
-    let isHidden = true;
     let offcanvasEl;
     let offcanvasInstance;
 
@@ -14,13 +13,15 @@
         offcanvasInstance = new offcanvas(offcanvasEl);
     });
 
+
+
     export function hide(e) {
         e.preventDefault();
         offcanvasInstance.hide();
     }
 </script>
 
-<div bind:this={offcanvasEl} class="offcanvas  offcanvas-end"  data-bs-backdrop="static" tabindex="-1"
+<div bind:this={offcanvasEl} class="offcanvas  offcanvas-end"  tabindex="-1"
      aria-labelledby="offcanvasEditContent">
     <div class="offcanvas-header">
         <h5 class="offcanvas-title">{title}</h5>

front/js/svelte/records/Edit.svelte

@@ -20,7 +20,7 @@
 
     function save(e) {
         e.preventDefault();
-
+        let status = e.detail.status
         console.log("SAVE: Attempt");
         validationErrors = null;
         return new Promise(function (resolve, reject) {
@@ -37,7 +37,7 @@
                     id: record.id,
                     data: record.data,
                     edges: replaceEdges,
-                    status: record.status,
+                    status: status,
                     isCreateMode: isCreateMode,
                 })
                 .then(function (response) {

front/js/svelte/records/PreviewCard.svelte

@@ -32,55 +32,68 @@
 
     }
 </script>
+<div class="d-flex gap-2">
+    {#if editable}
+        <div
+                class="card mb-2 bg-light w-50 "
+                style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
+        >
+            <div class="card-body">
+                Edge Data
+                <div class="position-absolute d-flex end-0" style="top:5px">
+                    <button
+                            class="trash-button  text-dark btn btn-sm btn-link"
+                            on:click={edit}
+                    >
+                        <Icon icon="pencil"/>
+                    </button>
+                </div>
+            </div>
+        </div>
 
-<div
+        <EdgeData bind:this={edgeData} {field} {edge}/>
+    {/if}
 
-        class="card mb-2 bg-light  {classes}"
-        style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
->
-    <div class="card-body">
-        <Preview {record} type="card"/>
-        {#if editable}
-            <EdgeData bind:this={edgeData} {field} {edge}/>
-        {/if}
-        <!--        <div class="overflow-hidden">-->
-        <!--            <a-->
-        <!--                class="title-link m-0 fs-5 text-decoration-none text-dark d-block"-->
-        <!--                href="{channel.lucentUrl}/records/{record.id}"-->
-        <!--                title={cardTitle}-->
-        <!--            >-->
-        <!--                {cardTitle}-->
-        <!--            </a>-->
-        <!--            <small class="text-muted">-->
-        <!--                {schema.label}-->
-        <!--            </small>-->
-        <!--            <small class="text-muted">-->
-        <!--                {#if record.status === "draft"}-->
-        <!--                    <Status status={record.status} />-->
-        <!--                {/if}-->
-        <!--            </small>-->
-        <!--        </div>-->
-    </div>
+    <div
+            class="card mb-2 bg-light  w-100 {classes}"
+            style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
+    >
+        <div class="card-body">
+
+            <Preview {record} type="card"/>
+
+            <!--        <div class="overflow-hidden">-->
+            <!--            <a-->
+            <!--                class="title-link m-0 fs-5 text-decoration-none text-dark d-block"-->
+            <!--                href="{channel.lucentUrl}/records/{record.id}"-->
+            <!--                title={cardTitle}-->
+            <!--            >-->
+            <!--                {cardTitle}-->
+            <!--            </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">
 
-    {#if hasDelete}
-        <div class="position-absolute d-flex end-0" style="top:5px">
-            {#if editable}
                 <button
                         class="trash-button  text-dark btn btn-sm btn-link"
-                        on:click={edit}
+                        on:click={remove}
                 >
-                    <Icon icon="pencil"/>
+                    <Icon icon="trash-can"/>
                 </button>
-            {/if}
-            <button
-                    class="trash-button  text-dark btn btn-sm btn-link"
-                    on:click={remove}
-            >
-                <Icon icon="trash-can"/>
-            </button>
 
-        </div>
-    {/if}
+            </div>
+        {/if}
+    </div>
 </div>
 
 <style>

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

@@ -1,5 +1,5 @@
 <script>
-    import {afterUpdate, createEventDispatcher,  onMount} from "svelte";
+    import {afterUpdate, createEventDispatcher, onMount} from "svelte";
     import {isEqual} from "../deepEquality.js";
     import ContentTabs from "../ContentTabs.svelte"
     import ErrorAlert from "../../common/ErrorAlert.svelte"
@@ -9,8 +9,11 @@
     import EditHeader from "../EditHeader.svelte";
 
     const dispatch = createEventDispatcher();
-     function save(){
-        dispatch("save");
+
+    function save() {
+        dispatch("save", {
+            status: status
+        });
 
     }
 
@@ -32,7 +35,7 @@
         : null;
 
 
-    export function setOriginalData(){
+    export function setOriginalData() {
         originalContent = {
             data: JSON.parse(JSON.stringify(data)),
             status: status,
@@ -42,7 +45,7 @@
 
     }
 
-    onMount(()=>{
+    onMount(() => {
         setOriginalData()
     })
 
@@ -85,11 +88,11 @@
 
 <svelte:window on:beforeunload={beforeUnload}/>
 
-<div >
+<div>
     <EditHeader {schema} {record} {isCreateMode} {title}/>
 
     <div class=" mt-4" style="margin-bottom:150px">
-        <SaveButtons on:save={save} status={status} {hasUnsavedData} />
+        <SaveButtons on:save={save} bind:status {hasUnsavedData} {isCreateMode}/>
         <ErrorAlert message={errorMessage}/>
         <ContentTabs
                 {schema}

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

@@ -32,6 +32,7 @@
     export let data;
     export let validationErrors;
     export let isCreateMode;
+
     let formElement = formElements[field.info.name];
     const uniqueId = `field-${field.name}-id`;
 </script>

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

@@ -3,6 +3,7 @@
     import {getContext} from "svelte";
     import Form from "../Form.svelte";
     import OffCanvas from "../../../common/OffCanvas.svelte";
+    import Preview from "../../../newPreview/Preview.svelte";
 
     export let field;
     export let edge;
@@ -24,7 +25,6 @@
     }
 </script>
 
-
 <OffCanvas bind:this={offCanvas}>
     <Form
             bind:this={form}

src/Http/Controller/RecordController.php

@@ -5,7 +5,6 @@ namespace Lucent\Http\Controller;
 use Lucent\Http\Controller;
 use Illuminate\Http\Request;
 use Lucent\Account\AccountService;
-use Lucent\Account\AuthService;
 use Lucent\Channel\ChannelService;
 use Lucent\LucentException;
 use Lucent\Query\Operator;