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,17 +32,36 @@
 
     }
 </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">
-        <Preview {record} type="card"/>
+                Edge Data
-        {#if editable}
+                <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>
+
         <EdgeData bind:this={edgeData} {field} {edge}/>
     {/if}
+
+    <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"-->
@@ -64,14 +83,7 @@
 
         {#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}
-                >
-                    <Icon icon="pencil"/>
-                </button>
-            {/if}
                 <button
                         class="trash-button  text-dark btn btn-sm btn-link"
                         on:click={remove}
@@ -82,6 +94,7 @@
             </div>
         {/if}
     </div>
+</div>
 
 <style>
 

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

@@ -9,8 +9,11 @@
     import EditHeader from "../EditHeader.svelte";
 
     const dispatch = createEventDispatcher();
+
     function save() {
-        dispatch("save");
+        dispatch("save", {
+            status: status
+        });
 
     }
 
@@ -89,7 +92,7 @@
     <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;